Merge branch 'dev' into floorplans

docs/create-basic-floor-plans.md

@@ -24,7 +24,7 @@ In order to scale the pdf or end svg, you will need to:
 
 ![](.embed/create-basic-floor-plans-1.png)
 
-1. Press `Ctrl-A` to select all svg elements, then with the cursor tool, hold `Ctrl`, grab the bottom right arrow, and scale evenly to the bottom right of the document size. You may want to play around with positioning of your contents in the document frame, as it seems a bit of empty space is good for displaying the svg in the app (otherwise a part of the svg may be cut off --> you will need to test out your svg in the app after completion and it may need some tweaking). A DCC floorplan silhouette example is shown below to help gauge spacing.
+2. Press `Ctrl-A` to select all svg elements, then with the cursor tool, hold `Ctrl`, grab the bottom right arrow, and scale evenly to the bottom right of the document size. You may want to play around with positioning of your contents in the document frame, as it seems a bit of empty space is good for displaying the svg in the app (otherwise a part of the svg may be cut off --> you will need to test out your svg in the app after completion and it may need some tweaking). A DCC floorplan silhouette example is shown below to help gauge spacing.
 
 ![](.embed/create-basic-floor-plans-2.png)
 

package.json

@@ -12,7 +12,7 @@
     "color.js": "^1.2.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
-    "primevue": "^3.37.0",
+    "primevue": "^3.50.0",
     "tinycolor2": "^1.6.0",
     "vite-svg-loader": "^4.0.0",
     "vue": "^3.3.4",

src/App.vue

@@ -2,11 +2,15 @@
 // Basic Imports
 import { RouterLink, RouterView } from 'vue-router'
 import Logo from '@/assets/logo.svg?component'
+import DiningIcon from '@/assets/icons/dining.svg?component'
 import PollIcon from '@/assets/icons/poll.svg?component'
 import GHIcon from '@/assets/icons/github.svg?component'
 import AutoComplete from 'primevue/autocomplete'
 import Button from "primevue/button"
 import Toast from 'primevue/toast'
+import DiningSurveyLightbox from './DiningSurveyLightbox.vue'
+import MapItem from '../src/components/home/MapItem.vue';
+import router from "@/router";
 </script>
 
 <template>
@@ -19,6 +23,9 @@ import Toast from 'primevue/toast'
       </div>
 
       <div id="right-nav">
+        <a href="#" @click.prevent="openDiningSurvey"><Button class="nav-btn dining" aria-label="Dining" >
+            <DiningIcon height="25" width="25"/>
+        </Button></a>
         <a href="https://forms.gle/Tu5xSSjK1MkZDXK69" target="_blank" rel="noopener noreferrer"><Button class="nav-btn" aria-label="Feedback" >
             <PollIcon height="25" width="25"/>
         </Button></a>
@@ -34,12 +41,19 @@ import Toast from 'primevue/toast'
     </div>
 
   <RouterView />
+
+  <DiningSurveyLightbox ref="diningSurveyLightbox" @update:visible="handleLightboxVisibility">
+    <!-- Your survey form will go here -->
+  </DiningSurveyLightbox>
+
 </template>
 
 <script>
+
 export default {
   data() {
     return {
+      isLightboxVisible: false,
       exs: [
         "a building:  Russell Sage",
         "a dept. code:  CSCI 1200",
@@ -57,10 +71,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 = ""
+        }
       }
     }
   },
