frontend apps fixes, network switched to localhost

Makefile

@@ -1,5 +1,5 @@
 guest:
-	cd guest-app && python3 -m http.server 8081
+	cd guest-app && python3 -m http.server 3001 --bind 127.0.0.1
 
 staff:
-	cd staff-app && python3 -m http.server 8082
+	cd staff-app && python3 -m http.server 3002 --bind 127.0.0.1

guest-app/index.html

@@ -26,17 +26,16 @@ <h1>The Restaurant at the End of the Universe</h1>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
     <script type="text/javascript">
-        const BASE_URL = 'http://localhost:8081/';
-
+        const BASE_URL = 'http://localhost:3000/';
         axios.defaults.baseURL = BASE_URL;
 
-        const axiosClient = axios.default;
+        const axiosClient = axios;
 
         class MenuItemService {
 
             async fetchMenuItems() {
                 try {
-                    const response = await axiosClient.get('/api/menu-items');
+                    const response = await axiosClient.get('/api/menu_items');
                     return response.data.map(MenuItem.fromData);
                 } catch (err) {
                     console.log('Error fetching menu items', err);
@@ -213,7 +212,7 @@ <h5 class="card-title">{{ item.itemTitle }}</h5>
                     });
 
                     axios.post('/api/orders', {
-                        table_id: 'test-table',
+                        table_id: '1',
                         items: itemsPayload
                     })
                     .then((response) => {
@@ -224,7 +223,7 @@ <h5 class="card-title">{{ item.itemTitle }}</h5>
             },
             template: `
             <div>
-                <div class="card-deck col-sm-12">
+                <div class="card-deck grid-container col-sm-12">
                     <menu-item 
                         v-for="menuItem in menuItems" 
                         v-bind:item="menuItem"
@@ -276,7 +275,7 @@ <h2>Cart</h2>
                 <div>
                     <h2 v-if="order">Order #{{ order.orderId }}</h2>
 
-                    <div class="card-deck" v-if="order">
+                    <div class="card-deck grid-container" v-if="order">
                         <div v-for="orderItem in order.orderItems" class="card">
                             <img class="card-img-top" v-bind:src="orderItem.menuItem.itemImage">
                             <div class="card-body">
@@ -305,4 +304,12 @@ <h5 class="card-title">{{ orderItem.menuItem.itemTitle }}</h5>
         });
     </script>
   </body>
+
+  <style>
+      .grid-container {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      }
+  </style>
+
 </html>

staff-app/index.html

@@ -27,11 +27,11 @@ <h5>Restaurant at the End of the Universe - Staff</h5>
         <script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
 
         <script type="text/javascript">
-            const BASE_URL = 'http://localhost:8082/';
+            const BASE_URL = 'http://localhost:3000/';
 
             axios.defaults.baseURL = BASE_URL;
 
-            const axiosClient = axios.default;
+            const axiosClient = axios
 
             class Order {
                 constructor(orderId, tableId, orderItems) {
@@ -157,7 +157,7 @@ <h5>Restaurant at the End of the Universe - Staff</h5>
 
                 async fetchMenuItems() {
                     try {
-                        const response = await axiosClient.get('/api/menu-items');
+                        const response = await axiosClient.get('/api/menu_items');
                         return response.data.map(MenuItem.fromData);
                     } catch (err) {
                         console.log('Error fetching menu items', err);
@@ -212,7 +212,7 @@ <h5>Restaurant at the End of the Universe - Staff</h5>
                 }
 
                 async update(orderItem) {
-                    let response = await axiosClient.put(`/api/order-items/${orderItem.orderItemId}`, orderItem);
+                    let response = await axiosClient.put(`/api/order_items/${orderItem.orderItemId}`, orderItem);
                 }
 
                 static appendMenuItem(orderItem, menuItemsMap) {