Panel: 1st pass

Vacansee · Oct 13, 2023 · 2492428 · 2492428
1 parent 30bb49e
commit 2492428
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 27 deletions.
diff --git a/src/assets/photos/Folsom.jpg b/src/assets/photos/Folsom.jpg
diff --git a/src/assets/photos/Sage.jpg b/src/assets/photos/Sage.jpg
diff --git a/src/components/home/Floor.vue b/src/components/home/Floor.vue
@@ -136,7 +136,7 @@ export default {
           else { // !roomInfo
             path.setAttribute("cursor","not-allowed")
             if (roomID.includes('excavated')) path.setAttribute("fill", "var(--hardborder)")
-            if (roomID != 'floor') // rooms w/o classes:
+            else if (roomID != 'floor') // rooms w/o classes:
               path.setAttribute("fill", "var(--unusedfill)")
           }
           path.setAttribute("pointer-events", "all");

diff --git a/src/components/home/PopUpItem.vue b/src/components/home/PopUpItem.vue
@@ -13,24 +13,29 @@ import moment from 'moment-timezone'
             </div>
         </div>
         <div v-if="global.bldg" class="body">
-            <!-- <img src="../../assets/photos/DCC.jpg" alt="DCC" id="photo"> -->
-            <span>{{ getBldg().meta.name }}&emsp;&emsp;</span>
-            <span ref="mySpan">Current Time: {{ getRealTime(global.time) }}&emsp;&emsp;</span>
-            <span>Building heat: <b>{{ interpretHeat() }}</b> ({{ getBldg().meta.heat }}%)&emsp;&emsp;</span>
+            <div class="block">
+                <div id="photo-box">
+                    <img src="../../assets/photos/DCC.jpg" id="photo">
+                    <!-- <img :src="`../../assets/photos/${global.bldg}.jpg`" id="photo"> -->
+                    <span>{{ getBldg().meta.name }}</span>
+                </div>
+                <p id="busy"><b>{{ interpretHeat() }}</b> ({{ getBldg().meta.heat }}%)</p>
+                <p id="time" ref="mySpan">{{ getRealTime(global.time) }}</p>
+            </div>
             <p></p>
-            <div v-if="noneSelected()" class="warn">No room selected</div>
-            <div v-else-if="noData()" class="warn">No classes in room</div>
-            <div v-else style="display: flex;">
-                <div class="column">
+            <div v-if="noneSelected()" class="block warn">No room selected</div>
+            <div v-else-if="noData()" class="block warn">No classes in room</div>
+            <div v-else> <!-- Room w/ data selected -->
+                <div class="block">
                     <span>Capacity: ~{{ getData().meta.max }}&emsp;&emsp;</span>
                     <span>Printers: {{ getPrinters() }}&emsp;&emsp;</span>
-                    <span>In session: <code class="code">{{ getData().meta.active }}</code>&emsp;&emsp;</span>
                     <p v-if="getData().meta.cur"><b>{{ getData().meta.cur[0] }}</b> ends in
                         <b>{{ getCur().hours() }}h</b> and
                         <b>{{ getCur().minutes() }}m</b>
                         <span v-if="hasSecs('cur')"> for sections </span>
                         <span v-for="item in getData().meta.cur[1]" class="sec">{{ item }}</span>
                     </p>
+                    <p v-else>No class in session</p>
                     <p v-if="getData().meta.next">Next class (<b>{{ getData().meta.next[0] }}</b>) starts in
                         <b>{{ getNext().hours() }}h</b> and
                         <b>{{ getNext().minutes() }}m</b>
@@ -39,13 +44,14 @@ import moment from 'moment-timezone'
                     </p>
                     <p v-else class="warn"> No more classes this week</p>
                 </div>
-                <div class="column">
+                <div class="block">
                     <b v-if="getData().meta.next">Today</b>
-                    <ul>
-                        <li v-for="item in getTodaysClasses()">
-                            {{ item }}
-                        </li>
-                    </ul>
+                    <table>
+                        <tr v-for="item in getTodaysClasses()">
+                            {{ item[0] }}
+                            <td>{{ item[1] }}</td>
+                        </tr>
+                    </table>
                 </div>
             </div>
         </div>
@@ -66,12 +72,12 @@ export default {
                 if (this.global.aspectRatio <= 1) {
                     popup.style.height = "100vh"
                     popup.style.width = "33vw"
-                    popup.style.borderRadius = "0 30px 30px 0"
+                    popup.style.borderRadius = "0 15px 15px 0"
                     buttonBox.style.bottom = "5vh"
                 } else { // If portrait mode
                     popup.style.height = "50vh"
                     popup.style.width = "100vw"
-                    popup.style.borderRadius = "30px 30px 0 0"
+                    popup.style.borderRadius = "15px 15px 0 0"
                     buttonBox.style.bottom = "52vh"
                 }
             }
@@ -81,11 +87,13 @@ export default {
         if (this.global.aspectRatio <= 1) {
                 popup.style.height = "100vh"
                 popup.style.width = "33vw"
-                popup.style.borderRadius = "0 30px 30px 0"
+                popup.style.borderRadius = "0 15px 15px 0"
+                buttonBox.style.bottom = "5vh"
         } else { // If portrait mode
                 popup.style.height = "50vh"
                 popup.style.width = "100vw"
-                popup.style.borderRadius = "30px 30px 0 0"
+                popup.style.borderRadius = "15px 15px 0 0"
+                buttonBox.style.bottom = "52vh"
         }
     },
     methods: {
@@ -125,7 +133,7 @@ export default {
             let roomData = this.getData() 
             for (let time in roomData) {
                 if (time.split(':')[0] == this.global.time.split(':')[0])
-                    classes.push(roomData[time][0] + ' at ' + this.getRealTime(time))
+                    classes.push([roomData[time][0], this.getRealTime(time)])
             } return classes
         },
         // Turns the heat from a number into a representative phrase
@@ -157,7 +165,9 @@ export default {
     border: 3px solid var(--softborder);
     border-bottom-style: none;
     box-shadow: 0px -2px 25px rgba(0, 0, 0, 0.08);
-    border-radius: 30px 30px 0 0;
+    border-radius: 15px 15px 0 0;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 #popup-head {
@@ -175,15 +185,54 @@ export default {
 }
 
 #photo {
-    height: 175px;
+    min-width: 300px;
+    max-width: 70%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
     border-radius: 10px;
     display: flex;
 }
 
+#photo-box {
+    text-align: center;
+}
+
+#busy {
+    font-size: larger;
+    line-height: 0;
+    text-align: center;
+}
+
+#time {
+    text-align: center;
+    color: var(--hardborder);
+}
+
+table, td {
+    line-height: 2.5;
+    padding-left: 15px;
+}
+
+table {
+    width: 80% !important;
+    min-width: 350px;
+    padding-bottom: 15px;
+}
+
+td {
+  border-left: solid 1px var(--softborder);
+}
+
+tr:nth-child(even) {
+    background-color: #d4e5e280;
+}
+
 .warn {
     color: red;
+    text-align: center;
     font-weight: 500;
-
 }
 .code {
     font-size: 15px;
@@ -197,13 +246,16 @@ export default {
     border-radius: 30%;
 }
 
-.column {
-  flex: 50%;
+.block {
+    /* background-color: paleturquoise; */
+    margin: 10px;
+    padding: 10px;    
+    border-radius: 10px;
+    border: 1px solid var(--softborder);
 }
 
 .body {
     margin-top: 50px;
-    margin-left: 25px;
 }
 
 li {