diff options
author | Mateja <mail@matejamaric.com> | 2021-03-17 12:59:27 +0100 |
---|---|---|
committer | Mateja <mail@matejamaric.com> | 2021-03-17 12:59:27 +0100 |
commit | 294146dd14c412e0cd6c715685bcbce0ff92b865 (patch) | |
tree | b6a8425c84df58393807b262168c1bf82ae73fea /resources/js/components | |
parent | 4e6fa681c3f8f01a44a3446f80524842a4f42274 (diff) | |
download | yota-laravel-294146dd14c412e0cd6c715685bcbce0ff92b865.tar.gz yota-laravel-294146dd14c412e0cd6c715685bcbce0ff92b865.zip |
Started work on reservation components.
Diffstat (limited to 'resources/js/components')
-rw-r--r-- | resources/js/components/reservation.vue | 29 | ||||
-rw-r--r-- | resources/js/components/reservations.vue | 49 |
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> |