UI code with mockup booking service

src/components/BookingList.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-card>
+        <v-card-title>
+          <v-text-field
+            v-model="search"
+            append-icon="mdi-magnify"
+            label="Search"
+            single-line
+            hide-details
+          ></v-text-field>
+        </v-card-title>
+          <v-data-table
+            :headers="headers"
+            :items="bookings"
+            :search="search"
+          >
+            <template slot="headers" scope="props">
+              <tr>
+                <th>
+                </th>
+                <th v-for="header in props.headers" :key="header.text"
+                  :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
+                  @click="changeSort(header.value)"
+                >
+                  <v-icon>arrow_upward</v-icon>
+                  {{ header.text }}
+                </th>
+              </tr>
+            </template>
+            <template slot="items" scope="props">
+              <tr :active="props.selected" @click="props.selected = !props.selected">
+                    <td class="text-left">{{ booking.id }}</td>
+                    <td class="text-left">{{ booking.name }}</td>
+                    <td class="text-left">{{ booking.flight_id }}</td>
+                    <td class="text-left">{{ booking.departure_airport_iata }}</td>
+                    <td class="text-left">{{ booking.arrival_airport_iata }}</td>
+                    <td class="text-left">{{ booking.estimated_time_departure }}</td>
+                    <td class="text-left">{{ booking.estimated_time_arrival }}</td>
+              </tr>
+            </template>
+          </v-data-table>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { Booking } from '../entity/booking'
+
+@Component({
+  components: {
+  }
+})
+export default class BookingList extends Vue {
+  bookings: Array<Booking> = []
+  dateFormat = 'MM/dd HHmm'
+  search = ''
+  headers = [
+    { text: 'ID', value: 'id' },
+    { text: 'Name', value: 'name' },
+    { text: 'Flight ID', value: 'flight_id' },
+    { text: 'DEP', value: 'departure_airport_iata' },
+    { text: 'ARR', value: 'arrival_airport_iata' },
+    { text: 'ETD', value: 'estimated_time_departure' },
+    { text: 'ETA', value: 'estimated_time_arrival' }]
+
+  pagination = {
+    sortBy: 'name',
+    descending: false
+  }
+
+  changeSort (column :string) {
+    if (this.pagination.sortBy === column) {
+      this.pagination.descending = !this.pagination.descending
+    } else {
+      this.pagination.sortBy = column
+      this.pagination.descending = false
+    }
+  }
+
+  mounted () {
+    console.log('Mounted Booking List Component')
+    this.$store.dispatch('ENSURE_LOADED_BOOKINGS').then(() => {
+      this.bookings = this.$store.state.bookings
+    })
+  }
+}
+
+</script>

src/components/Schedule.vue

@@ -68,12 +68,6 @@
         <div id="schedule" class="schedule-row row" refs='schedule'>
         </div>
         <FlightSummary :flight="flight" :dialog="dialog" />
-        <!--
-        <v-card v-if="displayMouseOverFlight" absolute left centered shaped style="z-index: 1000" elevation="2" outlined>
-            <v-card-title>Flight Title</v-card-title>
-            <v-card-text>Flight Details Here</v-card-text>
-        </v-card>
-        -->
         <v-overlay :value="overlay">
           <v-progress-circular
             indeterminate
