diff options
author | Mateja Marić <mail@matejamaric.com> | 2021-03-22 15:21:40 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-22 15:21:40 +0100 |
commit | 6ab102bc4be617255d5eab77faebb1cada65b370 (patch) | |
tree | 09fcff5953cc6ca3702335e717ca72f865124d1c /resources | |
parent | 21e9e94e76a21516edc3d1e4d0462a0ba75aafa4 (diff) | |
parent | db976a9fb0434df0095ea9f1b8858213d57e7535 (diff) | |
download | yota-laravel-2.0.0.tar.gz yota-laravel-2.0.0.zip |
Use Vue.js and Vuex.
Diffstat (limited to 'resources')
-rw-r--r-- | resources/js/app.js | 19 | ||||
-rw-r--r-- | resources/js/bootstrap.js | 8 | ||||
-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 | ||||
-rw-r--r-- | resources/js/store.js | 96 | ||||
-rw-r--r-- | resources/views/layouts/app.blade.php | 3 | ||||
-rw-r--r-- | resources/views/pages/activities.blade.php | 25 | ||||
-rw-r--r-- | resources/views/pages/reservations.blade.php | 94 | ||||
-rw-r--r-- | resources/views/pages/reserve.blade.php | 17 |
12 files changed, 403 insertions, 133 deletions
diff --git a/resources/js/app.js b/resources/js/app.js index 40c55f6..b5fbbbf 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1 +1,20 @@ require('./bootstrap'); + +import Vue from 'vue'; + +import store from './store.js'; + +import callSignDescription from './components/call-sign-description.vue'; + +import activitiesView from './components/activities.vue'; +import reservationsView from './components/reservations.vue'; + +new Vue({ + el: '#vue', + store, + components: { + callSignDescription, + activitiesView, + reservationsView + } +}); diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js index ffc0a2b..e5e0ab6 100644 --- a/resources/js/bootstrap.js +++ b/resources/js/bootstrap.js @@ -3,7 +3,13 @@ window._ = require('lodash'); window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; -window.Vue = require('vue'); +let token = document.querySelector('meta[name="csrf-token"]'); + +if (token) { + window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; +} else { + console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); +} window.$ = window.jQuery = require('jquery'); window.Popper = require('popper.js'); 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> diff --git a/resources/js/store.js b/resources/js/store.js new file mode 100644 index 0000000..117db93 --- /dev/null +++ b/resources/js/store.js @@ -0,0 +1,96 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +Vue.use(Vuex); + +export default new Vuex.Store({ + state: { + selectedSign: "all", + callSigns: [], + data: [] + }, + getters: { + getSelectedSign(state) { + return state.selectedSign; + }, + getSigns(state) { + return state.callSigns; + }, + getData(state) { + return state.data; + }, + getDataRow(state) { + return (index) => _.cloneDeep(state.data[index]); + } + }, + mutations: { + setSelectedSign(state, sign) { + state.selectedSign = sign; + }, + setSigns(state, signs) { + state.callSigns = signs; + }, + setData(state, data) { + state.data = data; + }, + setDataRow(state, row) { + state.data[row.index] = _.cloneDeep(row.data); + }, + removeDataRow(state, index) { + state.data.splice(index, 1); + } + }, + actions: { + setSelectedSign(context, sign) { + context.commit('setSelectedSign', sign); + }, + async pullSigns(context) { + await axios.get('/special-calls/show').then(response => { + context.commit('setSigns', response.data); + }).catch(error => { + console.log(error); + }); + }, + async pullActivities(context) { + await axios.post('/api/activities', {'call-sign': this.state.selectedSign}).then(response => { + context.commit('setData', response.data.data); + }).catch(error => { + console.log(error); + }); + }, + async pullReservations(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); + }); + }, + async pushReservation(context, data) { + await axios.post('/api/reservations', { + action: 'update', + ...data.reservation + }).then(() => { + context.commit('setDataRow', { + index: data.index, + data: data.reservation + }); + }).catch(error => { + console.log(error); + alert("Couldn't update reservation! Bad data!"); + }); + }, + async removeReservation(context, index) { + let data = { + action: 'delete', + ...this.state.data[index] + }; + if (confirm(`Are you sure you want to delete reservation #${data.id} made by ${data.operatorCall}?`) === true) { + await axios.post('/api/reservations', data).then(() => { + context.commit('removeDataRow', index); + }).catch(error => { + console.log(error); + alert('Unable to remove reservation!'); + }); + } + } + } +}); diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 79235ac..0a8bbda 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css"> @yield('styles') <title>YOTA - @yield('title')</title> @@ -10,7 +11,7 @@ <body> @yield('navbar', View::make('inc.navbar')) @yield('jumbotron') - <div class="container pt-3"> + <div id="vue" class="container pt-3"> @yield('content') </div> <script src="{{ mix('js/manifest.js') }}"></script> diff --git a/resources/views/pages/activities.blade.php b/resources/views/pages/activities.blade.php index 7e7a0ed..275431a 100644 --- a/resources/views/pages/activities.blade.php +++ b/resources/views/pages/activities.blade.php @@ -5,30 +5,7 @@ @section('navbar', View::make('inc.navbar')) @section('content') -<input type="hidden" name="csrf-token" content="{{ csrf_token() }}"> -<label for="call-sign">Filter by special callsign: </label> -<select id="call-sign"> - <option value="all">All</option> - @if (count($signs) > 0) - @foreach ($signs as $sign) - <option value="{{ $sign->sign }}">{{ $sign->sign }}</option> - @endforeach - @endif -</select> -<div id="sign-desc-div"></div> +<activities-view></activities-view> -<div class="table-responsive mt-2"> - <table id="ajax-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> - </tbody> - </table> -</div> @endsection() - -@section('scripts') - <script src="{{ asset('js/activities.js') }}"></script> -@endsection diff --git a/resources/views/pages/reservations.blade.php b/resources/views/pages/reservations.blade.php index addc9a9..475e5d7 100644 --- a/resources/views/pages/reservations.blade.php +++ b/resources/views/pages/reservations.blade.php @@ -4,98 +4,6 @@ @section('navbar', View::make('inc.navbar')) -@section('scripts') - <script src="{{ asset('js/reservations.js') }}"></script> -@endsection - @section('content') -<input type="hidden" name="csrf-token" content="{{ csrf_token() }}"> -<label for="call-sign">Filter by special callsign: </label> -<select id="call-sign"> - <option value="all">All</option> - @if (count($signs) > 0) - @foreach ($signs as $sign) - <option value="{{ $sign->sign }}">{{ $sign->sign }}</option> - @endforeach - @endif -</select> -<div id="notice" class="float-right font-weight-bold"></div> - -<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> - </tbody> - </table> -</div> -{{--@if (count($data) > 0)--}} -{{--<div class="table-responsive">--}} - {{--<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>Frequencies</th>--}} - {{--<th>Modes</th>--}} - {{--<th>Special Callsign</th>--}} - {{--<th>Operator Name</th>--}} - {{--<th>Operator Email</th>--}} - {{--<th>Operator Phone</th>--}} - {{--<th>Actions</th>--}} - {{--</tr>--}} - {{--</thead>--}} - {{--<tbody>--}} - {{--@foreach ($data as $row)--}} - {{--<tr>--}} - {{--<td class="align-middle">{{ $row->id }}</td>--}} - {{--@if ($row->approved)--}} - {{--<td class="align-middle"><input type="checkbox" checked></td> --}} - {{--@else--}} - {{--<td class="align-middle"><input type="checkbox"></td> --}} - {{--@endif--}} - {{--<td class="align-middle">{{ $row->operatorCall }}</td>--}} - {{--<td class="align-middle">{{ $row->qso }}</td>--}} - {{--<td class="align-middle">{{ $row->fromTime }}</td>--}} - {{--<td class="align-middle">{{ $row->toTime }}</td>--}} - {{--<td class="align-middle">{{ $row->frequencies }}</td>--}} - {{--<td class="align-middle">{{ $row->modes }}</td>--}} - {{--<td class="align-middle">{{ $row->specialCall }}</td>--}} - {{--<td class="align-middle">{{ $row->operatorName }}</td>--}} - {{--<td class="align-middle">{{ $row->operatorEmail }}</td>--}} - {{--<td class="align-middle">{{ $row->operatorPhone }}</td>--}} - {{--<td>--}} - {{--<button class="btn btn-primary">Update</button>--}} - {{--<button class="btn btn-warning">Restore</button>--}} - {{--<button class="btn btn-danger">Delete</button>--}} - {{--</td>--}} - {{--</tr>--}} - {{--@endforeach--}} - {{--</tbody>--}} - {{--</table>--}} -{{--</div>--}} -{{--@else--}} -{{--<div class="text-center">--}} - {{--<strong>There are currently no reservations.</strong>--}} -{{--</div>--}} -{{--@endif--}} + <reservations-view></reservations-view> @endsection() diff --git a/resources/views/pages/reserve.blade.php b/resources/views/pages/reserve.blade.php index 823e8b9..17cab9a 100644 --- a/resources/views/pages/reserve.blade.php +++ b/resources/views/pages/reserve.blade.php @@ -17,24 +17,14 @@ @endif <form action="{{ route('reserve') }}" method="POST"> @csrf + <!-- SPECIAL CALL --> -<div class="form-group"> - <label for="special-call">Special Callsign:</label> - <select class="form-control @error('scall') is-invalid @enderror" id="special-call" name="scall" required> - @foreach ($signs as $sign) - <option value="{{ $sign->sign }}" {{ old('scall') == $sign->sign ? 'selected' : '' }}>{{ $sign->sign }}</option> - @endforeach - </select> + <call-sign-description name="scall" old="{{ old('scall') }}" @error('scall') is-invalid="true" @enderror > + </call-sign-description> @error('scall') <div class="alert alert-danger mt-2">{{ $message }}</div> @enderror -</div> -<div class="card mb-3"> - <div class="card-body pb-1"> - <div class="card-text" id="call-desc"></div> - </div> -</div> @error('time') <div class="alert alert-danger mt-2">{{ $message }}</div> @@ -163,5 +153,4 @@ format: 'H:i' }); </script> - <script src="{{ asset('js/reserve.js') }}"></script> @endsection |