|
|
|
<template>
|
|
|
|
<div id="appcalendar" >
|
|
|
|
<div class="calendar-parent overflow-auto">
|
|
|
|
|
|
|
|
<h1>Welcome to Swarmlab!</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>
|
|
|
|
An open source work/study-from-home application.
|
|
|
|
</h3>
|
|
|
|
<br>
|
|
|
|
<h5>
|
|
|
|
Swarmlab provides you with all the required tools, tools to teach work or try out demos in a completely virtual environment.
|
|
|
|
</h5>
|
|
|
|
<br>
|
|
|
|
<div>
|
|
|
|
<p><b>Swarmlab is a collection of services that aims to:</b>
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
<li> provide <b>teachers and professors</b> with online remote tools to do their lessons</li>
|
|
|
|
|
|
|
|
<li> give <b>students</b> the opportunity to study real life examples in their chosen area of expertise </li>
|
|
|
|
|
|
|
|
<li> allow <b>developers</b> to fully test and debug their applications and provide POC’s</li>
|
|
|
|
</ul>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<p>Swarmlab, up and running since 2020, is already used for teaching teaching purposes in a university and has proven itself as a powerful tool in the post covid remote-based situation.</p>
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<h3>As of now the services provided by swarmlab are:</h3>
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
<li> <b>Labrooms</b>(virtual classrooms in the form of model applications to be tweaked at will)</li>
|
|
|
|
<ul>
|
|
|
|
<li> linux → base linux system – designed for use as a base to further develop your app</li>
|
|
|
|
|
|
|
|
<li> MPI → Instances of Ubuntu Linux with MPICH — portable implementation of Message Passing Interface (MPI) standard. Designed for MPI program development and deployment.</li>
|
|
|
|
|
|
|
|
<li> Node.js</li>
|
|
|
|
|
|
|
|
<li> sec → a basic linux-based os with security tools – designed as a template for apps</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
<ul>
|
|
|
|
<li> <b>Storage</b> to automatically create a cluster of databases.</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
<li> <b>Proof Of Concept</b> (POC) options </li>
|
|
|
|
<ul>
|
|
|
|
<li> datacollector → using provided services a fully developed application may collect data from a swarm and use it for further analysis</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
<li> <b>Microservices</b> </li>
|
|
|
|
<ul>
|
|
|
|
<li> Jupyter </li>
|
|
|
|
|
|
|
|
<li> numpy</li>
|
|
|
|
|
|
|
|
<li> scipy</li>
|
|
|
|
|
|
|
|
<li> nodejs</li>
|
|
|
|
|
|
|
|
<li> nginx</li>
|
|
|
|
|
|
|
|
<li> haproxy</li>
|
|
|
|
|
|
|
|
<li> gns3</li>
|
|
|
|
|
|
|
|
<li> wireshark</li>
|
|
|
|
|
|
|
|
<li> snmpsim</li>
|
|
|
|
|
|
|
|
<li> xelatexthesis</li>
|
|
|
|
|
|
|
|
<li> ansible</li>
|
|
|
|
|
|
|
|
<li> etherpad</li>
|
|
|
|
|
|
|
|
<li> codeserver (vscode)</li>
|
|
|
|
|
|
|
|
<li> redisserver</li>
|
|
|
|
|
|
|
|
<li> mongoserver</li>
|
|
|
|
|
|
|
|
<li> mongoclient (GUI)</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
<h5> <i>to be continued… </i></h5>
|
|
|
|
|
|
|
|
<h5>
|
|
|
|
And all the above using just the command line and a Browser of your system!
|
|
|
|
</h5>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
<calendar-view
|
|
|
|
:items="items"
|
|
|
|
:show-date="showDate"
|
|
|
|
:time-format-options="{ hour: 'numeric', minute: '2-digit' }"
|
|
|
|
:enable-drag-drop="false"
|
|
|
|
:disable-past="disablePast"
|
|
|
|
:disable-future="disableFuture"
|
|
|
|
:show-times="showTimes"
|
|
|
|
:display-period-uom="displayPeriodUom"
|
|
|
|
:display-period-count="displayPeriodCount"
|
|
|
|
:starting-day-of-week="startingDayOfWeek"
|
|
|
|
:class="themeClasses"
|
|
|
|
:period-changed-callback="periodChanged"
|
|
|
|
:current-period-label="useTodayIcons ? 'icons' : ''"
|
|
|
|
:displayWeekNumbers="displayWeekNumbers"
|
|
|
|
:enable-date-selection="true"
|
|
|
|
:selection-start="selectionStart"
|
|
|
|
:selection-end="selectionEnd"
|
|
|
|
:timeFormatOptions="timeFormatOptions"
|
|
|
|
@date-selection-start="setSelection"
|
|
|
|
@date-selection="setSelection"
|
|
|
|
@date-selection-finish="finishSelection"
|
|
|
|
@drop-on-date="onDrop"
|
|
|
|
@click-date="onClickDay"
|
|
|
|
@click-item="onClickItem"
|
|
|
|
>
|
|
|
|
<calendar-view-header
|
|
|
|
slot="header"
|
|
|
|
slot-scope="{ headerProps }"
|
|
|
|
:header-props="headerProps"
|
|
|
|
@input="setShowDate"
|
|
|
|
/>
|
|
|
|
</calendar-view>
|
|
|
|
-->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import store from '@/store/index'
|
|
|
|
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
|
|
|
|
import Vue from 'vue'
|
|
|
|
import card from '@/components/Card.vue'
|
|
|
|
import {ApiConfig} from "@/config/index";
|
|
|
|
// Load CSS from the local repo
|
|
|
|
require("vue-simple-calendar/static/css/default.css")
|
|
|
|
require("vue-simple-calendar/static/css/holidays-us.css")
|
|
|
|
|
|
|
|
import {
|
|
|
|
CalendarView,
|
|
|
|
CalendarViewHeader,
|
|
|
|
CalendarMathMixin,
|
|
|
|
} from "vue-simple-calendar/src/components/bundle.js" // local repo
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
card,
|
|
|
|
CalendarView,
|
|
|
|
CalendarViewHeader,
|
|
|
|
},
|
|
|
|
mixins: [CalendarMathMixin],
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
showDate: this.thisMonth(1),
|
|
|
|
message: "",
|
|
|
|
startingDayOfWeek: 1,
|
|
|
|
disablePast: false,
|
|
|
|
disableFuture: false,
|
|
|
|
displayPeriodUom: "month",
|
|
|
|
displayPeriodCount: 1,
|
|
|
|
displayWeekNumbers: true,
|
|
|
|
showTimes: false,
|
|
|
|
selectionStart: null,
|
|
|
|
selectionEnd: null,
|
|
|
|
newItemTitle: "",
|
|
|
|
newItemStartDate: "",
|
|
|
|
newItemEndDate: "",
|
|
|
|
useDefaultTheme: true,
|
|
|
|
useHolidayTheme: false,
|
|
|
|
useTodayIcons: true,
|
|
|
|
timeFormatOptions:{
|
|
|
|
hour: 'numeric', minute: 'numeric',
|
|
|
|
hour12: false,
|
|
|
|
timeZone: 'Europe/Athens'
|
|
|
|
},
|
|
|
|
begindate:'',
|
|
|
|
enddate:'',
|
|
|
|
items: [],
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
getevents4month() {
|
|
|
|
},
|
|
|
|
userLocale() {
|
|
|
|
return this.getDefaultBrowserLocale
|
|
|
|
},
|
|
|
|
dayNames() {
|
|
|
|
return this.getFormattedWeekdayNames(this.userLocale, "long", 0)
|
|
|
|
},
|
|
|
|
themeClasses() {
|
|
|
|
return {
|
|
|
|
"theme-default": this.useDefaultTheme,
|
|
|
|
"holiday-us-traditional": this.useHolidayTheme,
|
|
|
|
"holiday-us-official": this.useHolidayTheme,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.newItemStartDate = this.isoYearMonthDay(this.today())
|
|
|
|
this.newItemEndDate = this.isoYearMonthDay(this.today())
|
|
|
|
const t = new Date()
|
|
|
|
let bd_y = t.getFullYear()
|
|
|
|
let bd_m = (t.getMonth() + 1).toString().padStart(2, "0");
|
|
|
|
let bd_d = '01';
|
|
|
|
this.begindate = `${bd_y}-${bd_m}-${bd_d}`
|
|
|
|
this.enddate = `${bd_y}-${bd_m}-31`
|
|
|
|
this.getevents()
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
async getevents() {
|
|
|
|
var value1 = {}
|
|
|
|
value1.begin = this.begindate
|
|
|
|
value1.end = this.enddate
|
|
|
|
var llo = await store.dispatch('pipelineLLO/getevents', value1)
|
|
|
|
this.items = llo.data.result;
|
|
|
|
//console.log('events'+JSON.stringify(llo))
|
|
|
|
},
|
|
|
|
periodChanged(v) {
|
|
|
|
// range, eventSource) {
|
|
|
|
// Demo does nothing with this information, just including the method to demonstrate how
|
|
|
|
// you can listen for changes to the displayed range and react to them (by loading items, etc.)
|
|
|
|
//console.log(v)
|
|
|
|
|
|
|
|
let t = v.periodStart
|
|
|
|
let bd_y = t.getFullYear()
|
|
|
|
let bd_m = (t.getMonth() + 1).toString().padStart(2, "0");
|
|
|
|
let bd_d = t.getDate().toString().padStart(2, "0");
|
|
|
|
this.begindate = `${bd_y}-${bd_m}-${bd_d}`
|
|
|
|
|
|
|
|
let e = v.periodEnd
|
|
|
|
let ed_y = e.getFullYear()
|
|
|
|
let ed_m = (e.getMonth() + 1).toString().padStart(2, "0");
|
|
|
|
let ed_d = e.getDate().toString().padStart(2, "0");
|
|
|
|
this.enddate = `${ed_y}-${ed_m}-${ed_d}`
|
|
|
|
|
|
|
|
this.getevents()
|
|
|
|
//console.log(this.begindate)
|
|
|
|
//console.log(this.enddate)
|
|
|
|
},
|
|
|
|
thisMonth(d, h, m) {
|
|
|
|
const t = new Date()
|
|
|
|
return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0)
|
|
|
|
},
|
|
|
|
onClickDay(d) {
|
|
|
|
this.selectionStart = null
|
|
|
|
this.selectionEnd = null
|
|
|
|
this.message = `You clicked: ${d.toLocaleDateString()}`
|
|
|
|
},
|
|
|
|
onClickItem(e) {
|
|
|
|
this.message = `You clicked: ${e.title}`
|
|
|
|
//console.log(e)
|
|
|
|
this.$root.$emit('hybrid_labobject_view',e)
|
|
|
|
},
|
|
|
|
setShowDate(d) {
|
|
|
|
this.message = `Changing calendar view to ${d.toLocaleDateString()}`
|
|
|
|
this.showDate = d
|
|
|
|
},
|
|
|
|
setSelection(dateRange) {
|
|
|
|
this.selectionEnd = dateRange[1]
|
|
|
|
this.selectionStart = dateRange[0]
|
|
|
|
},
|
|
|
|
finishSelection(dateRange) {
|
|
|
|
this.setSelection(dateRange)
|
|
|
|
this.message = `You selected: ${this.selectionStart.toLocaleDateString()} -${this.selectionEnd.toLocaleDateString()}`
|
|
|
|
},
|
|
|
|
onDrop(item, date) {
|
|
|
|
this.message = `You dropped ${item.id} on ${date.toLocaleDateString()}`
|
|
|
|
// Determine the delta between the old start date and the date chosen,
|
|
|
|
// and apply that delta to both the start and end date to move the item.
|
|
|
|
const eLength = this.dayDiff(item.startDate, date)
|
|
|
|
item.originalItem.startDate = this.addDays(item.startDate, eLength)
|
|
|
|
item.originalItem.endDate = this.addDays(item.endDate, eLength)
|
|
|
|
},
|
|
|
|
clickTestAddItem() {
|
|
|
|
this.items.push({
|
|
|
|
startDate: this.newItemStartDate,
|
|
|
|
endDate: this.newItemEndDate,
|
|
|
|
title: this.newItemTitle,
|
|
|
|
id: "e" + Math.random().toString(36).substr(2, 10),
|
|
|
|
})
|
|
|
|
this.message = "You added a calendar item!"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
html,
|
|
|
|
body {
|
|
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
|
|
background-color: #f7fcff;
|
|
|
|
}
|
|
|
|
|
|
|
|
#appcalendar {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
font-family: Calibri, sans-serif;
|
|
|
|
//width: 95vw;
|
|
|
|
width: 100%;
|
|
|
|
min-width: 30rem;
|
|
|
|
max-width: 100rem;
|
|
|
|
min-height: 40rem;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.calendar-controls {
|
|
|
|
margin-right: 1rem;
|
|
|
|
min-width: 14rem;
|
|
|
|
max-width: 14rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar-parent {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
flex-grow: 1;
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: hidden;
|
|
|
|
max-height: 80vh;
|
|
|
|
background-color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* For long calendars, ensure each week gets sufficient height. The body of the calendar will scroll if needed */
|
|
|
|
.cv-wrapper.period-month.periodCount-2 .cv-week,
|
|
|
|
.cv-wrapper.period-month.periodCount-3 .cv-week,
|
|
|
|
.cv-wrapper.period-year .cv-week {
|
|
|
|
min-height: 6rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* These styles are optional, to illustrate the flexbility of styling the calendar purely with CSS. */
|
|
|
|
|
|
|
|
/* Add some styling for items tagged with the "birthday" class */
|
|
|
|
.theme-default .cv-item.birthday {
|
|
|
|
background-color: #e0f0e0;
|
|
|
|
border-color: #d7e7d7;
|
|
|
|
}
|
|
|
|
|
|
|
|
.theme-default .cv-item.birthday::before {
|
|
|
|
content: "\1F382"; /* Birthday cake */
|
|
|
|
margin-right: 0.5em;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|