From ee71045dd1847bc0e2cc51be6e950809ed2b6d62 Mon Sep 17 00:00:00 2001
From: Christian Seyfferth <info@chrosey.de>
Date: Wed, 16 Jan 2019 22:08:27 +0100
Subject: [PATCH] change layout

---
 index.html | 72 +++++++++++++++++++++++-------------------------------
 1 file changed, 31 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index a774160..0a22aa8 100644
--- a/index.html
+++ b/index.html
@@ -44,51 +44,41 @@
                 <div id="termine">
                     
                     <div class="" v-if="shifts.length > 0">
-                        <div class="">
-                            <h3 class="title">Termine</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">
-                                        <td class="text-xs-right align-middle">
+                        <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 class="">
-                                            {{s.Wochentag}}
-                                        </td>
-                                        <td class="">
-                                            {{s.VEventTitle}}
-                                            <small v-if="s.Ort != ''">
-                                                <i class="tiny material-icons red-text">location_on</i>{{ s.Ort }}
-                                            </small>
-                                        </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 small red-waves waves-effect" @click.stop="removeShift(s)"><i class="material-icons">delete</i></a>
-                                            <a class="btn-flat small waves-effect" @click.stop="selectShift(s)"><i class="material-icons">edit</i></a>
+                                        <td>
+                                            <button class="btn-flat" @click="removeShift(s)">löschen</button>
+                                            <button class="btn-flat" @click="selectShift(s)">bearbeiten</button>
                                         </td>
                                     </tr>
-                                </tbody>
-                                <tfoot>
-                                    <tr>
-                                        <th colspan="5" class="right-align"> {{shifts.length }} Dienste</th>
-                                    </tr>
-                                </tfoot>
-                            </table>
-                        </div>
+                                </template>
+                            </tbody>
+                        </table>
                         <div class="card-action">
                                 <button class="btn-flat waves-effect" 
                                         @click="createDownloadFile"