@@ -219,14 +213,10 @@ export default class Schedule extends Vue {
 
       scheduleDiv.appendChild(this.backgroundCanvas)
       scheduleDiv.appendChild(this.mouseoverCanvas)
-
-      console.log('this.backgroundCanvas.width = ' + this.backgroundCanvas.width)
-      console.log('this.aircraftBarWidth = ' + this.aircraftBarWidth)
     }
   }
 
   private DrawGrid () {
-    // console.log('Drawing grid for ' + this.GetAllDays(this.startDate, this.endDate))
     this.DrawDays()
     // this.DrawHours()
     this.DrawCurrentTimeline()
@@ -248,7 +238,6 @@ export default class Schedule extends Vue {
       })
       if (highlightedFlight.length > 0) {
         const flight = highlightedFlight[0]
-        // this.flightCardTitle = 'Flight: ' + flight.id.toString() + ' ' + flight.departure_airport.iata + '-' + flight.arrival_airport.iata
         this.displayMouseOverFlight = true
         this.DisplayTooltipForFlight(flight, x, y)
       } else {
@@ -515,7 +504,6 @@ export default class Schedule extends Vue {
             } else {
               this.backgroundCanvasContext.fillStyle = 'black'
             }
-            // this.backgroundCanvasContext.fillStyle = 'white'
             if (extendedEnd) {
               this.backgroundCanvasContext.clearRect(x + w - 1, y, x + w, this.flightPuckHeight)
             }

src/components/Sidebar.vue

@@ -47,6 +47,11 @@ export default {
           href: '/airports',
           title: 'Airports',
           icon: 'fa fa-plane-departure'
+        },
+        {
+          href: '/bookings',
+          title: 'Bookings',
+          icon: 'fa fa-book'
         }
       ],
       collapsed: true

src/components/flight/FlightPassengerBooking.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-card>
+    <v-card-text>
+      <form id="submit-booking-form" @submit.prevent="addBooking">
+        <span class="mx-2">Create Booking </span>
+        <input v-model="name" placeholder="passenger name" class="mx-2">
+        <button type="submit" class="button is-danger mx-2">Submit</button>
+      </form>
+    </v-card-text>
+      <v-snackbar v-model="snackbar" :timeout="snackbarTimeout">
+        {{ snackbarText }}
+        <template v-slot:action="{ attrs }">
+          <v-btn
+            color="blue"
+            text
+            v-bind="attrs"
+            @click="snackbar = false"
+          >
+            Close
+          </v-btn>
+        </template>
+      </v-snackbar>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Flight } from '../../entity/flight'
+import { Booking } from '../../entity/booking'
+
+@Component({
+  components: {
+  }
+})
+export default class FlightPassengerBooking extends Vue {
+    @Prop() readonly flight! :Flight
+    name = ''
+    snackbar = false
+    snackbarText = ''
+    snackbarTimeout = 3000
+
+    created () {
+    }
+
+    mounted () {
+    }
+
+    addBooking () {
+      var booking = new Booking({
+        name: this.name,
+        flight_id: this.flight.id,
+        departure_airport_iata: this.flight.departure_airport.iata,
+        arrival_airport_iata: this.flight.arrival_airport.iata,
+        estimated_time_departure: this.flight.estimated_time_departure,
+        estimated_time_arrival: this.flight.estimated_time_arrival
+      })
+      this.$store.commit('ADD_BOOKING', booking)
+      this.snackbarText = 'Added Booking for ' + this.name
+      this.snackbar = true
+      this.name = ''
+    }
+}
+</script>

src/components/flight/FlightPassengers.vue

@@ -1,20 +1,35 @@
 <template>
