Integrating token number feature w/ master

frontend/.env_sample

@@ -2,4 +2,4 @@ VUE_APP_FIREBASE_PROJECT_ID = 'YourProjectId'
 VUE_APP_FIREBASE_API_KEY = 'YourAPIKey'
 VUE_APP_FIREBASE_MESSAGING_SENDER_ID = 'Your_MessageSenderID'
 VUE_APP_FIREBASE_APPID: 'Your_AppID',
-VUE_APP_FIREBASE_MEASUREMENT_ID: 'Your_Measurement_ID'
+VUE_APP_FIREBASE_MEASUREMENT_ID: 'Your_Measurement_ID'

frontend/package.json

@@ -8,10 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bulma": "^0.9.0",
     "core-js": "^3.6.5",
     "firebase": "^7.14.6",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vue2-google-maps": "^0.10.7"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

frontend/src/App.vue

@@ -1,6 +1,42 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
+
+
+<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbarBasicExample" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item">
+        Home
+      </a>
+
+      <a class="navbar-item">
+        Queues
+      </a>
+
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="buttons">
+          <a class="button is-light">
+            Sign up
+          </a>
+          <a class="button is-light">
+            Log in
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
     <router-view />
   </div>
 </template>
@@ -26,4 +62,17 @@
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+
+.navbar{
+  margin-bottom: 5%;
+  padding: px;
+}
+
+.navbar-brand{
+  margin-left: 5%;
+}
+
+.navbar-end{
+  margin-right: 5%;
+}
 </style>

frontend/src/database.js

@@ -0,0 +1,66 @@
+import firebase from "firebase";
+
+export function getQueuePosition(storeId, userId, callBack){
+    //Pass a callBack function as an argument while calling this function, the callBack function has queuePosition as an argument
+    //If userId is null, function returns queueLength
+    let dbRef = firebase.database().ref();
+    dbRef.child(this.getUserPath(storeId)).once("value", snap => {
+        var queuePosition = 1;
+        snap.forEach(function(childSnap){
+            if(userId==childSnap.val().UserID){
+                return true;
+            }
+            queuePosition++;
+        });
+        callBack(queuePosition);
+    });
+}
+
+export const database_call = {
+    getQueuePosition: function(storeId, userId, callBack){
+        //Pass a callBack function as an argument while calling this function, the callBack function has queuePosition as an argument
+        //If userId is null, function returns queueLength
+        let dbRef = firebase.database().ref();
+        dbRef.child(this.getUserPath(storeId)).once("value", snap => {
+            var queuePosition = 1;
+            snap.forEach(function(childSnap){
+                if(userId==childSnap.val().UserID){
+                    return true;
+                }
+                queuePosition++;
+            });
+            callBack(queuePosition);
+        });
+    },
+    getCurrentUserKey: function(storeId, userId, callBack){
+        //Pass a callBack function as an argument while calling this function, the callBack function has queuePosition as an argument
+        let dbRef = firebase.database().ref();
+        dbRef.child(this.getUserPath(storeId)).orderByChild("UserID").equalTo(userId).once("value", snap => {
+            var currentUserKey = null;
+            if(snap.exists()){
+                currentUserKey = Object.keys(snap.val())[0];
+            }
+            callBack(currentUserKey);
+        });
+    },
+    getCurrentStoreKey: function(storeId, userId, callBack){
+        //Pass a callBack function as an argument while calling this function, the callBack function has queuePosition as an argument
+        let dbRef = firebase.database().ref();
+        dbRef.child(this.getStorePath(userId)).orderByChild("StoreID").equalTo(storeId).once("value", snap =>{
+            var currentStoreKey = null;
+            if(snap.exists()){
+                currentStoreKey = Object.keys(snap.val())[0];
+            }
+            callBack(currentStoreKey);
+        });
+    },
+    getStorePath: function(userId){
+        return `User/${userId}/SubscribedStoreID`;
+    },
+    getUserPath: function(storeId){
+        return `Store/${storeId}/UsersInQueue`;
+    },
+    printHello: function(){
+        console.log("Hello!");
+    }
+}

frontend/src/main.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import firebase from 'firebase'
 import App from './App.vue'
 import router from './router'
+import * as VueGoogleMaps from "vue2-google-maps";
+import './../node_modules/bulma/css/bulma.css';
 
 Vue.config.productionTip = false
 let app = '';
@@ -29,3 +31,9 @@ firebase.auth().onAuthStateChanged(() => {
   }
 });
 
+Vue.use(VueGoogleMaps, {
+  load: {
+    key: "AIzaSyCu4bZPx3unoBtAr8YUzVfiBmw6oqZBk0g",
+    libraries: "places" // necessary for places input
+  }
+});

frontend/src/router/index.js

@@ -4,6 +4,8 @@ import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import Login from '../views/Login.vue'
 import SignUp from '../views/SignUp.vue'
+import Maps from '../views/Map.vue'
+import Queue from '../views/Queue.vue'
 Vue.use(VueRouter)
 
 const routes = [
@@ -26,11 +28,17 @@ const routes = [
     component: SignUp
   },
   {
-    path: '*',
-    redirect: '/login'
+    path: '/map',
+    name: 'Maps',
+    component: Maps
   },
   {
-    path: '/',
+    path: '/queue/:StoreId',
+    name: 'Queue',
+    component: Queue
+  },
+  {
+    path: '*',
     redirect: '/login'
   }
 ]

frontend/src/views/Home.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="home">
     <h1>Welcome to the Home page</h1>
-    <router-link v-bind:to="{path:'/queue'}">Enter Queue</router-link>
+    <br>
+    <h2>List of available stores:</h2>
+    <ul>
+      <li v-for="store in stores" :key="store.StoreId"><button @click="showQueue(store.StoreId)">{{store.StoreName}}</button></li>
+    </ul>
+    <br><br>
     <button @click="logout">Logout</button>
   </div>
 </template>
@@ -13,15 +18,41 @@ import firebase from "firebase";
 export default {
   name: "Home",
   components: {},
+  data(){
+    return{
+      stores : []
+    }
+  },
   methods: {
+    showQueue: function(StoreId){
+      this.$router.replace("queue/" + StoreId);
+    },
     logout: function() {
       firebase
         .auth()
         .signOut()
         .then(() => {
           this.$router.replace("login");
         });
+    },
+    populateStores: function() {
+      console.log(this.uid);
+      var dbRef = firebase.database().ref();
+      dbRef.child("Store").orderByChild("StoreName").once("value", snap => {
+        var tempStores = [];
+        snap.forEach(function(childSnap){
+          tempStores.push({
+            StoreId: childSnap.key,
+            StoreName: childSnap.val().StoreName
+          });
+        });
+        this.stores = tempStores;
+        console.log(tempStores);
+      });
     }
+  },
+  created() {
+    this.populateStores();
   }
 };
 </script>

frontend/src/views/Login.vue

@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     login: function() {
-      firebase
+       firebase
         .auth()
         .signInWithEmailAndPassword(this.email, this.password)
         .then(