From 865bb1f30a0c4567522525fb0be9fd99bd796ecf Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sat, 13 Mar 2021 17:56:37 +0100
Subject: Adding boilerplate code.

---
 resources/js/app.js                               | 20 ++++++++++++++++++++
 resources/js/bootstrap.js                         |  2 ++
 resources/js/components/activities.vue            |  9 +++++++++
 resources/js/components/call-sign-description.vue |  9 +++++++++
 resources/js/components/call-sign-filter.vue      |  9 +++++++++
 resources/js/components/reservation.vue           |  9 +++++++++
 resources/js/components/reservations.vue          |  9 +++++++++
 resources/js/store.js                             | 15 +++++++++++++++
 8 files changed, 82 insertions(+)
 create mode 100644 resources/js/components/activities.vue
 create mode 100644 resources/js/components/call-sign-description.vue
 create mode 100644 resources/js/components/call-sign-filter.vue
 create mode 100644 resources/js/components/reservation.vue
 create mode 100644 resources/js/components/reservations.vue
 create mode 100644 resources/js/store.js

(limited to 'resources')

diff --git a/resources/js/app.js b/resources/js/app.js
index 40c55f6..6c325fa 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,21 @@
 require('./bootstrap');
+
+//import store from './store.js';
+require('./store');
+
+import callSignDesc from './components/call-sign-description.vue';
+import callSignFilter from './components/call-sign-filter.vue';
+import activities from './components/activities.vue';
+import reservation from './components/reservation.vue';
+import reservations from './components/reservations.vue';
+
+new Vue({
+  el: '#vue',
+  components: {
+    callSignDesc,
+    callSignFilter,
+    activities,
+    reservation,
+    reservations
+  }
+});
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index ffc0a2b..c3456b8 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -4,6 +4,8 @@ window.axios = require('axios');
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 window.Vue = require('vue');
+window.Vuex = require('vuex');
+Vue.use(Vuex);
 
 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..48e54f5
--- /dev/null
+++ b/resources/js/components/activities.vue
@@ -0,0 +1,9 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+  
+}
+</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..48e54f5
--- /dev/null
+++ b/resources/js/components/call-sign-description.vue
@@ -0,0 +1,9 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+  
+}
+</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..48e54f5
--- /dev/null
+++ b/resources/js/components/call-sign-filter.vue
@@ -0,0 +1,9 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+  
+}
+</script>
diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
new file mode 100644
index 0000000..48e54f5
--- /dev/null
+++ b/resources/js/components/reservation.vue
@@ -0,0 +1,9 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+  
+}
+</script>
diff --git a/resources/js/components/reservations.vue b/resources/js/components/reservations.vue
new file mode 100644
index 0000000..48e54f5
--- /dev/null
+++ b/resources/js/components/reservations.vue
@@ -0,0 +1,9 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+  
+}
+</script>
diff --git a/resources/js/store.js b/resources/js/store.js
new file mode 100644
index 0000000..e9249cc
--- /dev/null
+++ b/resources/js/store.js
@@ -0,0 +1,15 @@
+const store = new Vuex.Store({
+  state: {
+    callSign: "all",
+    data: []
+  },
+  getters: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  }
+});
-- 
cgit v1.2.3


From 2e570c76bda80def3e07ecc3478d8eb95905acbb Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sat, 13 Mar 2021 23:57:41 +0100
Subject: Work on call-sign-filter component.

---
 resources/js/app.js                          | 13 ++++++++++---
 resources/js/bootstrap.js                    | 10 +++++++---
 resources/js/components/call-sign-filter.vue | 22 ++++++++++++++++++++--
 resources/js/store.js                        | 25 +++++++++++++++++++++----
 resources/views/layouts/app.blade.php        |  3 ++-
 resources/views/pages/activities.blade.php   |  3 +++
 6 files changed, 63 insertions(+), 13 deletions(-)

(limited to 'resources')

diff --git a/resources/js/app.js b/resources/js/app.js
index 6c325fa..360abf8 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,16 +1,23 @@
 require('./bootstrap');
 
-//import store from './store.js';
-require('./store');
+import Vue from 'vue';
+
+import store from './store.js';
+
+//window.Vue = require('vue');
+//window.Vuex = require('vuex');
+//Vue.use(Vuex);
 
-import callSignDesc from './components/call-sign-description.vue';
 import callSignFilter from './components/call-sign-filter.vue';
