Skip to content

Commit

Permalink
Close time, popup visual rework
Browse files Browse the repository at this point in the history
  • Loading branch information
@Acumane
Acumane committed Apr 14, 2024
1 parent ea27090 commit 39b2b42
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 58 deletions.
162 changes: 105 additions & 57 deletions src/components/home/PopUpItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script setup>
import moment from 'moment-timezone'
import { average } from 'color.js'
import Tag from 'primevue/tag';
import InfoIcon from '@/assets/icons/info.svg?component'
import tinycolor from "tinycolor2"
</script>

<template>
Expand All @@ -17,28 +17,28 @@ import InfoIcon from '@/assets/icons/info.svg?component'
<div id="fadeout"></div>
<div v-if="global.bldg && getBldg()" class="body">
<div class="block">
<div id="photoBox">
<!-- <img :src="'src/assets/photos/' + global.bldg + '.jpg'" id="photo"> -->
<img :src="imgPath" id="photo">
<img :src="imgPath" id="photo">
<div id="img-fadeout"></div>
<div id="title">
<span>{{ getBldg().meta.name }}</span>
</div>
<p id="heat" v-if="interpretHeat()"><b style="color:var(--heatColor);">{{ interpretHeat() }}</b> (~{{ Math.trunc(getBldg().meta.heat.toFixed(2)*100) }}%)</p>
<p id="heat" v-else><b>N/A</b></p>
<p id="flow" v-if="interpretFlow()">+ {{ interpretFlow() }} (~{{ Math.trunc(getBldg().meta.flow.toFixed(2)*100) }}%)&emsp;</p>
<p id="time" ref="mySpan">{{ getRealTime(global.time) }}</p>
<span v-if="getHist()">
<InfoIcon class="info"/>
<a :href="'https://archives.rpi.edu/institute-history/building-histories/' + getHist()">
<em> Get historical info&emsp;</em>
<a v-if="getHist()" :href="'https://archives.rpi.edu/institute-history/building-histories/' + getHist()">
<InfoIcon id="info"/>
</a>
</span>
<Tag value="Tag placeholder" rounded></Tag> <!-- Placeholder for the tag -->
<div id="stats">
<span id="heat" v-if="interpretHeat()"><b style="color:var(--heatColor);">{{ interpretHeat() }}</b>
<span> (~{{ Math.trunc(getBldg().meta.heat.toFixed(2)*100) }}%)</span></span>
<span id="heat" v-else><b>N/A</b></span>
<span id="flow" v-if="interpretFlow()"> &emsp;+ 👣 <span v-if="!compact">{{ interpretFlow() }}</span>
&emsp; </span>
<span id="hours" v-if="getAccess()"> &emsp;{{ getAccess()[0] + " - " + getAccess()[1] }}</span>
<span v-if="!getAccess()"> &emsp; 🔒 <span v-if="!compact">locked</span></span>
</div>
</div>
<div v-if="getDining()" class="block"> <!-- Block: dining -->
<b>Dining&emsp;</b>
<InfoIcon class="info"/>
<a :href="'https://rpi.sodexomyway.com/dining-near-me/' + getDining().url">
<em> More info</em>
<InfoIcon class="i"/>
</a>
<p v-for="d in parseDiners()"> &emsp;{{ d }}: </p>
<p>Test</p>
Expand All @@ -48,20 +48,20 @@ import InfoIcon from '@/assets/icons/info.svg?component'
<div v-else> <!-- Room w/ data selected -->
<div class="block"> <!-- Block #1: room information -->
<b>Overview</b><br><br>
<span>Capacity: ~{{ getRoom().meta.max }}&emsp;&emsp;</span>
<span v-if="!getPrinters()">Printers: none</span>
<span>👤 Capacity: ~{{ getRoom().meta.max }}&emsp;&emsp;</span>
<span v-if="!getPrinters()">&emsp;&emsp;🖨️ Printers: none</span>
<p v-if="getRoom().meta.cur"><b>{{ getRoom().meta.cur[0] }}</b> ends in
<b>{{ getCur().hours() }}h</b> and
<b>{{ getCur().minutes() }}m</b>
<span v-if="getSecs('cur')>0"> for section{{(getSecs('cur') > 1) ? 's ':' '}}</span>
<span v-for="item in getRoom().meta.cur[1]" class="sec">{{ item }}</span>
<span v-for="item in getRoom().meta.cur[1].map(Number)" class="sec">{{ item }}</span>
</p>
<p v-else>No class in session</p>
<p v-if="getRoom().meta.next">Next class (<b>{{ getRoom().meta.next[0] }}</b>) starts in
<b>{{ getNext().hours() }}h</b> and
<b>{{ getNext().minutes() }}m</b>
<span v-if="getSecs('next')>0"> for section{{(getSecs('next') > 1) ? 's ':' '}}</span>
<span v-for="item in getRoom().meta.next[1]" class="sec">{{ item }}</span>
<span v-for="item in getRoom().meta.next[1].map(Number)" class="sec">{{ item }}</span>
</p>
<p v-else class="warn"> No more classes this week</p>
</div>
Expand Down Expand Up @@ -94,7 +94,7 @@ export default {
// Gets reference to global
inject: ['global'],
data() {
return { imgPath: "" }
return { imgPath: "", compact: false }
},
watch: {
'global.aspectRatio': {
Expand All @@ -106,28 +106,49 @@ export default {
popup.style.left = "unset"
popup.style.borderRadius = "0 15px 15px 0"
buttonBox.style.bottom = "3vw"
this.compact = (this.global.aspectRatio >= .75) ? true : false
} else { // If portrait mode
popup.style.height = "50vh"
popup.style.width = "100vw"
popup.style.left = `${(window.innerWidth-popup.offsetWidth)/2}px`
popup.style.borderRadius = "15px 15px 0 0"
if (window.innerWidth > 800) buttonBox.style.bottom = "3vw"
else buttonBox.style.bottom = "52vh"
this.compact = (this.global.aspectRatio >= 2.4) ? true : false
}
}
},
'global.bldg': {
handler() {
if (this.global.bldg) {
this.imgPath = new URL(`../../assets/photos/${this.global.bldg}.jpg`, import.meta.url).href
const img = new Image()
img.src = this.imgPath
img.onload = () => {
// Observe image's top-left 50x50 px:
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = 50; canvas.height = 50
ctx.drawImage(img, 0, 0, 50, 50, 0, 0, 50, 50)
const cropPath = canvas.toDataURL()
average(cropPath, { format: 'hex' })
.then(color => {
let lum = tinycolor(color).getLuminance()
console.log("luminance", lum)
info.style.fill = ( lum > 0.3) ? '#000000aa' : '#ffffffdd'
})
average(this.imgPath, { format: 'hex' })
.then(color => {
photoBox.style.backgroundColor = `${color}20`
photoBox.style.outlineColor = `${color}40`
})
.then(color => {
title.style.color = color
photo.style.borderColor = `${color}80`
})
}
}
}
}
},
},
},
mounted() {
if (this.global.aspectRatio <= this.global.flipScreen) {
Expand Down Expand Up @@ -170,10 +191,14 @@ export default {
const i = moment(this.global.time, 'e:HHmm'), f = this.getRoom().meta.next[2]
return moment.duration(f.diff(i))
},
getAccess() { // Returns whether building is open/closed
if (!this.getBldg().meta.hasOwnProperty("open")) return false
else return this.getBldg().meta.open
},
// Returns all data for the current room
getRoom() { 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') },
getRealTime(date) { return moment(date, 'e:HHmm').format('h:mm A') },
// Returns the printers in a building
getPrinters() {
if (!this.getRoom().meta.hasOwnProperty("printers")) return false
Expand Down Expand Up @@ -214,7 +239,7 @@ export default {
interpretFlow() {
let flow = this.getBldg().meta.flow
if (flow > .8) return 'heavy foot traffic'
else if (flow > .5) return 'foot traffic'
else if (flow > .5) return 'heavy foot traffic'
else if (flow > .2) return 'some foot traffic'
else return false
},
Expand Down Expand Up @@ -267,6 +292,17 @@ export default {
height: 25px;
}
#img-fadeout {
background-image:
linear-gradient(185deg, transparent 20%, white 55%, white),
linear-gradient(182deg, transparent 30%, white 60%, white);
position: absolute;
height: 160px;
width: 97%;
bottom: 0px;
}
.body {
position: absolute;
top: 50px;
Expand All @@ -280,35 +316,28 @@ export default {
#photo {
width: 100%;
border-radius: 9px 9px 0 0;
display: flex;
position: relative;
border: 2px solid var(--softborder);
}
#photoBox {
max-width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
#title {
line-height: 2.5;
outline: 3px solid;
border-radius: 10px;
font-weight: 500;
left: 1.2rem;
text-shadow: white 4px -2px 20px;
font-size: x-large;
position: absolute;
bottom: 14%;
}
#heat {
font-size: larger;
line-height: 0;
padding-bottom: .5rem;
text-align: center;
}
#flow {
line-height: 0;
text-align: center;
}
#time {
text-align: center;
color: var(--hardborder);
color: #000000aa;
}
table, td {
Expand Down Expand Up @@ -337,9 +366,9 @@ tr:nth-child(even) {
}
.sec {
font-family: monospace;
padding: 4px 5px 1px 5px;
margin: 0 5px 0 0;
font-size: small;
padding: 2px 6px 2px 6px;
margin-right: 6px;
background-color: var(--roomfill);
border-radius: 30%;
}
Expand All @@ -352,18 +381,37 @@ tr:nth-child(even) {
border: 1px solid var(--softborder);
box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.05);
background-color: white;
position: relative;
}
#stats {
position: absolute;
vertical-align: middle;
bottom: 7%;
left: 1.2rem;
}
#hours {
font-size: smaller
}
.info {
fill: #1e3050;
margin: 0 4px -4px 0;
.i {
position: absolute;
fill: #000000aa;
height: 20px;
width: 20px;
}
#info {
fill: var(--buildfill);
position: absolute;
top: 1.5rem;
left: 1.5rem;
height: 25px;
}
li {
line-height: 1.5;
}
</style>
19 changes: 18 additions & 1 deletion src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,24 @@ function checkActive() {
}
}
}


// Determine whether the building is open
let access = global.data[b].meta.access, times = "",
[day, time] = global.time.split(":")
if (day >= 1 && day <= 4) { times = access[1] } // Mon-Thu
else if (day == 5) { times = access[2] } // Fri
else if (day == 6) { times = access[3] } // Sat
else if (day == 0) { times = access[0] } // Sun
if (times) {
let [open, close] = times.split("-")
let hours = [
Moment(open, 'HHmm').format('hA'),
Moment(close, 'HHmm').format('hA')
]
if (time > open && time < close) { bldg.meta.open = hours }
}
else { bldg.meta.open = false }

if ("dining" in bldg.meta) {
if (isNaN(Object.keys(bldg.meta.dining)[0][0]))
for (let d in bldg.meta.dining) checkOpen(bldg.meta.dining[d])
Expand Down

0 comments on commit 39b2b42

Please sign in to comment.