index.html formatieren

This commit is contained in:
Christian Seyfferth 2020-06-09 09:11:55 +02:00
parent c7e9973ae3
commit c9197fc92c

View File

@ -23,10 +23,15 @@
<span class="brand-logo"> <span class="brand-logo">
<img src="/img/logo.svg" height="30"> <img src="/img/logo.svg" height="30">
Dienstplan Converter Dienstplan Converter
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<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> </span>
<a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a> <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"> <ul id="nav-mobile" class="right hide-on-med-and-down">
<li>&nbsp;</li> <li class=""><a class="active" href="#termine">Termine</a></li>
<li class=""><a href="#Einstellungen">Regeln</a></li>
</ul> </ul>
</ul> </ul>
@ -80,23 +85,18 @@
</tbody> </tbody>
</table> </table>
<div class="card-action"> <div class="card-action">
<button class="btn-flat waves-effect" <button class="btn-flat waves-effect" @click="createDownloadFile"
@click="createDownloadFile" :disabled=" (remaining > 0) ? null : 'disabled'">
:disabled=" (remaining > 0) ? null : 'disabled'"> Kalenderdatei erstellen
Kalenderdatei erstellen </button>
</button> <a class="btn-flat waves-effect" :href="icsFile" :class="[ icsFile ? '' : 'disabled']"
<a class="btn-flat waves-effect" download="dienstplan.ics" @click="downloadFile">
:href="icsFile" Kalenderdatei herunterladen
:class="[ icsFile ? '' : 'disabled']" </a>
download="dienstplan.ics" <a class="btn-flat red-text waves-effect" @click="cleanStorage"
@click="downloadFile"> :disabled=" (remaining > 0) ? null : 'disabled'">
Kalenderdatei herunterladen Termine löschen
</a> </a>
<a class="btn-flat red-text waves-effect"
@click="cleanStorage"
:disabled=" (remaining > 0) ? null : 'disabled'">
Termine löschen
</a>
</div> </div>
</div> </div>
<div class="card" v-else> <div class="card" v-else>
@ -107,7 +107,8 @@
</div> </div>
<div class="card-action"> <div class="card-action">
<label class="btn-flat waves-effect waves-green" data-position="left" data-tooltip="Dienstplan einlesen" for="fileInput"> <label class="btn-flat waves-effect waves-green" data-position="left"
data-tooltip="Dienstplan einlesen" for="fileInput">
Datei auswählen Datei auswählen
</label> </label>
</div> </div>
@ -119,22 +120,30 @@
</a> </a>
<ul> <ul>
<li> <li>
<label class="btn-floating green tooltipped" data-position="left" data-tooltip="Dienstplan einlesen" for="fileInput"> <label class="btn-floating green tooltipped" data-position="left"
data-tooltip="Dienstplan einlesen" for="fileInput">
<i class="material-icons">publish</i> <i class="material-icons">publish</i>
</label> </label>
</li> </li>
<li> <li>
<button class="btn-floating blue tooltipped" data-position="left" data-tooltip="Kalenderdatei erstellen" @click="createDownloadFile" :disabled=" (remaining > 0) ? null : 'disabled'"> <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> <i class="material-icons">description</i>
</button> </button>
</li> </li>
<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"> <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> <i class="material-icons">get_app</i>
</a> </a>
</li> </li>
<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> <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> </li>
</ul> </ul>
</div> </div>
@ -146,21 +155,20 @@
<span class="chip indigo">Art des Dienstes</span> <span class="chip indigo">Art des Dienstes</span>
</div> </div>
<div class="collection"> <div class="collection">
<a class="collection-item avatar" v-for="(r,i) in rules" :key="'rule-'+i" @click="editRule(r)"> <a class="collection-item avatar" v-for="(r,i) in rules" :key="'rule-'+i"
@click="editRule(r)">
<i class="circle">#{{ i+1 }}</i> <i class="circle">#{{ i+1 }}</i>
<span class="title">{{ r.Name}} </span> <span class="title">{{ r.Name}} </span>
<div class="secondary-content"> <div class="secondary-content">
<span class="badge new" data-badge-caption="Minuten">{{ r.Dauer }}</span> <span class="badge new" data-badge-caption="Minuten">{{ r.Dauer }}</span>
</div> </div>
<div> <div>
<span class="chip indigo" <span class="chip indigo" :class="'lighten-'+(r.Arten.length > 1 ? '3' : '1')"
:class="'lighten-'+(r.Arten.length > 1 ? '3' : '1')"
v-for="a in r.Arten"> v-for="a in r.Arten">
{{a.tag}} {{a.tag}}
</span> </span>
<span class="chip orange" <span class="chip orange" :class="'lighten-'+(r.Titel.length > 1 ? '3' : '1')"
:class="'lighten-'+(r.Titel.length > 1 ? '3' : '1')"
v-for="t in r.Titel"> v-for="t in r.Titel">
{{t.tag}} {{t.tag}}
</span> </span>
@ -186,13 +194,14 @@
<h4>Regel anpassen</h4> <h4>Regel anpassen</h4>
<div class="row"> <div class="row">
<div class="range-field col s12 m6 l4"> <div class="range-field col s12 m6 l4">
<label class="active" for="rule_duration">Dauer in Minuten: {{selectedRule.Dauer}}</label> <label class="active" for="rule_duration">Dauer in Minuten: {{selectedRule.Dauer}}</label>
<input id="rule_duration" type="range" v-model="selectedRule.Dauer" min="30" max="300" step="10"> <input id="rule_duration" type="range" v-model="selectedRule.Dauer" min="30" max="300"
step="10">
</div> </div>
<div class="range-field col s12 m6 l8"> <div class="range-field col s12 m6 l8">
<label class="active" for="rule_name">Name</label> <label class="active" for="rule_name">Name</label>
<input id="rule_name" type="text" v-model="selectedRule.Name"> <input id="rule_name" type="text" v-model="selectedRule.Name">
</div> </div>
<div class="input-field col s12"> <div class="input-field col s12">
<label class="active" for="shift_kind">Arten</label> <label class="active" for="shift_kind">Arten</label>
<chip-input name="regel_arten" :init-data="selectedRule.Arten" @change="updateArten"> <chip-input name="regel_arten" :init-data="selectedRule.Arten" @change="updateArten">
@ -205,7 +214,8 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="waves-effect btn-flat waves-green" @click="saveRule(selectedRule)">Speichern</button> <button class="waves-effect btn-flat waves-green" @click="saveRule(selectedRule)">Speichern</button>
<button class="waves-effect btn-flat waves-red" @click="discardRule(selectedRule)">Verwerfen</button> <button class="waves-effect btn-flat waves-red"
@click="discardRule(selectedRule)">Verwerfen</button>
</div> </div>
</div> </div>
<div id="shiftModal" class="modal bottom-sheet"> <div id="shiftModal" class="modal bottom-sheet">
@ -221,19 +231,23 @@
<label class="active" for="shift_kind">Art</label> <label class="active" for="shift_kind">Art</label>
</div> </div>
<div class="input-field col s6 "> <div class="input-field col s6 ">
<input id="shift_date" type="date" class="datepicker" v-model="selectedShift.Datum" placeholder="Datum"> <input id="shift_date" type="date" class="datepicker" v-model="selectedShift.Datum"
placeholder="Datum">
<label class="active" for="shift_date">Datum</label> <label class="active" for="shift_date">Datum</label>
</div> </div>
<div class="input-field col s6"> <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="selectedShift.Beginn" placeholder="Uhrzeit"
class="timepicker no-autoinit" :data-default="selectedShift.Beginn">
<label class="active" for="shift_begin">Anfang</label> <label class="active" for="shift_begin">Anfang</label>
</div> </div>
<div class="input-field col s6 "> <div class="input-field col s6 ">
<input id="shift_end" type="time" v-model="selectedShift.Ende" placeholder="Ende" class="timepicker no-autoinit"> <input id="shift_end" type="time" v-model="selectedShift.Ende" placeholder="Ende"
class="timepicker no-autoinit">
<label class="active" for="shift_end">Ende</label> <label class="active" for="shift_end">Ende</label>
</div> </div>
<div class="input-field col s6 "> <div class="input-field col s6 ">
<input id="shift_desc" type="text" v-model="selectedShift.Beschreibung" placeholder="keine Beschreibung"> <input id="shift_desc" type="text" v-model="selectedShift.Beschreibung"
placeholder="keine Beschreibung">
<label class="active" for="shift_desc">Beschreibung</label> <label class="active" for="shift_desc">Beschreibung</label>
</div> </div>
<div class="input-field col s6 "> <div class="input-field col s6 ">
@ -243,17 +257,17 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="waves-effect btn-flat waves-green" @click="saveChanges(selectedShift)">Speichern</button> <button class="waves-effect btn-flat waves-green"
<button class="waves-effect btn-flat waves-red" @click="discardChanges(selectedShift)">Verwerfen</button> @click="saveChanges(selectedShift)">Speichern</button>
<button class="waves-effect btn-flat waves-red"
@click="discardChanges(selectedShift)">Verwerfen</button>
</div> </div>
</div> </div>
<ask-format-modal :options="availableFormats" @picked-format="parsePickedFormat"></ask-format-modal>
</div> </div>
<input type="file" <input type="file" name="fileInput" id="fileInput" @change="onFileChange"
name="fileInput" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
id="fileInput" style="display:none;">
@change="onFileChange"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
style="display:none;">
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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/lodash.js/4.17.11/lodash.min.js"></script>