Merge branch 'dev' into building-pins

Author: IanZ1210

Diff for: README.md

@@ -1,11 +1,33 @@
 <h1 align="center">
-<img src="https://raw.githubusercontent.com/Vacansee/app/vue/src/assets/logo.png" height="128">
+<img src="https://raw.githubusercontent.com/Vacansee/app/live/src/assets/logo.png" height="128">
+
+
 <br>
-Vacansee
+
+[Vacansee](https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg)
+
 </h1>
-<p align="center"><strong>It's Free Real Estate</strong></p>
 
-**Vacansee** is a interactive heatmap that shows students what rooms and facilities are/will be available based on data scraped from schedules (SIS), booking services (EMS), and wifi telemetry (`rpi_wpa2`).
+<img src="https://img.shields.io/uptimerobot/ratio/7/m795932889-e68ac3da3cf053a05dedaa82?style=flat-square&logo=alwaysdata&logoColor=gray&labelColor=white" height="24">
+
+<img align="right" src="docs/demo-01.png" width="250px">
+
+### What is it?
+
+
+**Vacansee** is an interactive (heat)map for displaying live stats on rooms/facilities @ RPI.
+
+This includes:
+- Expected building occupancy and foot traffic 
+- Active/upcoming classes & where to find them
+- Printer availability
+- What dining halls are serving, and for how long
+- —and more to come!
+
+We intend to become the de facto one-stop-shop for event discovery, occupancy tracking, and general navigation on campus.	
+</td><td>
+
+
 
 <br>
 

Diff for: docs/demo-01.png

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^9.13.0",
+    "color.js": "^1.2.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "primevue": "^3.37.0",

Diff for: docs/demo-02.png

@@ -2,6 +2,8 @@
 // Basic Imports
 import { RouterLink, RouterView } from 'vue-router'
 import Logo from '@/assets/logo.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'
@@ -10,25 +12,26 @@ import Toast from 'primevue/toast'
 <template>
   <Toast/>
   <!-- HTML For Header -->
-  <header id="header" v-bind:class="{ 'homePageLogo': $route.path == '/' }">
-    
-      <div class="left-nav">
-        <RouterLink to="/"> <Logo class="logo" height="75" width="75"/> </RouterLink>
-        <div class="search">
-          <AutoComplete v-model="selection" placeholder="Search for a building or class..." :suggestions="filteredResults" @complete="filterResults" @item-select="searchFunc"></AutoComplete> 
-        </div>
+  <header id="header">
+      <div id="left-nav">
+        <RouterLink to="/"> <Logo class="logo" height="75" width="75"/>
+        </RouterLink>
       </div>
 
-      <div class="right-nav">
-        <a href="mailto:[email protected]"><Button class="nav-btn">
-            <img src="./assets/icons/poll.svg" height="30" width="30" />
+      <div id="right-nav">
+        <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>
-        <a href="https://github.com/Vacansee"><Button class="nav-btn">
-            <img src="./assets/icons/github.svg" height="30" width="30"/>
+        <a href="https://github.com/Vacansee/app" target="_blank" rel="noopener noreferrer"><Button class="nav-btn" aria-label="GitHub" >
+            <GHIcon height="25" width="25"/>
         </Button></a>
       </div>
-  </header>
-
+    </header>
+    <div id="mobile-nav">
+        <Teleport to="#left-nav" :disabled="global.aspectRatio > 1.5">
+          <AutoComplete class="search" :style="{'width':'100%'}" :input-style="{'width': '100%'}" v-model="selection" :placeholder="ex" :suggestions="suggest" @complete="filterRes" @item-select="goTo" @focus.native="searchFocus(true)" @blur.native="searchFocus(false)"></AutoComplete>
+        </Teleport>
+    </div>
 
   <RouterView />
 </template>
@@ -37,7 +40,14 @@ import Toast from 'primevue/toast'
 export default {
   data() {
     return {
-      filteredResults: [],
+      exs: [
+        "a building:  Russell Sage",
+        "a dept. code:  CSCI 1200",
+        "a room:  DCC 308",
+        "a CRN:  80385"
+      ],
+      ex: "",
+      suggest: [],
       selection: ""
     }
   },
@@ -52,81 +62,129 @@ export default {
         else
           document.getElementById("header").style.opacity = "1";
       }
-    },
-    'global.error': {
-      handler() {
-        if (this.global.error) this.$showToast({title: 'Failed to load data', body: this.global.error})
-      }
     }
   },