+import callSignDesc from './components/call-sign-description.vue';
+
 import activities from './components/activities.vue';
 import reservation from './components/reservation.vue';
 import reservations from './components/reservations.vue';
 
 new Vue({
   el: '#vue',
+  store,
   components: {
     callSignDesc,
     callSignFilter,
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index c3456b8..e5e0ab6 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -3,9 +3,13 @@ window._ = require('lodash');
 window.axios = require('axios');
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
-window.Vue = require('vue');
-window.Vuex = require('vuex');
-Vue.use(Vuex);
+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/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 48e54f5..9ad202d 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -1,9 +1,27 @@
 <template>
-  
+  <select v-model="selected">
+    <option value="all">All</option>
+    <option v-for="option in options" :value="option" v-text="option"></option>
+  </select>
 </template>
 
 <script>
+import store from '../store.js';
+
 export default {
-  
+  data() {
+    return {
+      selected: store.state.selectedSign,
+      //options: store.state.callSigns
+    }
+  },
+  mounted() {
+    store.dispatch('getSigns');
+  },
+  computed: {
+    options() {
+      return store.state.callSigns;
+    }
+  }
 }
 </script>
diff --git a/resources/js/store.js b/resources/js/store.js
index e9249cc..7f5f1df 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -1,15 +1,32 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+Vue.use(Vuex);
+
 const store = new Vuex.Store({
   state: {
-    callSign: "all",
+    selectedSign: "all",
+    callSigns: [],
     data: []
   },
   getters: {
-
+    getSelectedSign(state) {
+      return state.selectedSign;
+    },
+    getSigns(state) {
+      return state.callSigns;
+    }
   },
   mutations: {
-
+    fillSigns(state, signs) {
+      state.callSigns = signs;
+    }
   },
   actions: {
-
+    getSigns(context) {
+      let data = ['test', 'TEST', 'TeSt'];
+      context.commit('fillSigns', data);
+    }
   }
 });
+
+export default store;
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..e9dc169 100644
--- a/resources/views/pages/activities.blade.php
+++ b/resources/views/pages/activities.blade.php
@@ -6,6 +6,9 @@
 
 @section('content')
 <input type="hidden" name="csrf-token" content="{{ csrf_token() }}">
+
+<call-sign-filter></call-sign-filter><br>
+
 <label for="call-sign">Filter by special callsign: </label>
 <select id="call-sign">
     <option value="all">All</option>
-- 
cgit v1.2.3


From c3a0c1a40262343e1c7e6ec9a0bba9772054ba6d Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 14 Mar 2021 01:13:32 +0100
Subject: Use computed setter in call-sign-filter component.

---
 resources/js/components/call-sign-filter.vue | 18 ++++++++++--------
 resources/js/store.js                        |  8 +++++++-
 2 files changed, 17 insertions(+), 9 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 9ad202d..658b0d2 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -9,18 +9,20 @@
 import store from '../store.js';
 
 export default {
-  data() {
-    return {
-      selected: store.state.selectedSign,
-      //options: store.state.callSigns
-    }
-  },
   mounted() {
-    store.dispatch('getSigns');
+    store.dispatch('fillSigns');
   },
   computed: {
+    selected: {
+      get() {
+        return store.getters.getSelectedSign;
+      },
+      set(value) {
+        store.dispatch('setSelectedSign', value);
+      }
+    },
     options() {
-      return store.state.callSigns;
+      return store.getters.getSigns;
     }
   }
 }
diff --git a/resources/js/store.js b/resources/js/store.js
index 7f5f1df..33b7469 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -17,12 +17,18 @@ const store = new Vuex.Store({
     }
   },
   mutations: {
+    setSelectedSign(state, sign) {
+      state.selectedSign = sign;
+    },
     fillSigns(state, signs) {
       state.callSigns = signs;
     }
   },
   actions: {
-    getSigns(context) {
+    setSelectedSign(context, sign) {
+      context.commit('setSelectedSign', sign);
+    },
+    fillSigns(context) {
       let data = ['test', 'TEST', 'TeSt'];
       context.commit('fillSigns', data);
     }
-- 
cgit v1.2.3


From 00abd5229c63b570af751406fc322e197c4f51c0 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 14 Mar 2021 14:04:28 +0100
Subject: Better import/export.

---
 resources/js/app.js                          |  4 ----
 resources/js/components/call-sign-filter.vue | 10 ++++------
 resources/js/store.js                        |  4 +---
 3 files changed, 5 insertions(+), 13 deletions(-)

(limited to 'resources')

diff --git a/resources/js/app.js b/resources/js/app.js
index 360abf8..efea4b1 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -4,10 +4,6 @@ import Vue from 'vue';
 
 import store from './store.js';
 
-//window.Vue = require('vue');
-//window.Vuex = require('vuex');
-//Vue.use(Vuex);
-
 import callSignFilter from './components/call-sign-filter.vue';
 import callSignDesc from './components/call-sign-description.vue';
 
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 658b0d2..07d339d 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -6,23 +6,21 @@
 </template>
 
 <script>
-import store from '../store.js';
-
 export default {
   mounted() {
-    store.dispatch('fillSigns');
+    this.$store.dispatch('fillSigns');
   },
   computed: {
     selected: {
       get() {
-        return store.getters.getSelectedSign;
+        return this.$store.getters.getSelectedSign;
       },
       set(value) {
-        store.dispatch('setSelectedSign', value);
+        this.$store.dispatch('setSelectedSign', value);
       }
     },
     options() {
-      return store.getters.getSigns;
+      return this.$store.getters.getSigns;
     }
   }
 }
diff --git a/resources/js/store.js b/resources/js/store.js
index 33b7469..461b34e 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 Vue.use(Vuex);
 
-const store = new Vuex.Store({
+export default new Vuex.Store({
   state: {
     selectedSign: "all",
     callSigns: [],
@@ -34,5 +34,3 @@ const store = new Vuex.Store({
     }
   }
 });
-
-export default store;
-- 
cgit v1.2.3


From 95d863c82ad630d46b2195ef04d62d45b18e68a7 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 14 Mar 2021 14:47:10 +0100
Subject: Load special signs using Axios.

---
 resources/js/components/call-sign-filter.vue | 2 +-
 resources/js/store.js                        | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 07d339d..a19b8a6 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -1,7 +1,7 @@
 <template>
   <select v-model="selected">
     <option value="all">All</option>
-    <option v-for="option in options" :value="option" v-text="option"></option>
+    <option v-for="option in options" :value="option.sign" v-text="option.sign"></option>
   </select>
 </template>
 
diff --git a/resources/js/store.js b/resources/js/store.js
index 461b34e..6ec3711 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -29,8 +29,11 @@ export default new Vuex.Store({
       context.commit('setSelectedSign', sign);
     },
     fillSigns(context) {
-      let data = ['test', 'TEST', 'TeSt'];
-      context.commit('fillSigns', data);
+      axios.get('/special-calls/show').then(response => {
+        context.commit('fillSigns', response.data);
+      }).catch(error => {
+        console.log(error);
+      });
     }
   }
 });
-- 
cgit v1.2.3


From cc323d95fa3cad2d3ba437c37c4f29f8dff854eb Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 14 Mar 2021 18:22:56 +0100
Subject: Finished call-sign-description component.

---
 resources/js/app.js                               |  4 +-
 resources/js/components/call-sign-description.vue | 45 ++++++++++++++++++++++-
 resources/js/store.js                             |  4 +-
 resources/views/pages/reserve.blade.php           | 36 ++++++++++--------
 4 files changed, 68 insertions(+), 21 deletions(-)

(limited to 'resources')

diff --git a/resources/js/app.js b/resources/js/app.js
index efea4b1..35fd04a 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -5,7 +5,7 @@ import Vue from 'vue';
 import store from './store.js';
 
 import callSignFilter from './components/call-sign-filter.vue';
-import callSignDesc from './components/call-sign-description.vue';
+import callSignDescription from './components/call-sign-description.vue';
 
 import activities from './components/activities.vue';
 import reservation from './components/reservation.vue';
@@ -15,7 +15,7 @@ new Vue({
   el: '#vue',
   store,
   components: {
-    callSignDesc,
+    callSignDescription,
     callSignFilter,
     activities,
     reservation,
diff --git a/resources/js/components/call-sign-description.vue b/resources/js/components/call-sign-description.vue
index 48e54f5..b0dca4d 100644
--- a/resources/js/components/call-sign-description.vue
+++ b/resources/js/components/call-sign-description.vue
@@ -1,9 +1,50 @@
 <template>
-  
+  <div>
+    <div class="form-group">
+        <label for="special-call">Special Callsign:</label>
+        <select class="form-control" id="special-call" v-model="selected" name="scall" required>
+          <option v-for="option in options" :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 {
-  
+  mounted() {
+    this.$store.dispatch('fillSigns').then(() => {
+      try {
+        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/store.js b/resources/js/store.js
index 6ec3711..669f0bc 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -28,8 +28,8 @@ export default new Vuex.Store({
     setSelectedSign(context, sign) {
       context.commit('setSelectedSign', sign);
     },
-    fillSigns(context) {
-      axios.get('/special-calls/show').then(response => {
+    async fillSigns(context) {
+      await axios.get('/special-calls/show').then(response => {
         context.commit('fillSigns', response.data);
       }).catch(error => {
         console.log(error);
diff --git a/resources/views/pages/reserve.blade.php b/resources/views/pages/reserve.blade.php
index 823e8b9..d0253df 100644
--- a/resources/views/pages/reserve.blade.php
+++ b/resources/views/pages/reserve.blade.php
@@ -17,24 +17,30 @@
   @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></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>
+  {{--<!-- 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> --}}
+  {{--@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 +169,5 @@
       format: 'H:i'
     });
   </script>
-  <script src="{{ asset('js/reserve.js') }}"></script>
+  {{--<script src="{{ asset('js/reserve.js') }}"></script>--}}
 @endsection
-- 
cgit v1.2.3


From 682803b3a6d39f00aaf64499e1226859e6fda801 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 14 Mar 2021 19:53:12 +0100
Subject: Add label to `call-sign-filter` component.

---
 resources/js/components/call-sign-filter.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index a19b8a6..8e3228c 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -1,8 +1,11 @@
 <template>
-  <select v-model="selected">
-    <option value="all">All</option>
-    <option v-for="option in options" :value="option.sign" v-text="option.sign"></option>
-  </select>
+  <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" :value="option.sign" v-text="option.sign"></option>
+    </select>
+  </div>
 </template>
 
 <script>
-- 
cgit v1.2.3


From 44df483d5a5307131b6fb27aa58eb518261ef4ef Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 14 Mar 2021 19:55:39 +0100
Subject: Better imported names for components.

---
 resources/js/app.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'resources')

diff --git a/resources/js/app.js b/resources/js/app.js
index 35fd04a..4fe6208 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -7,9 +7,9 @@ import store from './store.js';
 import callSignFilter from './components/call-sign-filter.vue';
 import callSignDescription from './components/call-sign-description.vue';
 
-import activities from './components/activities.vue';
-import reservation from './components/reservation.vue';
-import reservations from './components/reservations.vue';
+import activitiesView from './components/activities.vue';
+import reservationView from './components/reservation.vue';
+import reservationsView from './components/reservations.vue';
 
 new Vue({
   el: '#vue',
@@ -17,8 +17,8 @@ new Vue({
   components: {
     callSignDescription,
     callSignFilter,
-    activities,
-    reservation,
-    reservations
+    activitiesView,
+    reservationView,
+    reservationsView
   }
 });
-- 
cgit v1.2.3


From ef96b4953e0e5c89d95b6c6eb4b2fc2c3d9c9464 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 14 Mar 2021 19:59:52 +0100
Subject: Start work on `activities` component.

---
 resources/js/components/activities.vue     | 26 ++++++++++++++++++++++++--
 resources/views/pages/activities.blade.php | 28 +---------------------------
 2 files changed, 25 insertions(+), 29 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue
index 48e54f5..976516f 100644
--- a/resources/js/components/activities.vue
+++ b/resources/js/components/activities.vue
@@ -1,9 +1,31 @@
 <template>
-  
+  <div>
+    <call-sign-filter></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>
+            </tbody>
+        </table>
+    </div>
+  </div>
 </template>
 
 <script>
+import callSignFilter from './call-sign-filter.vue';
+
 export default {
-  
+  components: { callSignFilter }
 }
 </script>
diff --git a/resources/views/pages/activities.blade.php b/resources/views/pages/activities.blade.php
index e9dc169..275431a 100644
--- a/resources/views/pages/activities.blade.php
+++ b/resources/views/pages/activities.blade.php
@@ -5,33 +5,7 @@
 @section('navbar', View::make('inc.navbar'))
 
 @section('content')
-<input type="hidden" name="csrf-token" content="{{ csrf_token() }}">
 
-<call-sign-filter></call-sign-filter><br>
+<activities-view></activities-view>
 
-<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>
-
-<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
-- 
cgit v1.2.3


From 5d79c586b963b1249eb148816a70d1cec618511f Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 14 Mar 2021 21:38:01 +0100
Subject: Work on `activities` component.

It currently doesn't update on filter change.
---
 resources/js/components/activities.vue       | 26 ++++++++++++++++++++++++--
 resources/js/components/call-sign-filter.vue |  1 +
 resources/js/store.js                        | 13 +++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue
index 976516f..01e7002 100644
--- a/resources/js/components/activities.vue
+++ b/resources/js/components/activities.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div @signChanged="filterChanged()">
     <call-sign-filter></call-sign-filter>
 
     <div class="table-responsive mt-2">
@@ -16,6 +16,15 @@
                 </tr>
             </thead>
             <tbody>
+              <tr v-for="activity in activities">
+                <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>
@@ -26,6 +35,19 @@
 import callSignFilter from './call-sign-filter.vue';
 
 export default {
-  components: { callSignFilter }
+  components: { callSignFilter },
+  mounted() {
+    this.$store.dispatch('fillData');
+  },
+  computed: {
+    activities() {
+      return this.$store.getters.getData;
+    }
+  },
+  methods: {
+    filterChanged() {
+      this.$store.dispatch('fillData');
+    }
+  }
 }
 </script>
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 8e3228c..e8d22a5 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -20,6 +20,7 @@ export default {
       },
       set(value) {
         this.$store.dispatch('setSelectedSign', value);
+        this.$emit('signChanged');
       }
     },
     options() {
diff --git a/resources/js/store.js b/resources/js/store.js
index 669f0bc..852ba6b 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -14,6 +14,9 @@ export default new Vuex.Store({
     },
     getSigns(state) {
       return state.callSigns;
+    },
+    getData(state) {
+      return state.data;
     }
   },
   mutations: {
@@ -22,6 +25,9 @@ export default new Vuex.Store({
     },
     fillSigns(state, signs) {
       state.callSigns = signs;
+    },
+    setData(state, data) {
+      state.data = data;
     }
   },
   actions: {
@@ -34,6 +40,13 @@ export default new Vuex.Store({
       }).catch(error => {
         console.log(error);
       });
+    },
+    async fillData(context) {
+      await axios.post('/api/activities', {'call-sign': this.state.selectedSign}).then(response => {
+        context.commit('setData', response.data.data);
+      }).catch(error => {
+        console.log(error);
+      });
     }
   }
 });
-- 
cgit v1.2.3


From 002399d427f11646847904b11b1373204644aee2 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Mon, 15 Mar 2021 22:30:19 +0100
Subject: Use v-bind:key in v-for.

---
 resources/js/components/activities.vue            | 2 +-
 resources/js/components/call-sign-description.vue | 2 +-
 resources/js/components/call-sign-filter.vue      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue
index 01e7002..928bae6 100644
--- a/resources/js/components/activities.vue
+++ b/resources/js/components/activities.vue
@@ -16,7 +16,7 @@
                 </tr>
             </thead>
             <tbody>
-              <tr v-for="activity in activities">
+              <tr v-for="(activity, index) in activities" :key="index">
                 <td>{{ activity.operatorCall }}</td>
                 <td>{{ activity.fromTime }}</td>
                 <td>{{ activity.toTime }}</td>
diff --git a/resources/js/components/call-sign-description.vue b/resources/js/components/call-sign-description.vue
index b0dca4d..e930176 100644
--- a/resources/js/components/call-sign-description.vue
+++ b/resources/js/components/call-sign-description.vue
@@ -3,7 +3,7 @@
     <div class="form-group">
         <label for="special-call">Special Callsign:</label>
         <select class="form-control" id="special-call" v-model="selected" name="scall" required>
-          <option v-for="option in options" :value="option.sign" v-text="option.sign"></option>
+          <option v-for="option in options" :key="option.id" :value="option.sign" v-text="option.sign"></option>
         </select> 
     </div>
 
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index e8d22a5..156bddc 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -3,7 +3,7 @@
     <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" :value="option.sign" v-text="option.sign"></option>
+      <option v-for="option in options" :key="option.id" :value="option.sign" v-text="option.sign"></option>
     </select>
   </div>
 </template>
-- 
cgit v1.2.3


From 4e6fa681c3f8f01a44a3446f80524842a4f42274 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Mon, 15 Mar 2021 23:12:32 +0100
Subject: Update activities on filter change.

I had to use kebab-case for event and listen directly on child
component.
---
 resources/js/components/activities.vue       | 4 ++--
 resources/js/components/call-sign-filter.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue
index 928bae6..2f2cf03 100644
--- a/resources/js/components/activities.vue
+++ b/resources/js/components/activities.vue
@@ -1,6 +1,6 @@
 <template>
-  <div @signChanged="filterChanged()">
-    <call-sign-filter></call-sign-filter>
+  <div>
+    <call-sign-filter @sign-changed="filterChanged()"></call-sign-filter>
 
     <div class="table-responsive mt-2">
         <table class="table table-striped table-bordered" style="white-space:nowrap;">
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 156bddc..bf554bd 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -20,7 +20,7 @@ export default {
       },
       set(value) {
         this.$store.dispatch('setSelectedSign', value);
-        this.$emit('signChanged');
+        this.$emit('sign-changed');
       }
     },
     options() {
-- 
cgit v1.2.3


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(-)

(limited to 'resources')

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


From beefc8f1bf67b7dee7d6f072dbb2dcc4e86a6468 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Wed, 17 Mar 2021 17:35:39 +0100
Subject: Use `reservations` Vue component.

---
 resources/views/pages/reservations.blade.php | 94 +---------------------------
 1 file changed, 1 insertion(+), 93 deletions(-)

(limited to 'resources')

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()
-- 
cgit v1.2.3


From 1aa368a4c461ec6a8bcd7695767ceda7b09f7c28 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Wed, 17 Mar 2021 17:36:28 +0100
Subject: Small fixes in `reservations.vue`

---
 resources/js/components/reservation.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index 1e04c89..fdc14d1 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -15,19 +15,19 @@
     <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>;
+      <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'],
+  props: [ 'reservationIndex' ],
   computed: {
     reservation() {
-      return this.$store.getters.getData[reservationIndex];
+      return this.$store.getters.getData[this.reservationIndex];
     }
   }
 }
-- 
cgit v1.2.3


From 1bbc94a7e39a1ca84d8aee2d10d942375ca3f264 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Wed, 17 Mar 2021 20:15:58 +0100
Subject: Stopped using `contenteditable` in `reservation.vue`

---
 resources/js/components/reservation.vue | 35 +++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 13 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index fdc14d1..fbb5fdc 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -1,20 +1,20 @@
 <template>
   <tr>
-    <td>{{ reservation.id }}</td>
-    <td>
+    <td class="align-middle text-center">{{ reservation.id }}</td>
+    <td class="align-middle text-center">
       <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>
+    <td class="align-middle"><input type="text" v-model="reservation.operatorCall"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.qso"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.fromTime"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.toTime"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.specialCall"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.frequencies"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.modes"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.operatorName"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.operatorEmail"></td>
+    <td class="align-middle"><input type="text" v-model="reservation.operatorCall"></td>
+    <td class="align-middle">
       <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>
@@ -32,3 +32,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+input {
+  background-color: white;
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  padding: 0.2em;
+}
+</style>
-- 
cgit v1.2.3


From 074bff2e79d91610a936f329ac8f603049c3b334 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Thu, 18 Mar 2021 19:37:53 +0100
Subject: Better styling for `reservation.vue` component.

---
 resources/js/components/reservation.vue | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index fbb5fdc..85348bd 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -1,20 +1,18 @@
 <template>
   <tr>
-    <td class="align-middle text-center">{{ reservation.id }}</td>
-    <td class="align-middle text-center">
-      <input type="checkbox" :checked="reservation.approved"/>
-    </td>
-    <td class="align-middle"><input type="text" v-model="reservation.operatorCall"></td>
-    <td class="align-middle"><input type="text" v-model="reservation.qso"></td>
-    <td class="align-middle"><input type="text" v-model="reservation.fromTime"></td>
-    <td class="align-middle"><input type="text" v-model="reservation.toTime"></td>
-    <td class="align-middle"><input type="text" v-model="reservation.specialCall"></td>
-    <td class="align-middle"><input type="text" v-model="reservation.frequencies"></td>
-    <td class="align-middle"><input type="text" v-model="reservation.modes"></td>
-    <td class="align-middle"><input type="text" v-model="reservation.operatorName"></td>
-    <td class="align-middle"><input type="text" v-model="reservation.operatorEmail"></td>
-    <td class="align-middle"><input type="text" v-model="reservation.operatorCall"></td>
-    <td class="align-middle">
+    <td v-text="reservation.id"></td>
+    <td><input type="checkbox" :checked="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.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>
@@ -34,6 +32,10 @@ export default {
 </script>
 
 <style scoped>
+td {
+  text-align: center;
+  vertical-align: middle;
+}
 input {
   background-color: white;
   border: 1px solid lightgray;
-- 
cgit v1.2.3


From 1306d59960fadbd5637960e60b9a00f547a1aeb9 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Fri, 19 Mar 2021 14:16:32 +0100
Subject: Work on `reservation.vue` component:

- Use data properties instead of computed properties
- Use v-model for checkbox
---
 resources/js/components/reservation.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index 85348bd..aa8b209 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -1,7 +1,7 @@
 <template>
   <tr>
     <td v-text="reservation.id"></td>
-    <td><input type="checkbox" :checked="reservation.approved"/></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>
@@ -23,9 +23,9 @@
 <script>
 export default {
   props: [ 'reservationIndex' ],
-  computed: {
-    reservation() {
-      return this.$store.getters.getData[this.reservationIndex];
+  data() {
+    return {
+      reservation: this.$store.getters.getData[this.reservationIndex]
     }
   }
 }
-- 
cgit v1.2.3


From 2f5e8adb8d310690db54aca55382f4733e337a85 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sat, 20 Mar 2021 19:42:18 +0100
Subject: Better names for Vuex actions and mutations.

---
 resources/js/components/activities.vue            |  4 ++--
 resources/js/components/call-sign-description.vue |  2 +-
 resources/js/components/call-sign-filter.vue      |  2 +-
 resources/js/components/reservations.vue          |  4 ++--
 resources/js/store.js                             | 10 +++++-----
 5 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue
index 2f2cf03..dd22c7f 100644
--- a/resources/js/components/activities.vue
+++ b/resources/js/components/activities.vue
@@ -37,7 +37,7 @@ import callSignFilter from './call-sign-filter.vue';
 export default {
   components: { callSignFilter },
   mounted() {
-    this.$store.dispatch('fillData');
+    this.$store.dispatch('pullActivities');
   },
   computed: {
     activities() {
@@ -46,7 +46,7 @@ export default {
   },
   methods: {
     filterChanged() {
-      this.$store.dispatch('fillData');
+      this.$store.dispatch('pullActivities');
     }
   }
 }
diff --git a/resources/js/components/call-sign-description.vue b/resources/js/components/call-sign-description.vue
index e930176..30cd37d 100644
--- a/resources/js/components/call-sign-description.vue
+++ b/resources/js/components/call-sign-description.vue
@@ -18,7 +18,7 @@
 <script>
 export default {
   mounted() {
-    this.$store.dispatch('fillSigns').then(() => {
+    this.$store.dispatch('pullSigns').then(() => {
       try {
         this.$store.dispatch('setSelectedSign', this.$store.getters.getSigns[0].sign);
       }
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index bf554bd..16eaae8 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -11,7 +11,7 @@
 <script>
 export default {
   mounted() {
-    this.$store.dispatch('fillSigns');
+    this.$store.dispatch('pullSigns');
   },
   computed: {
     selected: {
diff --git a/resources/js/components/reservations.vue b/resources/js/components/reservations.vue
index 278dfa4..8849474 100644
--- a/resources/js/components/reservations.vue
+++ b/resources/js/components/reservations.vue
@@ -38,7 +38,7 @@ import reservationView from './reservation.vue';
 export default {
   components: { callSignFilter, reservationView },
   mounted() {
-    this.$store.dispatch('fillReservations');
+    this.$store.dispatch('pullReservations');
   },
   computed: {
     reservations() {
@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     filterChanged() {
-      this.$store.dispatch('fillReservations');
+      this.$store.dispatch('pullReservations');
     }
   }
 }
diff --git a/resources/js/store.js b/resources/js/store.js
index 4ca0dc3..345b866 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -23,7 +23,7 @@ export default new Vuex.Store({
     setSelectedSign(state, sign) {
       state.selectedSign = sign;
     },
-    fillSigns(state, signs) {
+    setSigns(state, signs) {
       state.callSigns = signs;
     },
     setData(state, data) {
@@ -34,21 +34,21 @@ export default new Vuex.Store({
     setSelectedSign(context, sign) {
       context.commit('setSelectedSign', sign);
     },
-    async fillSigns(context) {
+    async pullSigns(context) {
       await axios.get('/special-calls/show').then(response => {
-        context.commit('fillSigns', response.data);
+        context.commit('setSigns', response.data);
       }).catch(error => {
         console.log(error);
       });
     },
-    async fillData(context) {
+    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 fillReservations(context) {
+    async pullReservations(context) {
       await axios.post('/special-calls/reservations', {'call-sign': this.state.selectedSign}).then(response => {
         context.commit('setData', response.data.data);
       }).catch(error => {
-- 
cgit v1.2.3


From 5a30e103893c05d138a80ed18d65a948aea973e6 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sat, 20 Mar 2021 20:33:17 +0100
Subject: Fix operatorPhone and add click methods.

---
 resources/js/components/reservation.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index aa8b209..d733c9d 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -11,11 +11,11 @@
     <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.operatorCall"></td>
+    <td><input type="text" v-model="reservation.operatorPhone"></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>
+      <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>
@@ -27,6 +27,17 @@ export default {
     return {
       reservation: this.$store.getters.getData[this.reservationIndex]
     }
+  },
+  methods: {
+    updateRow() {
+
+    },
+    restoreRow() {
+
+    },
+    deleteRow() {
+
+    }
   }
 }
 </script>
-- 
cgit v1.2.3


From 09ee04d39911f169457567c869d732a11387651a Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sat, 20 Mar 2021 22:47:33 +0100
Subject: Use Lodash cloneDeep for `reservation.vue` component.

---
 resources/js/components/reservation.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index d733c9d..5389e1a 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -25,15 +25,18 @@ export default {
   props: [ 'reservationIndex' ],
   data() {
     return {
-      reservation: this.$store.getters.getData[this.reservationIndex]
+      reservation: {}
     }
   },
+  mounted() {
+    this.reservation = _.cloneDeep(this.$store.getters.getData[this.reservationIndex]);
+  },
   methods: {
     updateRow() {
 
     },
     restoreRow() {
-
+      this.reservation = _.cloneDeep(this.$store.getters.getData[this.reservationIndex]);
     },
     deleteRow() {
 
-- 
cgit v1.2.3


From 2809ccf7272d4b77c5eb3f3d6599143dc4678d70 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 21 Mar 2021 18:05:38 +0100
Subject: Work on `reservation.vue` component.

- Move Lodash cloneDeep to Vuex store.
---
 resources/js/components/reservation.vue | 14 +++++++-------
 resources/js/store.js                   | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 7 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index 5389e1a..ec430ab 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -25,21 +25,21 @@ export default {
   props: [ 'reservationIndex' ],
   data() {
     return {
-      reservation: {}
+      reservation: this.$store.getters.getDataRow(this.reservationIndex)
     }
   },
-  mounted() {
-    this.reservation = _.cloneDeep(this.$store.getters.getData[this.reservationIndex]);
-  },
   methods: {
     updateRow() {
-
+      this.$store.dispatch('pushReservation', {
+        index: this.reservationIndex,
+        reservation: this.reservation
+      });
     },
     restoreRow() {
-      this.reservation = _.cloneDeep(this.$store.getters.getData[this.reservationIndex]);
+      this.reservation = this.$store.getters.getDataRow(this.reservationIndex);
     },
     deleteRow() {
-
+      this.$store.dispatch('removeReservation', this.reservationIndex);
     }
   }
 }
diff --git a/resources/js/store.js b/resources/js/store.js
index 345b866..e0c4383 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -17,6 +17,9 @@ export default new Vuex.Store({
     },
     getData(state) {
       return state.data;
+    },
+    getDataRow(state) {
+      return (index) => _.cloneDeep(state.data[index]);
     }
   },
   mutations: {
@@ -28,6 +31,12 @@ export default new Vuex.Store({
     },
     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: {
@@ -54,6 +63,15 @@ export default new Vuex.Store({
       }).catch(error => {
         console.log(error);
       });
+    },
+    async pushReservation(context, data) {
+      context.commit('setDataRow', {
+        index: data.index,
+        data: data.reservation
+      });
+    },
+    async removeReservation(context, index) {
+      context.commit('removeDataRow', index);
     }
   }
 });
-- 
cgit v1.2.3


From 668b6005f0ce55f1c9c8d2cdcdf48903d6207dc7 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 21 Mar 2021 19:44:08 +0100
Subject: api: update and delete reservations

---
 resources/js/store.js | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

(limited to 'resources')

diff --git a/resources/js/store.js b/resources/js/store.js
index e0c4383..117db93 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -65,13 +65,32 @@ export default new Vuex.Store({
       });
     },
     async pushReservation(context, data) {
-      context.commit('setDataRow', {
-        index: data.index,
-        data: data.reservation
+      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) {
-      context.commit('removeDataRow', 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!');
+        });
+      }
     }
   }
 });
-- 
cgit v1.2.3


From ce6dbf4d6f1340a02899faa3c4984b3493270ce8 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 21 Mar 2021 20:31:12 +0100
Subject: Limit reservations table height to fit on desktop screens.

---
 resources/js/components/reservations.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'resources')

diff --git a/resources/js/components/reservations.vue b/resources/js/components/reservations.vue
index 8849474..0c420b8 100644
--- a/resources/js/components/reservations.vue
+++ b/resources/js/components/reservations.vue
@@ -52,3 +52,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+@media only screen and (min-width:961px) {
+  .table-responsive {
+    max-height: 80vh;
+  }
+}
+</style>
-- 
cgit v1.2.3


From 3d4617bac822b54c04eb2f19509aa77e8c7a3bfd Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 21 Mar 2021 21:18:09 +0100
Subject: Add descriptions to activities call sign filter.

---
 resources/js/components/activities.vue       |  2 +-
 resources/js/components/call-sign-filter.vue | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'resources')

diff --git a/resources/js/components/activities.vue b/resources/js/components/activities.vue
index dd22c7f..1b1057c 100644
--- a/resources/js/components/activities.vue
+++ b/resources/js/components/activities.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <call-sign-filter @sign-changed="filterChanged()"></call-sign-filter>
+    <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;">
diff --git a/resources/js/components/call-sign-filter.vue b/resources/js/components/call-sign-filter.vue
index 16eaae8..0ba8b4d 100644
--- a/resources/js/components/call-sign-filter.vue
+++ b/resources/js/components/call-sign-filter.vue
@@ -5,11 +5,18 @@
       <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');
   },
@@ -25,6 +32,12 @@ export default {
     },
     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 '';
     }
   }
 }
-- 
cgit v1.2.3


From 4826b8d444db4f95baeead504fb816e7322ff026 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 21 Mar 2021 23:11:56 +0100
Subject: Add error handling to `call-sign-description.vue` component.

---
 resources/js/components/call-sign-description.vue | 10 ++++++++--
 resources/views/pages/reserve.blade.php           | 23 +++--------------------
 2 files changed, 11 insertions(+), 22 deletions(-)

(limited to 'resources')

diff --git a/resources/js/components/call-sign-description.vue b/resources/js/components/call-sign-description.vue
index 30cd37d..7ab8b64 100644
--- a/resources/js/components/call-sign-description.vue
+++ b/resources/js/components/call-sign-description.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="form-group">
         <label for="special-call">Special Callsign:</label>
-        <select class="form-control" id="special-call" v-model="selected" name="scall" required>
+        <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>
@@ -17,10 +17,16 @@
 
 <script>
 export default {
+  props: [ 'name', 'old', 'isInvalid' ],
   mounted() {
     this.$store.dispatch('pullSigns').then(() => {
       try {
-        this.$store.dispatch('setSelectedSign', this.$store.getters.getSigns[0].sign);
+        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!');
diff --git a/resources/views/pages/reserve.blade.php b/resources/views/pages/reserve.blade.php
index d0253df..17cab9a 100644
--- a/resources/views/pages/reserve.blade.php
+++ b/resources/views/pages/reserve.blade.php
@@ -18,29 +18,13 @@
 <form action="{{ route('reserve') }}" method="POST">
   @csrf      
 
-  <call-sign-description></call-sign-description>
+  <!-- SPECIAL CALL -->
+  <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
 
-  {{--<!-- 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> --}}
-  {{--@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>
@@ -169,5 +153,4 @@
       format: 'H:i'
     });
   </script>
-  {{--<script src="{{ asset('js/reserve.js') }}"></script>--}}
 @endsection
-- 
cgit v1.2.3


From db976a9fb0434df0095ea9f1b8858213d57e7535 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Mon, 22 Mar 2021 14:35:48 +0100
Subject: Remove unneeded imports.

---
 resources/js/app.js | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'resources')

diff --git a/resources/js/app.js b/resources/js/app.js
index 4fe6208..b5fbbbf 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -4,11 +4,9 @@ import Vue from 'vue';
 
 import store from './store.js';
 
-import callSignFilter from './components/call-sign-filter.vue';
 import callSignDescription from './components/call-sign-description.vue';
 
 import activitiesView from './components/activities.vue';
-import reservationView from './components/reservation.vue';
 import reservationsView from './components/reservations.vue';
 
 new Vue({
@@ -16,9 +14,7 @@ new Vue({
   store,
   components: {
     callSignDescription,
-    callSignFilter,
     activitiesView,
-    reservationView,
     reservationsView
   }
 });
-- 
cgit v1.2.3