From 4ccb9434f5620956037923d742c1cade962a3b6b Mon Sep 17 00:00:00 2001
From: Christian <info@chrosey.de>
Date: Tue, 9 Jun 2020 10:32:59 +0200
Subject: [PATCH 1/7] [TASK] add dependencies

---
 index.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 1d7d6fe..711543c 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,8 @@
     <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#e6b300">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
+    <link rel="stylesheet" href="https://unpkg.com/materialize-stepper@3.1.0/dist/css/mstepper.min.css">
     <link rel="stylesheet" href="css/page.css">
 
 </head>
@@ -30,8 +32,8 @@
                 </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=""><a class="active" href="#termine">Termine</a></li>
-                    <li class=""><a href="#Einstellungen">Regeln</a></li>
+                    <li class="tab"><a class="active" href="#termine">Termine</a></li>
+                    <li class="tab"><a href="#Einstellungen">Regeln</a></li>
                 </ul>
 
                 </ul>
@@ -251,7 +253,7 @@
                             <label class="active" for="shift_desc">Beschreibung</label>
                         </div>
                         <div class="input-field col s6 ">
-                            <input id="shift_location" type="text" v-model="selectedShift.Ort" placeholder="keine Ort">
+                            <input id="shift_location" type="text" v-model="selectedShift.Ort" placeholder="kein Ort">
                             <label class="active" for="shift_location">Ort</label>
                         </div>
                     </div>
@@ -272,6 +274,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
+    <script src="https://unpkg.com/materialize-stepper@3.1.0/dist/js/mstepper.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.1/xlsx.full.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

From 5b017141d3fa25fe026573a40157affdb97e73dd Mon Sep 17 00:00:00 2001
From: Christian <info@chrosey.de>
Date: Tue, 17 Nov 2020 19:17:32 +0100
Subject: [PATCH 2/7] reworking

---
 app.js      | 238 ++++++++++++++++++++++++++++----------------
 index.html  | 279 +++++++++++++++++++++++++---------------------------
 js/shift.js | 117 ++++++++++++++--------
 3 files changed, 362 insertions(+), 272 deletions(-)

diff --git a/app.js b/app.js
index bbd1210..e6ee12d 100644
--- a/app.js
+++ b/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);
     }
 })
diff --git a/index.html b/index.html
index 711543c..fe6dfb5 100644
--- a/index.html
+++ b/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>
diff --git a/js/shift.js b/js/shift.js
index c24e024..a1ffe87 100644
--- a/js/shift.js
+++ b/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;
-};
+};
\ No newline at end of file