-        <v-card>
-          <v-card-text>
-            Booking Summary
-            <br/>
-            <v-img content-class="seatmap" contain :src=getSeatmap() max-height="800" max-width="200"></v-img>
-          </v-card-text>
-        </v-card>
+  <v-container>
+    <v-row>
+      <v-col cols="2">
+        <v-img content-class="seatmap" contain :src=getSeatmap()></v-img>
+      </v-col>
+      <v-col cols="10" align="left">
+
+        <!--Add Flight booking component unless in the air or already landed-->
+        <div v-if="getFlightStatus() === 'Active'">
+          This flight is already in the air
+        </div>
+        <div v-else-if="getFlightStatus() === 'Complete'">
+          No cooking the booking - this is already complete
+        </div>
+        <div v-else>
+          <FlightPassengerBooking :flight="flight" />
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Flight } from '../../entity/flight'
+import FlightPassengerBooking from '@/components/flight/FlightPassengerBooking.vue'
 // import * as luxon from 'luxon'
 
 @Component({
   components: {
+    FlightPassengerBooking
   }
 })
 export default class FlightPassengers extends Vue {
@@ -26,6 +41,10 @@ export default class FlightPassengers extends Vue {
     mounted () {
     }
 
+    getFlightStatus () {
+      return this.flight.status()
+    }
+
     getSeatmap () {
       return require('../../../public/img/A380_seatmap.svg')
     }

src/entity/booking.ts

@@ -0,0 +1,15 @@
+/* eslint-disable camelcase */
+import * as luxon from 'luxon'
+export class Booking {
+    id: number = 0;
+    flight_id: number = 0;
+    departure_airport_iata: string;
+    arrival_airport_iata: string;
+    estimated_time_departure: luxon.DateTime = luxon.DateTime.utc();
+    estimated_time_arrival: luxon.DateTime = luxon.DateTime.utc();
+    name: string;
+
+    public constructor (init?:Partial<Booking>) {
+      Object.assign(this, init)
+    }
+}

src/entity/delay.ts

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 export class Delay {
     code: number = 0;
     name: string = '';

src/main.ts

@@ -22,6 +22,7 @@ Vue.use(VueSidebarMenu)
 store.dispatch('ENSURE_LOADED_FLIGHTS')
 store.dispatch('ENSURE_LOADED_CREWMEMBERS')
 store.dispatch('ENSURE_LOADED_AIRPORTS')
+store.dispatch('ENSURE_LOADED_BOOKINGS')
 
 new Vue({
   router,

src/router/index.ts

@@ -37,6 +37,11 @@ const routes = [
     path: '/airports',
     name: 'Airports',
     component: () => import('../components/AirportList.vue')
+  },
+  {
+    path: '/bookings',
+    name: 'Bookings',
+    component: () => import('../components/BookingList.vue')
   }
 ]
 

src/services/BookingService.ts

@@ -0,0 +1,40 @@
+import { Booking } from '@/entity/booking'
+
+const bookingApiUrl = process.env.VUE_APP_BOOKING_API_URL
+
+export async function GetAllBookings () {
+  const bookings = [
+    new Booking({ id: 1, name: 'Chandan Gudla', departure_airport_iata: 'IAH', arrival_airport_iata: 'ORD', flight_id: 1234 }),
+    new Booking({ id: 2, name: 'John Gammon', departure_airport_iata: 'IAH', arrival_airport_iata: 'SYD', flight_id: 1235 }),
+    new Booking({ id: 3, name: 'Shelby Thomas', departure_airport_iata: 'DXB', arrival_airport_iata: 'HKG', flight_id: 1236 }),
+    new Booking({ id: 4, name: 'Vince Tsugranes', departure_airport_iata: 'RDU', arrival_airport_iata: 'ATL', flight_id: 1237 })
+  ]
+  return bookings
+  /*
+  const bookingRequestUrl = bookingApiUrl
+  console.log('Getting Bookings from ' + bookingRequestUrl)
+  const bookingsResponse = await fetch(bookingRequestUrl)
+  const jsonBookings = JSON.parse(await bookingsResponse.text())
+  return jsonBookings
+  */
+}
+
+export async function UpsertBooking (booking: Booking) {
+  const bookingPostUrl = bookingApiUrl
+  console.log('Sending Booking to ' + bookingPostUrl)
+
+  const response = await fetch(bookingPostUrl, {
+    method: 'POST',
+    body: JSON.stringify(booking),
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
+  })
+
+  if (!response.ok) {
+    console.log('Exception Posting Booking to ' + bookingPostUrl + ': ' + response.text)
+  }
+
+  if (response.body !== null) {
+    const data = JSON.parse(response.json.toString()) as Response
+    return data.json
+  }
+}