49 lines
2.1 KiB
HTML
49 lines
2.1 KiB
HTML
<div id="mensa" style="width: 90%; margin-inline: auto">
|
|
<div id="main_dishes"></div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
fetch(
|
|
"http://localhost:8080/menu/forum" +
|
|
(new Date().getHours() >= 15 ? "?d=1" : "")
|
|
)
|
|
.then((d) => d.json())
|
|
.then((menu) => {
|
|
const main_dishes_container = /** @type {HTMLDivElement} */ (
|
|
document.querySelector("#mensa #main_dishes")
|
|
);
|
|
main_dishes_container.style.display = "grid";
|
|
main_dishes_container.style.gridTemplateColumns =
|
|
"repeat(auto-fit, minmax(150px, 1fr))";
|
|
main_dishes_container.style.gridGap = "10px";
|
|
if (main_dishes_container != null && menu != null) {
|
|
const main_dishes = menu.main_dishes ?? [];
|
|
const side_dishes = menu.side_dishes ?? [];
|
|
const desserts = menu.desserts ?? [];
|
|
for (let dish of [
|
|
...main_dishes,
|
|
...side_dishes,
|
|
...desserts,
|
|
]) {
|
|
let dish_el = document.createElement("div");
|
|
dish_el.classList.add("dish");
|
|
dish_el.style.display = "flex";
|
|
dish_el.style.flexDirection = "column";
|
|
dish_el.style.alignItems = "center";
|
|
if (dish.image_src != null) {
|
|
let img_el = document.createElement("img");
|
|
img_el.src = dish.image_src;
|
|
img_el.style.maxWidth = "80%";
|
|
img_el.style.objectFit = "cover";
|
|
dish_el.appendChild(img_el);
|
|
}
|
|
let name_el = document.createElement("p");
|
|
name_el.classList.add("dish-name");
|
|
name_el.innerText = dish.name;
|
|
name_el.align = "center";
|
|
dish_el.appendChild(name_el);
|
|
main_dishes_container.appendChild(dish_el);
|
|
}
|
|
}
|
|
});
|
|
</script>
|