reworking
This commit is contained in:
+132
-147
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user