44live/templates/list.html

177 lines
3.9 KiB
HTML
Raw Normal View History

2025-03-06 00:33:46 -05:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
2025-04-04 00:14:43 -04:00
<meta property="og:site_name" content="44live">
<title>{{ day }} - 44live</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
2025-04-07 02:33:02 -04:00
<link rel="icon" href="calendar.svg" type="image/svg+xml">
2025-04-10 01:17:42 -04:00
<link rel="stylesheet" href="https://static.stevenalexander.org/picocss/css/pico.min.css">
2025-03-06 00:33:46 -05:00
<base target="_blank">
2025-04-10 01:17:42 -04:00
<style>
html,body{
font-family:monospace;
font-size:12px;
2025-04-04 00:14:43 -04:00
height:100%;
2025-04-10 01:17:42 -04:00
width:100%;
2025-04-04 00:14:43 -04:00
overflow:auto;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
table{
min-width:100%;
width:1600px;
max-width:400%;
border-collapse:separate;
table-layout:fixed;
2025-04-10 01:17:42 -04:00
overflow:hidden;
margin:0;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
th,td{
border-bottom:2px solid black;
border-right:2px solid black;
2025-04-10 01:17:42 -04:00
padding:0;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
th,td:first-child{
position:sticky;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
th:first-child,td:first-child{
left:0;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
th{
2025-04-10 01:17:42 -04:00
color:black;
background-color:white;
2025-04-04 00:14:43 -04:00
text-align:center;
font-weight:bold;
2025-04-10 01:17:42 -04:00
top:0;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
th:first-child{
z-index:1;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
a,span{
2025-04-10 01:17:42 -04:00
color:black;
2025-04-04 00:14:43 -04:00
padding:2px;
2025-04-10 01:17:42 -04:00
display:block;
white-space:nowrap;
2025-04-04 00:14:43 -04:00
overflow:hidden;
text-overflow:ellipsis;
text-decoration:none;
2025-03-06 00:33:46 -05:00
}
a:hover{background-color:lightgray;color:black;}
2025-04-10 01:17:42 -04:00
[class="closed"],[class="closed"]>*{background-color:#13171f;color:white;}
2025-03-06 00:33:46 -05:00
.available{background-color:lightgreen;}
.other{background-color:white;}
.class{background-color:darkgray;}
.exam{background-color:gray;}
.booked{background-color:coral;}
.food{background-color:mediumpurple;}
2025-04-10 01:17:42 -04:00
</style>
2025-03-06 00:33:46 -05:00
</head>
<body>
<table>
<thead><tr>
<th colspan=60><a href="https://25live.collegenet.com/pro/louisville#!/home/event/form">Updating...</a></th>
</tr></thead>
<tbody></tbody>
</table>
<script>
2025-04-10 01:17:42 -04:00
const headRow=document.querySelector("tr");
const bookBtn=headRow.querySelector("a");
const tbody=document.querySelector("tbody");
2025-03-06 00:33:46 -05:00
2025-04-10 01:17:42 -04:00
for(let hour=8;hour<23;hour++){
const th=document.createElement("th");
th.setAttribute("colspan",60);
th.textContent=hour;
2025-03-06 00:33:46 -05:00
headRow.appendChild(th)
}
2025-04-10 01:17:42 -04:00
let json=localStorage.getItem("{{day}}");
if(json)displayEvents(JSON.parse(json))
2025-03-06 00:33:46 -05:00
2025-04-10 01:17:42 -04:00
fetch("{{day}}.json").then(r=>{
bookBtn.innerText="Book a Space";
2025-03-06 00:33:46 -05:00
return r.json()
2025-04-10 01:17:42 -04:00
}).then(json=>{
2025-03-06 00:33:46 -05:00
tbody.innerHTML="";
displayEvents(json);
2025-04-10 01:17:42 -04:00
try{
localStorage.setItem("{{day}}",JSON.stringify(json))
}catch{
2025-03-06 00:33:46 -05:00
localStorage.clear();
2025-04-10 01:17:42 -04:00
localStorage.setItem("{{day}}",JSON.stringify(json))
2025-03-06 00:33:46 -05:00
}
})
2025-04-10 01:17:42 -04:00
function createBox(row,length,name=null,link=null,type=null){
const td=document.createElement("td");
td.setAttribute("colspan",length);
let e;
if(link){
e=document.createElement("a");
e.href=link
}else if(name){
e=document.createElement("span")
2025-03-06 00:33:46 -05:00
}
2025-04-10 01:17:42 -04:00
if(name&&e){
e.textContent=name;
e.title=name;
2025-03-06 00:33:46 -05:00
td.appendChild(e)
}
2025-04-10 01:17:42 -04:00
if(type){
row.firstChild?.classList.add(type);
td.classList.add(type)
2025-03-06 00:33:46 -05:00
}
2025-04-10 01:17:42 -04:00
row.appendChild(td)
2025-03-06 00:33:46 -05:00
}
2025-04-10 01:17:42 -04:00
function displayEvents(json){
const filterClasses=new Set(window.location.search.substring(1).split(",").filter(Boolean));
for(const space in json){
const row=document.createElement("tr");
const info=json[space];
let link=`https://louisville.campusdish.com/LocationsAndMenus/Belknap/${space}`;
let defaultType="closed";
if(info.i){
link=info.i;
defaultType="available"
2025-03-06 00:33:46 -05:00
}
2025-04-10 01:17:42 -04:00
createBox(row,60,space,link);
let time=0;
if(Array.isArray(info.l)){
for(const event of info.l){
const {s:start,e:end,n:name,t:type="other",i:id}=event;
if(time<start){
createBox(row,start-time,null,null,defaultType);
time=start;
2025-03-06 00:33:46 -05:00
}
2025-04-10 01:17:42 -04:00
if(time<=start&&time<end){
const eventType=defaultType==="closed"?"food":(id===undefined?"closed":type);
const eventLink=id?`event/${id}`:null;
createBox(row,end-start,name,eventLink,eventType);
time=end;
2025-03-06 00:33:46 -05:00
}
}
}
2025-04-10 01:17:42 -04:00
if (time<900){
createBox(row,900-time,null,null,defaultType);
2025-03-06 00:33:46 -05:00
}
2025-04-10 01:17:42 -04:00
const firstCell=row.firstChild;
if(!firstCell)continue;
if(filterClasses.size>0){
if(firstCell.className.split(" ").some(cls=>filterClasses.has(cls))){
tbody.appendChild(row);
2025-03-06 00:33:46 -05:00
}
2025-04-10 01:17:42 -04:00
}else{
tbody.appendChild(row);
2025-03-06 00:33:46 -05:00
}
}
2025-04-10 01:17:42 -04:00
}
2025-03-06 00:33:46 -05:00
document.querySelector("script").remove();
</script>
</body>
</html>