aboutsummaryrefslogtreecommitdiff
path: root/resources/js/components
diff options
context:
space:
mode:
Diffstat (limited to 'resources/js/components')
-rw-r--r--resources/js/components/reservation.vue29
-rw-r--r--resources/js/components/reservations.vue49
2 files changed, 74 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>