task-stepper #1
238
app.js
238
app.js
@ -24,19 +24,7 @@ if (!FileReader.prototype.readAsBinaryString) {
|
||||
}
|
||||
}
|
||||
|
||||
var options = {
|
||||
timepicker: {
|
||||
twelveHour: false,
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
M.AutoInit();
|
||||
var elems = document.querySelectorAll('.timepicker');
|
||||
var timepickers = M.Timepicker.init(elems, options.timepicker);
|
||||
});
|
||||
//localStorage persistence
|
||||
|
||||
var SHIFT_STORAGE_KEY = "dienstplan_chrosey";
|
||||
var RULE_STORAGE_KEY = "regeln_chrosey";
|
||||
var shiftStorage = {
|
||||
@ -65,13 +53,13 @@ var ruleStorage = {
|
||||
fetch: function () {
|
||||
'use strict';
|
||||
var parsed = JSON.parse(localStorage.getItem(RULE_STORAGE_KEY)) | [];
|
||||
var rules = parsed.length > 0
|
||||
? parsed.map((e,i) => {
|
||||
var r = Rule.thaw(e);
|
||||
r.id = i;
|
||||
return r;
|
||||
})
|
||||
: Rule.defaults();
|
||||
var rules = parsed.length > 0 ?
|
||||
parsed.map((e, i) => {
|
||||
var r = Rule.thaw(e);
|
||||
r.id = i;
|
||||
return r;
|
||||
}) :
|
||||
Rule.defaults();
|
||||
ruleStorage.uid = rules.length;
|
||||
return rules;
|
||||
},
|
||||
@ -82,7 +70,7 @@ var ruleStorage = {
|
||||
}
|
||||
};
|
||||
|
||||
Vue.component('ask-format-modal',{
|
||||
Vue.component('ask-format-modal', {
|
||||
template: `
|
||||
<div id="ask-format-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
@ -131,10 +119,10 @@ Vue.component('chip-input', {
|
||||
}
|
||||
},
|
||||
|
||||
watch:{
|
||||
initData:{
|
||||
watch: {
|
||||
initData: {
|
||||
deep: true,
|
||||
handler(n,o) {
|
||||
handler(n, o) {
|
||||
if (n !== o) {
|
||||
this.initialize();
|
||||
this.$emit('init');
|
||||
@ -150,14 +138,14 @@ Vue.component('chip-input', {
|
||||
methods: {
|
||||
initialize() {
|
||||
this.chips = this.initData.map(e => e);
|
||||
var el = $('#'+this.name)[0];
|
||||
var el = $('#' + this.name)[0];
|
||||
this.instance = M.Chips.init(el, {
|
||||
data: this.chips,
|
||||
onChipAdd: () => {
|
||||
this.$emit("change",this.chipsData);
|
||||
this.$emit("change", this.chipsData);
|
||||
},
|
||||
onChipDelete: () => {
|
||||
this.$emit("change",this.chipsData);
|
||||
this.$emit("change", this.chipsData);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -177,6 +165,7 @@ var app = new Vue({
|
||||
blob: null,
|
||||
dp_sheet: '',
|
||||
deletedShift: '',
|
||||
format: '',
|
||||
remaining: shiftStorage.count(),
|
||||
selectedShift: new Shift({}),
|
||||
selectedShiftIndex: -1,
|
||||
@ -184,7 +173,10 @@ var app = new Vue({
|
||||
selectedRuleIndex: -1,
|
||||
saveto: 'dienstplan.ics',
|
||||
uploadFileName: "",
|
||||
availableFormats: ["Erfurt","Stuttgart","X"],
|
||||
availableFormats: ["Erfurt", "Stuttgart", "X"],
|
||||
stepper: null,
|
||||
timepickers: null,
|
||||
|
||||
config: {
|
||||
moment: {
|
||||
parse_formats: [
|
||||
@ -194,8 +186,14 @@ var app = new Vue({
|
||||
parse_language: 'en',
|
||||
display_language: 'de'
|
||||
},
|
||||
stepper: {
|
||||
firstActive: 0,
|
||||
},
|
||||
toast: {
|
||||
displayLength: 3000
|
||||
},
|
||||
timepicker: {
|
||||
twelveHour: false,
|
||||
}
|
||||
},
|
||||
workbook: null,
|
||||
@ -219,19 +217,19 @@ var app = new Vue({
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
computed: {
|
||||
groupedTermine() {
|
||||
return _.groupBy(this.shifts, e => e.Datum);
|
||||
return _.chain(this.shifts).sortBy(e => e.Datum).groupBy(e => e.Datum).value();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateArten(value){
|
||||
updateArten(value) {
|
||||
this.selectedRule.Arten = value;
|
||||
},
|
||||
|
||||
updateTitel(value){
|
||||
updateTitel(value) {
|
||||
this.selectedRule.Titel = value;
|
||||
},
|
||||
|
||||
@ -241,6 +239,19 @@ var app = new Vue({
|
||||
M.toast(toastOptions);
|
||||
},
|
||||
|
||||
openModal(elementID) {
|
||||
var element = document.getElementById(elementID);
|
||||
var modal = M.Modal.getInstance(element);
|
||||
modal.open();
|
||||
},
|
||||
|
||||
closeModal(elementID) {
|
||||
var element = document.getElementById(elementID);
|
||||
var modal = M.Modal.getInstance(element);
|
||||
modal.close();
|
||||
},
|
||||
|
||||
|
||||
onFileChange: function (event) {
|
||||
var files = event.target.files || event.dataTransfer.files;
|
||||
this.handleInputFile(files[0]);
|
||||
@ -258,8 +269,8 @@ var app = new Vue({
|
||||
cellDates: true,
|
||||
});
|
||||
var isErfurterDienstplan = workbook.SheetNames.indexOf("Dienstplan") > -1;
|
||||
|
||||
if(isErfurterDienstplan){
|
||||
|
||||
if (isErfurterDienstplan) {
|
||||
vm.parseForErfurt(workbook.Sheets["Dienstplan"]);
|
||||
} else {
|
||||
this.workbook = workbook;
|
||||
@ -268,19 +279,20 @@ var app = new Vue({
|
||||
};
|
||||
reader.readAsBinaryString(file);
|
||||
},
|
||||
|
||||
askForDienstplanFormat: function() {
|
||||
|
||||
askForDienstplanFormat: function () {
|
||||
this.makeToast("Dienstplanformat nicht erkannt.");
|
||||
$('#ask-format-modal').modal("open");
|
||||
this.openModal('ask-format-modal');
|
||||
},
|
||||
|
||||
parseForErfurt: function (dp) {
|
||||
var arr = XLSX.utils.sheet_to_row_object_array(dp, {
|
||||
range: 1
|
||||
});
|
||||
range: 1
|
||||
});
|
||||
this.format = "Erfurt";
|
||||
var vm = this;
|
||||
var day;
|
||||
|
||||
|
||||
this.makeToast("Erfurter Dienstplan erkannt.");
|
||||
|
||||
arr.forEach(element => {
|
||||
@ -289,23 +301,67 @@ var app = new Vue({
|
||||
day = moment(element.Datum);
|
||||
}
|
||||
if (element.hasOwnProperty('Dienst')) {
|
||||
var time = element.Zeit ? moment(element.Zeit) : day;
|
||||
var termin = {
|
||||
datum: day.clone().hour(time.hour()).minute(time.minute()),
|
||||
art: element.Dienst ? element.Dienst.trim() : "",
|
||||
beschreibung: element.Bemerkung ? element.Bemerkung.trim(): "",
|
||||
name: element.__EMPTY ? element.__EMPTY.trim() : ""
|
||||
|
||||
let times = [];
|
||||
let art, beschreibung, name = "";
|
||||
if (element.Zeit.toString().indexOf(' + ') > 0) {
|
||||
// in der Zeitspalte stehen mehrere Uhrzeiten.
|
||||
let tempTimes = element.Zeit.toString().split(' + ');
|
||||
tempTimes.forEach(function(time) {
|
||||
times.push(moment(time, 'HH:mm'));
|
||||
})
|
||||
} else {
|
||||
// übrliches Format
|
||||
times.push(element.Zeit ? moment(element.Zeit) : day);
|
||||
}
|
||||
vm.addShift(new Shift(termin));
|
||||
if (element.hasOwnProperty('Bemerkung')) {
|
||||
if (element.Bemerkung.toString().indexOf(/\d\d:\d\d\s/)) {
|
||||
// prüfe ob eine Uhrzeit drinnen steht
|
||||
let sonderzeit = moment(element.Bemerkung, 'HH:mm');
|
||||
let termin = {
|
||||
datum: day.clone().hour(sonderzeit.hour()).minute(sonderzeit.minute()),
|
||||
art: '',
|
||||
beschreibung: '',
|
||||
name: element.Bemerkung.toString().replace(/\d\d:\d\d\s/, '').trim()
|
||||
}
|
||||
if (!termin.datum.isDST()) {
|
||||
termin.datum.add(1, 'hours')
|
||||
}
|
||||
vm.addShift(new Shift(termin));
|
||||
beschreibung = '';
|
||||
} else {
|
||||
beschreibung = element.Bemerkung;
|
||||
}
|
||||
}
|
||||
if (element.hasOwnProperty('Dienst')) {
|
||||
art = element.Dienst.trim();
|
||||
}
|
||||
if (element.hasOwnProperty('__EMPTY')) {
|
||||
name = element.__EMPTY.trim();
|
||||
}
|
||||
|
||||
times.forEach(time => {
|
||||
var termin = {
|
||||
datum: day.clone().hour(time.hour()).minute(time.minute()),
|
||||
art: art,
|
||||
beschreibung: beschreibung,
|
||||
name: name
|
||||
}
|
||||
if (!termin.datum.isDST()) {
|
||||
termin.datum.add(1, 'hours')
|
||||
}
|
||||
vm.addShift(new Shift(termin));
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
parseForStuttgart: function (dp) {
|
||||
var arr = XLSX.utils.sheet_to_json(dp, {
|
||||
header: "A",
|
||||
blankrows: false,
|
||||
});
|
||||
header: "A",
|
||||
blankrows: false,
|
||||
});
|
||||
var vm = this;
|
||||
var day;
|
||||
|
||||
@ -320,21 +376,21 @@ var app = new Vue({
|
||||
var termin = {
|
||||
ort: element.H ? element.H.trim() : "",
|
||||
art: element.E ? element.E.trim() : "",
|
||||
beschreibung: element.H ? element.H.trim(): "",
|
||||
beschreibung: element.H ? element.H.trim() : "",
|
||||
name: element.F ? element.F.trim() : ""
|
||||
}
|
||||
var time = day.clone();
|
||||
if (typeof(element.D) === "object") {
|
||||
if (typeof (element.D) === "object") {
|
||||
time = moment(element.D);
|
||||
termin.datum = day.clone().hour(time.hour()).minute(time.minute());
|
||||
} else if(element.D.indexOf("-") > -1 ) {
|
||||
} else if (element.D.indexOf("-") > -1) {
|
||||
var tArray = element.D.split(" - ");
|
||||
time = moment(tArray[0],"HH:mm");
|
||||
time = moment(tArray[0], "HH:mm");
|
||||
termin.datum = day.clone().hour(time.hour()).minute(time.minute());
|
||||
termin.ende = moment(tArray[1], "HH:mm").format("HH:mm");
|
||||
}
|
||||
vm.addShift(new Shift(termin));
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -342,11 +398,11 @@ var app = new Vue({
|
||||
parseForX: function (dp, sheetName) {
|
||||
moment.locale(this.config.moment.parse_language);
|
||||
var arr = XLSX.utils.sheet_to_json(dp, {
|
||||
header: "A",
|
||||
blankrows: false,
|
||||
});
|
||||
header: "A",
|
||||
blankrows: false,
|
||||
});
|
||||
var vm = this;
|
||||
var month = moment(sheetName.substr(sheetName.indexOf(" ")+1), "MMMM YYYY", "de");
|
||||
var month = moment(sheetName.substr(sheetName.indexOf(" ") + 1), "MMMM YYYY", "de");
|
||||
var day;
|
||||
|
||||
arr.forEach(element => {
|
||||
@ -354,46 +410,40 @@ var app = new Vue({
|
||||
var time = moment().hour(0).minute(0);
|
||||
try {
|
||||
if (element.hasOwnProperty('A')) {
|
||||
day = moment(element.A, "D.","de");
|
||||
day = moment(element.A, "D.", "de");
|
||||
day = Number(element.A);
|
||||
}
|
||||
if ((!element.F && !element.H && !element.J) || element.I == "Spielort/ Extras" || element.J == "Spielort/Extras"){
|
||||
|
||||
if ((!element.F && !element.H && !element.J) || element.I == "Spielort/ Extras" || element.J == "Spielort/Extras") {
|
||||
|
||||
} else {
|
||||
|
||||
|
||||
|
||||
if (element.hasOwnProperty("D") && element.hasOwnProperty("E")) {
|
||||
// Probe
|
||||
time = moment(element.D);
|
||||
art = element.E.trim();
|
||||
name = element.F ? element.F.trim() : "";
|
||||
beschreibung = typeof(element.I) != 'undefined' ? element.I.trim()
|
||||
: typeof(element.J) != 'undefined' ? element.J.trim()
|
||||
: "";
|
||||
}
|
||||
else if (element.hasOwnProperty("G") && element.hasOwnProperty("H"))
|
||||
{
|
||||
beschreibung = typeof (element.I) != 'undefined' ? element.I.trim() :
|
||||
typeof (element.J) != 'undefined' ? element.J.trim() :
|
||||
"";
|
||||
} else if (element.hasOwnProperty("G") && element.hasOwnProperty("H")) {
|
||||
// Vorstellung
|
||||
time = moment(element.G);
|
||||
art = "VS";
|
||||
name = element.H.trim();
|
||||
beschreibung = typeof(element.I) != 'undefined' ? element.I.trim()
|
||||
: typeof(element.J) != 'undefined' ? element.J.trim()
|
||||
: "";
|
||||
}
|
||||
else if (element.hasOwnProperty("I"))
|
||||
{
|
||||
beschreibung = typeof (element.I) != 'undefined' ? element.I.trim() :
|
||||
typeof (element.J) != 'undefined' ? element.J.trim() :
|
||||
"";
|
||||
} else if (element.hasOwnProperty("I")) {
|
||||
// Spielort/Extras
|
||||
beschreibung = element.I.trim();
|
||||
name = name ? name : "Spielort/Extras";
|
||||
}
|
||||
else if (element.hasOwnProperty("J"))
|
||||
{
|
||||
} else if (element.hasOwnProperty("J")) {
|
||||
// Spielort/Extras Fallback
|
||||
beschreibung = element.J.trim();
|
||||
name = name ? name : "Spielort/Extras";
|
||||
}
|
||||
|
||||
|
||||
var datumStr = day + '.' + month.clone().format("MM.YY") + time.format(" HH:mm");
|
||||
var termin = {
|
||||
ort: "",
|
||||
@ -407,7 +457,7 @@ var app = new Vue({
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Parsen", element, error);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
@ -472,21 +522,22 @@ var app = new Vue({
|
||||
|
||||
selectShift: function (shift) {
|
||||
this.selectedShift = Shift.thaw(shift);
|
||||
|
||||
this.keepShift = shift;
|
||||
M.updateTextFields();
|
||||
$('#shiftModal').modal('open');
|
||||
this.openModal('shiftModal');
|
||||
},
|
||||
|
||||
saveChanges: function (changedShift) {
|
||||
this.shifts.splice(this.shifts.indexOf(this.keepShift), 1, changedShift);
|
||||
|
||||
$('#shiftModal').modal('close');
|
||||
this.closeModal('shiftModal');
|
||||
this.keepShift = '';
|
||||
this.selectedShift = '';
|
||||
},
|
||||
|
||||
discardChanges: function (changedShift) {
|
||||
$('#shiftModal').modal('close');
|
||||
this.closeModal('shiftModal');
|
||||
this.keepShift = '';
|
||||
this.selectedShift = '';
|
||||
},
|
||||
@ -494,20 +545,28 @@ var app = new Vue({
|
||||
editRule: function (rule) {
|
||||
this.selectedRule = Rule.thaw(rule);
|
||||
this.selectedRuleIndex = this.rules.indexOf(rule);
|
||||
$('#ruleModal').modal('open');
|
||||
this.openModal('ruleModal');
|
||||
},
|
||||
|
||||
saveRule: function () {
|
||||
this.rules[this.selectedRuleIndex] = this.selectedRule;
|
||||
|
||||
$('#ruleModal').modal('close');
|
||||
this.closeModal('ruleModal');
|
||||
this.selectedRule = new Rule();
|
||||
},
|
||||
|
||||
discardRule: function () {
|
||||
$('#ruleModal').modal('close');
|
||||
|
||||
this.closeModal('ruleModal');
|
||||
|
||||
this.selectedRule = new Rule();
|
||||
},
|
||||
|
||||
applyRules: function () {
|
||||
var shifts = this.shifts;
|
||||
shifts.forEach(function (shift) {
|
||||
Shift.setDurationFromRules(shift, this.rules);
|
||||
});
|
||||
this.shifts = shifts;
|
||||
}
|
||||
|
||||
},
|
||||
@ -517,5 +576,12 @@ var app = new Vue({
|
||||
el.focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
M.AutoInit();
|
||||
var els = document.querySelectorAll('.timepicker');
|
||||
this.timepickers = M.Timepicker.init(els, this.config.timepicker);
|
||||
var el = document.querySelector(".stepper");
|
||||
this.stepper = new MStepper(el, this.config.stepper);
|
||||
}
|
||||
})
|
||||
|
||||
279
index.html
279
index.html
@ -20,8 +20,8 @@
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<nav class="nav-extended indigo">
|
||||
<div class="nav-wrapper container ">
|
||||
<nav class="nav blue">
|
||||
<div class="container">
|
||||
<span class="brand-logo">
|
||||
<img src="/img/logo.svg" height="30">
|
||||
Dienstplan Converter
|
||||
@ -30,157 +30,141 @@
|
||||
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#e6b300">
|
||||
</span>
|
||||
<a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
|
||||
<ul id="nav-mobile" class="right hide-on-med-and-down">
|
||||
<li class="tab"><a class="active" href="#termine">Termine</a></li>
|
||||
<li class="tab"><a href="#Einstellungen">Regeln</a></li>
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
<ul class="tabs tabs-transparent">
|
||||
<li class="tab"><a class="active" href="#termine">Termine</a></li>
|
||||
<li class="tab"><a href="#Einstellungen">Regeln</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<ul class="sidenav" id="mobile-nav">
|
||||
|
||||
</ul>
|
||||
<div id="body">
|
||||
<main class="container">
|
||||
<div id="termine">
|
||||
|
||||
<div class="" v-if="shifts.length > 0">
|
||||
<h3 class="title">Termine</h3>
|
||||
<table class="highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum</th>
|
||||
<th>Dauer</th>
|
||||
<th>Info</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="g in groupedTermine">
|
||||
<tr v-for="(s,i) in g">
|
||||
<th v-if="i == 0" :rowspan="g.length">
|
||||
{{s.FormattedDatum}}
|
||||
</th>
|
||||
<td>{{ s.Beginn }} - {{ s.Ende }} Uhr</td>
|
||||
<td>
|
||||
<h6>{{ s.VEventTitle }}</h6>
|
||||
<p v-if="s.Ort!=''">
|
||||
<i class="material-icons red-text">location_on</i>
|
||||
{{ s.Ort }}
|
||||
</p>
|
||||
<blockquote v-if="s.Ort != s.Beschreibung">
|
||||
{{ s.Beschreibung }}
|
||||
</blockquote>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-flat" @click="removeShift(s)">löschen</button>
|
||||
<button class="btn-flat" @click="selectShift(s)">bearbeiten</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-action">
|
||||
<button class="btn-flat waves-effect" @click="createDownloadFile"
|
||||
:disabled=" (remaining > 0) ? null : 'disabled'">
|
||||
Kalenderdatei erstellen
|
||||
</button>
|
||||
<a class="btn-flat waves-effect" :href="icsFile" :class="[ icsFile ? '' : 'disabled']"
|
||||
download="dienstplan.ics" @click="downloadFile">
|
||||
Kalenderdatei herunterladen
|
||||
</a>
|
||||
<a class="btn-flat red-text waves-effect" @click="cleanStorage"
|
||||
:disabled=" (remaining > 0) ? null : 'disabled'">
|
||||
Termine löschen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" v-else>
|
||||
<div class="card-content center-align" style="height:100px;">
|
||||
<h3 class="card-title">
|
||||
Noch keine Termine da
|
||||
</h3>
|
||||
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<label class="btn-flat waves-effect waves-green" data-position="left"
|
||||
<ul class="stepper">
|
||||
<li class="step active">
|
||||
<div class="step-title waves-effect">Dienstplan-Datei auswählen</div>
|
||||
<div class="step-content">
|
||||
<label class="btn waves-effect waves-green" data-position="left"
|
||||
data-tooltip="Dienstplan einlesen" for="fileInput">
|
||||
Datei auswählen
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-action-btn">
|
||||
<a class="btn-floating btn-large orange darken-2 waves-effect">
|
||||
<i class="large material-icons">work</i>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<label class="btn-floating green tooltipped" data-position="left"
|
||||
data-tooltip="Dienstplan einlesen" for="fileInput">
|
||||
<i class="material-icons">publish</i>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<button class="btn-floating blue tooltipped" data-position="left"
|
||||
data-tooltip="Kalenderdatei erstellen" @click="createDownloadFile"
|
||||
:disabled=" (remaining > 0) ? null : 'disabled'">
|
||||
<i class="material-icons">description</i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn-floating yellow tooltipped" data-position="left"
|
||||
data-tooltip="Kalenderdatei herunterladen" :href="icsFile"
|
||||
v-bind:class="[ icsFile ? '' : 'disabled']" download="dienstplan.ics"
|
||||
@click="downloadFile">
|
||||
<i class="material-icons">get_app</i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn-floating red tooltipped" data-position="left" data-tooltip="Tabelle leeren"
|
||||
@click="cleanStorage" :disabled=" (remaining > 0) ? null : 'disabled'"><i
|
||||
class="material-icons">clear_all</i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="" id="Einstellungen">
|
||||
<div class="">
|
||||
<h3 class="title">Regeln für die Dauer</h3>
|
||||
<div>
|
||||
<span class="chip orange">Titel der Veranstaltung</span>
|
||||
<span class="chip indigo">Art des Dienstes</span>
|
||||
</div>
|
||||
<div class="collection">
|
||||
<a class="collection-item avatar" v-for="(r,i) in rules" :key="'rule-'+i"
|
||||
@click="editRule(r)">
|
||||
<i class="circle">#{{ i+1 }}</i>
|
||||
<span class="title">{{ r.Name}} </span>
|
||||
<div class="secondary-content">
|
||||
<span class="badge new" data-badge-caption="Minuten">{{ r.Dauer }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="chip indigo" :class="'lighten-'+(r.Arten.length > 1 ? '3' : '1')"
|
||||
v-for="a in r.Arten">
|
||||
{{a.tag}}
|
||||
</span>
|
||||
<div class="card-panel" v-if="format">Erkanntes Format: {{format}}</div>
|
||||
<div class="step-actions">
|
||||
<button class="waves-effect waves-dark btn next-step">Weiter</button>
|
||||
|
||||
<span class="chip orange" :class="'lighten-'+(r.Titel.length > 1 ? '3' : '1')"
|
||||
v-for="t in r.Titel">
|
||||
{{t.tag}}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
<a class="btn-flat red-text waves-effect" @click="cleanStorage"
|
||||
:disabled=" (remaining > 0) ? null : 'disabled'">
|
||||
{{ remaining }} Termine löschen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step-title waves-effect">Dateiformat erkennen</div>
|
||||
<div class="step-content">
|
||||
|
||||
<div v-if="format">Erkanntes Format: {{format}}</div>
|
||||
<div v-else>keine neue Datei eingelesen</div>
|
||||
<div class="step-actions">
|
||||
<button class="waves-effect waves-dark btn next-step">Weiter</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step-title waves-effect" data-step-label="Termin-Dauer-Bestimmung">
|
||||
Regeln prüfen
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div>
|
||||
<span class="chip orange">Titel der Veranstaltung</span>
|
||||
<span class="chip indigo">Art des Dienstes</span>
|
||||
</div>
|
||||
<div class="collection">
|
||||
<a class="collection-item avatar" v-for="(r,i) in rules" :key="'rule-'+i"
|
||||
@click="editRule(r)">
|
||||
<i class="circle">#{{ i+1 }}</i>
|
||||
<span class="title">{{ r.Name}} </span>
|
||||
<div class="secondary-content">
|
||||
<span class="badge new" data-badge-caption="Minuten">{{ r.Dauer }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="chip indigo" :class="'lighten-'+(r.Arten.length > 1 ? '3' : '1')"
|
||||
v-for="a in r.Arten">
|
||||
{{a.tag}}
|
||||
</span>
|
||||
|
||||
<span class="chip orange" :class="'lighten-'+(r.Titel.length > 1 ? '3' : '1')"
|
||||
v-for="t in r.Titel">
|
||||
{{t.tag}}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="step-actions">
|
||||
<button class="waves-effect waves-dark btn-flat" @click.prevent="applyRules">Regeln
|
||||
anwenden</button>
|
||||
<button class="waves-effect waves-dark btn next-step">Weiter</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step-title waves-effect">Termine prüfen</div>
|
||||
<div class="step-content">
|
||||
<table class="highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum</th>
|
||||
<th>Dauer</th>
|
||||
<th>Info</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="g in groupedTermine">
|
||||
<tr v-for="(s,i) in g">
|
||||
<th v-if="i == 0" :rowspan="g.length">
|
||||
{{s.FormattedDatum}}
|
||||
</th>
|
||||
<td>{{ s.Beginn }} - {{ s.Ende }} Uhr</td>
|
||||
<td>
|
||||
<h6>{{ s.VEventTitle }}</h6>
|
||||
{{ s.Dauer }}
|
||||
<p v-if="s.Ort!=''">
|
||||
<i class="material-icons red-text">location_on</i>
|
||||
{{ s.Ort }}
|
||||
</p>
|
||||
<blockquote v-if="s.Ort != s.Beschreibung">
|
||||
{{ s.Beschreibung }}
|
||||
</blockquote>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-flat"
|
||||
@click.prevent="removeShift(s)">löschen</button>
|
||||
<button class="btn-flat"
|
||||
@click.prevent="selectShift(s)">bearbeiten</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="step-actions">
|
||||
<button class="btn-flat waves-effect" @click.prevent="createDownloadFile"
|
||||
:disabled=" (remaining > 0) ? null : 'disabled'">
|
||||
Kalenderdatei erstellen
|
||||
</button>
|
||||
<button class="waves-effect waves-dark btn next-step">Weiter</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step-title waves-effect">Kalenderdatei speichern</div>
|
||||
<div class="step-content">
|
||||
<div class="step-actions">
|
||||
<a class="btn-flat waves-effect" :href="icsFile" :class="[ icsFile ? '' : 'disabled']"
|
||||
download="dienstplan.ics" @click.stop="downloadFile">
|
||||
Kalenderdatei speichern
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
<div id="confirmModal" class="modal active">
|
||||
<div class="modal-content">
|
||||
@ -233,17 +217,18 @@
|
||||
<label class="active" for="shift_kind">Art</label>
|
||||
</div>
|
||||
<div class="input-field col s6 ">
|
||||
<input id="shift_date" type="date" class="datepicker" v-model="selectedShift.Datum"
|
||||
<input id="shift_date" type="date" class="datepicker" v-model.lazy="selectedShift.Datum"
|
||||
placeholder="Datum">
|
||||
<label class="active" for="shift_date">Datum</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<input id="shift_begin" type="time" v-model="selectedShift.Beginn" placeholder="Uhrzeit"
|
||||
class="timepicker no-autoinit" :data-default="selectedShift.Beginn">
|
||||
<input id="shift_begin" type="time" v-model.lazy="selectedShift.Beginn"
|
||||
placeholder="Uhrzeit" class="timepicker no-autoinit"
|
||||
:data-default="selectedShift.Beginn">
|
||||
<label class="active" for="shift_begin">Anfang</label>
|
||||
</div>
|
||||
<div class="input-field col s6 ">
|
||||
<input id="shift_end" type="time" v-model="selectedShift.Ende" placeholder="Ende"
|
||||
<input id="shift_end" type="time" v-model.lazy="selectedShift.Ende" placeholder="Ende"
|
||||
class="timepicker no-autoinit">
|
||||
<label class="active" for="shift_end">Ende</label>
|
||||
</div>
|
||||
|
||||
117
js/shift.js
117
js/shift.js
@ -7,10 +7,17 @@ var TIMEZONE_NAME = "Europe/Berlin";
|
||||
//requires moment.js
|
||||
|
||||
Array.prototype.asChipData = function () {
|
||||
return this.map((e,i) => {return {tag:e,id:i}; })
|
||||
return this.map((e, i) => {
|
||||
return {
|
||||
tag: e,
|
||||
id: i
|
||||
};
|
||||
})
|
||||
}
|
||||
Array.prototype.fromChipData = function () {
|
||||
return this.map(e => {return e.tag; })
|
||||
return this.map(e => {
|
||||
return e.tag;
|
||||
})
|
||||
}
|
||||
|
||||
function Rule() {
|
||||
@ -19,10 +26,10 @@ function Rule() {
|
||||
if (arguments[0]) options = arguments[0];
|
||||
|
||||
var default_args = {
|
||||
'arten' : [],
|
||||
'dauer' : 60,
|
||||
'arten': [],
|
||||
'dauer': 60,
|
||||
'titel': [],
|
||||
'name' : "Standard"
|
||||
'name': "Standard"
|
||||
}
|
||||
for (var index in default_args) {
|
||||
if (typeof options[index] == "undefined") options[index] = default_args[index];
|
||||
@ -83,7 +90,7 @@ Rule.prototype.fits = function (art, title) {
|
||||
|
||||
return artMatch && nameMatch;
|
||||
}
|
||||
Rule.thaw = function(json) {
|
||||
Rule.thaw = function (json) {
|
||||
return new Rule({
|
||||
dauer: json._duration,
|
||||
name: json._name,
|
||||
@ -93,16 +100,48 @@ Rule.thaw = function(json) {
|
||||
}
|
||||
Rule.defaults = function () {
|
||||
var rules = [];
|
||||
var input = [
|
||||
{name: "EF #01", dauer: 60, arten: ['VS'], titel: ['Kinderkonzert']},
|
||||
{name: "EF #02", dauer: 120, arten: ['VS'], titel: ["Expeditionskonzert", "Sinfoniekonzert"]},
|
||||
{name: "EF #03", dauer: 150, arten: ['Oa', 'GP'], titel: ['Expeditionskonzert']},
|
||||
{name: "EF #04", dauer: 60, arten: ['Oa', 'GP'], titel: ['Expeditionskonzert']},
|
||||
{name: "EF #05", dauer: 150, arten: ['Oa', 'OSP']},
|
||||
{name: "EF #06", dauer: 180, arten: ["VS", "BO", "OHP", "HP", "GP", "Prem", "WA"]},
|
||||
{name: "Standard", dauer: 60}
|
||||
var input = [{
|
||||
name: "EF #01",
|
||||
dauer: 60,
|
||||
arten: ['VS'],
|
||||
titel: ['Kinderkonzert']
|
||||
},
|
||||
{
|
||||
name: "EF #02",
|
||||
dauer: 120,
|
||||
arten: ['VS'],
|
||||
titel: ["Expeditionskonzert", "Sinfoniekonzert"]
|
||||
},
|
||||
{
|
||||
name: "EF #03",
|
||||
dauer: 150,
|
||||
arten: ['Oa', 'GP'],
|
||||
titel: ['Expeditionskonzert']
|
||||
},
|
||||
{
|
||||
name: "EF #04",
|
||||
dauer: 60,
|
||||
arten: ['Oa', 'GP'],
|
||||
titel: ['Expeditionskonzert']
|
||||
},
|
||||
{
|
||||
name: "EF #05",
|
||||
dauer: 150,
|
||||
arten: ['Oa', 'OSP']
|
||||
},
|
||||
{
|
||||
name: "EF #06",
|
||||
dauer: 180,
|
||||
arten: ["VS", "BO", "OHP", "HP", "GP", "Prem", "WA"]
|
||||
},
|
||||
{
|
||||
name: "Standard",
|
||||
dauer: 60
|
||||
}
|
||||
];
|
||||
input.forEach(e => { rules.push(new Rule(e)); });
|
||||
input.forEach(e => {
|
||||
rules.push(new Rule(e));
|
||||
});
|
||||
|
||||
return rules;
|
||||
}
|
||||
@ -114,11 +153,11 @@ function Shift() {
|
||||
if (arguments[0]) options = arguments[0];
|
||||
|
||||
var default_args = {
|
||||
'art' : "",
|
||||
'name' : "DUMMY",
|
||||
'datum' : moment(),
|
||||
'beschreibung' : "",
|
||||
'ort' : "",
|
||||
'art': "",
|
||||
'name': "DUMMY",
|
||||
'datum': moment(),
|
||||
'beschreibung': "",
|
||||
'ort': "",
|
||||
}
|
||||
for (var index in default_args) {
|
||||
if (typeof options[index] == "undefined") options[index] = default_args[index];
|
||||
@ -130,12 +169,12 @@ function Shift() {
|
||||
this.Beschreibung = options.beschreibung;
|
||||
this.Name = options.name;
|
||||
this.Ort = options.ort;
|
||||
|
||||
|
||||
if (typeof options.ende != "undefined") {
|
||||
this.Ende = options.ende;
|
||||
} else {
|
||||
if (!options.dontSetDurationFromRules) {
|
||||
Shift.setDurationFromRules(this);
|
||||
Shift.setDurationFromRules(this, DURATION_RULES);
|
||||
}
|
||||
}
|
||||
|
||||
@ -173,7 +212,8 @@ Shift.prototype = {
|
||||
this._begin = dateMoment.clone();
|
||||
},
|
||||
get Ende() {
|
||||
return this._begin.clone().add(this._duration).format(TIME_FORMAT);
|
||||
var ende = this._begin.clone().add(this._duration).format(TIME_FORMAT);
|
||||
return ende;
|
||||
},
|
||||
set Ende(value) {
|
||||
var dateMoment = moment(this.Datum + " " + value, DATE_INPUT_FORMAT + " " + TIME_FORMAT);
|
||||
@ -227,7 +267,7 @@ Shift.prototype = {
|
||||
}
|
||||
|
||||
}
|
||||
Shift.setDurationFromRules = function (shift) {
|
||||
Shift.setDurationFromRules = function (shift, rules) {
|
||||
'use strict';
|
||||
var isAllDayEvent = shift.Beginn == "00:00";
|
||||
if (isAllDayEvent) {
|
||||
@ -237,8 +277,8 @@ Shift.setDurationFromRules = function (shift) {
|
||||
var art = shift.Art.toLowerCase();
|
||||
var titel = shift.Name.toLowerCase();
|
||||
var duration = 60;
|
||||
for (var rIndex in DURATION_RULES) {
|
||||
var rule = DURATION_RULES[rIndex];
|
||||
for (var rIndex in rules) {
|
||||
var rule = rules[rIndex];
|
||||
|
||||
if (rule.fits(art, titel)) {
|
||||
duration = rule.Dauer;
|
||||
@ -250,9 +290,9 @@ Shift.setDurationFromRules = function (shift) {
|
||||
Shift.prototype.toVEvent = function () {
|
||||
var end = this._begin.clone().add(this._duration);
|
||||
return new VEvent({
|
||||
startMoment: this._begin,
|
||||
endMoment: end,
|
||||
title: this.VEventTitle,
|
||||
startMoment: this._begin,
|
||||
endMoment: end,
|
||||
title: this.VEventTitle,
|
||||
description: this.Beschreibung,
|
||||
location: this.Ort
|
||||
});
|
||||
@ -260,16 +300,15 @@ Shift.prototype.toVEvent = function () {
|
||||
Shift.thaw = function (jsonShift) {
|
||||
moment.locale(MOMENT_LOCALE);
|
||||
var begin = moment(jsonShift._begin);
|
||||
var shift = new Shift(
|
||||
{
|
||||
art: jsonShift._kind,
|
||||
name: jsonShift._name,
|
||||
datum: begin,
|
||||
beschreibung: jsonShift._description,
|
||||
ort: jsonShift._ort,
|
||||
|
||||
});
|
||||
var shift = new Shift({
|
||||
art: jsonShift._kind,
|
||||
name: jsonShift._name,
|
||||
datum: begin,
|
||||
beschreibung: jsonShift._description,
|
||||
ort: jsonShift._ort,
|
||||
|
||||
});
|
||||
shift.id = jsonShift.id;
|
||||
shift.Dauer = moment.duration(jsonShift._duration);
|
||||
return shift;
|
||||
};
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user