aboutsummaryrefslogtreecommitdiff
path: root/resources/js/components/reservation.vue
diff options
context:
space:
mode:
authorMateja Marić <mail@matejamaric.com>2021-03-22 15:21:40 +0100
committerGitHub <noreply@github.com>2021-03-22 15:21:40 +0100
commit6ab102bc4be617255d5eab77faebb1cada65b370 (patch)
tree09fcff5953cc6ca3702335e717ca72f865124d1c /resources/js/components/reservation.vue
parent21e9e94e76a21516edc3d1e4d0462a0ba75aafa4 (diff)
parentdb976a9fb0434df0095ea9f1b8858213d57e7535 (diff)
downloadyota-laravel-master.tar.gz
yota-laravel-master.zip
Merge pull request #4 from MatejaMaric/use-vueHEADv2.0.0master
Use Vue.js and Vuex.
Diffstat (limited to 'resources/js/components/reservation.vue')
-rw-r--r--resources/js/components/reservation.vue59
1 files changed, 59 insertions, 0 deletions
diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
new file mode 100644
index 0000000..ec430ab
--- /dev/null
+++ b/resources/js/components/reservation.vue
@@ -0,0 +1,59 @@
+<template>
+ <tr>
+ <td v-text="reservation.id"></td>
+ <td><input type="checkbox" v-model="reservation.approved"/></td>
+ <td><input type="text" v-model="reservation.operatorCall"></td>
+ <td><input type="text" v-model="reservation.qso"></td>
+ <td><input type="text" v-model="reservation.fromTime"></td>
+ <td><input type="text" v-model="reservation.toTime"></td>
+ <td><input type="text" v-model="reservation.specialCall"></td>
+ <td><input type="text" v-model="reservation.frequencies"></td>
+ <td><input type="text" v-model="reservation.modes"></td>
+ <td><input type="text" v-model="reservation.operatorName"></td>
+ <td><input type="text" v-model="reservation.operatorEmail"></td>
+ <td><input type="text" v-model="reservation.operatorPhone"></td>
+ <td>
+ <button class="btn btn-primary mr-2" @click="updateRow">Update</button>
+ <button class="btn btn-warning mr-2" @click="restoreRow">Restore</button>
+ <button class="btn btn-danger" @click="deleteRow">Delete</button>
+ </td>
+ </tr>
+</template>
+
+<script>
+export default {
+ props: [ 'reservationIndex' ],
+ data() {
+ return {
+ reservation: this.$store.getters.getDataRow(this.reservationIndex)
+ }
+ },
+ methods: {
+ updateRow() {
+ this.$store.dispatch('pushReservation', {
+ index: this.reservationIndex,
+ reservation: this.reservation
+ });
+ },
+ restoreRow() {
+ this.reservation = this.$store.getters.getDataRow(this.reservationIndex);
+ },
+ deleteRow() {
+ this.$store.dispatch('removeReservation', this.reservationIndex);
+ }
+ }
+}
+</script>
+
+<style scoped>
+td {
+ text-align: center;
+ vertical-align: middle;
+}
+input {
+ background-color: white;
+ border: 1px solid lightgray;
+ border-radius: 3px;
+ padding: 0.2em;
+}
+</style>