diff options
Diffstat (limited to 'resources/js/components')
-rw-r--r-- | resources/js/components/activities.vue | 53 | ||||
-rw-r--r-- | resources/js/components/call-sign-description.vue | 56 | ||||
-rw-r--r-- | resources/js/components/call-sign-filter.vue | 44 | ||||
-rw-r--r-- | resources/js/components/reservation.vue | 59 | ||||
-rw-r--r-- | resources/js/components/reservations.vue | 62 |
5 files changed, 274 insertions, 0 deletions
diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue new file mode 100644 index 0000000..1b1057c --- /dev/null +++ b/resources/js/components/activities.vue @@ -0,0 +1,53 @@ +<template> + <div> + <call-sign-filter :showDescriptions="true" @sign-changed="filterChanged()"></call-sign-filter> + + <div class="table-responsive mt-2"> + <table class="table table-striped table-bordered" style="white-space:nowrap;"> + <thead class="thead-dark"> + <tr> + <th>Operator</th> + <th>From</th> + <th>To</th> + <th>Special Callsign</th> + <th>Frequencies</th> + <th>Modes</th> + <th>QSO</th> + </tr> + </thead> + <tbody> + <tr v-for="(activity, index) in activities" :key="index"> + <td>{{ activity.operatorCall }}</td> + <td>{{ activity.fromTime }}</td> + <td>{{ activity.toTime }}</td> + <td>{{ activity.specialCall }}</td> + <td>{{ activity.frequencies }}</td> + <td>{{ activity.modes }}</td> + <td>{{ activity.qso }}</td> + </tr> + </tbody> + </table> + </div> + </div> +</template> + +<script> +import callSignFilter from './call-sign-filter.vue'; + +export default { + components: { callSignFilter }, + mounted() { + this.$store.dispatch('pullActivities'); + }, + computed: { + activities() { + return this.$store.getters.getData; + } + }, + methods: { + filterChanged() { + this.$store.dispatch('pullActivities'); + } + } +} +</script> diff --git a/resources/js/components/call-sign-description.vue b/resources/js/components/call-sign-description.vue new file mode 100644 index 0000000..7ab8b64 --- /dev/null +++ b/resources/js/components/call-sign-description.vue @@ -0,0 +1,56 @@ +<template> + <div> + <div class="form-group"> + <label for="special-call">Special Callsign:</label> + <select class="form-control" :class="{ 'is-invalid': isInvalid }" id="special-call" v-model="selected" :name="name" required> + <option v-for="option in options" :key="option.id" :value="option.sign" v-text="option.sign"></option> + </select> + </div> + + <div class="card mb-3"> + <div class="card-body pb-1"> + <div class="card-text" v-html="description"></div> + </div> + </div> + </div> +</template> + +<script> +export default { + props: [ 'name', 'old', 'isInvalid' ], + mounted() { + this.$store.dispatch('pullSigns').then(() => { + try { + if (this.old) { + this.$store.dispatch('setSelectedSign', this.old); + } + else { + this.$store.dispatch('setSelectedSign', this.$store.getters.getSigns[0].sign); + } + } + catch { + console.log('No call signs!'); + } + }); + }, + computed: { + options() { + return this.$store.getters.getSigns; + }, + selected: { + get() { + return this.$store.getters.getSelectedSign; + }, + set(value) { + this.$store.dispatch('setSelectedSign', value); + } + }, + description() { + for (let i = 0; i < this.options.length; i++) + if (this.options[i].sign === this.selected) + return this.options[i].description; + return ''; + } + } +} +</script> diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue new file mode 100644 index 0000000..0ba8b4d --- /dev/null +++ b/resources/js/components/call-sign-filter.vue @@ -0,0 +1,44 @@ +<template> + <div> + <label for="call-sign">Filter by special callsign: </label> + <select id="call-sign" v-model="selected"> + <option value="all">All</option> + <option v-for="option in options" :key="option.id" :value="option.sign" v-text="option.sign"></option> + </select> + + <div class="card mb-3" v-if="showDescriptions && (selected !== 'all')"> + <div class="card-body pb-1"> + <div class="card-text" v-html="description"></div> + </div> + </div> + </div> +</template> + +<script> +export default { + props: ['showDescriptions'], + mounted() { + this.$store.dispatch('pullSigns'); + }, + computed: { + selected: { + get() { + return this.$store.getters.getSelectedSign; + }, + set(value) { + this.$store.dispatch('setSelectedSign', value); + this.$emit('sign-changed'); + } + }, + options() { + return this.$store.getters.getSigns; + }, + description() { + for (let i = 0; i < this.options.length; i++) + if (this.options[i].sign === this.selected) + return this.options[i].description; + return ''; + } + } +} +</script> 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> diff --git a/resources/js/components/reservations.vue b/resources/js/components/reservations.vue new file mode 100644 index 0000000..0c420b8 --- /dev/null +++ b/resources/js/components/reservations.vue @@ -0,0 +1,62 @@ +<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('pullReservations'); + }, + computed: { + reservations() { + return this.$store.getters.getData; + } + }, + methods: { + filterChanged() { + this.$store.dispatch('pullReservations'); + } + } +} +</script> + +<style scoped> +@media only screen and (min-width:961px) { + .table-responsive { + max-height: 80vh; + } +} +</style> |