72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
|
const ViewDate = {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
form: false,
|
||
|
|
data: {},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
self = this;
|
||
|
|
self.refresh()
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'$route': 'refresh'
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
refresh() {
|
||
|
|
getJSON(`//${location.host}${location.pathname}api/date/`+self.$route.params.id).then(function(data){
|
||
|
|
self.data = data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
openAdd() {
|
||
|
|
self.form = true;
|
||
|
|
self.edit.id = 0;
|
||
|
|
},
|
||
|
|
send() {
|
||
|
|
if (self.edit.id === 0) {
|
||
|
|
httpJSON(`//${location.host}${location.pathname}api/date`,'POST', self.edit)
|
||
|
|
.then(function(data) {
|
||
|
|
self.form = false;
|
||
|
|
}, function (err) {
|
||
|
|
alert("unable to add new date:" + err.message);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
template: `<div class="row">
|
||
|
|
<p>
|
||
|
|
<span class="p-heading--one">Termin: {{new Date(data.date).toDateString()}} </span>
|
||
|
|
<sub>{{$route.params.id}}</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>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>`,
|
||
|
|
}
|