commit b998f945b4267122e8315a7ea6887fe9bd5fb6f6
parent 30d1478fb646889c72dba9d1677ea0c052df9288
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date: Mon, 5 Aug 2024 22:05:40 -0700
Display floorplans in floorplan page
Diffstat:
3 files changed, 98 insertions(+), 1 deletion(-)
diff --git a/files/floorplans/index.html b/files/floorplans/index.html
@@ -2,6 +2,7 @@
<head>
<title>Spaceplanner - Floorplans</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
+ <link rel="stylesheet" type="text/css" href="./main.css">
<script src="/lib/api.js" async></script>
<script src="/lib/bar.js" async></script>
<script src="/lib/etc.js" async></script>
@@ -9,4 +10,6 @@
</head>
<html>
<h1>Floorplans</h1>
+
+ <ul id="floorplans"></ul>
</html>
diff --git a/files/floorplans/main.css b/files/floorplans/main.css
@@ -0,0 +1,45 @@
+#floorplans {
+ list-style: none;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 5%;
+ width: 100%;
+}
+
+#floorplans > li {
+ aspect-ratio: 1;
+}
+
+.floorplan {
+ box-sizing: border-box;
+ display: block;
+ width: 100%;
+ height: 100%;
+ border: medium solid black;
+ border-radius: .4rem;
+ /* NOTE: Required for footers to be slapped on the bottom, not sure why */
+ position: relative;
+}
+
+.floorplan > header {
+ padding: 4%;
+ background-color: rgba(0, 0, 0, .1);
+}
+
+.floorplan > header > h2 {
+ margin: 0 0 .5rem 0 ;
+}
+
+.floorplan > footer {
+ background-color: rgba(0, 0, 0, .05);
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ padding: 4%;
+ opacity: 60%;
+ border-radius: .2rem 0 0 0;
+}
+
+.floorplan:hover > footer {
+ opacity: 100%;
+}
diff --git a/files/floorplans/main.js b/files/floorplans/main.js
@@ -1,6 +1,55 @@
function init() {
authorize()
show_bar()
+ api_fetch("GET", "floorplans/" + localStorage.getItem("username"))
+ .then(show_floorplans)
}
-window.onload = init
+function create_floorplan(floorplan) {
+ root = document.createElement("div")
+ root.setAttribute("class", "floorplan")
+
+ header = document.createElement("header")
+ heading = document.createElement("h2")
+ header.append(heading)
+ link = document.createElement("a")
+ heading.append(link)
+ if (floorplan.synopsis) {
+ synopsis = document.createElement("p")
+ synopsis.appendChild(document.createTextNode(document.synopsis))
+ header.append(synopsis)
+ }
+ if (floorplan.address) {
+ address = document.createElement("address")
+ address.appendChild(document.createTextNode(floorplan.address))
+ header.append(address)
+ }
+
+ link.href = "floorplans/" + localStorage.getItem("username") + "/" + floorplan.name
+ link.appendChild(document.createTextNode(floorplan.name))
+ root.append(header)
+
+ if (floorplan.user != localStorage.getItem("username")) {
+ footer = document.createElement("footer")
+ // TODO: Link to user page, when it exists
+ footer.append(document.createTextNode("By " + floorplan.user))
+ root.append(footer)
+ }
+
+ return root
+}
+
+function show_floorplans(floorplans) {
+ list = document.getElementById("floorplans")
+ if (!list) {
+ throw new Error("expected #floorplans")
+ }
+
+ for (i in floorplans) {
+ item = document.createElement("li")
+ item.append(create_floorplan(floorplans[i]))
+ list.append(item)
+ }
+}
+
+window.onload = handle_wrap(init)
