Merge pull request #72 from Vacansee/router

src/App.vue

@@ -7,6 +7,8 @@ import GHIcon from '@/assets/icons/github.svg?component'
 import AutoComplete from 'primevue/autocomplete'
 import Button from "primevue/button"
 import Toast from 'primevue/toast'
+import MapItem from '../src/components/home/MapItem.vue';
+import router from "@/router";
 </script>
 
 <template>
@@ -37,6 +39,7 @@ import Toast from 'primevue/toast'
 </template>
 
 <script>
+
 export default {
   data() {
     return {
@@ -57,10 +60,21 @@ export default {
       handler() {
         this.$clearToasts()
         // Only shows header when a building is not selected
-        if (this.global.bldg)
-          document.getElementById("header").style.opacity = "0";
-        else
-          document.getElementById("header").style.opacity = "1";
+        if (this.global.bldg) {
+          document.getElementById("header").style.opacity = "0"
+        }
+        else {
+          document.getElementById("header").style.opacity = "1"
+        }
+      }
+    },
+    'global.invalidLoadMessage' : {
+      handler() {
+        // Tells the user when they entered an invalid URL path
+        if (this.global.invalidLoadMessage !== "") {
+          this.$showToast({type: 'info', title: 'Invalid URL', body: this.global.invalidLoadMessage, lasts: 3000})
+          this.global.invalidLoadMessage = ""
+        }
       }
     }
   },

src/components/home/Floor.vue

@@ -2,6 +2,7 @@
 // Basic imports
 import moment from 'moment-timezone'
 import tinycolor from "tinycolor2";
+import router from '../../router';
 </script>
 
 <template>
@@ -11,6 +12,7 @@ import tinycolor from "tinycolor2";
 </template>
 
 <script>
+
 const getFloorSVG = async (floorName) => {
   try {
     const module = await import(`../../assets/floors/${floorName}.svg`)
@@ -50,8 +52,8 @@ export default {
         }
         else {
           this.floorSVG = await getFloorSVG(floorName)
-          if (!this.floorSVG) this.$showToast({title: 'Map not yet implemented!'})
-        }
+          router.push({ name: 'buildingAndFloor', params: { building: this.global.bldg, floor: this.global.floor } })
+          if (!this.floorSVG) {this.$showToast({title: 'Map not yet implemented!'})}}
       },
       immediate: true,
     },
@@ -93,6 +95,7 @@ export default {
         const clonedPath = path.cloneNode(true);
         path.parentNode.appendChild(clonedPath);
         this.roomSVG = clonedPath;
+        router.push({ name: 'buildingAndRoom', params: { room: this.global.room } })
         setTimeout(() => {
           clonedPath.setAttribute("id", "selected");
           let border = tinycolor(path.getAttribute("fill")).darken(30).toString();
@@ -103,6 +106,7 @@ export default {
         if (this.roomSVG != null) this.roomSVG.remove()
         this.roomSVG = null
         this.global.room = ""
+        router.push({ name: 'buildingAndFloor', params: { floor: this.global.floor }})
       }
     },
     getColorVal(name) {

src/components/home/PopUpItem.vue

@@ -1,6 +1,9 @@
 <script setup>
 import moment from 'moment-timezone'
 import { average } from 'color.js'
+import router from '../../router';
+import Tag from 'primevue/tag';
+
 import InfoIcon from '@/assets/icons/info.svg?component'
 import CopyIcon from '@/assets/icons/copy.svg?component'
 import tinycolor from "tinycolor2"

src/main.js

@@ -13,11 +13,16 @@ import Router from './router'
 import Moment from 'moment-timezone'
 // Basic CSS
 import './assets/main.css'
+// Import function for manually loading based on URL path
+import {router_info, Routing} from "@/router";
+// Import router to update URL
+import router from "./router";
 
 // Primevue resources
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import './assets/themes/theme.css';
+import * as path from "path";
 
 const global = reactive({ // The global reactive object!
 	// Any changes to its members will trigger reactivity in components that 
@@ -31,7 +36,8 @@ const global = reactive({ // The global reactive object!
 	time: Moment.tz('America/New_York').format('e:HHmm'),
 	// time: Moment.tz('2023-11-29 11:55', 'America/New_York').format('e:HHmm'), // Test time
 	firstCalc: false,
-	sFocus: false
+	sFocus: false,
+	invalidLoadMessage: ""
 })
 
 // On page load, fetch building/room and search data from Vacansee/data:
@@ -65,6 +71,50 @@ Promise.all([
 		console.log('Data loaded!')
 		checkActive()
 		global.firstCalc = true
+	  	// Update global variables with URL path
+	  	Routing(global)
+	  	// Check user inputted values
+	  	if (router_info.checkValues) {
+			// Checks URL format
+			if (global.bldg === "" && router.currentRoute.value.name !== "home") {
+				console.log("Not a valid URL format")
+				global.bldg = ""
+				global.floor = null
+				global.room = ""
+				global.invalidLoadMessage = "Not a valid URL format"
+			} else if (global.bldg !== "") {
+				// Checks inputted building
+				if (global.data[global.bldg] === undefined) {
+					console.log("Invalid URL: not a valid building")
+					global.bldg = ""
+					global.floor = null
+					global.room = ""
+					global.invalidLoadMessage = "Not a valid building"
+					router.push({name: 'home'})
+				}
+				// Sets the floor if only a building is entered (not an error)
+				else if (router.currentRoute.value.fullPath.split('/').length === 3) {
+					global.floor = global.data[global.bldg].meta.floors[1]
+					router.push({name: 'buildingAndFloor', params: {building: global.bldg, floor: global.floor}})
+				}
+				// Checks inputted floor
+				else if (global.floor > global.data[global.bldg].meta.floors[0]) {
+					console.log("Invalid URL: not a valid floor")
+					global.floor = global.data[global.bldg].meta.floors[1]
+					global.invalidLoadMessage = "Not a valid floor"
+					router.push({name: 'buildingAndFloor', params: {building: global.bldg, floor: global.floor}})
+				}
+				// Checks inputted room
+				else if (global.room !== "" && !global.data[global.bldg].hasOwnProperty(global.room)) {
+					console.log("Invalid URL: not a valid room")
+					global.floor = global.data[global.bldg].meta.floors[1]
+					global.room = ""
+					global.invalidLoadMessage = "Not a valid room"
+					router.push({name: 'buildingAndFloor', params: {building: global.bldg, floor: global.floor}})
+				}
+			}
+			router_info.checkValues = false
+		}
 	})
   .catch(error => { this.$showToast({title: 'Failed to load data', body: error}) })
 

src/router/index.js

@@ -9,22 +9,93 @@
 
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
+import {reactive} from "vue";
+import home from "@/views/Home.vue";
 // import About from '../views/About.vue' // currently unused, could be a settings page
 
+// URL path values
+export const router_info = reactive({
+  pathBuilding: '',
+  pathFloor: null,
+  pathRoom: '',
+  firstLoad: true,
+  checkValues: false
+})
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    // Route for overall map
     {
       path: '/',
       name: 'home',
       component: Home
     },
-    // {
-    //   path: '/about',
-    //   name: 'about',
-    //   component: About // lazy-loaded
-    // }
+    // Dynamic route for buildings, floors, rooms
+    {
+      path: '/:building/',
+      name: 'building',
+      component: Home,
+      children: [
+        {
+          path: '/:building/:floor/',
+          name: 'buildingAndFloor',
+          component: Home,
+        },
+        {
+          path: '/:building/:room/',
+          name: 'buildingAndRoom',
+          component: Home
+        }
+      ]
+    },
+   // Catch all redirect to home page
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: '/'
+    }
   ]
-})
+});
+
+// Stores URL path values after each page reload
+router.beforeResolve((to, from, next) => {
+  if (router_info.firstLoad) {
+    const pathComponents = to.path.split('/').filter(component => component !== '');
+    if (pathComponents[0] !== "") {
+      router_info.pathBuilding = pathComponents[0]
+      if (!isNaN(pathComponents[1])) {
+        if (pathComponents[1] <= 9) {
+          router_info.pathFloor = Number(pathComponents[1])
+          if (router_info.pathFloor < 0) {
+            router_info.pathFloor = null
+          }
+          } else {
+          router_info.pathRoom = pathComponents[1]
+          }
+      }
+    }
+  }
+  next();
+});
+
+// Sets global variables to user inputted URL path values
+export function Routing(mainGlobal) {
+  if (router_info.pathBuilding) {
+    mainGlobal.bldg = router_info.pathBuilding.toUpperCase();
+    if (mainGlobal.bldg != "DCC" && mainGlobal.bldg != "VCC"
+        && mainGlobal.bldg != "JEC" && mainGlobal.bldg != "JROWL"
+        && mainGlobal.bldg != "CBIS" && mainGlobal.bldg != "MRC"
+        && mainGlobal.bldg != "EMPAC" && mainGlobal.bldg != "RSDH" 
+        && mainGlobal.bldg != "EMPAC") {
+      mainGlobal.bldg = router_info.pathBuilding.substring(0, 1).toUpperCase() + router_info.pathBuilding.substring(1, mainGlobal.bldg.length)
+    } else {
+
+    }
+    if (mainGlobal.bldg.toUpperCase() == "'87_GYM") mainGlobal.bldg = "'87_Gym"; 
+    mainGlobal.floor = router_info.pathFloor
+    mainGlobal.room = router_info.pathRoom
+    router_info.checkValues = true
+  }
+}
 
 export default router

src/views/Home.vue

@@ -3,6 +3,7 @@
 import MapItem from '../components/home/MapItem.vue'
 import PopUpItem from '../components/home/PopUpItem.vue'
 import FloorItem from '../components/home/FloorItem.vue'
+import router from '../router/index.js'
 </script>
 
 <template>
@@ -74,7 +75,7 @@ export default {
     }
   },
   mounted() {
-    // addEventListeners allow the file to call a function when 
+    // addEventListeners allow the file to call a function when
     // an action occurs
     window.addEventListener("mousemove", (window) => {
       this.mouseX = window.clientX;
@@ -243,6 +244,7 @@ export default {
     },
     // On deselection of a building (when clicked off)
     buildingDeselect() {
+      router.push({ name: 'home' })
       try {
         this.buildingSelected = false
         this.bldgSVG = ""