From 294146dd14c412e0cd6c715685bcbce0ff92b865 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Wed, 17 Mar 2021 12:59:27 +0100
Subject: Started work on reservation components.
---
resources/js/components/reservation.vue | 29 +++++++++++++++++--
resources/js/components/reservations.vue | 49 ++++++++++++++++++++++++++++++--
resources/js/store.js | 7 +++++
3 files changed, 81 insertions(+), 4 deletions(-)
diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index 48e54f5..1e04c89 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -1,9 +1,34 @@
<template>
-
+ <tr>
+ <td>{{ reservation.id }}</td>
+ <td>
+ <input type="checkbox" :checked="reservation.approved"/>
+ </td>
+ <td contenteditable="true">{{ reservation.operatorCall }}</td>
+ <td contenteditable="true">{{ reservation.qso }}</td>
+ <td contenteditable="true">{{ reservation.fromTime }}</td>
+ <td contenteditable="true">{{ reservation.toTime }}</td>
+ <td contenteditable="true">{{ reservation.specialCall }}</td>
+ <td contenteditable="true">{{ reservation.frequencies }}</td>
+ <td contenteditable="true">{{ reservation.modes }}</td>
+ <td contenteditable="true">{{ reservation.operatorName }}</td>
+ <td contenteditable="true">{{ reservation.operatorEmail }}</td>
+ <td contenteditable="true">{{ reservation.operatorCall }}</td>
+ <td>
+ <button class="btn btn-primary mr-2">Update</button>;
+ <button class="btn btn-warning mr-2">Restore</button>;
+ <button class="btn btn-danger">Delete</button>;
+ </td>
+ </tr>
</template>
<script>
export default {
-
+ props: ['reservationIndex'],
+ computed: {
+ reservation() {
+ return this.$store.getters.getData[reservationIndex];
+ }
+ }
}
</script>
diff --git a/resources/js/components/reservations.vue b/resources/js/components/reservations.vue
index 48e54f5..278dfa4 100644
--- a/resources/js/components/reservations.vue
+++ b/resources/js/components/reservations.vue
@@ -1,9 +1,54 @@
<template>
-
+ <div>
+ <call-sign-filter @sign-changed="filterChanged()"></call-sign-filter>
+
+ <div class="table-responsive mt-2">
+ <table id="ajax-table" class="table table-striped table-bordered" style="white-space:nowrap;"><!-- table-hover -->
+ <thead class="thead-dark">
+ <tr>
+ <th>ID</th>
+ <th>Approved</th>
+ <th>Operator Callsign</th>
+ <th>QSO</th>
+ <th>From</th>
+ <th>To</th>
+ <th>Special Callsign</th>
+ <th>Frequencies</th>
+ <th>Modes</th>
+ <th>Operator Name</th>
+ <th>Operator Email</th>
+ <th>Operator Phone</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <reservation-view v-for="(reservation, index) in reservations"
+ :key="reservation.id" :reservation-index="index">
+ </reservation-view>
+ </tbody>
+ </table>
+ </div>
+ </div>
</template>
<script>
+import callSignFilter from './call-sign-filter.vue';
+import reservationView from './reservation.vue';
+
export default {
-
+ components: { callSignFilter, reservationView },
+ mounted() {
+ this.$store.dispatch('fillReservations');
+ },
+ computed: {
+ reservations() {
+ return this.$store.getters.getData;
+ }
+ },
+ methods: {
+ filterChanged() {
+ this.$store.dispatch('fillReservations');
+ }
+ }
}
</script>
diff --git a/resources/js/store.js b/resources/js/store.js
index 852ba6b..4ca0dc3 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -47,6 +47,13 @@ export default new Vuex.Store({
}).catch(error => {
console.log(error);
});
+ },
+ async fillReservations(context) {
+ await axios.post('/special-calls/reservations', {'call-sign': this.state.selectedSign}).then(response => {
+ context.commit('setData', response.data.data);
+ }).catch(error => {
+ console.log(error);
+ });
}
}
});
--
cgit v1.2.3