+  mounted() {
+    this.changeEx()
+    setInterval(this.changeEx, 5000);
+  },
   methods: {
-    filterResults(event) {
-      // filter buildings and classes
+    changeEx() {
+      const ex = this.exs.shift()
+      this.ex = `Try ${ex}`; this.exs.push(ex)
+    },
+    searchFocus(is) {
+      this.global.sFocus = is
+      // console.log("sFocus:", is)
+    },
+    filterRes(event) { 
+      // Case & whitespace insensitive, ignore some characters:
+      const query = event.query.toLowerCase().replace(/\s{2,}/g, ' ').replace(/["#]/g, '')
       setTimeout(() => {
-        this.filteredResults = [];
-        Object.keys(this.global.data).map((bid) => {
-          this.filteredResults.push(bid.toString() + " (" + this.global.data[bid].meta.name.toString() + ")");
+        this.suggest = []
+        // Transform, sort, filter global.data + global.searchData:
+        this.suggest = Object.keys(this.global.data).concat(this.global.searchData.flatMap(Object.keys))
+        .map(key => {
+          if (key in this.global.data) return `${key.toString()} (${this.global.data[key].meta.name.toString()})`
+          else return key
         })
-        this.filteredResults.sort();
-        this.filteredResults = this.filteredResults.map((bid) => {
-            return bid.replace(/_/g, ' ');
-        })
-        .filter((result) => {
-            return result.toLowerCase().includes(event.query.toLowerCase());
-        });
-      }, 250);
+        .filter(s => s.toLowerCase().includes(query))
+        .sort()
+        .map(s => s.replace(/_/g, ' '));
+      }, 100);
     },
-    searchFunc() {
-      // select building or class here
-      this.global.bldg = this.selection.substring(0, this.selection.indexOf("(") - 1);
-      this.selection = "";
+    goTo() {
+      const abbrev = this.selection.substring(0, this.selection.indexOf("(") - 1)
+      if (abbrev in this.global.data) {
+        this.global.bldg = abbrev, this.selection = ""
+        console.log(`Building "${abbrev}" selected`)
+        return
+      }
+      else if (this.selection in this.global.searchData[2]) { // toRoom
+        const [bldg, room] = this.selection.split(" ")
+        this.global.floor = parseInt(room[0]) // TODO: non-numerical room #s
+        this.global.room = room, this.global.bldg = bldg 
+        console.log(`Room "${this.selection}" selected`)
+        this.selection = ""
+        return
+      }
+      let CRN = ""
+      if (this.selection in this.global.searchData[1]) { // deptToCRN
+        CRN = this.global.searchData[1][this.selection]
+        console.log(`Using dept code "${this.selection}"`)
+      }
+      else if (this.selection in this.global.searchData[0]) CRN = this.selection // byCRN
+      // TODO: show all locations (pins), calc time 'til begin/end
+      const [bldg, room] = Object.keys(this.global.searchData[0][CRN])[0].split(" ")
+      this.global.floor = parseInt(room[0])
+      this.global.room = room, this.global.bldg = bldg, this.selection = ""
+      console.log(`Room w/ CRN #${CRN} selected`)
     }
   }
 }
 </script>
 <style scoped>
 @import './assets/main.css';
 /* Everything from here on in the file is  basic css */
-.homePageLogo {
-  position: absolute;
-}
 
 header {
-  z-index: 7;
-  display: flex;
-  padding: 1rem;
+  pointer-events: none;
+  position: absolute;
+  z-index: 6;
 }
 
 .logo {
-  display: block;
-  margin: 0 1rem 0 0;
+  margin-right: 1rem; 
   pointer-events: all;
+  filter: drop-shadow(0px 5px 20px white);
 }
 
 .nav-btn {
+  fill: #205C5B;
   margin: .5rem;
+  width: 3.25rem;
+  height: 3.25rem;
+  justify-content: center;
+  background-color: var(--unusedfill);
+  border: 2px solid var(--buildbord);
+  box-shadow: 0px 5px 25px rgba(0, 10, 20, 0.08);
   pointer-events: all;
 }
 
-.left-nav {
-  position: fixed;
+.nav-btn:hover,
+.nav-btn:active {
+  fill: white;
+}
+
+#left-nav {
   display: flex;
-  pointer-events: none;
   padding: .5rem 1rem;
-  top: 0;
-  left: 0;
 }
 
 .search {
+  width: 250px !important;
+  border: 2px solid var(--walkpath);
+  box-shadow: 0px 5px 25px rgba(0, 10, 20, 0.08);
+  border-radius: 10px;
   align-self: center;
   pointer-events: all;
 }
 
-.right-nav {
+#right-nav {
   position: fixed;
-  pointer-events: none;
   padding: .8rem 1rem;
   top: 0;
   right: 0;
 }
+
+#mobile-nav {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  bottom: 2vh;
+  z-index: 6;
+}
+
 </style>

Diff for: package.json

@@ -36,6 +36,7 @@
   --section-gap: 160px;
 
   --background: #ffffff;
+  --soft-bg: #eaf2f0;
   --title: #1f4045;
 
   --carroad: #d4e5e2;