From 210d7ef71b2ce592ffe2d4914742349da84f303f Mon Sep 17 00:00:00 2001
From: Christian <info@chrosey.de>
Date: Tue, 17 Nov 2020 19:56:24 +0100
Subject: [PATCH 3/7] =?UTF-8?q?erfassung=20f=C3=BCr=20sondertermine=20fixe?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app.js b/app.js
index e6ee12d..d651999 100644
--- a/app.js
+++ b/app.js
@@ -315,7 +315,7 @@ var app = new Vue({
                         times.push(element.Zeit ? moment(element.Zeit) : day);
                     }
                     if (element.hasOwnProperty('Bemerkung')) {
-                        if (element.Bemerkung.toString().indexOf(/\d\d:\d\d\s/)) {
+                        if (element.Bemerkung.toString().search(/\d\d:\d\d\s/) >= 0) {
                             // prüfe ob eine Uhrzeit drinnen steht
                             let sonderzeit = moment(element.Bemerkung, 'HH:mm');
                             let termin = {

From a26a3dd5f695a07ebf6c8cbda8aa717fede4bb4a Mon Sep 17 00:00:00 2001
From: Christian <info@chrosey.de>
Date: Thu, 11 Mar 2021 23:18:25 +0100
Subject: [PATCH 4/7] update begin of shift

---
 js/shift.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/js/shift.js b/js/shift.js
index a1ffe87..f39e555 100644
--- a/js/shift.js
+++ b/js/shift.js
@@ -311,4 +311,7 @@ Shift.thaw = function (jsonShift) {
     shift.id = jsonShift.id;
     shift.Dauer = moment.duration(jsonShift._duration);
     return shift;
-};
\ No newline at end of file
+};
+Shift.prototype.updateBeginn = function(hour) {
+    this._begin = this._begin.add('hours', hour);
+}

From 06aca83636835257e09330107397a5da5a9f4a59 Mon Sep 17 00:00:00 2001
From: Christian <info@chrosey.de>
Date: Thu, 11 Mar 2021 23:20:58 +0100
Subject: [PATCH 5/7] add buttons

---
 index.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index fe6dfb5..cad6d3e 100644
--- a/index.html
+++ b/index.html
@@ -138,6 +138,8 @@
                                                     @click.prevent="removeShift(s)">löschen</button>
                                                 <button class="btn-flat"
                                                     @click.prevent="selectShift(s)">bearbeiten</button>
+                                                <button class="waves-effect waves-dark btn blue" @click.prevent="updateBeginn(s, -1)">1 h früher</button>
+                                                <button class="waves-effect waves-dark btn blue" @click.prevent="updateBeginn(s, 1)">1 h später</button>
                                             </td>
                                         </tr>
                                     </template>
@@ -149,6 +151,8 @@
                                     :disabled=" (remaining > 0) ? null : 'disabled'">
                                     Kalenderdatei erstellen
                                 </button>
+                                <button class="waves-effect waves-dark btn blue" @click.prevent="changeTime(-1)">alle 1 h früher</button>
+                                <button class="waves-effect waves-dark btn blue" @click.prevent="changeTime(1)">alle 1 h später</button>
                                 <button class="waves-effect waves-dark btn next-step">Weiter</button>
                             </div>
                         </div>
@@ -269,4 +273,4 @@
     <script src="app.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From bddbb24bfe46ae4e7f80f6d086f89a68db3ef0ba Mon Sep 17 00:00:00 2001
From: Christian <info@chrosey.de>
Date: Thu, 11 Mar 2021 23:21:16 +0100
Subject: [PATCH 6/7] refactor component

---
 app.js | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/app.js b/app.js
index d651999..a106e1e 100644
--- a/app.js
+++ b/app.js
@@ -196,7 +196,6 @@ var app = new Vue({
                 twelveHour: false,
             }
         },
-        workbook: null,
     },
     watch: {
         shifts: {
@@ -308,11 +307,16 @@ var app = new Vue({
                         // in der Zeitspalte stehen mehrere Uhrzeiten.
                         let tempTimes = element.Zeit.toString().split(' + ');
                         tempTimes.forEach(function(time) {
-                            times.push(moment(time, 'HH:mm'));
+                            let mom = moment(time, 'HH:mm');
+                            times.push([mom.hour(), mom.minute()]);
                         })
                     } else {
-                        // übrliches Format
-                        times.push(element.Zeit ? moment(element.Zeit) : day);
+                        if (element.Zeit) {
+                            let mom = moment(element.Zeit);
+                            times.push([mom.hour(), mom.minute()]);
+                        } else {
+                            times.push([0,0]);
+                        }
                     }
                     if (element.hasOwnProperty('Bemerkung')) {
                         if (element.Bemerkung.toString().search(/\d\d:\d\d\s/) >= 0) {
@@ -324,9 +328,6 @@ var app = new Vue({
                                 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 {
@@ -342,14 +343,11 @@ var app = new Vue({
 
                     times.forEach(time => {
                         var termin = {
-                            datum: day.clone().hour(time.hour()).minute(time.minute()),
+                            datum: day.clone().hour(time[0]).minute(time[1]),
                             art: art,
                             beschreibung: beschreibung,
                             name: name
                         }
-                        if (!termin.datum.isDST()) {
-                            termin.datum.add(1, 'hours')
-                        }
                         vm.addShift(new Shift(termin));
                     });
 
@@ -357,6 +355,20 @@ var app = new Vue({
             });
         },
 
+        changeTime: function (hours) {
+            let temp = this.shifts;
+            this.shifts = [];
+            temp.forEach(shift => {
+                shift.updateBeginn(hours);
+                this.addShift(shift);
+            });
+        },
+
+        updateBeginn: function (shift, hours) {
+            shift.updateBeginn(hours);
+            this.shifts.splice(this.shifts.indexOf(shift), 1, shift);
+        },
+
         parseForStuttgart: function (dp) {
             var arr = XLSX.utils.sheet_to_json(dp, {
                 header: "A",

From 1e7454bc64454349287aee251f00b4a43bcaa986 Mon Sep 17 00:00:00 2001
From: Christian <info@chrosey.de>
Date: Fri, 12 Mar 2021 22:23:17 +0100
Subject: [PATCH 7/7] updates

---
 app.js     |  2 ++
 index.html | 48 +++++++++++++++++++++++-------------------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/app.js b/app.js
index a106e1e..7e3c2e7 100644
--- a/app.js
+++ b/app.js
@@ -203,6 +203,8 @@ var app = new Vue({
                 'use strict';
                 shiftStorage.save(shifts);
                 this.remaining = shifts.length;
+                this.icsFile = null;
+                this.blob = null;
                 this.makeToast("Änderungen gespeichert.");
             },
             deep: true
diff --git a/index.html b/index.html
index cad6d3e..edfa6b3 100644
--- a/index.html
+++ b/index.html
@@ -52,18 +52,6 @@
                                 </a>
                             </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">
@@ -97,8 +85,9 @@
                                 </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-flat" @click.prevent="applyRules">
+                                    Regeln anwenden
+                                </button>
                                 <button class="waves-effect waves-dark btn next-step">Weiter</button>
                             </div>
                         </div>
@@ -121,10 +110,17 @@
                                             <th v-if="i == 0" :rowspan="g.length">
                                                 {{s.FormattedDatum}}
                                             </th>
-                                            <td>{{ s.Beginn }} - {{ s.Ende }} Uhr</td>
+                                            <td>
+                                                <button class="waves-effect waves-light btn-small btn-flat" @click.prevent="updateBeginn(s, -1)" title="1 Stunde früher">
+                                                    <i class="material-icons">skip_previous</i>
+                                                </button>
+                                                {{ s.Beginn }} - {{ s.Ende }} Uhr
+                                                <button class="waves-effect waves-light btn-small btn-flat" @click.prevent="updateBeginn(s, 1)" title="1 Stunde später">
+                                                    <i class="material-icons">skip_next</i>
+                                                </button>
+                                            </td>
                                             <td>
                                                 <h6>{{ s.VEventTitle }}</h6>
-                                                {{ s.Dauer }}
                                                 <p v-if="s.Ort!=''">
                                                     <i class="material-icons red-text">location_on</i>
                                                     {{ s.Ort }}
@@ -138,8 +134,7 @@
                                                     @click.prevent="removeShift(s)">löschen</button>
                                                 <button class="btn-flat"
                                                     @click.prevent="selectShift(s)">bearbeiten</button>
-                                                <button class="waves-effect waves-dark btn blue" @click.prevent="updateBeginn(s, -1)">1 h früher</button>
-                                                <button class="waves-effect waves-dark btn blue" @click.prevent="updateBeginn(s, 1)">1 h später</button>
+
                                             </td>
                                         </tr>
                                     </template>
@@ -147,10 +142,6 @@
                             </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 blue" @click.prevent="changeTime(-1)">alle 1 h früher</button>
                                 <button class="waves-effect waves-dark btn blue" @click.prevent="changeTime(1)">alle 1 h später</button>
                                 <button class="waves-effect waves-dark btn next-step">Weiter</button>
@@ -160,8 +151,15 @@
                     <li class="step">
                         <div class="step-title waves-effect">Kalenderdatei speichern</div>
                         <div class="step-content">
+                            <p>
+                                Erst die Kalenderdatei erstellen. Danach kann sie gespeichert werden.
+                            </p>
                             <div class="step-actions">
-                                <a class="btn-flat waves-effect" :href="icsFile" :class="[ icsFile ? '' : 'disabled']"
+                                <button class="btn waves-effect" @click.prevent="createDownloadFile"
+                                    :disabled=" (remaining > 0) ? null : 'disabled'">
+                                    Kalenderdatei erstellen
+                                </button>
+                                <a class="btn waves-effect" :href="icsFile" :class="[ icsFile ? '' : 'disabled']"
                                     download="dienstplan.ics" @click.stop="downloadFile">
                                     Kalenderdatei speichern
                                 </a>
@@ -179,7 +177,7 @@
                     <button class="btn-flat" @click="false">Abbrechen</button>
                 </div>
             </div>
-            <div id="ruleModal" class="modal bottom-sheet active">
+            <div id="ruleModal" class="modal modal-fixed-footer active">
                 <div class="modal-content">
                     <h4>Regel anpassen</h4>
                     <div class="row">
@@ -208,7 +206,7 @@
                         @click="discardRule(selectedRule)">Verwerfen</button>
                 </div>
             </div>
-            <div id="shiftModal" class="modal bottom-sheet">
+            <div id="shiftModal" class="modal modal-fixed-footer">
                 <div class="modal-content">
                     <h4>{{ selectedShift.VEventTitle || 'kein Titel'}}</h4>
                     <div class="row">