44live/templates/list.html

185 lines
4.1 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">
<meta property="og:title" content="44live - find events at UofL">
<title>{{ day }} - 44live</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
2025-03-06 00:33:46 -05:00
<link rel="icon" type="image/x-icon" href="/calendar.svg">
<base target="_blank">
2025-04-04 00:14:43 -04:00
<style>*{margin:0;padding:0;scrollbar-width:none;}
body,html{
-webkit-text-size-adjust:100%;
font:12px monospace;
width:100%;
height:100%;
overflow:auto;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
table{
background-color:black;
min-width:100%;
width:1600px;
max-width:400%;
border-collapse:separate;
border-spacing:0;
table-layout:fixed;
overflow-x:clip;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
th,td{
background-color:white;
box-sizing:border-box;
border-bottom:2px solid black;
border-right:2px solid black;
overflow:hidden;
text-overflow:ellipsis;
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{
top:0;
text-align:center;
font-weight:bold;
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{
white-space:nowrap;
padding:2px;
overflow:hidden;
text-overflow:ellipsis;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
a{
display:block;
text-decoration:none;
color:black;
2025-03-06 00:33:46 -05:00
}
2025-04-04 00:14:43 -04:00
.closed>a{color:white;}
2025-03-06 00:33:46 -05:00
a:hover{background-color:lightgray;color:black;}
.closed{background-color:black;color:white;}
.available{background-color:lightgreen;}
.other{background-color:white;}
.class{background-color:darkgray;}
.exam{background-color:gray;}
.booked{background-color:coral;}
.food{background-color:mediumpurple;}
</style>
</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>
const headRow = document.querySelector('tr');
const bookBtn = headRow.querySelector('a');
const tbody = document.querySelector('tbody');
for (let hour = 8; hour < 23; hour++) {
const th = document.createElement('th');
th.setAttribute("colspan", 60);
th.textContent = hour;
headRow.appendChild(th)
}
let json=localStorage.getItem("{{ day }}");
if (json) displayEvents(JSON.parse(json))
fetch("{{ day }}.json").then(r => {
bookBtn.innerText = "Book a Space";
return r.json()
}).then(json => {
tbody.innerHTML="";
displayEvents(json);
try {
localStorage.setItem("{{ day }}",JSON.stringify(json))
} catch {
localStorage.clear();
localStorage.setItem("{{ day }}",JSON.stringify(json))
}
})
function createBox(row, length, type, name, link) {
const td = document.createElement("td");
if (link) {
var e = document.createElement("a");
e.href = link
}
if (name) {
if (!e) var e = document.createElement("span")
e.textContent = name;
e.title = name;
td.appendChild(e)
}
if (type) {
if (type != "closed" || length == 900) {row.firstChild.classList.add(type)}
td.classList.add(type);
}
td.setAttribute("colspan", length);
row.appendChild(td);
}
function displayEvents(json) {
if (window.location.search) var has=new Set(new URLSearchParams(window.location.search).get("has").split(","))
for (space in json) {
const row = document.createElement("tr");
let link = json[space].i;
let defaultEmpty = "available";
let defaultType = null;
if (!json[space].i) {
link = "https://louisville.campusdish.com/LocationsAndMenus/"+space;
defaultEmpty = "closed";
defaultType = "food"
}
createBox(row, 60, null, space, link);
let now = 0;
if (json[space].l) {
for (e of json[space].l) {
start=e.s
end=e.e
if (now < start) {
createBox(row, start-now, defaultEmpty);
now = start
}
if (now <= start && now < end) {
type = defaultType ? defaultType : (e.i ? (e.t ? e.t : "other") : "closed");
link = e.i ? "event/" + e.i : null;
createBox(row, end-start, type, e.n, link)
now = end
}
}
}
if (now < 900) {
createBox(row, 900-now, defaultEmpty)
}
if (typeof has === "undefined") {
tbody.appendChild(row)
} else {
for (let i of row.firstChild.className.split(" ")) {
if (has.has(i)) {
tbody.appendChild(row)
}
}
}
}
};
document.querySelector("script").remove();
</script>
</body>
</html>