From 921bc18061135d8e4c43ed1009c42e7b89e6f255 Mon Sep 17 00:00:00 2001
From: Christian Seyfferth <info@chrosey.de>
Date: Tue, 15 Jan 2019 12:17:01 +0100
Subject: [PATCH] slight changes in layout

---
 index.html | 122 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 74 insertions(+), 48 deletions(-)

diff --git a/index.html b/index.html
index e45db3e..6b4b998 100644
--- a/index.html
+++ b/index.html
@@ -37,55 +37,81 @@
         </div>
         <div id="body">
             <main class="container">
-                <div class="card" id="Dienste">
-                    <div class="card-content" v-if="shifts.length > 0">
-                        <h3 class="card-title">Dienste</h3>
-                        <table class="highlight" >
-                            <thead class="">
-                                <tr>
-                                    <th>Datum</th>
-                                    <th>Wochentag</th>
-                                    <th>Titel</th>
-                                    <th>Dauer</th>
-                                    <th></th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="s in shifts" :key="s.id" @click="selectShift(s)">
-                                    <td class="text-xs-right align-middle">
-                                        {{s.FormattedDatum}}
-                                    </td>
-                                    <td class="">
-                                        {{s.Wochentag}}
-                                    </td>
-                                    <td class="">
-                                        {{s.VEventTitle}}
-                                    </td>
-                                    <td class="" v-if="s.Beginn !== '00:00'">
-                                        {{s.Beginn}} - {{s.Ende}}
-                                    </td>
-                                    <td class="" v-else>
-                                        ganzer Tag
-                                    </td>
-                                    <td class="">
-                                        <a class="btn-flat red-text waves-effect" @click.stop="removeShift(s)"><i class="material-icons">delete</i></a>
-                                    </td>
-                                </tr>
-                            </tbody>
-                            <tfoot>
-                                <tr>
-                                    <th colspan="5" class="text-right"> {{shifts.length }} Dienste</th>
-                                </tr>
-                            </tfoot>
-                        </table>
+                <div id="Dienste">
+                    <div class="card" v-if="shifts.length > 0">
+                        <div class="card-content">
+                            <h3 class="card-title">Dienste</h3>
+                            <table class="highlight" >
+                                <thead class="">
+                                    <tr>
+                                        <th>Datum</th>
+                                        <th>Wochentag</th>
+                                        <th>Titel</th>
+                                        <th>Dauer</th>
+                                        <th></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="s in shifts" :key="s.id" @click="selectShift(s)">
+                                        <td class="text-xs-right align-middle">
+                                            {{s.FormattedDatum}}
+                                        </td>
+                                        <td class="">
+                                            {{s.Wochentag}}
+                                        </td>
+                                        <td class="">
+                                            {{s.VEventTitle}}
+                                        </td>
+                                        <td class="" v-if="s.Beginn !== '00:00'">
+                                            {{s.Beginn}} - {{s.Ende}}
+                                        </td>
+                                        <td class="" v-else>
+                                            ganzer Tag
+                                        </td>
+                                        <td class="">
+                                            <a class="btn-flat red-text waves-effect" @click.stop="removeShift(s)"><i class="material-icons">delete</i></a>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot>
+                                    <tr>
+                                        <th colspan="5" class="text-right"> {{shifts.length }} Dienste</th>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                        <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'">
+                                    Dienste löschen
+                                </a>
+                        </div>
                     </div>
-                    <div class="card-content" v-if="shifts.length < 1">
-                        Noch keine Dienste da.
-                    </div>
-                    <div class="card-action" v-if="shifts.length < 1">
-                        <label class="btn green" data-position="left" data-tooltip="Dienstplan einlesen" for="fileInput">
-                            <i class="material-icons">publish</i>
-                        </label>
+                    <div class="card" v-else>
+                        <div class="card-content center-align" style="height:100px;">
+                            <h3 class="card-title">
+                                Noch keine Dienste da
+                            </h3>
+                            
+                        </div>
+                        <div class="card-action">
+                            <label class="btn-flat 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">