2 files changed, 74 insertions, 4 deletions
diff --git a/resources/js/components/reservation.vue b/resources/js/components/reservation.vue
index 48e54f5..1e04c89 100644
--- a/resources/js/components/reservation.vue
+++ b/resources/js/components/reservation.vue
@@ -1,9 +1,34 @@
 <template>
-  
+  <tr>
+    <td>{{ reservation.id }}</td>
+    <td>
+      <input type="checkbox" :checked="reservation.approved"/>
+    </td>
+    <td contenteditable="true">{{ reservation.operatorCall }}</td>
+    <td contenteditable="true">{{ reservation.qso }}</td>
+    <td contenteditable="true">{{ reservation.fromTime }}</td>
+    <td contenteditable="true">{{ reservation.toTime }}</td>
+    <td contenteditable="true">{{ reservation.specialCall }}</td>
+    <td contenteditable="true">{{ reservation.frequencies }}</td>
+    <td contenteditable="true">{{ reservation.modes }}</td>
+    <td contenteditable="true">{{ reservation.operatorName }}</td>
+    <td contenteditable="true">{{ reservation.operatorEmail }}</td>
+    <td contenteditable="true">{{ reservation.operatorCall }}</td>
+    <td>
+      <button class="btn btn-primary mr-2">Update</button>;
+      <button class="btn btn-warning mr-2">Restore</button>;
+      <button class="btn btn-danger">Delete</button>;
+    </td>
+  </tr>
 </template>
 
 <script>
 export default {
-  
+  props: ['reservationIndex'],
+  computed: {
+    reservation() {
+      return this.$store.getters.getData[reservationIndex];
+    }
+  }
 }
 </script>
diff --git a/resources/js/components/reservations.vue b/resources/js/components/reservations.vue
index 48e54f5..278dfa4 100644
--- a/resources/js/components/reservations.vue
+++ b/resources/js/components/reservations.vue
@@ -1,9 +1,54 @@
 <template>
-  
+  <div>
+    <call-sign-filter @sign-changed="filterChanged()"></call-sign-filter>
+
+    <div class="table-responsive mt-2">
+        <table id="ajax-table" class="table table-striped table-bordered" style="white-space:nowrap;"><!-- table-hover -->
+            <thead class="thead-dark">
+                <tr>
+                    <th>ID</th>
+                    <th>Approved</th>
+                    <th>Operator Callsign</th>
+                    <th>QSO</th>
+                    <th>From</th>
+                    <th>To</th>
+                    <th>Special Callsign</th>
+                    <th>Frequencies</th>
+                    <th>Modes</th>
+                    <th>Operator Name</th>
+                    <th>Operator Email</th>
+                    <th>Operator Phone</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+              <reservation-view v-for="(reservation, index) in reservations" 
+                :key="reservation.id" :reservation-index="index">
+              </reservation-view>
+            </tbody>
+        </table>
+    </div>
+  </div>
 </template>
 
 <script>
+import callSignFilter from './call-sign-filter.vue';
+import reservationView from './reservation.vue';
+
 export default {
-  
+  components: { callSignFilter, reservationView },
+  mounted() {
+    this.$store.dispatch('fillReservations');
+  },
+  computed: {
+    reservations() {
+      return this.$store.getters.getData;
+    }
+  },
+  methods: {
+    filterChanged() {
+      this.$store.dispatch('fillReservations');
+    }
+  }
 }
 </script>