89 lines
2.4 KiB
JavaScript
89 lines
2.4 KiB
JavaScript
|
const ViewDates = {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
edit: {
|
||
|
|
id: 0,
|
||
|
|
},
|
||
|
|
form: false,
|
||
|
|
list: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
self = this
|
||
|
|
self.refresh();
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'$route': 'refresh'
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
refresh() {
|
||
|
|
getJSON(`//${location.host}${location.pathname}api/date`).then(function(data){
|
||
|
|
self.list = data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
openAdd() {
|
||
|
|
self.form = true;
|
||
|
|
self.edit.id = 0;
|
||
|
|
},
|
||
|
|
send() {
|
||
|
|
if (self.edit.id === 0) {
|
||
|
|
httpJSON(`//${location.host}${location.pathname}api/date`,'POST', '"' + new Date(self.edit.date).toISOString() + '"')
|
||
|
|
.then(function(data) {
|
||
|
|
self.refresh();
|
||
|
|
self.form = false;
|
||
|
|
}, function (err) {
|
||
|
|
alert("unable to add new date:" + err.message);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
personen (date) {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
template: `<div class="row">
|
||
|
|
<p>
|
||
|
|
<span class="p-heading--one">Termine</span>
|
||
|
|
<sub>
|
||
|
|
<button v-on:click="openAdd()">New</button>
|
||
|
|
</sub>
|
||
|
|
<div class="p-modal" v-if="form">
|
||
|
|
<div class="p-modal__dialog" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
|
||
|
|
<header class="p-modal__header">
|
||
|
|
<h2 class="p-modal__title" id="modal-title">Neuer Termin</h2>
|
||
|
|
<button class="p-modal__close" aria-label="Close active modal" v-on:click="form=false">Close</button>
|
||
|
|
</header>
|
||
|
|
<p id="modal-description">
|
||
|
|
<form class="p-form p-form--stacked">
|
||
|
|
<div class="p-form__group">
|
||
|
|
<label for="full-name-stacked" class="p-form__label">Date</label>
|
||
|
|
<div class="p-form__control">
|
||
|
|
<input type="date" v-model="edit.date" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="p-button--positive u-float-right" v-on:click="send()">Add</button>
|
||
|
|
</form>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</p>
|
||
|
|
<table class="p-table--mobile-card" role="grid">
|
||
|
|
<thead>
|
||
|
|
<tr role="row">
|
||
|
|
<th scope="col" role="columnheader" aria-sort="none">Datum</th>
|
||
|
|
<th scope="col" role="columnheader" aria-sort="none" class="u-align--right">Personen</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr role="row" v-for="item in list">
|
||
|
|
<td role="rowheader" aria-label="Datum">{{ new Date(item.date).toDateString() }}</td>
|
||
|
|
<td role="gridcell" aria-label="Personen" class="u-align--right">
|
||
|
|
<router-link :to="{ name: 'date.show', params: { id: item.id }}">
|
||
|
|
{{ personen(item) }}
|
||
|
|
</router-link>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>`,
|
||
|
|
}
|