250 lines
14 KiB
HTML
250 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Dienstplan Converter</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<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">
|
|
<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="css/page.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="navbar-fixed">
|
|
<nav class="nav-extended indigo">
|
|
<div class="nav-wrapper container ">
|
|
<span class="brand-logo">Dienstplan Converter</span>
|
|
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
|
|
<ul id="nav-mobile" class="right hide-on-med-and-down">
|
|
<li> </li>
|
|
</ul>
|
|
<ul class="side-nav" id="mobile-demo">
|
|
</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>
|
|
</div>
|
|
<div id="body">
|
|
<main class="container">
|
|
<div id="termine">
|
|
<div class="card" v-if="shifts.length > 0">
|
|
<div class="card-content">
|
|
<h3 class="card-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" @click="selectShift(s)">
|
|
<td class="text-xs-right align-middle">
|
|
{{s.FormattedDatum}}
|
|
</td>
|
|
<td class="">
|
|
{{s.Wochentag}}
|
|
</td>
|
|
<td class="">
|
|
{{s.VEventTitle}}
|
|
<small>{{ 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 red-text waves-effect" @click.stop="removeShift(s)"><i class="material-icons">delete</i></a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th colspan="5" class="right-align"> {{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'">
|
|
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" 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="card" id="Einstellungen">
|
|
<div class="card-content">
|
|
<h3 class="card-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>
|
|
<ul class="collection highlight">
|
|
<li class="collection-item" v-for="r in rules" :key="rules.indexOf(r)" @click="selectRule(r)">
|
|
<span v-if="rules.indexOf(r) != 0" class="title">sonst </span>
|
|
<span class="title" v-if="rules.indexOf(r) < rules.length -1">wenn: </span>
|
|
<span class="secondary-content">{{ r.duration }} min</span>
|
|
<div>
|
|
<span v-if="Array.isArray(r.art)">
|
|
<span class="chip indigo" :class="{'lighten-3' : r.art.length > 1, 'lighten-2' : r.art.length == 1}" v-for="a in r.art" :key="r.art.indexOf(a)">{{a}}</span>
|
|
</span>
|
|
<span v-if="Array.isArray(r.title)">
|
|
<span class="chip orange" :class="{'lighten-3' : r.title.length > 1, 'lighten-2' : r.title.length == 1}" v-for="t in r.title" :key="r.title.indexOf(t)">{{t}}</span>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
<div id="ruleModal" class="modal bottom-sheet active">
|
|
<div class="modal-content">
|
|
<h4>Regel anpassen</h4>
|
|
<div class="row">
|
|
<div class="range-field col m6 s12">
|
|
<label class="active" for="rule_duration">Dauer in Minuten: {{selectedRule.Dauer}}</label>
|
|
<input id="rule_duration" type="range" v-model="selectedRule.duration" min="30" max="300" step="10">
|
|
</div>
|
|
<div class="input-field col s12 m8 l6">
|
|
<label class="active" for="shift_kind">Arten</label>
|
|
<div id="rule_arten" class="chips-initial"></div>
|
|
</div>
|
|
<div class="input-field col m8 l6 s12">
|
|
<label class="active" for="rule_titel">Titel</label>
|
|
<div id="rule_titel" class="chips-inital"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div id="shiftModal" class="modal bottom-sheet">
|
|
<div class="modal-content">
|
|
<h4>{{ selectedShift.VEventTitle || 'kein Titel'}}</h4>
|
|
<div class="row">
|
|
<div class="input-field col s6 ">
|
|
<input id="shift_name" type="text" v-model="selectedShift.Name" placeholder="kein Titel">
|
|
<label class="active" for="shift_name">Titel</label>
|
|
</div>
|
|
<div class="input-field col s6 ">
|
|
<input id="shift_kind" type="text" v-model="selectedShift.Art" placeholder="keine Art">
|
|
<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" 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">
|
|
<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" class="timepicker no-autoinit">
|
|
<label class="active" for="shift_end">Ende</label>
|
|
</div>
|
|
<div class="input-field col s6 ">
|
|
<input id="shift_desc" type="text" v-model="selectedShift.Beschreibung" placeholder="keine Beschreibung">
|
|
<label class="active" for="shift_desc">Beschreibung</label>
|
|
</div>
|
|
<div class="input-field col s6 ">
|
|
<input id="shift_location" type="text" v-model="selectedShift.Ort" placeholder="keine Ort">
|
|
<label class="active" for="shift_location">Ort</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="waves-effect btn-flat waves-green" @click="saveChanges(selectedShift)">Speichern</button>
|
|
<button class="waves-effect btn-flat waves-red" @click="discardChanges(selectedShift)">Verwerfen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="file"
|
|
name="fileInput"
|
|
id="fileInput"
|
|
@change="onFileChange"
|
|
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
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/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>
|