@@ -69,6 +94,12 @@ export default {
     setInterval(this.changeEx, 5000);
   },
   methods: {
+    openDiningSurvey() {
+      this.$refs.diningSurveyLightbox.open();
+    },
+    handleLightboxVisibility(isVisible) {
+      this.isLightboxVisible = isVisible; 
+    },
     changeEx() {
       const ex = this.exs.shift()
       this.ex = `Try ${ex}`; this.exs.push(ex)
@@ -145,10 +176,12 @@ header {
   width: 3.25rem;
   height: 3.25rem;
   justify-content: center;
+  align-items: center;
   background-color: var(--unusedfill);
   border: 2px solid var(--buildbord);
   box-shadow: 0px 5px 25px rgba(0, 10, 20, 0.08);
   pointer-events: all;
+  padding: 0; 
 }
 
 .nav-btn:hover,

src/DiningSurveyLightbox.vue

@@ -0,0 +1,203 @@
+<template>
+  <div v-if="visible" class="lightbox-backdrop" @click.self="close">
+    <div class="lightbox-content">
+      <div class="tabs-container">
+        <div class="tabs">
+          <div v-for="(option, index) in diningOptions" :key="index"
+               :class="{ 'tab': true, 'active': activeTab === index, 'student-union': option.name === 'Student Union' }"
+               @click="handleTabClick(index)">
+            {{ option.name }}
+          </div>
+        </div>
+      </div>
+      <div class="tab-content">
+        <div v-for="(option, index) in diningOptions" :key="index" v-show="activeTab === index">
+          <h3>{{ option.name }}</h3>
+          <div v-if="option.subOptions" class="scrollable-content">
+            <div v-for="(sub, subKey) in option.subOptions" :key="subKey"
+                :class="{ 'sub-tab': true, 'active': activeSubTab[option.name] === subKey }"
+                @click.stop="handleSubTabClick(option.name, subKey)">
+              <h4>{{ subKey }}</h4>
+              <p v-show="activeSubTab[option.name] === subKey">Hours: {{ formatTimes(sub.times).join(', ') }}</p>
+              <a v-show="activeSubTab[option.name] === subKey"
+                :href="sub.url.includes('http') ? sub.url : `https://${sub.url}`"
+                target="_blank" rel="noopener noreferrer">More details</a>
+            </div>
+          </div>
+          <div v-else>
+            <p>Hours: {{ formatTimes(option.times).join(', ') }}</p>
+            <a :href="option.url.includes('http') ? option.url : `https://${option.url}`"
+              target="_blank" rel="noopener noreferrer" class="details-link">More details</a>
+          </div>
+        </div>
+      </div>
+      <button class="close-button" @click="close">Close</button>
+    </div>
+  </div>
+</template>
+
+
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      activeTab: 0, // Default to the first tab
+      activeSubTab: {},
+      diningOptions: [
+        { name: "DCC Cafe", times: ["07:30-18:00"], url: "https://rpi.sodexomyway.com/dining-near-me/dcc-cafe" },
+        { name: "Evelyn's Cafe", times: ["11:00-14:00"], url: "https://rpi.sodexomyway.com/dining-near-me/evelyns_cafe" },
+        { name: "Argo Tea", times: ["09:00-18:00"], url: "https://rpi.sodexomyway.com/dining-near-me/library-cafe" },
+        {
+          name: "Student Union",
+          subOptions: {
+            "Father's Marketplace": { times: ["08:00-23:00"], url: "https://rpi.sodexomyway.com/dining-near-me/fathers-marketplace" },
+            "Panera Bread": { times: ["08:00-20:00"], url: "https://rpi.sodexomyway.com/dining-near-me/mcneil-room" },
+            "Thunder Mountain Curry": { times: ["11:00-15:00"], url: "https://rpi.sodexomyway.com/dining-near-me/mcneil-room" },
+            "Wild Blue Sushi": { times: ["11:00-22:00"], url: "https://rpi-preview.sodexomyway.com/dining-near-me/wild_blue_sushi" },
+            "Collar City Grill": { times: ["11:00-23:00"], url: "https://rpi.sodexomyway.com/dining-near-me/CCG" },
+            "Halal Shack": { times: ["17:00-23:00"], url: "https://rpi.sodexomyway.com/dining-near-me/Halal_shack" }
+          }
+        },
+        { name: "The Beanery Cafe", times: ["07:30-15:00"], url: "https://rpi.sodexomyway.com/dining-near-me/beanery-cafe" },
+        { name: "Blitman Dining Hall", times: ["07:00-09:30 Breakfast", "10:30-13:30 Brunch", "17:00-20:00 Dinner"], url: "https://rpi.sodexomyway.com/dining-near-me/blitman-dining-hall" },
+        { name: "BARH Dining Hall", times: ["07:00-09:30 Breakfast", "11:00-13:00 Brunch", "17:00-21:00 Dinner"], url: "https://rpi.sodexomyway.com/dining-near-me/barh-dining-hall" },
+        { name: "Russell Sage Dining Hall", times: ["07:00-11:00 Breakfast", "11:00-14:30 Lunch", "16:00-20:00 Dinner"], url: "https://rpi.sodexomyway.com/dining-near-me/russell-sage" },
+        { name: "Simply to Go", times: ["08:00-11:00 Breakfast", "11:00-15:30 Lunch"], url: "https://rpi.sodexomyway.com/dining-near-me/simply-to-go" },
+        { name: "Commons Dining Hall", times: ["07:00-11:00 Breakfast", "11:00-15:30 Lunch", "16:30-22:30 Dinner"], url: "https://rpi.sodexomyway.com/dining-near-me/commons-dining-hall" }
+      ],
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+      this.$emit('update:visible', true);
+    },
+    close() {
+      this.visible = false;
+      this.activeSubTab = {};
+      this.$emit('update:visible', false);
+    },
+    handleTabClick(index) {
+      this.activeTab = index;
+      if (!this.diningOptions[index].subOptions) {
+        this.activeSubTab = {}; // Reset sub-tabs if not in a sub-option tab
+      }
+    },
+    handleSubTabClick(parentName, subKey) {
+      this.activeSubTab[parentName] = this.activeSubTab[parentName] === subKey ? null : subKey;
+    },
+    formatTime24to12(time) {
+      const [hours, minutes] = time.split(':');
+      const hour = parseInt(hours, 10);
+      const suffix = hour >= 12 ? 'PM' : 'AM';
+      const adjustedHour = hour % 12 || 12; // converts "00" to "12" and handles 12 noon/midnight correctly
+      return `${adjustedHour}:${minutes} ${suffix}`;
+    },
+
+    formatTimes(times) {
+      return times.map(time => {
+        const [start, end] = time.split('-');
+        return `${this.formatTime24to12(start)} - ${this.formatTime24to12(end)}`;
+      });
+    }
+  },
+};
+</script>
+
+<style>
+.lightbox-backdrop {
+  position: fixed;
+  top: 80px;
+  right: 10px;
+  width: 100vw; 
+  height: calc(100vh - 100px); 
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  justify-content: flex-end; 
+}
+
+.lightbox-content {
+  background: white;
+  padding: 20px;
+  border-radius: 8px 0 0 8px; 
+  width: 100%; 
+  max-width: 370px; 
+  height: 100%; 
+  overflow-y: auto; 
+  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); 
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tabs-container {
+  max-height: 180px; 
+  overflow-y: auto; 
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap; 
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.tab {
+  flex-basis: calc(50% - 10px); 
+  margin: 1px;
+  text-align: center;
+  cursor: pointer;
+  padding: 3px;
+  font-size: 0.82rem; 
+}
+
+.tab.active {
+  font-weight: bold;
+  border-bottom: 2px solid blue;
+}
+
+.tab-content {
+  margin-top: 5px;
+  flex-grow: 1; 
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+}
+
+.tab.active, .student-union.active {
+  font-weight: bold;
+  border-bottom: 2px solid blue;
+}
+
+.tab.student-union.active + .tab-content {
+  padding-top: -5px; 
+  margin-top: -5px;
+}
+
+.close-button {
+  margin-top: 6px;
+}
+
+.scrollable-content {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.sub-tab {
+  display: block;
+  margin-top: -15px;
+}
+
+.sub-tab h4 {
+  font-weight: bold;
+}
+
+.sub-tab p {
+  font-weight: normal;
+}
+</style>

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) {