Merge pull request #22 from Vacansee/issue18

.gitignore

@@ -1,3 +1,4 @@
+# Any files added here are ignored in git
 # Logs
 logs
 *.log

src/App.vue

@@ -1,9 +1,11 @@
 <script setup>
+// Basic Imports
 import { RouterLink, RouterView } from 'vue-router'
 import Logo from '@/assets/logo.svg?component'
 </script>
 
 <template>
+  <!-- HTML For Header -->
   <header id="header" v-bind:class="{ 'homePageLogo': $route.path == '/' }">
     <Logo class="logo" width="75" height="75" />
 
@@ -26,6 +28,7 @@ export default {
     'global.bldg': {
       deep: true,
       handler() {
+        // Only shows header when a building is not selected
         if (this.global.bldg)
           document.getElementById("header").style.opacity = "0";
         else
@@ -38,7 +41,7 @@ export default {
 </script>
 <style scoped>
 @import './assets/main.css';
-
+/* Everything from here on in the file is  basic css */
 .homePageLogo {
   position: absolute;
 }

src/components/home/Floor.vue

@@ -1,4 +1,5 @@
 <script setup>
+// Basic imports
 import moment from 'moment-timezone'
 import tinycolor from "tinycolor2";
 </script>
@@ -16,17 +17,20 @@ const getSvgFloor = async (floor) => {
 }
 
 export default {
+  // Get references to global
   inject: ["global"],
   props: ["floor"],
   data() {
     return {
+      // Local variables
       svg: null,
       currRoom: null,
       roomLabel: "",
     }
   },
   watch: {
     floor: {
+      // When floor changes, run this code
       async handler(floor) {
         if (floor == "") {
           this.svg = null;
@@ -47,7 +51,9 @@ export default {
     })
   },
   methods: {
+    // Gets the current building
     getBldg() { return this.global.data[this.global.bldg] },
+    // get room color corresponding to room availability
     getColor(minutes) {
       const colors = [
         "#66e099", // 4 hours (240 minutes)
@@ -67,6 +73,7 @@ export default {
       if (minutes >= 10)  return colors[5]
       else return colors[6]
     },
+    // Select the room needed
     roomSelect(path) {
       let roomName = path.id.substr(1)
       if (!this.getBldg()[roomName]) {
@@ -90,6 +97,7 @@ export default {
       }
       this.global.room = this.roomLabel
     },
+    // Apply the room color to the popup
     applyRoomColors() {
       const svgComponent = this.$refs.svgComponent
 

src/components/home/FloorItem.vue

@@ -28,12 +28,14 @@ import Floor from './Floor.vue'
 
 <script>
 export default {
+  // Get reference to global
   inject: ["global"],
   props: ['unselected'],
   components: {
     Floor
   },
   watch: {
+    // When unselected changes
     unselected(newVar) {
       if (newVar) {
         this.floor = ""
@@ -52,24 +54,28 @@ export default {
         down.style.transform = "rotate(180deg)";
       }
     },
+    // When floor num changes
     floorNum(newVar) {
       if (newVar == this.getBldg().meta.floors[1])
         this.btnUp = false 
       else this.btnUp = true
       if (newVar == 1) this.btnDown = false
       else this.btnDown = true
     },
+    // When button up changes
     btnUp(newVar) {
       if (newVar) up.style.opacity = 1;
       else        up.style.opacity = 0.6;
 
     },
+    // When button down changes
     btnDown(newVar) {
       if (newVar) down.style.opacity = 1;
       else        down.style.opacity = 0.6;
     },
   },
   data() {
+    // Local variables
     return {
       threshold: 1,
       doResize: "",
@@ -80,24 +86,31 @@ export default {
     }
   },
   mounted() {
+    // On load, set currFloor transition
     setTimeout(() => currFloor.style.transition = "transform .2s, width .4s", 500)
-
+    // constantly check for resize of window
     window.addEventListener("resize", this.windowResizeTimeout)
+    // call the event handler
     this.windowEventHandler()
   },
   methods: {
+    // gets the current building
     getBldg() { return this.global.data[this.global.bldg] },
     bringToFront(f) {
       let group = f.parentNode
       group.appendChild(f)
     },
+    // When a room is hovered over
     onRoomHover(roomHover) {
       this.$emit('room-hover', roomHover); // pass it up one more time
     },
+    // Function is used so that after 300 seconds of not resizing,
+    // the function doesnt check for resizing
     windowResizeTimeout() {
       clearTimeout(this.doResize);
       this.doResize = setTimeout(this.windowEventHandler, 300);
     },
+    // Handles changes of other variables when resize is changed
     windowEventHandler() {
       let x = window.innerWidth;
       let y = window.innerHeight - 250; // Subtract the bottom panel's height
@@ -108,6 +121,7 @@ export default {
       else // landscape mode
         currFloor.style.transform = `translate(-50%, calc(-50% + 100px)) scale(${x / 65})`;
     },
+    // Increases the floor
     increaseFloor() {
       if (this.floorNum < this.getBldg().meta.floors[1]) {
         this.floorNum++;
@@ -116,6 +130,7 @@ export default {
         this.global.room = ""
       }
     },
+    // Decreases the floor
     decreaseFloor() {
       if (this.floorNum != 1) {
         this.floorNum--;

src/components/home/MapItem.vue

@@ -2,6 +2,7 @@
 import tinycolor from "tinycolor2";
 </script>
 <template>
+  <!-- data for every building -->
   <div id="mapBox">
     <svg viewBox="0 0 1024 1706" id="map">
       <g id="bg">
@@ -357,15 +358,18 @@ import tinycolor from "tinycolor2";
 
 <script>
 export default {
+  // Adds use of global variables
   inject: ["global"],
   props: ['unselected', 'bldgSVG'],
   watch: {
+    // When unselected is changed
     unselected(newVar) {
       if (newVar)
         setTimeout(this.windowEventHandler, 800);
       else
         this.bringToFront(this.bldgSVG);
     },
+    // This is run once, for a first calculation
     'global.firstCalc': {
       deep: true,
       handler() {
@@ -375,6 +379,7 @@ export default {
       }
     }
   },
+  // General local variables
   data() {
     return {
       threshold: 1,
@@ -387,14 +392,16 @@ export default {
     })
   },
   mounted() {
+    // Turn on the map
     map.style.opacity = 1
     setTimeout(() => map.style.transition = "transform .2s, width .4s", 500)
-
+    // Check for resizing of window
     window.addEventListener("resize", this.windowResizeTimeout)
-
+    // Handles changes to the window
     this.windowEventHandler()
   },
   methods: {
+    // Applys the color of the building based on availability
     applyBuildingColors() {
       let colors = [
         "#eff5de", // >0%
@@ -435,13 +442,16 @@ export default {
       let group = b.parentNode
       group.appendChild(b)
     },
+    // Used so resizing isnt called forever, 
+    // Stops calling when resize hasnt been changed for 300 seconds
     windowResizeTimeout() {
       console.log(this.unselected)
       if (this.unselected) {
         clearTimeout(this.doResize);
         this.doResize = setTimeout(this.windowEventHandler, 300);
       }
     },
+    // Handles events when resize is changed
     windowEventHandler() {
       let x = window.innerWidth
       let y = window.innerHeight

src/components/home/PopUpItem.vue

@@ -3,6 +3,7 @@ import moment from 'moment-timezone'
 </script>
 
 <template>
+    <!-- HTML for the popup -->
     <div id="popup">
         <div id="popup-head"> 
             <div id="popupbuild">
@@ -55,6 +56,7 @@ import moment from 'moment-timezone'
 <script>
 
 export default {
+    // Gets reference to global
     inject: ['global'],
     watch: {
         'global.aspectRatio': {
@@ -74,7 +76,9 @@ export default {
         }
     },
     methods: {
+        // return if a room is selected
         noneSelected() { return !this.global.room },
+        // Returns the current building
         getBldg() { return this.global.data[this.global.bldg] },
         noData() { return !this.getBldg().hasOwnProperty(this.global.room) },
         hasSecs(type) { 
@@ -83,20 +87,26 @@ export default {
                 case 'next': return (this.getData().meta.next[1].length > 0)
             }
         },
+        // Gets the cur from meta data
         getCur() {
             const i = moment(this.global.time, 'e:HHmm'), f = this.getData().meta.cur[2]
             return moment.duration(f.diff(i))
         },
+        // Gets next from meta data
         getNext() {
             const i = moment(this.global.time, 'e:HHmm'), f = this.getData().meta.next[2]
             return moment.duration(f.diff(i))
         },
+        // Returns all data for the current room
         getData() { return this.getBldg()[this.global.room] },
+        // Gets the current time
         getRealTime(date) { return moment(date, 'e:HHmm').tz('America/New_York').format('h:mm A') },
+        // Returns the printers in a building
         getPrinters() {
             if (!this.getBldg().meta.hasOwnProperty("printers")) return 'none'
             else return this.getBldg().meta.printers
         },
+        // Gathers the classes for the building
         getTodaysClasses() {
             let classes = []
             let roomData = this.getData() 
@@ -105,6 +115,7 @@ export default {
                     classes.push(roomData[time][0] + ' at ' + this.getRealTime(time))
             } return classes
         },
+        // Turns the heat from a number into a representative phrase
         interpretHeat() {
             let heat = this.getBldg().meta.heat
             if (heat > 80) return 'very busy'