index.html formatieren

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

View File

@ -1,269 +1,283 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Dienstplan Converter</title> <title>Dienstplan Converter</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"> <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-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16"> <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"> <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://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://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/page.css"> <link rel="stylesheet" href="css/page.css">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<nav class="nav-extended indigo"> <nav class="nav-extended indigo">
<div class="nav-wrapper container "> <div class="nav-wrapper container ">
<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
</span> <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a> <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<ul id="nav-mobile" class="right hide-on-med-and-down"> <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<li>&nbsp;</li> <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#e6b300">
</ul> </span>
<a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</ul> <ul id="nav-mobile" class="right hide-on-med-and-down">
<ul class="tabs tabs-transparent"> <li class=""><a class="active" href="#termine">Termine</a></li>
<li class="tab"><a class="active" href="#termine">Termine</a></li> <li class=""><a href="#Einstellungen">Regeln</a></li>
<li class="tab"><a href="#Einstellungen">Regeln</a></li> </ul>
</ul>
</div> </ul>
</nav> <ul class="tabs tabs-transparent">
<ul class="sidenav" id="mobile-nav"> <li class="tab"><a class="active" href="#termine">Termine</a></li>
<li class="tab"><a href="#Einstellungen">Regeln</a></li>
</ul> </ul>
<div id="body"> </div>
<main class="container"> </nav>
<div id="termine"> <ul class="sidenav" id="mobile-nav">
<div class="" v-if="shifts.length > 0"> </ul>
<h3 class="title">Termine</h3> <div id="body">
<table class="highlight"> <main class="container">
<thead> <div id="termine">
<tr>
<th>Datum</th> <div class="" v-if="shifts.length > 0">
<th>Dauer</th> <h3 class="title">Termine</h3>
<th>Info</th> <table class="highlight">
<th></th> <thead>
</tr> <tr>
</thead> <th>Datum</th>
<tbody> <th>Dauer</th>
<template v-for="g in groupedTermine"> <th>Info</th>
<tr v-for="(s,i) in g"> <th></th>
<th v-if="i == 0" :rowspan="g.length"> </tr>
{{s.FormattedDatum}} </thead>
</th> <tbody>
<td>{{ s.Beginn }} - {{ s.Ende }} Uhr</td> <template v-for="g in groupedTermine">
<td> <tr v-for="(s,i) in g">
<h6>{{ s.VEventTitle }}</h6> <th v-if="i == 0" :rowspan="g.length">
<p v-if="s.Ort!=''"> {{s.FormattedDatum}}
<i class="material-icons red-text">location_on</i> </th>
{{ s.Ort }} <td>{{ s.Beginn }} - {{ s.Ende }} Uhr</td>
</p> <td>
<blockquote v-if="s.Ort != s.Beschreibung"> <h6>{{ s.VEventTitle }}</h6>
{{ s.Beschreibung }} <p v-if="s.Ort!=''">
</blockquote> <i class="material-icons red-text">location_on</i>
</td> {{ s.Ort }}
<td> </p>
<button class="btn-flat" @click="removeShift(s)">löschen</button> <blockquote v-if="s.Ort != s.Beschreibung">
<button class="btn-flat" @click="selectShift(s)">bearbeiten</button> {{ s.Beschreibung }}
</td> </blockquote>
</tr> </td>
</template> <td>
</tbody> <button class="btn-flat" @click="removeShift(s)">löschen</button>
</table> <button class="btn-flat" @click="selectShift(s)">bearbeiten</button>
<div class="card-action"> </td>
<button class="btn-flat waves-effect" </tr>
@click="createDownloadFile" </template>
:disabled=" (remaining > 0) ? null : 'disabled'"> </tbody>
Kalenderdatei erstellen </table>
</button> <div class="card-action">
<a class="btn-flat waves-effect" <button class="btn-flat waves-effect" @click="createDownloadFile"
:href="icsFile" :disabled=" (remaining > 0) ? null : 'disabled'">
:class="[ icsFile ? '' : 'disabled']" Kalenderdatei erstellen
download="dienstplan.ics" </button>
@click="downloadFile"> <a class="btn-flat waves-effect" :href="icsFile" :class="[ icsFile ? '' : 'disabled']"
Kalenderdatei herunterladen download="dienstplan.ics" @click="downloadFile">
</a> Kalenderdatei herunterladen
<a class="btn-flat red-text waves-effect" </a>
@click="cleanStorage" <a class="btn-flat red-text waves-effect" @click="cleanStorage"
:disabled=" (remaining > 0) ? null : 'disabled'"> :disabled=" (remaining > 0) ? null : 'disabled'">
Termine löschen Termine löschen
</a> </a>
</div> </div>
</div> </div>
<div class="card" v-else> <div class="card" v-else>
<div class="card-content center-align" style="height:100px;"> <div class="card-content center-align" style="height:100px;">
<h3 class="card-title"> <h3 class="card-title">
Noch keine Termine da Noch keine Termine da
</h3> </h3>
</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"
Datei auswählen data-tooltip="Dienstplan einlesen" for="fileInput">
</label> Datei auswählen
</div> </label>
</div> </div>
</div> </div>
<div class="fixed-action-btn"> </div>
<a class="btn-floating btn-large orange darken-2 waves-effect"> <div class="fixed-action-btn">
<i class="large material-icons">work</i> <a class="btn-floating btn-large orange darken-2 waves-effect">
</a> <i class="large material-icons">work</i>
<ul> </a>
<li> <ul>
<label class="btn-floating green tooltipped" data-position="left" data-tooltip="Dienstplan einlesen" for="fileInput"> <li>
<i class="material-icons">publish</i> <label class="btn-floating green tooltipped" data-position="left"
</label> data-tooltip="Dienstplan einlesen" for="fileInput">
</li> <i class="material-icons">publish</i>
<li> </label>
<button class="btn-floating blue tooltipped" data-position="left" data-tooltip="Kalenderdatei erstellen" @click="createDownloadFile" :disabled=" (remaining > 0) ? null : 'disabled'"> </li>
<i class="material-icons">description</i> <li>
</button> <button class="btn-floating blue tooltipped" data-position="left"
</li> data-tooltip="Kalenderdatei erstellen" @click="createDownloadFile"
<li> :disabled=" (remaining > 0) ? null : 'disabled'">
<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">description</i>
<i class="material-icons">get_app</i> </button>
</a> </li>
</li> <li>
<li> <a class="btn-floating yellow tooltipped" data-position="left"
<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> data-tooltip="Kalenderdatei herunterladen" :href="icsFile"
</li> v-bind:class="[ icsFile ? '' : 'disabled']" download="dienstplan.ics"
</ul> @click="downloadFile">
</div> <i class="material-icons">get_app</i>
<div class="" id="Einstellungen"> </a>
<div class=""> </li>
<h3 class="title">Regeln für die Dauer</h3> <li>
<div> <a class="btn-floating red tooltipped" data-position="left" data-tooltip="Tabelle leeren"
<span class="chip orange">Titel der Veranstaltung</span> @click="cleanStorage" :disabled=" (remaining > 0) ? null : 'disabled'"><i
<span class="chip indigo">Art des Dienstes</span> class="material-icons">clear_all</i></a>
</div> </li>
<div class="collection"> </ul>
<a class="collection-item avatar" v-for="(r,i) in rules" :key="'rule-'+i" @click="editRule(r)"> </div>
<i class="circle">#{{ i+1 }}</i> <div class="" id="Einstellungen">
<span class="title">{{ r.Name}} </span> <div class="">
<div class="secondary-content"> <h3 class="title">Regeln für die Dauer</h3>
<span class="badge new" data-badge-caption="Minuten">{{ r.Dauer }}</span> <div>
</div> <span class="chip orange">Titel der Veranstaltung</span>
<div> <span class="chip indigo">Art des Dienstes</span>
<span class="chip indigo" </div>
:class="'lighten-'+(r.Arten.length > 1 ? '3' : '1')" <div class="collection">
v-for="a in r.Arten"> <a class="collection-item avatar" v-for="(r,i) in rules" :key="'rule-'+i"
{{a.tag}} @click="editRule(r)">
</span> <i class="circle">#{{ i+1 }}</i>
<span class="title">{{ r.Name}} </span>
<span class="chip orange" <div class="secondary-content">
:class="'lighten-'+(r.Titel.length > 1 ? '3' : '1')" <span class="badge new" data-badge-caption="Minuten">{{ r.Dauer }}</span>
v-for="t in r.Titel"> </div>
{{t.tag}} <div>
</span> <span class="chip indigo" :class="'lighten-'+(r.Arten.length > 1 ? '3' : '1')"
v-for="a in r.Arten">
</div> {{a.tag}}
</a> </span>
</div>
</div> <span class="chip orange" :class="'lighten-'+(r.Titel.length > 1 ? '3' : '1')"
</div> v-for="t in r.Titel">
{{t.tag}}
</main> </span>
<div id="confirmModal" class="modal active">
<div class="modal-content"> </div>
<h4>Aktion bestätigen</h4> </a>
</div> </div>
<div class="modal-footer"> </div>
<button class="btn-flat" @click="true">Bestätigen</button> </div>
<button class="btn-flat" @click="false">Abbrechen</button>
</div> </main>
</div> <div id="confirmModal" class="modal active">
<div id="ruleModal" class="modal bottom-sheet active"> <div class="modal-content">
<div class="modal-content"> <h4>Aktion bestätigen</h4>
<h4>Regel anpassen</h4> </div>
<div class="row"> <div class="modal-footer">
<div class="range-field col s12 m6 l4"> <button class="btn-flat" @click="true">Bestätigen</button>
<label class="active" for="rule_duration">Dauer in Minuten: {{selectedRule.Dauer}}</label> <button class="btn-flat" @click="false">Abbrechen</button>
<input id="rule_duration" type="range" v-model="selectedRule.Dauer" min="30" max="300" step="10"> </div>
</div> </div>
<div class="range-field col s12 m6 l8"> <div id="ruleModal" class="modal bottom-sheet active">
<label class="active" for="rule_name">Name</label> <div class="modal-content">
<input id="rule_name" type="text" v-model="selectedRule.Name"> <h4>Regel anpassen</h4>
</div> <div class="row">
<div class="input-field col s12"> <div class="range-field col s12 m6 l4">
<label class="active" for="shift_kind">Arten</label> <label class="active" for="rule_duration">Dauer in Minuten: {{selectedRule.Dauer}}</label>
<chip-input name="regel_arten" :init-data="selectedRule.Arten" @change="updateArten"> <input id="rule_duration" type="range" v-model="selectedRule.Dauer" min="30" max="300"
</div> step="10">
<div class="input-field col s12"> </div>
<label class="active" for="rule_titel">Titel</label> <div class="range-field col s12 m6 l8">
<chip-input name="regel_titel" :init-data="selectedRule.Titel" @change="updateTitel">> <label class="active" for="rule_name">Name</label>
</div> <input id="rule_name" type="text" v-model="selectedRule.Name">
</div> </div>
</div> <div class="input-field col s12">
<div class="modal-footer"> <label class="active" for="shift_kind">Arten</label>
<button class="waves-effect btn-flat waves-green" @click="saveRule(selectedRule)">Speichern</button> <chip-input name="regel_arten" :init-data="selectedRule.Arten" @change="updateArten">
<button class="waves-effect btn-flat waves-red" @click="discardRule(selectedRule)">Verwerfen</button> </div>
</div> <div class="input-field col s12">
</div> <label class="active" for="rule_titel">Titel</label>
<div id="shiftModal" class="modal bottom-sheet"> <chip-input name="regel_titel" :init-data="selectedRule.Titel" @change="updateTitel">>
<div class="modal-content"> </div>
<h4>{{ selectedShift.VEventTitle || 'kein Titel'}}</h4> </div>
<div class="row"> </div>
<div class="input-field col s6 "> <div class="modal-footer">
<input id="shift_name" type="text" v-model="selectedShift.Name" placeholder="kein Titel"> <button class="waves-effect btn-flat waves-green" @click="saveRule(selectedRule)">Speichern</button>
<label class="active" for="shift_name">Titel</label> <button class="waves-effect btn-flat waves-red"
</div> @click="discardRule(selectedRule)">Verwerfen</button>
<div class="input-field col s6 "> </div>
<input id="shift_kind" type="text" v-model="selectedShift.Art" placeholder="keine Art"> </div>
<label class="active" for="shift_kind">Art</label> <div id="shiftModal" class="modal bottom-sheet">
</div> <div class="modal-content">
<div class="input-field col s6 "> <h4>{{ selectedShift.VEventTitle || 'kein Titel'}}</h4>
<input id="shift_date" type="date" class="datepicker" v-model="selectedShift.Datum" placeholder="Datum"> <div class="row">
<label class="active" for="shift_date">Datum</label> <div class="input-field col s6 ">
</div> <input id="shift_name" type="text" v-model="selectedShift.Name" placeholder="kein Titel">
<div class="input-field col s6"> <label class="active" for="shift_name">Titel</label>
<input id="shift_begin" type="time" v-model="selectedShift.Beginn" placeholder="Uhrzeit" class="timepicker no-autoinit" :data-default="selectedShift.Beginn"> </div>
<label class="active" for="shift_begin">Anfang</label> <div class="input-field col s6 ">
</div> <input id="shift_kind" type="text" v-model="selectedShift.Art" placeholder="keine Art">
<div class="input-field col s6 "> <label class="active" for="shift_kind">Art</label>
<input id="shift_end" type="time" v-model="selectedShift.Ende" placeholder="Ende" class="timepicker no-autoinit"> </div>
<label class="active" for="shift_end">Ende</label> <div class="input-field col s6 ">
</div> <input id="shift_date" type="date" class="datepicker" v-model="selectedShift.Datum"
<div class="input-field col s6 "> placeholder="Datum">
<input id="shift_desc" type="text" v-model="selectedShift.Beschreibung" placeholder="keine Beschreibung"> <label class="active" for="shift_date">Datum</label>
<label class="active" for="shift_desc">Beschreibung</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"
<input id="shift_location" type="text" v-model="selectedShift.Ort" placeholder="keine Ort"> class="timepicker no-autoinit" :data-default="selectedShift.Beginn">
<label class="active" for="shift_location">Ort</label> <label class="active" for="shift_begin">Anfang</label>
</div> </div>
</div> <div class="input-field col s6 ">
</div> <input id="shift_end" type="time" v-model="selectedShift.Ende" placeholder="Ende"
<div class="modal-footer"> class="timepicker no-autoinit">
<button class="waves-effect btn-flat waves-green" @click="saveChanges(selectedShift)">Speichern</button> <label class="active" for="shift_end">Ende</label>
<button class="waves-effect btn-flat waves-red" @click="discardChanges(selectedShift)">Verwerfen</button> </div>
</div> <div class="input-field col s6 ">
</div> <input id="shift_desc" type="text" v-model="selectedShift.Beschreibung"
</div> placeholder="keine Beschreibung">
<input type="file" <label class="active" for="shift_desc">Beschreibung</label>
name="fileInput" </div>
id="fileInput" <div class="input-field col s6 ">
@change="onFileChange" <input id="shift_location" type="text" v-model="selectedShift.Ort" placeholder="keine Ort">
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" <label class="active" for="shift_location">Ort</label>
style="display:none;"> </div>
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> <div class="modal-footer">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <button class="waves-effect btn-flat waves-green"
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.1/xlsx.full.min.js"></script> @click="saveChanges(selectedShift)">Speichern</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js"></script> <button class="waves-effect btn-flat waves-red"
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> @click="discardChanges(selectedShift)">Verwerfen</button>
<script src="js/shift.js"></script> </div>
<script src="js/vcal.js"></script> </div>
<script src="app.js"></script> <ask-format-modal :options="availableFormats" @picked-format="parsePickedFormat"></ask-format-modal>
</body> </div>
<input type="file" name="fileInput" id="fileInput" @change="onFileChange"
</html> accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
style="display:none;">
</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/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://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>
<script src="js/shift.js"></script>
<script src="js/vcal.js"></script>
<script src="app.js"></script>
</body>
</html>