Merge pull request #4 from MatejaMaric/use-vueHEADv2.0.0master

Use Vue.js and Vuex.

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>