diff options
32 files changed, 802 insertions, 57 deletions
diff --git a/.DS_Store b/.DS_Store Binary files differnew file mode 100644 index 0000000..1c9ee72 --- /dev/null +++ b/.DS_Store diff --git a/backend/__pycache__/main.cpython-314.pyc b/backend/__pycache__/main.cpython-314.pyc Binary files differindex 088aec4..f65235c 100644 --- a/backend/__pycache__/main.cpython-314.pyc +++ b/backend/__pycache__/main.cpython-314.pyc diff --git a/backend/__pycache__/notif.cpython-314.pyc b/backend/__pycache__/notif.cpython-314.pyc Binary files differindex d8ed6c1..e05be83 100644 --- a/backend/__pycache__/notif.cpython-314.pyc +++ b/backend/__pycache__/notif.cpython-314.pyc diff --git a/backend/db.db-journal b/backend/db.db-journal Binary files differnew file mode 100644 index 0000000..e58d84d --- /dev/null +++ b/backend/db.db-journal diff --git a/backend/main.py b/backend/main.py index 5f460e4..e242389 100644 --- a/backend/main.py +++ b/backend/main.py @@ -19,6 +19,7 @@ from dotenv import load_dotenv from os import getenv import yaml import notif # import notif.py +import bcrypt # ## API, db, and scheduler initialisation app = fastapi.FastAPI(title="Victoria Hall LaundryWeb", description="LaundryWeb Backend API", version="0.1") @@ -30,6 +31,7 @@ scheduler.start() origins = [ "http://localhost", + "http://localhost:8081", "http://localhost:998", "http://localhost:5173", "http://127.0.0.1", @@ -59,6 +61,13 @@ CREATE TABLE IF NOT EXISTS timers ( subscription_id TEXT NOT NULL );""") # block is either 1 or 2, machine (1-4), odd is dryer, even is machine. +cursor.execute(""" +CREATE TABLE IF NOT EXISTS admin_cookies ( + cookie VARCHAR(64) PRIMARY KEY +); +""") + +cursor.execute("DELETE FROM admin_cookies;") class RowIndices(IntEnum): TIMER_ID = 0, @@ -123,6 +132,12 @@ class FinishRequestData(BaseModel): id: int +class OverrideMachineData(BaseModel): + block: int + machine_id: int + disabled: bool + + class Status(Enum): EMPTY = 0, FINISHED = 1, @@ -130,6 +145,10 @@ class Status(Enum): OUTOFSERVICE = 3, +class PlaintextPasswordData(BaseModel): + password: str + + URI_TO_MACHINES = { "h1-status": [1, None], "h1-dryer1": [1, 1], @@ -193,9 +212,6 @@ def reminder_timer_finished(timer_id): cursor.execute("SELECT * FROM timers WHERE timer_id = ?", (timer_id,)) out = cursor.fetchall() print(out) - - for row in out: - machine_status[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = Status.FINISHED.name scheduler.add_job(final_timer_finished, 'date', run_date=out[0][RowIndices.END_TIME], id=str(timer_id), args=[timer_id]) @@ -219,7 +235,9 @@ def final_timer_finished(timer_id): out[0][RowIndices.SUBSCRIPTION_ID], { "title": "Laundry Finished", - "body": "Do collect your laundry, then press this notification to mark your laundry as collected.", + "body": "Your laundry is finished! Please collect your laundry.", + "requireInteraction": True, + "timerId": timer_id, } ) @@ -455,6 +473,124 @@ def uri_to_information(data: InformationRequestData, response: fastapi.Response, # --- subscribe @app.post("/notifsubscribe", response_class=PlainTextResponse) def notif_subscribe(data: notif.PushSubscriptionData, response: fastapi.Response): - endpoint = notif.subscribe(data) - response.set_cookie(key="subscription_endpoint", value=endpoint, max_age=COOKIE_MAX_AGE, domain="laundryweb.altafcreator.com", samesite="none", secure=True, path="/") - return "do i need to return something perhaps" + try: + endpoint = notif.subscribe(data) + response.set_cookie(key="subscription_endpoint", value=endpoint, max_age=COOKIE_MAX_AGE, domain="laundryweb.altafcreator.com", samesite="none", secure=True, path="/") + response.status_code = fastapi.status.HTTP_200_OK + return "subscription saved." + except Exception as err: + response.status_code = fastapi.status.HTTP_500_INTERNAL_SERVER_ERROR + return f"error, failed to save subscription {err}" + + +# #### ADMIN PANEL API END POINTS #### + +# ## ADMIN PANEL SCHEDULER METHODS ## + + +def delete_cookie_scheduler(cookie): + pass + + +def authenticate_admin_check(cookie): + cursor.execute("SELECT * FROM admin_cookies WHERE cookie = ?", (cookie,)) + rows = cursor.fetchall() + + return len(rows) > 0 + + +# --- admin login +@app.post("/admin_login", response_class=PlainTextResponse) +def admin_login(data: PlaintextPasswordData, response: fastapi.Response): + print(data.password) + + pwd = data.password.encode('utf-8') + stored_hash_pwd = getenv("ADMIN_PASSWORD_HASH").encode('utf-8') + + if bcrypt.checkpw(pwd, stored_hash_pwd): + response.status_code = fastapi.status.HTTP_202_ACCEPTED + + auth_cookie_str = secrets.token_hex(32) + AUTH_MAX_AGE = 60 * 10 # 10 minutes + response.set_cookie(key="admin_auth", value=auth_cookie_str, secure=True, max_age=AUTH_MAX_AGE, domain="backend.laundryweb.altafcreator.com", samesite="none") + cursor.execute("""INSERT INTO admin_cookies (cookie) VALUES (?);""", (auth_cookie_str,)) + conn.commit() + cursor.execute("SELECT * FROM admin_cookies") + print(cursor.fetchall()) + + now = datetime.datetime.now(ZoneInfo(TZ)) + end_date = now + datetime.timedelta(seconds=(AUTH_MAX_AGE)) + scheduler.add_job(delete_cookie_scheduler, 'date', run_date=end_date, args=[auth_cookie_str]) + + return "hi admin you are Authenticated!!!11" + + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "Forbidden." + + +# --- admin auth check +@app.post("/admin_check", response_class=PlainTextResponse) +def admin_check(response: fastapi.Response, admin_auth: Annotated[str | None, fastapi.Cookie()] = None): + print("admin check request, ", admin_auth) + + if authenticate_admin_check(admin_auth): + response.status_code = fastapi.status.HTTP_202_ACCEPTED + return "Authorised." + else: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "Get out." + + +# --- override each machine status +@app.post("/override_status", response_class=PlainTextResponse) +def override_status(data: OverrideMachineData, response: fastapi.Response, admin_auth: Annotated[str | None, fastapi.Cookie()] = None): + if not admin_auth: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "Unauthorised." + + if authenticate_admin_check(admin_auth): + if (data.disabled): + machine_status[data.block - 1][data.machine_id - 1] = Status.OUTOFSERVICE.name + else: + cursor.execute("SELECT * FROM timers WHERE ((block = ?) AND (machine = ?))", (data.block, data.machine_id)) + rows = cursor.fetchall() + + if len(rows) > 0: + machine_status[data.block - 1][data.machine_id - 1] = Status.RUNNING.name + else: + machine_status[data.block - 1][data.machine_id - 1] = Status.EMPTY.name + + response.status_code = fastapi.status.HTTP_200_OK + return "Set!" + + print("set machine", data.machine_id, "of block", data.block, ".", machine_status) + else: + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "Forbidden." + + +# --- change admin password +@app.post("/admin_change_password", response_class=PlainTextResponse) +def admin_change_password(data: PlaintextPasswordData, response: fastapi.Response, admin_auth: Annotated[str | None, fastapi.Cookie()] = None): + if not admin_auth: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "Unauthorised." + + if authenticate_admin_check(admin_auth): + pass + else: + pass + + +# --- get all blocks machine status for admin +@app.post("/admin_machine_status") +def admin_machine_status(response: fastapi.Response, admin_auth: Annotated[str | None, fastapi.Cookie()] = None): + if not admin_auth: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return """{"reply": "Unauthorised."}""" + + if authenticate_admin_check(admin_auth): + return machine_status + else: + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return """{"reply": "Forbidden."}""" diff --git a/backend/notif_test.py b/backend/notif_test.py index 2cb4fb4..b6f843e 100644 --- a/backend/notif_test.py +++ b/backend/notif_test.py @@ -1,5 +1,14 @@ import notif -endpoint_to_test = "https://fcm.googleapis.com/fcm/send/c14_JXV1C_4:APA91bHzdw7uXAJdjb0mZMwFS_j3Y1NEpbXUS9n4TEwak3zLcDFZjjKpJHkPdZC-2FCWL7aeIUYL9w18ZppDX3mec-lA48b-bPnOJr5GSh6AYaq4zFtu_nM3u4aVoN_ga1pFwtCEqTm8" -endpoint_to_test = "https://fcm.googleapis.com/preprod/wp/dw-b_ojDv5E:APA91bHTtBPHo0XLqIdaoR-AakuximlZSgB0P1yJ7Ww66T8HVTrT73uoPoJ7uKGWSWz7RhtX2ZUZaLxWEnhHiNlZjNCYlID2jUHjV3EtktQvH7oBPRk6qvFaiqdhKmvutpXcDGdgDCtg" -notif.send_notification(endpoint_to_test, {"title": "This is a test", "body": "Hello, world!"}) +endpoint_to_test = "https://fcm.googleapis.com/fcm/send/f4Cw12WAYnE:APA91bHOZvh8HkExsem20UK_5uhzgCu0dEo01YV8G8-9hFBjEdsk1M49JVLD7Z51BDP7gxn_UAXVwvmYxIWajwQ9VyTS3ghNQzx92jex-isbz5IvzcpI0QOxaVnmoURLtK-qYt36ebic" +endpoint_to_test = "https://fcm.googleapis.com/preprod/wp/dP2ULA5s2Fk:APA91bE6toPxR5LbakAronwoI2QfdSe6NIEAzVBoIq0Q5jUF8hkFskAT_PyHYwwUiJpJgF8xcCr_8CEzE83YTsUGZWyvcI53DiwjkDD4IK1UseK2bX-WaXVRRXBLM5wTHCKs1ZfG2rME" + +notif.send_notification( + endpoint_to_test, + { + "title": "Test Notification", + "body": "Hello, world pls work", + "requireInteraction": True, + "timerId": 0, + } +) diff --git a/frontend/.DS_Store b/frontend/.DS_Store Binary files differindex 49fe6a7..1f6bb54 100644 --- a/frontend/.DS_Store +++ b/frontend/.DS_Store diff --git a/frontend/admin/admin-style.css b/frontend/admin/admin-style.css new file mode 100644 index 0000000..9c866ff --- /dev/null +++ b/frontend/admin/admin-style.css @@ -0,0 +1,53 @@ +#unauthorised { + +} + +#authorised { + +} + +.admin-machine-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background-color: lightgrey; + gap: 16px; + padding: 16px; + width: fit-content; + max-width: 100%; + box-sizing: border-box; +} + +.admin-machine-container > div { + display: flex; + flex-direction: column; + gap: 16px; +} + +.admin-machine-container > div > img { + width: 128px; +} + +.admin-machine-container > div > span { + text-align: center; + font-weight: 600; +} + +.admin-machine-container > h2 { + writing-mode: vertical-lr; + transform: rotate(180deg); + margin: 0; + height: fit-content; +} + +#passwordFeedback { + display: none; + color: red; +} + +.blocks-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 16px; +} diff --git a/frontend/admin/admin.js b/frontend/admin/admin.js new file mode 100644 index 0000000..ff1c463 --- /dev/null +++ b/frontend/admin/admin.js @@ -0,0 +1,110 @@ +const API_URL = "https://backend.laundryweb.altafcreator.com" + +async function login() { + const field = document.getElementById("pwfield"); + + const response = await fetch(`${API_URL}/admin_login`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: `{"password": "${field.value}"}`, + }); + + if (response.status == 202) window.location.href = "./panel.html"; + else document.getElementById("passwordFeedback").style.display = "inherit"; +} + +async function checkLoginStatus() { + const response = await fetch(`${API_URL}/admin_check`, { + method: "POST", + credentials: "include" + }); + + return response.status == 202; +} + +async function autoLogin() { + if (await checkLoginStatus()) { + window.location.href = "./panel.html"; + } +} + +async function panelLoginCheck() { + const msg = document.getElementById("unauthorised"); + const authDiv = document.getElementById("authorised"); + + if (await checkLoginStatus()) { + msg.style.display = "none"; + authDiv.style.display = "inherit"; + return true; + } else { + msg.style.display = "inherit"; + authDiv.style.display = "none"; + return false; + } +} + +async function syncMachineStatus() { + const response = await fetch(`${API_URL}/admin_machine_status`, { + method: "POST", + credentials: "include", + }); + const data = await response.json(); + + for (let b = 0; b < data.length; b++) { + for (let m = 0; m < data[b].length; m++) { + const img = document.getElementById("h"+(b+1).toString()+"m"+(m+1).toString()+"img"); + const dropdown = document.getElementById("h"+(b+1).toString()+"m"+(m+1).toString()); + + if (data[b][m] != "OUTOFSERVICE") { + if (m % 2 == 0) { + img.src = "/assets/img/dryer_off.png"; + } else { + img.src = "/assets/img/washer_off.png"; + } + dropdown.selectedIndex = 0; + } else { + if (m % 2 == 0) { + img.src = "/assets/img/dryer_down.png"; + } else { + img.src = "/assets/img/washer_down.png"; + } + dropdown.selectedIndex = 1; + } + } + } +} + +async function overrideMachineStatus(block, machine) { + const img = document.getElementById("h"+block.toString()+"m"+machine.toString()+"img"); + const dropdown = document.getElementById("h"+block.toString()+"m"+machine.toString()); + + const response = await fetch(`${API_URL}/override_status`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: `{"block": ${block}, "machine_id": ${machine}, "disabled": ${dropdown.selectedIndex == 1}}`, + }); + + if (response.status != 200) { + return; + } + + if (dropdown.selectedIndex == 1) { + if (machine % 2 == 0) { + img.src = "/assets/img/washer_down.png"; + } else { + img.src = "/assets/img/dryer_down.png"; + } + } else { + if (machine % 2 == 0) { + img.src = "/assets/img/washer_off.png"; + } else { + img.src = "/assets/img/dryer_off.png"; + } + } +} diff --git a/frontend/admin/index.html b/frontend/admin/index.html new file mode 100644 index 0000000..76df357 --- /dev/null +++ b/frontend/admin/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Victoria Hall LaundryWeb Admin Panel</title> + <link rel="stylesheet" href="./admin-style.css"> +</head> +<body> + <h1>LaundryWeb Admin Panel Log In</h1> + <input type="password" id="pwfield"> <button onclick="login()">Log In</button> + <p id="passwordFeedback">Invalid password.</p> + <script src="./admin.js"></script> + <script> + autoLogin(); + </script> +</body> +</html> diff --git a/frontend/admin/panel.html b/frontend/admin/panel.html new file mode 100644 index 0000000..4813c06 --- /dev/null +++ b/frontend/admin/panel.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Victoria Hall LaundryWeb Admin Panel</title> + <link rel="stylesheet" href="./admin-style.css"> +</head> +<body> + <h1>LaundryWeb Admin Panel</h1> + <p id="unauthorised">You are unauthorised.</p> + <!-- even if you make this div visible, you won't be able to do anything if you are unauthorised --> + <div id="authorised"> + <div class="blocks-container"> + <div class="admin-machine-container" style="background-color: lightyellow;"> + <h2>Block H2</h2> + <div> + <span>Dryer 1</span> + <img id="h2m1img" src="/assets/img/dryer_off.png" alt=""> + <select id="h2m1" name="" onchange="overrideMachineStatus(2, 1);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 1</span> + <img id="h2m2img" src="/assets/img/washer_off.png" alt=""> + <select id="h2m2" name="" onchange="overrideMachineStatus(2, 2);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Dryer 2</span> + <img id="h2m3img" src="/assets/img/dryer_off.png" alt=""> + <select id="h2m3" name="" onchange="overrideMachineStatus(2, 3);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 2</span> + <img id="h2m4img" src="/assets/img/washer_off.png" alt=""> + <select id="h2m4" name="" onchange="overrideMachineStatus(2, 4);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + </div> + <div class="admin-machine-container" style="background-color: skyblue;"> + <h2>Block H1</h2> + <div> + <span>Dryer 1</span> + <img id="h1m1img" src="/assets/img/dryer_off.png" alt=""> + <select id="h1m1" name="" onchange="overrideMachineStatus(1, 1);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 1</span> + <img id="h1m2img" src="/assets/img/washer_off.png" alt=""> + <select id="h1m2" name="" onchange="overrideMachineStatus(1, 2);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Dryer 2</span> + <img id="h1m3img" src="/assets/img/dryer_off.png" alt=""> + <select id="h1m3" name="" onchange="overrideMachineStatus(1, 3);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 2</span> + <img id="h1m4img" src="/assets/img/washer_off.png" alt=""> + <select id="h1m4" name="" onchange="overrideMachineStatus(1, 4);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + </div> + </div> + </div> + <script src="admin.js"></script> + <script> + (async () => { + if (await panelLoginCheck()) { + syncMachineStatus(); + } + })(); + </script> +</body> +</html> diff --git a/frontend/assets/.DS_Store b/frontend/assets/.DS_Store Binary files differindex 320d9b9..64959d9 100644 --- a/frontend/assets/.DS_Store +++ b/frontend/assets/.DS_Store diff --git a/frontend/assets/icons/transparent_text_logo.svg b/frontend/assets/icons/transparent_text_logo.svg new file mode 100644 index 0000000..5740452 --- /dev/null +++ b/frontend/assets/icons/transparent_text_logo.svg @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="721.48175" + height="994.95959" + viewBox="0 0 190.89204 263.24972" + version="1.1" + id="svg1" + inkscape:version="1.4-beta3 (01c8a1ca, 2024-08-28)" + sodipodi:docname="transparent_text_logo.svg" + inkscape:export-filename="transparent_1024.png" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview1" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showguides="true" + inkscape:zoom="0.61372381" + inkscape:cx="358.46744" + inkscape:cy="360.09683" + inkscape:current-layer="g5" /> + <defs + id="defs1" /> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(-40.020643,-3.8418031)"> + <g + id="g5" + style="stroke:#2c5aa0" + transform="translate(28.712096,-7.7178088)"> + <path + id="rect1" + style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 22.618924,78.171998 H 190.89022 c 7.11501,0 6.85912,-0.255885 6.85912,6.859122 v 172.48835 c 0,7.11501 -5.72797,12.84297 -12.84298,12.84297 H 28.602773 c -7.115005,0 -12.84297,-5.72796 -12.84297,-12.84297 V 85.03112 c 0,-7.115007 -0.255885,-6.859122 6.859121,-6.859122 z" + sodipodi:nodetypes="sssssssss" /> + <path + id="rect3" + style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 28.602776,16.006507 H 184.90636 c 7.11501,0 12.84298,5.727967 12.84298,12.842972 v 28.192784 c 0,7.115005 0.25589,6.859121 -6.85912,6.859121 H 22.618928 c -7.115007,0 -6.859122,0.255884 -6.859122,-6.859121 V 28.849479 c 0,-7.115005 5.727965,-12.842972 12.84297,-12.842972 z" + sodipodi:nodetypes="sssssssss" /> + <rect + style="fill:none;fill-opacity:0;stroke:#000000;stroke-width:4.14441;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" + id="rect4" + width="45.468327" + height="19.590078" + x="84.020409" + y="30.161087" + ry="9.7950392" /> + <circle + style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="circle42275" + cx="106.75457" + cy="174.26723" + r="61.672989" /> + <path + style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:5.65403;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + d="m 106.75457,129.43064 v 44.83657 l 33.07059,-0.002" + id="path42288" + inkscape:export-filename="path42288.png" + inkscape:export-xdpi="18.000002" + inkscape:export-ydpi="18.000002" /> + </g> + </g> + <script + id="mesh_polyfill" + type="text/javascript"> +!function(){const t="http://www.w3.org/2000/svg",e="http://www.w3.org/1999/xlink",s="http://www.w3.org/1999/xhtml",r=2;if(document.createElementNS(t,"meshgradient").x)return;const n=(t,e,s,r)=>{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=>{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e>s?e:s,i=r>n?r:n;return 18*(o>i?o:i)},i=(t,e)=>Math.sqrt(t.distSquared(e)),a=(t,e)=>t.scale(2/3).add(e.scale(1/3)),h=t=>{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=>{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case"translate":2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error("mesh.js: translate does not have 2 arguments!"),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case"scale":1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error("mesh.js: scale does not have 1 or 2 arguments!"),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case"rotate":if(3===l.length&&(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)<1e-16&&(t=0),Math.abs(e)<1e-16&&(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error("math.js: No argument to rotate transform!");3===l.length&&(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case"skewX":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error("math.js: No argument to skewX transform!");break;case"skewY":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error("math.js: No argument to skewY transform!");break;case"matrix":6===l.length?h=h.append(new g(...l)):console.error("math.js: Incorrect number of arguments for matrix!");break;default:console.error("mesh.js: Unhandled transform type: "+d)}}),h},l=t=>{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t<r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=>{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=>{let o,i,a=[0,0,0,0];for(let h=0;h<3;++h)e[h]<t[h]&&e[h]<s[h]||t[h]<e[h]&&s[h]<e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]>o?a[h]=o:a[h]>i&&(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=>{let e=[];for(let s=0;s<16;++s){e[s]=0;for(let r=0;r<16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=>{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=>{let e=[],s=[],r=[];for(let s=0;s<4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t<8;++t){s[t]=[];for(let r=0;r<4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t<8;++t){r[t]=[];for(let e=0;e<8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error("mesh.js: argument to Affine.append is not affine!");let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)>r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t<4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s>=0&&s<e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s<4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t<4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t<4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))>r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute("type")||"bilinear"}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute("x")),n=Number(t.getAttribute("y"));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t<r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n<o;++n){let o=r[n].children;for(let r=0,i=o.length;r<i;++r){let i=r;0!==t&&++i;let h,d=o[r].getAttribute("path"),c="l";null!=d&&(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case"l":0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"L":0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"c":0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&&(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case"C":0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&&(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error("mesh.js: "+c+" invalid path type.")}if(0===t&&0===n||r>0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&&(h=Math.floor(255*a)),e&&(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&&(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if("bilinear"===this.type||s<2||r<2){let n;for(let o=0;o<s;++o)for(let s=0;s<r;++s){let r=[];for(let t=3*o,e=3*o+4;t<e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t<s;++t){w[t]=new Array(r);for(let e=0;e<r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t<s;++t)for(let e=0;e<r;++e)0!==t&&t!==x&&(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&&e!==g&&(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t<r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e<4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n>0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o>0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t<s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e<4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n>0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o>0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s<x;++s)for(let r=0;r<g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t<4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e<9;++e){g[t][e]=[];for(let s=0;s<9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]>255?g[t][e][s]=255:g[t][e][s]<0&&(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t<e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s<8;++s)for(let r=0;r<8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((r,n)=>{let o=r.getAttribute("id");o||(o="patchjs_shape"+n,r.setAttribute("id",o));const i=r.style.fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/),a=r.style.stroke.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(i&&i[1]){const a=document.getElementById(i[1]);if(a&&"meshgradient"===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,"canvas");d(l,{width:i.width,height:i.height});const c=l.getContext("2d");let u=c.createImageData(i.width,i.height);const f=new b(a);"objectBoundingBox"===a.getAttribute("gradientUnits")&&f.scale(new x(i.width,i.height));const p=a.getAttribute("gradientTransform");null!=p&&f.transform(h(p)),"userSpaceOnUse"===a.getAttribute("gradientUnits")&&f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,"image");d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,"xlink:href",g),r.parentNode.insertBefore(y,r),r.style.fill="none";const w=document.createElementNS(t,"use");w.setAttributeNS(e,"xlink:href","#"+o);const m="patchjs_clip"+n,M=document.createElementNS(t,"clipPath");M.setAttribute("id",m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute("clip-path","url(#"+m+")"),u=null,l=null,g=null}}if(a&&a[1]){const o=document.getElementById(a[1]);if(o&&"meshgradient"===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute("stroke-miterlimit"))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,"canvas");d(p,{width:l,height:c});const y=p.getContext("2d");let g=y.createImageData(l,c);const w=new b(o);"objectBoundingBox"===o.getAttribute("gradientUnits")&&w.scale(new x(l,c));const m=o.getAttribute("gradientTransform");null!=m&&w.transform(h(m)),"userSpaceOnUse"===o.getAttribute("gradientUnits")&&w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,"image");d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,"xlink:href",S);const k="pattern_clip"+n,A=document.createElementNS(t,"pattern");d(A,{id:k,patternUnits:"userSpaceOnUse",width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke="url(#"+k+")",g=null,p=null,S=null}}})}(); +</script> +</svg> diff --git a/frontend/assets/img/dryer_down.png b/frontend/assets/img/dryer_down.png Binary files differnew file mode 100644 index 0000000..8c81b25 --- /dev/null +++ b/frontend/assets/img/dryer_down.png diff --git a/frontend/assets/img/step1.png b/frontend/assets/img/step1.png Binary files differnew file mode 100644 index 0000000..4277a06 --- /dev/null +++ b/frontend/assets/img/step1.png diff --git a/frontend/assets/img/step2.png b/frontend/assets/img/step2.png Binary files differnew file mode 100644 index 0000000..7e24b63 --- /dev/null +++ b/frontend/assets/img/step2.png diff --git a/frontend/assets/img/step3.png b/frontend/assets/img/step3.png Binary files differnew file mode 100644 index 0000000..cbf88e8 --- /dev/null +++ b/frontend/assets/img/step3.png diff --git a/frontend/assets/img/step4.png b/frontend/assets/img/step4.png Binary files differnew file mode 100644 index 0000000..4a6801a --- /dev/null +++ b/frontend/assets/img/step4.png diff --git a/frontend/assets/img/washer_down.png b/frontend/assets/img/washer_down.png Binary files differnew file mode 100644 index 0000000..89334b0 --- /dev/null +++ b/frontend/assets/img/washer_down.png diff --git a/frontend/index.html b/frontend/index.html index f4768c2..fd7a1e9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,11 +5,11 @@ <link rel="stylesheet" href="./style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="manifest" href="/manifest.json" /> - <title>Victoria Hall LaundryWeb</title> + <title>LaundryWeb</title> </head> <body> <div class="section-container row bg-1" style="height: 164px;"> - <span id="logo">Victoria Hall<br>LaundryWeb</span> + <span id="logo"><span id="icon"></span>LaundryWeb</span> <span id="logo-id">H?</span> </div> <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> @@ -24,15 +24,6 @@ </div> <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> <script src="/main.js"></script> - <script> - (async () => { - const timers = await fetchTimers(); - if (Array.isArray(timers[1]) && timers[1].length > 0) { - window.location.href = './timer/'; - } else { - window.location.href = './status/'; - } - })(); - </script> + <script src="/index.js"></script> </body> </html> diff --git a/frontend/index.js b/frontend/index.js new file mode 100644 index 0000000..12f1e97 --- /dev/null +++ b/frontend/index.js @@ -0,0 +1,14 @@ +(async () => { + const timers = await fetchTimers(); + if (Array.isArray(timers[1]) && timers[1].length > 0) { + window.location.href = './timer/'; + } else { + const urlCookie = await cookieStore.get("last_used_url"); + + if (urlCookie && urlCookie != null && urlCookie != "null") { + window.location.href = `./start/?machine=${urlCookie.value}`; + } else { + window.location.href = './status/' + } + } +})(); diff --git a/frontend/ios_popup.js b/frontend/ios_popup.js new file mode 100644 index 0000000..0b700ed --- /dev/null +++ b/frontend/ios_popup.js @@ -0,0 +1,9 @@ +(async () => { +const cookie = await cookieStore.get("subscription_endpoint"); + +if (navigator.userAgent.match(/iPhone|iPad|iPod/i) + && !window.matchMedia('(display-mode: standalone)').matches + && !cookie) { + openPopup(); +} +})(); diff --git a/frontend/main.js b/frontend/main.js index 5c72bef..cfacc86 100644 --- a/frontend/main.js +++ b/frontend/main.js @@ -17,24 +17,42 @@ if ('serviceWorker' in navigator) { // --- subscribe async function subscribe() { - if (!('serviceWorker' in navigator)) return; + if (!('serviceWorker' in navigator)) { + alert("err: no service worker"); + return; + } + + console.log(await Notification.requestPermission()); const registration = await navigator.serviceWorker.ready; - const subscription = await registration.pushManager.subscribe({ - userVisibleOnly: true, - applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY), - }); - console.log(subscription); + try { + const subscription = await registration.pushManager.subscribe({ + userVisibleOnly: true, + applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY), + }); + + console.log(subscription); + + console.log("sw regis pass, write to db"); + + const db_reply = await fetch(`${API_URL}/notifsubscribe`, { + method: 'POST', + credentials: "include", + body: JSON.stringify(subscription), + headers: { + "Content-Type": "application/json", + }, + }); + + console.log(db_reply) + + return db_reply.ok; + } catch (e) { + console.log("ERR in regis, ", e); + return false; + } - await fetch(`${API_URL}/notifsubscribe`, { - method: 'POST', - credentials: "include", - body: JSON.stringify(subscription), - headers: { - "Content-Type": "application/json", - }, - }) } /// copied from somewhere @@ -99,11 +117,14 @@ async function start() { if (data == "all good bro timer started") { window.location.href = "/timer/"; } + cookieStore.delete("last_used_url"); }); } // --- information loading + cookie setting (from server) async function information(urlParam = null) { + const urlCookie = await cookieStore.get("last_used_url"); + const response = await fetch(`${API_URL}/info`, { credentials: "include", method: "POST", @@ -191,7 +212,18 @@ async function updateMachines() { const end = Date.parse(status[2][i]); const minsLeft = Math.ceil((end - now) / 60000).toString(); machineTxts[i].innerHTML = minsLeft + " min(s) left"; - if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = minsLeft + " minutes left" + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = minsLeft + " minute(s) left" + } else if (status[0][i] == "OUTOFSERVICE") { + if ((i + 1) % 2 == 0) { + machineImgs[i].src = "/assets/img/washer_down.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_down.png"; + } else { + machineImgs[i].src = "/assets/img/dryer_down.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_down.png"; + } + machineTxts[i].innerHTML = "Down" + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Out of Service" + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "This machine is currently out of service, and is unavailable to use." } else if (status[0][i] == "FINISHED") { if ((i + 1) % 2 == 0) { machineImgs[i].src = "/assets/img/washer_clothes.png"; @@ -234,6 +266,7 @@ async function startLoadTimers() { const timers = timersData[1]; const container = document.getElementById("timer-container") + if (timers.length > 0) container.innerHTML = ''; const textList = [] const progList = [] diff --git a/frontend/manifest.json b/frontend/manifest.json index d8aded6..4bbf313 100644 --- a/frontend/manifest.json +++ b/frontend/manifest.json @@ -1,6 +1,6 @@ { "$schema": "https://json.schemastore.org/web-manifest-combined.json", - "name": "Victoria Hall LaundryWeb", + "name": "LaundryWeb", "icons": [ { "src": "/assets/icons/512.png", diff --git a/frontend/permissionrequest.js b/frontend/permissionrequest.js index c6dbd88..1a90109 100644 --- a/frontend/permissionrequest.js +++ b/frontend/permissionrequest.js @@ -8,9 +8,14 @@ const notbtn = document.getElementById("notbtn"); } })(); -notbtn.addEventListener("click", () => requestPermission()) +notbtn.addEventListener("click", () => requestPermission()); async function requestPermission() { - subscribe(); + const sub_result = await subscribe(); + + if (!sub_result) { + return; + } + notif.style.display = "none"; // this is disgusting diff --git a/frontend/popup.js b/frontend/popup.js new file mode 100644 index 0000000..b7adf0a --- /dev/null +++ b/frontend/popup.js @@ -0,0 +1,12 @@ +const popupCloseBtn = document.getElementById("close-popup"); +const popupMaster = document.getElementById("popup-master") + +popupCloseBtn.addEventListener("mousedown", () => closePopup()); + +function closePopup() { + popupMaster.style.display = "none"; +} + +function openPopup() { + popupMaster.style.display = "flex"; +} diff --git a/frontend/start.js b/frontend/start.js index 2e71655..82e23aa 100644 --- a/frontend/start.js +++ b/frontend/start.js @@ -1,5 +1,11 @@ const startbtn = document.getElementById("startbtn"); +const urlParams = new URLSearchParams(window.location.search); +data.machine_id = urlParams.get('machine'); +console.log(urlParams); + +startUpdateMachines(); + (async () => { const timers = await fetchTimers(); @@ -43,8 +49,15 @@ startbtn.addEventListener("click", () => { start(); }); -const urlParams = new URLSearchParams(window.location.search); -data.machine_id = urlParams.get('machine'); -console.log(urlParams); - -startUpdateMachines(); +function rememberUrl() { + machineId = urlParams.get('machine'); + minutesDelta = 5; + expirationDate = new Date(new Date().getTime() + minutesDelta * 60000);; + cookieStore.set({ + expires: expirationDate, + name: "last_used_url", + value: machineId, + url: "https://laundryweb.altafcreator.com", + secure: true, + }) +} diff --git a/frontend/start/index.html b/frontend/start/index.html index 16bb433..bcfd1a6 100644 --- a/frontend/start/index.html +++ b/frontend/start/index.html @@ -5,11 +5,11 @@ <link rel="stylesheet" href="/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="manifest" href="/manifest.json" /> - <title>Victoria Hall LaundryWeb</title> + <title>LaundryWeb</title> </head> <body> <div class="section-container row bg-1" style="height: 164px;"> - <span id="logo">Victoria Hall<br>LaundryWeb</span> + <span id="logo"><span id="icon"></span>LaundryWeb</span> <span id="logo-id">H?</span> </div> <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> @@ -71,6 +71,22 @@ </div> <button class="button bg-1" id="startbtn" disabled>Start</button> </div> + <div class="master-popup-container" id="popup-master"> + <div class="popup-container"> + <h1 style="text-align: center;">Initial Setup for iOS</h1> + <p>To allow notifications on your iOS device, you’ll need to install this website as a web app.</p> + <hr> + <p><b>Step 1:</b> Press ... (if using iOS 26) → <b>Share</b></p> + <img src="/assets/img/step1.png" alt=""> + <p><b>Step 2:</b> Scroll down → Select <b>Add to Home Screen</b></p> + <img src="/assets/img/step2.png" alt=""> + <p><b>Step 3:</b> Press <b>Add</b>. If you're using iOS 26+, ensure Open as Web App is enabled.</p> + <img src="/assets/img/step3.png" alt=""> + <p><b>Step 4:</b> Go to your home screen → Reopen this page by <b>pressing</b> the <b>LaundryWeb app</b>.</p> + <img src="/assets/img/step4.png" alt="" style="height: 72px; margin-bottom: 32px;"> + </div> + <button id="close-popup"></button> + </div> <div class="section-container credits-container"> <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> </div> @@ -78,5 +94,10 @@ <script src="/main.js"></script> <script src="/start.js"></script> <script src="/permissionrequest.js"></script> + <script src="/popup.js"></script> + <script src="/ios_popup.js"></script> + <script> + rememberUrl(); + </script> </body> </html> diff --git a/frontend/status/index.html b/frontend/status/index.html index 2c1e7af..46c50ed 100644 --- a/frontend/status/index.html +++ b/frontend/status/index.html @@ -5,7 +5,7 @@ <link rel="stylesheet" href="/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="manifest" href="/manifest.json" /> - <title>Victoria Hall LaundryWeb</title> + <title>LaundryWeb</title> </head> <body> <style> @@ -14,9 +14,13 @@ } </style> <div class="section-container row bg-1" style="height: 164px;"> - <span id="logo">Victoria Hall<br>LaundryWeb</span> + <span id="logo"><span id="icon"></span>LaundryWeb</span> <span id="logo-id">H?</span> </div> + <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> + <button class="button button-tab bg-3" onclick="window.location.href = '/timer/'">Timer</button> + <button class="button button-tab bg-3" disabled>Status</button> + </div> <div class="section-container row bg-red" id="notif-panel"> <div class="flex-center-container"> <span class="icon">🔔</span> @@ -99,6 +103,22 @@ </div> </div> </div> + <div class="master-popup-container" id="popup-master"> + <div class="popup-container"> + <h1 style="text-align: center;">Initial Setup for iOS</h1> + <p>To allow notifications on your iOS device, you’ll need to install this website as a web app.</p> + <hr> + <p><b>Step 1:</b> Press ... (if using iOS 26) → <b>Share</b></p> + <img src="/assets/img/step1.png" alt=""> + <p><b>Step 2:</b> Scroll down → Select <b>Add to Home Screen</b></p> + <img src="/assets/img/step2.png" alt=""> + <p><b>Step 3:</b> Press <b>Add</b>. If you're using iOS 26+, ensure Open as Web App is enabled.</p> + <img src="/assets/img/step3.png" alt=""> + <p><b>Step 4:</b> Go to your home screen → Reopen this page by <b>pressing</b> the <b>LaundryWeb app</b>.</p> + <img src="/assets/img/step4.png" alt="" style="height: 72px; margin-bottom: 32px;"> + </div> + <button id="close-popup"></button> + </div> <div class="section-container credits-container"> <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> </div> @@ -106,5 +126,7 @@ <script src="/main.js"></script> <script src="/status.js"></script> <script src="/permissionrequest.js"></script> + <script src="/popup.js"></script> + <script src="/ios_popup.js"></script> </body> </html> diff --git a/frontend/style.css b/frontend/style.css index a2a9041..37e66e8 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -25,6 +25,7 @@ body { gap: 16px; padding: 16px; font-family: "Interesting", sans-serif; + padding-bottom: 64px; } .section-container { @@ -91,6 +92,7 @@ body { border-radius: 48px; border: none; cursor: pointer; + color: black; } .button:hover:not(:disabled) { @@ -293,6 +295,53 @@ a { font-size: 1.5rem; } +.master-popup-container { + z-index: 1234567; + background-color: rgba(0, 0, 0, 0.25); + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + backdrop-filter: blur(6px); + padding: 16px; + padding-top: 64px; + padding-bottom: 64px; + box-sizing: border-box; + display: flex; + align-items: center; + display: none; +} + +.master-popup-container > button { + z-index: 1; + width: 100%; + height: 100%; + position: fixed; + left: 0; + top: 0; + opacity: 0; +} + +.popup-container { + z-index: 2; + background-color: white; + width: 100%; + max-height: 100%; + overflow-y: auto; + position: relative; + padding: 24px; + border-radius: 32px; + box-shadow: 0 0 16px rgba(0, 0, 0, 0.25); +} + +.popup-container > img { + margin-left: auto; + margin-right: auto; + display: block; + height: 192px; +} + #logo-id { font-size: 4rem; margin: 0; @@ -303,7 +352,38 @@ a { font-size: 2rem; } +#icon { + background-image: url("/assets/icons/transparent_text_logo.svg"); + background-size: contain; + background-repeat: no-repeat; + height: 3.2rem; + margin-bottom: .5rem; + display: block; +} + button { font-family: "Interesting", sans-serif; font-size: 1rem; } + +hr { + opacity: .25; +} + +@media only screen and (max-width: 512px) { + .txtcol-washer > span { + font-size: .8rem; + } + + .txtcol-washer > img { + padding: 8px; + } + + .txtcol-dryer > span { + font-size: .8rem; + } + + .txtcol-dryer > img { + padding: 8px; + } +} diff --git a/frontend/sw.js b/frontend/sw.js index f0ba7d8..dd9a495 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -1,8 +1,47 @@ +const API_URL = "https://backend.laundryweb.altafcreator.com" + self.addEventListener('push', (e) => { console.log(e.data); - const data = e.data.json(); - console.log(data); - self.registration.showNotification(data.title, { - body: data.body, - }); + const received_data = e.data.json(); + console.log(received_data); + if (received_data.requireInteraction) { + self.registration.showNotification(received_data.title, { + body: received_data.body, + vibrate: [200, 100, 200], + requireInteraction: received_data.requireInteraction, + actions: [ + { + title: "I've collected my laundry!", + action: "collect", + } + ], + data: {timerId: received_data.timerId}, + }); + } else { + self.registration.showNotification(received_data.title, { + body: received_data.body, + vibrate: [200, 100, 200], + }); + } +}); + +self.addEventListener("notificationclick", (event) => { + if (event.action === "collect") { + console.log(event); + timerId = event.notification.data.timerId; + console.log("finishing timer! w/ id "+timerId); + fetch(`${API_URL}/finish`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({id: timerId}), + }); + clients.openWindow("/timer/"); + event.notification.close(); + } else { + clients.openWindow("/timer/"); + event.notification.close(); + } }); diff --git a/frontend/timer/index.html b/frontend/timer/index.html index 7972c78..724ebe8 100644 --- a/frontend/timer/index.html +++ b/frontend/timer/index.html @@ -5,18 +5,21 @@ <link rel="stylesheet" href="/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="manifest" href="/manifest.json" /> - <title>Victoria Hall LaundryWeb</title> + <title>LaundryWeb</title> </head> <body> <div class="section-container row bg-1" style="height: 164px;"> - <span id="logo">Victoria Hall<br>LaundryWeb</span> + <span id="logo"><span id="icon"></span>LaundryWeb</span> <span id="logo-id">H?</span> </div> <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> <button class="button button-tab bg-3" disabled>Timer</button> <button class="button button-tab bg-3" onclick="window.location.href = '/status/'">Status</button> </div> - <div id="timer-container" class="section-container no-pad"></div> + <div id="timer-container" class="section-container no-pad"> + <img src="/assets/img/washer_off.png" alt="" style="width: 2rem; margin-top: 3rem; margin-right: auto; margin-left: auto; opacity: .5;"> + <span style="opacity: .5; margin-top: .5rem; margin-bottom: 2rem; display: block;">You currently don't have any laundry.</span> + </div> <div class="section-container credits-container"> <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> </div> |
