Merge branch 'dev' of https://github.com/Vacansee/app into dev

src/components/home/Floor.vue

@@ -6,12 +6,12 @@ import tinycolor from "tinycolor2";
 
 <template>
   <div id="svgFloor">
-    <component :is="svg" ref="svgComponent"></component>
+    <component :is="floorSVG" ref="svgComponent"></component>
   </div>
 </template>
-  
+
 <script>
-const getSvgFloor = async (floor) => {
+const getFloorSVG = async (floor) => {
   const module = await import(`../../assets/floors/${floor}.svg`)
   return module.default
 }
@@ -21,26 +21,23 @@ export default {
   inject: ["global"],
   props: ["floor"],
   data() {
-    return {
-      // Local variables
-      svg: null,
-      currRoom: null,
-      roomLabel: "",
+    return { // Local variables
+      floorSVG: null,
+      roomSVG: null,
     }
   },
   watch: {
     floor: {
       // When floor changes, run this code
       async handler(floor) {
         if (floor == "") {
-          this.svg = null;
-          if (this.currRoom != null)
-            this.currRoom.removeAttribute("id", "selected");
-          this.currRoom = null;
-          this.roomLabel = "";
+          this.floorSVG = null;
+          if (this.roomSVG != null)
+            this.roomSVG.removeAttribute("id", "selected");
+          this.roomSVG = null;
           this.global.room = ""
         }
-        else this.svg = await getSvgFloor(floor)
+        else this.floorSVG = await getFloorSVG(floor)
       },
       immediate: true,
     },
@@ -73,32 +70,31 @@ export default {
       if (minutes >= 10)  return colors[5]
       else return colors[6]
     },
-    // Select the room needed
-    roomSelect(path) {
+    
+    roomSelect(path) { // Select the room needed
       let roomName = path.id.substr(1)
       if (!this.getBldg()[roomName]) {
-        this.currRoom.remove();
-        this.currRoom = null
-        this.roomLabel = ""
+        if (this.roomSVG != null) this.roomSVG.remove()
+        this.roomSVG = null
+        this.global.room = ""
       }
       else {
-        if (this.currRoom != null) 
-          this.currRoom.remove();
-        this.currRoom = path
-        this.roomLabel = path.id.substr(1)
+        if (this.roomSVG != null) 
+          this.roomSVG.remove();
+        this.roomSVG = path
+        this.global.room = path.id.substr(1)
         const clonedPath = path.cloneNode(true);
         path.parentNode.appendChild(clonedPath);
-        this.currRoom = clonedPath;
+        this.roomSVG = clonedPath;
         setTimeout(() => {
           clonedPath.setAttribute("id", "selected");
           let border = tinycolor(path.getAttribute("fill")).darken(30).toString();
           clonedPath.style.stroke = border
         }, 10);
       }
-      this.global.room = this.roomLabel
     },
-    // Apply the room color to the popup
-    applyRoomColors() {
+
+    applyRoomColors() { // Apply the room color to the popup
       const svgComponent = this.$refs.svgComponent
 
       if (svgComponent && svgComponent.$el) {
@@ -130,9 +126,8 @@ export default {
               path.setAttribute("cursor", "pointer")
             }
             else {
-              const initial = moment(this.global.time, 'e:HHmm')
-              const final = roomInfo.meta.next[2]
-              const next = moment.duration(final.diff(initial)).asMinutes()
+              let initial = moment(this.global.time, 'e:HHmm'), final = roomInfo.meta.next[2]
+              let next = moment.duration(final.diff(initial)).asMinutes()
               let fill = this.getColor(next)
               path.setAttribute("fill", fill);
               let border = tinycolor(fill).darken(25).toString();
@@ -154,7 +149,7 @@ export default {
   }
 }
 </script>
-  
+
 <style>
 #svgFloor {
   fill: var(--roomfill);

src/components/home/FloorItem.vue

@@ -6,7 +6,7 @@ import Floor from './Floor.vue'
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
 
-  <div id='currFloor'>
+  <div id='floorBox'>
     <Floor @room-hover="onRoomHover" :floor="floor" />
   </div>
 
@@ -39,7 +39,7 @@ export default {
     unselected(newVar) {
       if (newVar) {
         this.floor = ""
-        currFloor.style.opacity = 0;
+        floorBox.style.opacity = 0;
         up.style.opacity = 0;
         down.style.opacity = 0;
       } else {
@@ -48,7 +48,7 @@ export default {
           this.floor = this.global.bldg + this.getBldg().meta.floors[2]
           this.global.floor = this.getBldg().meta.floors[2]
         }
-        currFloor.style.opacity = 1;
+        floorBox.style.opacity = 1;
         up.style.opacity = 1;
         down.style.opacity = 1;
         down.style.transform = "rotate(180deg)";
@@ -86,8 +86,8 @@ export default {
     }
   },
   mounted() {
-    // On load, set currFloor transition
-    setTimeout(() => currFloor.style.transition = "transform .2s, width .4s", 500)
+    // On load, set floorBox transition
+    setTimeout(() => floorBox.style.transition = "transform .2s, width .4s", 500)
     // constantly check for resize of window
     window.addEventListener("resize", this.windowResizeTimeout)
     // call the event handler
@@ -117,9 +117,9 @@ export default {
       let ratio = x / y;
 
       if (ratio < this.threshold)  // portrait mode
-        currFloor.style.transform = `translate(calc(-50% - 30px), calc(-50%)) scale(${(y - 150) / 50})` + `rotate(90deg)`;
+        floorBox.style.transform = `translate(calc(-50% - 30px), calc(-50%)) scale(${(y - 150) / 50})` + `rotate(90deg)`;
       else // landscape mode
-        currFloor.style.transform = `translate(-50%, calc(-50% + 100px)) scale(${x / 65})`;
+        floorBox.style.transform = `translate(-50%, calc(-50% + 100px)) scale(${x / 65})`;
     },
     // Increases the floor
     increaseFloor() {
@@ -144,7 +144,7 @@ export default {
 </script>
 
 <style >
-#currFloor {
+#floorBox {
   position: absolute;
   left: 50%;
   top: calc(50% - 125px);
@@ -195,8 +195,6 @@ export default {
   color: #4d6d6b;
 }
 
-
-
 .material-symbols-outlined {
   font-variation-settings:
     'FILL' 0,