diff options
53 files changed, 1808 insertions, 229 deletions
diff --git a/.DS_Store b/.DS_Store Binary files differnew file mode 100644 index 0000000..1c9ee72 --- /dev/null +++ b/.DS_Store @@ -1,2 +1,5 @@ db.db .env +config.yaml +private_key.pem +public_key.pem diff --git a/backend/__pycache__/main.cpython-314.pyc b/backend/__pycache__/main.cpython-314.pyc Binary files differindex c9330c8..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 differnew file mode 100644 index 0000000..e05be83 --- /dev/null +++ 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 282abce..e242389 100644 --- a/backend/main.py +++ b/backend/main.py @@ -11,12 +11,17 @@ from onesignal.api import default_api import sqlite3 from typing import Annotated import datetime +from zoneinfo import ZoneInfo from pydantic import BaseModel import secrets -from enum import Enum +from enum import Enum, IntEnum 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") conn = sqlite3.connect("db.db", check_same_thread=False) cursor = conn.cursor() @@ -24,26 +29,16 @@ cursor = conn.cursor() scheduler = BackgroundScheduler() scheduler.start() -load_dotenv() - -onesignal_configuration = onesignal.Configuration( - rest_api_key=getenv("REST_API_KEY"), - organization_api_key=getenv("ORGANIZATION_API_KEY"), -) - -api_client = onesignal.ApiClient(onesignal_configuration) -api_instance = default_api.DefaultApi(api_client) - -ONESIGNAL_APP_ID = "83901cc7-d964-475a-90ec-9f854df4ba52" - origins = [ "http://localhost", + "http://localhost:8081", "http://localhost:998", "http://localhost:5173", "http://127.0.0.1", "http://127.0.0.1:998", "http://127.0.0.1:5173", - "https://laundryweb.altafcreator.com" + "https://laundryweb.altafcreator.com", + "https://backend.laundryweb.altafcreator.com" ] app.add_middleware( @@ -59,27 +54,90 @@ CREATE TABLE IF NOT EXISTS timers ( timer_id INTEGER PRIMARY KEY, user_id VARCHAR(64) NOT NULL, start_time TEXT NOT NULL, - duration INT NOT NULL, + end_time TEXT NOT NULL, block INT NOT NULL, machine INT NOT NULL, - status TEXT NOT NULL CHECK(status IN ('RUNNING', 'FINISHED')) + status TEXT NOT NULL CHECK(status IN ('RUNNING', 'FINISHED')), + 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 ); - """) # block is either 1 or 2, machine (1-4), odd is dryer, even is machine. +""") + +cursor.execute("DELETE FROM admin_cookies;") + +class RowIndices(IntEnum): + TIMER_ID = 0, + USER_ID = 1, + START_TIME = 2, + END_TIME = 3, + BLOCK = 4, + MACHINE = 5, + STATUS = 6, + SUBSCRIPTION_ID = 7 + + +# ## yaml configuration initialisation + +qr_uri = {} + +stream = open("config.yaml", 'r') +yaml_dict = yaml.load(stream, yaml.Loader) + +# inverting the key-value pair for the dict to act as a map +# easy matching for the users' scanned obscure uri and the supposed +for k, v in yaml_dict["qr_uri"]["h1"].items(): + qr_uri[v] = f"h1-{k}" +for k, v in yaml_dict["qr_uri"]["h2"].items(): + qr_uri[v] = f"h2-{k}" + +print("config.yaml loaded, qr_uri:") +for k, v in qr_uri.items(): + print(k, v) + + +# ## onesignal initialisation +load_dotenv() + +onesignal_configuration = onesignal.Configuration( + rest_api_key=getenv("REST_API_KEY"), + organization_api_key=getenv("ORGANIZATION_API_KEY"), +) + +api_client = onesignal.ApiClient(onesignal_configuration) +api_instance = default_api.DefaultApi(api_client) + +ONESIGNAL_APP_ID = "83901cc7-d964-475a-90ec-9f854df4ba52" + +# ## class / data struct definitions class RequestData(BaseModel): duration: int - block: int - machine: int + machine_id: str + + +class InformationRequestData(BaseModel): + machine_id: str class BlockRequestData(BaseModel): block: int + class FinishRequestData(BaseModel): id: int +class OverrideMachineData(BaseModel): + block: int + machine_id: int + disabled: bool + + class Status(Enum): EMPTY = 0, FINISHED = 1, @@ -87,14 +145,37 @@ class Status(Enum): OUTOFSERVICE = 3, +class PlaintextPasswordData(BaseModel): + password: str + + +URI_TO_MACHINES = { + "h1-status": [1, None], + "h1-dryer1": [1, 1], + "h1-washer1": [1, 2], + "h1-dryer2": [1, 3], + "h1-washer2": [1, 4], + "h2-status": [2, None], + "h2-dryer1": [2, 1], + "h2-washer1": [2, 2], + "h2-dryer2": [2, 3], + "h2-washer2": [2, 4], +} + +TZ = "Asia/Jakarta" + +# ## global vars for user-end + machine_status = [[Status.EMPTY.name, Status.EMPTY.name, Status.EMPTY.name, Status.EMPTY.name], [Status.EMPTY.name, Status.EMPTY.name, Status.EMPTY.name, Status.EMPTY.name]] machine_times = [[None, None, None, None], [None, None, None, None]] -machine_durations = [[None, None, None, None], - [None, None, None, None]] +machine_endings = [[None, None, None, None], + [None, None, None, None]] +# ## some non-api endpoint method definitions + # this method checks for any entry, and starts the previously-terminated schedules # useful if you're restarting the server def restart_terminated_schedules(): @@ -104,60 +185,85 @@ def restart_terminated_schedules(): for row in out: print(row) - end_date = datetime.datetime.fromisoformat(row[2]) + datetime.timedelta(minutes=row[3]) - now = datetime.datetime.now() + end_date = datetime.datetime.fromisoformat(row[RowIndices.END_TIME]) + now = datetime.datetime.now(ZoneInfo(TZ)) + timer_id = row[RowIndices.TIMER_ID] if now > end_date: - print("unfinished timer was long gone") - scheduler.add_job(final_timer_finished, 'date', run_date=(now + datetime.timedelta(seconds=1)), id=str(row[0]), args=[row[0]]) + print("unfinished timer was long gone", timer_id) + scheduler.add_job(final_timer_finished, 'date', run_date=(now + datetime.timedelta(seconds=1)), id=str(timer_id), args=[timer_id]) elif now + datetime.timedelta(minutes=5) > end_date: - print("unfinished timer ends in less than five mins") - scheduler.add_job(final_timer_finished, 'date', run_date=end_date, id=str(row[0]), args=[row[0]]) + print("unfinished timer ends in less than five mins", timer_id) + scheduler.add_job(final_timer_finished, 'date', run_date=end_date, id=str(timer_id), args=[timer_id]) else: - print("unfinished timer scheduler started") - print(row[0]) - scheduler.add_job(reminder_timer_finished, 'date', run_date=end_date, id=str(row[0]), args=[row[0]]) + print("unfinished timer scheduler started", timer_id) + scheduler.add_job(reminder_timer_finished, 'date', run_date=end_date - datetime.timedelta(minutes=5), id=str(timer_id), args=[timer_id]) + + print("setting internal array information") + machine_status[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = Status.RUNNING.name + machine_times[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = row[2] + machine_endings[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = row[3] - machine_status[row[4] - 1][row[5] - 1] = Status.RUNNING.name - machine_times[row[4] - 1][row[5] - 1] = row[2] - machine_durations[row[4] - 1][row[5] - 1] = row[3] + print(machine_status, machine_times, machine_endings) def reminder_timer_finished(timer_id): print("timer almost finished", timer_id) - end_date = datetime.datetime.now() + datetime.timedelta(seconds=5) - scheduler.add_job(final_timer_finished, 'date', run_date=end_date, id=str(timer_id), args=[timer_id]) - - notification = Notification(app_id=ONESIGNAL_APP_ID, included_segments=['All']) + cursor.execute("SELECT * FROM timers WHERE timer_id = ?", (timer_id,)) + out = cursor.fetchall() + print(out) - try: - api_response = api_instance.create_notification(notification) - except Exception as e: - print(e) + scheduler.add_job(final_timer_finished, 'date', run_date=out[0][RowIndices.END_TIME], id=str(timer_id), args=[timer_id]) + notif.send_notification( + out[0][RowIndices.SUBSCRIPTION_ID], + { + "title": "Laundry Reminder", + "body": "Your laundry is almost finished.", + } + ) def final_timer_finished(timer_id): print("timer finished!1", timer_id) - cursor.execute(f"SELECT * FROM timers WHERE timer_id = '{timer_id}'") + cursor.execute("SELECT * FROM timers WHERE timer_id = ?", (timer_id,)) out = cursor.fetchall() - notification = Notification(app_id=ONESIGNAL_APP_ID, included_segments=['All']) - - try: - api_response = api_instance.create_notification(notification) - except Exception as e: - print(e) - for row in out: - machine_status[row[4] - 1][row[5] - 1] = Status.FINISHED.name + machine_status[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = Status.FINISHED.name + + notif.send_notification( + out[0][RowIndices.SUBSCRIPTION_ID], + { + "title": "Laundry Finished", + "body": "Your laundry is finished! Please collect your laundry.", + "requireInteraction": True, + "timerId": timer_id, + } + ) + +# sec min hrs days +COOKIE_MAX_AGE = 60 * 60 * 24 * 30 # 30 days def create_session(response: fastapi.Response): cookie = secrets.token_hex(32) - response.set_cookie(key="session_key", value=cookie) + response.set_cookie(key="session_key", value=cookie, secure=True, max_age=COOKIE_MAX_AGE) return cookie +def authenticate_block(response: fastapi.Response, machine_id: str = None, block: int = None): + if machine_id: + blk = URI_TO_MACHINES[qr_uri[machine_id]][0] + response.set_cookie(key="auth_block", value=blk, secure=True, max_age=COOKIE_MAX_AGE) + return blk + elif block: + blk = block + response.set_cookie(key="auth_block", value=blk, secure=True, max_age=COOKIE_MAX_AGE) + return block + else: + return "FAIL" + + # ## beginning print("Hello, world!") @@ -167,9 +273,11 @@ restart_terminated_schedules() # ## api endpoints # --- starting new timer +# eugh. too complex. TODO: refactor perhaps +# it's so complex even the linter is complaining @app.post("/start", response_class=PlainTextResponse) -async def start_new_timer(data: RequestData, response: fastapi.Response, session_key: Annotated[str | None, fastapi.Cookie()] = None): - now = datetime.datetime.now() +def start_new_timer(data: RequestData, response: fastapi.Response, session_key: Annotated[str | None, fastapi.Cookie()] = None, auth_block: Annotated[str | None, fastapi.Cookie()] = None, subscription_endpoint: Annotated[str | None, fastapi.Cookie()] = None): + now = datetime.datetime.now(ZoneInfo(TZ)) try: if not session_key: print("no session key, creating.") @@ -180,19 +288,37 @@ async def start_new_timer(data: RequestData, response: fastapi.Response, session return "something went wrong during session key creation" try: + block = URI_TO_MACHINES[qr_uri[data.machine_id]][0] + machine = URI_TO_MACHINES[qr_uri[data.machine_id]][1] + except KeyError: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "invalid uri; you are unauthorised" + + if auth_block: + if str(auth_block) != str(block): + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "mismatch in block authentication cookie and requested block machine. forbidden." + else: + authenticate_block(response, machine_id=data.machine_id) + + if not subscription_endpoint: + print("user is not subscribed to notif") + response.status_code = fastapi.status = fastapi.status.HTTP_401_UNAUTHORIZED + return "a notification subscription is required to start a timer" + + try: print("session key valid", session_key) - cursor.execute(f""" - INSERT INTO timers (user_id, start_time, duration, block, machine, status) - VALUES ('{session_key}', '{now.isoformat()}', {data.duration * 30}, {data.block}, {data.machine}, 'RUNNING') - """) + end_date = now + datetime.timedelta(minutes=(data.duration * 30)) + cursor.execute(""" + INSERT INTO timers (user_id, start_time, end_time, block, machine, status, subscription_id) + VALUES (?, ?, ?, ?, ?, ?, ?)""", (session_key, now.isoformat(), end_date.isoformat(), block, machine, 'RUNNING', subscription_endpoint,)) conn.commit() - cursor.execute("SELECT * FROM timers;") + cursor.execute("SELECT * FROM timers WHERE end_time = ?;", (end_date.isoformat(),)) out = cursor.fetchall() for row in out: print(row) - end_date = now + datetime.timedelta(seconds=(data.duration * 30) - 5) timer_id = str(out[len(out) - 1][0]) print("timer id", timer_id) @@ -202,21 +328,22 @@ async def start_new_timer(data: RequestData, response: fastapi.Response, session return "something went wrong during sql stuff" try: - scheduler.add_job(reminder_timer_finished, 'date', run_date=end_date, id=timer_id, args=[timer_id]) + scheduler.add_job(reminder_timer_finished, 'date', run_date=end_date - datetime.timedelta(minutes=5), id=timer_id, args=[timer_id]) except Exception as exception: print("err @ scheduler //", exception) response.status_code = fastapi.status.HTTP_500_INTERNAL_SERVER_ERROR return "something went wrong during scheduler stuff" try: - machine_status[data.block - 1][data.machine - 1] = Status.RUNNING.name - machine_times[data.block - 1][data.machine - 1] = now.isoformat() - machine_durations[data.block - 1][data.machine - 1] = data.duration * 30 + machine_status[block - 1][machine - 1] = Status.RUNNING.name + machine_times[block - 1][machine - 1] = now.isoformat() + machine_endings[block - 1][machine - 1] = end_date except Exception as exception: print("err @ machine_status //", exception) response.status_code = fastapi.status.HTTP_500_INTERNAL_SERVER_ERROR return "something went wrong during machine_status setting somehow" + # HTTP 200 return "all good bro timer started" @@ -227,7 +354,7 @@ def check_status(response: fastapi.Response, session_key: Annotated[str | None, print("no session key, creating.") session_key = create_session(response) - cursor.execute(f"SELECT * FROM timers WHERE user_id = '{session_key}'") + cursor.execute("SELECT * FROM timers WHERE user_id = ?", (session_key,)) out = cursor.fetchall() for row in out: @@ -241,33 +368,37 @@ def check_status(response: fastapi.Response, session_key: Annotated[str | None, # --- fetch machine status for block @app.post("/status") -def get_machine_status(data: BlockRequestData): - block_idx = data.block - 1 - return [machine_status[block_idx], machine_times[block_idx], machine_durations[block_idx]] +def get_machine_status(response: fastapi.Response, auth_block: Annotated[str | None, fastapi.Cookie()] = None): + if auth_block: + block = int(auth_block) - 1 + return [machine_status[block], machine_times[block], machine_endings[block]] + else: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "block cookie needed. unauthorised" # --- get laundr(y/ies) information of user @app.post("/laundry") -def get_laundry_info(response: fastapi.Response, session_key: Annotated[str | None, fastapi.Cookie()] = None): +def get_laundry_info(response: fastapi.Response, session_key: Annotated[str | None, fastapi.Cookie()] = None, auth_block: Annotated[str | None, fastapi.Cookie()] = None): if session_key: result = [] - cursor.execute(f"SELECT * FROM timers WHERE user_id = '{session_key}'") + cursor.execute("SELECT * FROM timers WHERE user_id = ?", (session_key,)) out = cursor.fetchall() for row in out: curr_timer = { - "duration": 0, + "end_time": 0, "start_time": 0, "machine": 0, "status": "RUNNING", "id": -1, } - curr_timer["duration"] = row[3] - curr_timer["start_time"] = row[2] - curr_timer["machine"] = row[5] - curr_timer["status"] = row[6] - curr_timer["id"] = row[0] + curr_timer["end_time"] = row[RowIndices.END_TIME] + curr_timer["start_time"] = row[RowIndices.START_TIME] + curr_timer["machine"] = row[RowIndices.MACHINE] + curr_timer["status"] = row[RowIndices.STATUS] + curr_timer["id"] = row[RowIndices.TIMER_ID] result.append(curr_timer) @@ -278,22 +409,188 @@ def get_laundry_info(response: fastapi.Response, session_key: Annotated[str | No # --- finish one's laundry -@app.post("/finish") +@app.post("/finish", response_class=PlainTextResponse) def finish_laundry(data: FinishRequestData, response: fastapi.Response, session_key: Annotated[str | None, fastapi.Cookie()] = None): if session_key: - cursor.execute(f"SELECT * FROM timers WHERE id = '{data.id}'") + cursor.execute("SELECT * FROM timers WHERE timer_id = ?", (data.id,)) row = cursor.fetchall()[0] - machine_status[row[4] - 1][row[5] - 1] = Status.EMPTY.name - machine_times[row[4] - 1][row[5] - 1] = None - machine_durations[row[4] - 1][row[5] - 1] = None + if datetime.datetime.now(ZoneInfo(TZ)) < datetime.datetime.fromisoformat(row[RowIndices.END_TIME]): + response.status_code = fastapi.status.HTTP_400_BAD_REQUEST + return "timer has not finished yet" - cursor.execute(f"DELETE FROM timers WHERE timer_id = {row[0]}") + machine_status[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = Status.EMPTY.name + machine_times[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = None + machine_endings[row[RowIndices.BLOCK] - 1][row[RowIndices.MACHINE] - 1] = None + + cursor.execute("DELETE FROM timers WHERE timer_id = ?", (row[0],)) conn.commit() + print(f"timer of id {data.id} has been finished by {session_key}") + + return "laundry finished" + if session_key != row[1]: - response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED - return "session key mismatch with timer id, dubious and hence unauthorised." + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "session key mismatch with timer id, dubious!" else: response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED return "you got no session key, cannot" + + +# --- get information from uri search query +@app.post("/info") +def uri_to_information(data: InformationRequestData, response: fastapi.Response, auth_block: Annotated[str | None, fastapi.Cookie()] = None): + info = None + try: + if len(data.machine_id) > 0: + info = URI_TO_MACHINES[qr_uri[data.machine_id]] + except KeyError: + response.status_code = fastapi.status.HTTP_404_NOT_FOUND + return "INVALID machine ID/URI" + + print(auth_block) + if auth_block: + if info: + if str(auth_block) != str(info[0]): + response.status_code = fastapi.status.HTTP_403_FORBIDDEN + return "UNAUTHORISED to view information of block " + str(info[0]) + else: + info = [auth_block, None] + else: + if info: + authenticate_block(response, block=info[0]) + else: + response.status_code = fastapi.status.HTTP_401_UNAUTHORIZED + return "NO INFORMATION PROVIDED. NO AUTH COOKIE." + + return {"block": info[0], "machine": info[1]} + + +# #### NOTIFICATION API END POINTS #### + + +# --- subscribe +@app.post("/notifsubscribe", response_class=PlainTextResponse) +def notif_subscribe(data: notif.PushSubscriptionData, response: fastapi.Response): + 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.py b/backend/notif.py new file mode 100644 index 0000000..eb25793 --- /dev/null +++ b/backend/notif.py @@ -0,0 +1,76 @@ +from pydantic import BaseModel +import sqlite3 +from pywebpush import webpush +from dotenv import load_dotenv +from os import getenv +import json + +class PushSubscriptionData(BaseModel): + endpoint: str + keys: object + + +conn = sqlite3.connect("db.db", check_same_thread=False) +cursor = conn.cursor() + +load_dotenv() + +PRIVATE_VAPID_KEY = getenv("PRIVATE_VAPID_KEY") + +cursor.execute(""" +CREATE TABLE IF NOT EXISTS subscriptions ( + endpoint TEXT PRIMARY KEY, + keys_p256dh TEXT NOT NULL, + keys_auth TEXT NOT NULL +);""") + + +# --- subscribe +def subscribe(data: PushSubscriptionData): + cursor.execute("SELECT * FROM subscriptions WHERE endpoint = ?", (data.endpoint,)) + result = cursor.fetchall() + + if len(result) > 0: + return data.endpoint + + cursor.execute(""" + INSERT INTO subscriptions (endpoint, keys_p256dh, keys_auth) + VALUES (?, ?, ?)""", (data.endpoint, data.keys["p256dh"], data.keys["auth"])) + conn.commit() + + cursor.execute("SELECT * FROM subscriptions") + result = cursor.fetchall() + + for row in result: + print(row) + + return data.endpoint + + +# --- send notification +# ---- not used yet +def send_notification(endpoint: str, notification_payload: object): + cursor.execute(f"""SELECT * FROM subscriptions WHERE endpoint = \"{endpoint}\"""") + row = cursor.fetchall()[0] + print(row) + + subscription_info = { + "endpoint": endpoint, + "keys": { + "p256dh": row[1], + "auth": row[2], + }, + } + + try: + webpush( + subscription_info=subscription_info, + data=json.dumps(notification_payload), + vapid_private_key=PRIVATE_VAPID_KEY, + vapid_claims={ + "sub": "mailto:dev@altafcreator.com", + }, + headers={"Urgency": "high"} + ) + except Exception as exception: + print(exception) diff --git a/backend/notif_test.py b/backend/notif_test.py new file mode 100644 index 0000000..b6f843e --- /dev/null +++ b/backend/notif_test.py @@ -0,0 +1,14 @@ +import notif + +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 differnew file mode 100644 index 0000000..1f6bb54 --- /dev/null +++ b/frontend/.DS_Store diff --git a/frontend/OneSignalSDKWorker.js b/frontend/OneSignalSDKWorker.js deleted file mode 100644 index 067cf4d..0000000 --- a/frontend/OneSignalSDKWorker.js +++ /dev/null @@ -1 +0,0 @@ -importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
\ No newline at end of file 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 differnew file mode 100644 index 0000000..64959d9 --- /dev/null +++ b/frontend/assets/.DS_Store diff --git a/frontend/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf b/frontend/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf Binary files differnew file mode 100644 index 0000000..43ed4f5 --- /dev/null +++ b/frontend/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf diff --git a/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf b/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf Binary files differnew file mode 100644 index 0000000..e31b51e --- /dev/null +++ b/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf diff --git a/frontend/assets/icons/.DS_Store b/frontend/assets/icons/.DS_Store Binary files differnew file mode 100644 index 0000000..5008ddf --- /dev/null +++ b/frontend/assets/icons/.DS_Store diff --git a/frontend/assets/icons/1024.png b/frontend/assets/icons/1024.png Binary files differnew file mode 100644 index 0000000..7063453 --- /dev/null +++ b/frontend/assets/icons/1024.png diff --git a/frontend/assets/icons/192.png b/frontend/assets/icons/192.png Binary files differnew file mode 100644 index 0000000..80c8f46 --- /dev/null +++ b/frontend/assets/icons/192.png diff --git a/frontend/assets/icons/512.png b/frontend/assets/icons/512.png Binary files differnew file mode 100644 index 0000000..195b42b --- /dev/null +++ b/frontend/assets/icons/512.png diff --git a/frontend/assets/icons/logo.svg b/frontend/assets/icons/logo.svg new file mode 100644 index 0000000..e7e1c2b --- /dev/null +++ b/frontend/assets/icons/logo.svg @@ -0,0 +1,176 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="1024" + height="1024" + viewBox="0 0 270.93333 270.93333" + version="1.1" + id="svg1" + inkscape:version="1.4-beta3 (01c8a1ca, 2024-08-28)" + sodipodi:docname="logo.svg" + inkscape:export-filename="192.png" + inkscape:export-xdpi="18" + inkscape:export-ydpi="18" + 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.43446384" + inkscape:cx="339.49891" + inkscape:cy="407.39869" + inkscape:current-layer="g5" /> + <defs + id="defs1"> + <meshgradient + inkscape:collect="always" + id="meshgradient15678" + gradientUnits="userSpaceOnUse" + x="165.22603" + y="170.67172" + gradientTransform="translate(-151.95082,25.498289)"> + <meshrow + id="meshrow42263"> + <meshpatch + id="meshpatch42263"> + <stop + path="c -2.84217e-14,32.2929 -26.1786,58.4715 -58.4715,58.4715" + style="stop-color:#ffffff;stop-opacity:1" + id="stop42263" /> + <stop + path="l 4.21082e-05,-58.4734" + style="stop-color:#dbe7e5;stop-opacity:1" + id="stop42264" /> + <stop + path="l -4.21082e-05,0.00263432" + style="stop-color:#dbe7e5;stop-opacity:1" + id="stop42265" /> + <stop + path="l 58.4715,-0.00070466" + style="stop-color:#ffffff;stop-opacity:1" + id="stop42266" /> + </meshpatch> + <meshpatch + id="meshpatch42266"> + <stop + path="c -32.2929,0 -58.4715,-26.1786 -58.4715,-58.4715" + id="stop42267" /> + <stop + path="l 58.4715,-0.00192966" + style="stop-color:#c0d5d2;stop-opacity:1" + id="stop42268" /> + <stop + path="l 0,0" + style="stop-color:#c0d5d2;stop-opacity:1" + id="stop42269" /> + </meshpatch> + <meshpatch + id="meshpatch42269"> + <stop + path="c 0,-32.2929 26.1786,-58.4715 58.4715,-58.4715" + id="stop42270" /> + <stop + path="l 4.15649e-05,58.4715" + style="stop-color:#a0bfbb;stop-opacity:1" + id="stop42271" /> + <stop + path="l 5.43348e-07,-0.00192966" + style="stop-color:#a0bfbb;stop-opacity:1" + id="stop42272" /> + </meshpatch> + <meshpatch + id="meshpatch42272"> + <stop + path="c 32.2929,0 58.4715,26.1784 58.4715,58.4713" + id="stop42273" /> + <stop + path="l -58.4715,0.0002" + style="stop-color:#93b6b1;stop-opacity:1" + id="stop42274" /> + <stop + path="l 4.15649e-05,0" + style="stop-color:#93b6b1;stop-opacity:1" + id="stop42275" /> + </meshpatch> + </meshrow> + </meshgradient> + </defs> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <g + id="g5" + style="stroke:#2c5aa0" + transform="translate(28.712096,-7.7178088)"> + <rect + style="opacity:1;fill:#e8deb6;fill-opacity:1;stroke:none;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + id="rect42288" + width="270.93332" + height="270.93332" + x="-28.712095" + y="7.7178087" + ry="19.067522" /> + <path + id="rect1" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 32.351323,85.692322 H 181.15782 c 6.29198,0 6.06569,-0.226285 6.06569,6.065692 V 244.29376 c 0,6.29198 -5.06538,11.35736 -11.35736,11.35736 H 37.64299 c -6.291977,0 -11.357359,-5.06538 -11.357359,-11.35736 V 91.758014 c 0,-6.291977 -0.226285,-6.065692 6.065692,-6.065692 z" + sodipodi:nodetypes="sssssssss" /> + <circle + style="display:none;fill:url(#meshgradient15678);fill-opacity:1;stroke:none;stroke-width:48.916;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + id="path5" + cy="196.17001" + cx="-45.196255" + r="58.471458" + transform="rotate(-45)" /> + <circle + style="fill:none;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="path2" + cx="106.75457" + cy="170.67172" + r="54.53896" /> + <path + id="rect3" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 37.642993,30.717831 H 175.86615 c 6.29198,0 11.35736,5.065383 11.35736,11.35736 v 24.93158 c 0,6.291977 0.22629,6.065692 -6.06569,6.065692 H 32.351326 c -6.291977,0 -6.065692,0.226285 -6.065692,-6.065692 v -24.93158 c 0,-6.291977 5.065382,-11.35736 11.357359,-11.35736 z" + sodipodi:nodetypes="sssssssss" /> + <rect + style="fill:#000000;fill-opacity:0;stroke:#666a83;stroke-width:3.665;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" + id="rect4" + width="40.208775" + height="17.323994" + x="86.650185" + y="43.235077" + ry="8.6619968" /> + <circle + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:7.865;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="170.67172" + r="54.53896" /> + <path + style="opacity:1;fill:none;fill-opacity:1;stroke:#798aa2;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + d="m 106.75457,131.02162 v 39.6501 l 29.24515,-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/icons/transparent_1024.png b/frontend/assets/icons/transparent_1024.png Binary files differnew file mode 100644 index 0000000..5e2e557 --- /dev/null +++ b/frontend/assets/icons/transparent_1024.png diff --git a/frontend/assets/icons/transparent_logo.svg b/frontend/assets/icons/transparent_logo.svg new file mode 100644 index 0000000..063bdf4 --- /dev/null +++ b/frontend/assets/icons/transparent_logo.svg @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="1024" + height="1024" + viewBox="0 0 270.93333 270.93333" + version="1.1" + id="svg1" + inkscape:version="1.4-beta3 (01c8a1ca, 2024-08-28)" + sodipodi:docname="logo_to_ico.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="510.00139" + inkscape:cy="374.76141" + inkscape:current-layer="g5" /> + <defs + id="defs1" /> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <g + id="g5" + style="stroke:#2c5aa0" + transform="translate(28.712096,-7.7178088)"> + <path + id="rect1" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;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:#ffffff;fill-opacity:1;stroke:#666a83;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:#000000;fill-opacity:0;stroke:#666a83;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:#ffffff;fill-opacity:1;stroke:#666a83;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:#798aa2;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/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/.DS_Store b/frontend/assets/img/.DS_Store Binary files differnew file mode 100644 index 0000000..5008ddf --- /dev/null +++ b/frontend/assets/img/.DS_Store diff --git a/frontend/dryer_clothes.png b/frontend/assets/img/dryer_clothes.png Binary files differindex babfc36..babfc36 100644 --- a/frontend/dryer_clothes.png +++ b/frontend/assets/img/dryer_clothes.png 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/dryer_off.png b/frontend/assets/img/dryer_off.png Binary files differindex 9919a01..9919a01 100644 --- a/frontend/dryer_off.png +++ b/frontend/assets/img/dryer_off.png diff --git a/frontend/dryer_on.png b/frontend/assets/img/dryer_on.png Binary files differindex 7851dd5..7851dd5 100644 --- a/frontend/dryer_on.png +++ b/frontend/assets/img/dryer_on.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/washer_clothes.png b/frontend/assets/img/washer_clothes.png Binary files differindex b16688a..b16688a 100644 --- a/frontend/washer_clothes.png +++ b/frontend/assets/img/washer_clothes.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/washer_off.png b/frontend/assets/img/washer_off.png Binary files differindex 0be7233..0be7233 100644 --- a/frontend/washer_off.png +++ b/frontend/assets/img/washer_off.png diff --git a/frontend/washer_on.png b/frontend/assets/img/washer_on.png Binary files differindex 7b811a4..7b811a4 100644 --- a/frontend/washer_on.png +++ b/frontend/assets/img/washer_on.png diff --git a/frontend/favicon.ico b/frontend/favicon.ico Binary files differnew file mode 100644 index 0000000..41044ea --- /dev/null +++ b/frontend/favicon.ico diff --git a/frontend/index.html b/frontend/index.html index 0eeb0b0..fd7a1e9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,26 +2,15 @@ <html lang="en"> <head> <meta charset="UTF-8" /> - <link rel="stylesheet" href="./style.css"> + <link rel="stylesheet" href="./style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Victoria Hall LaundryWeb</title> - <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script> - <script> - window.OneSignalDeferred = window.OneSignalDeferred || []; - OneSignalDeferred.push(async function(OneSignal) { - await OneSignal.init({ - appId: "83901cc7-d964-475a-90ec-9f854df4ba52", - welcomeNotification: { - disable: true, - }, - }); - }); - </script> + <link rel="manifest" href="/manifest.json" /> + <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-id">H1</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> @@ -30,16 +19,11 @@ <div class="section-container no-pad"> <span>Loading...</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> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> <script src="/main.js"></script> - <script> - (async () => { - const result = await checkUserStatus(); - if (result != "you got laundry") { - window.location.href = './start/'; - } else { - window.location.href = './timer/'; - } - })(); - </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 7ed3b9c..cfacc86 100644 --- a/frontend/main.js +++ b/frontend/main.js @@ -1,23 +1,76 @@ // --- begin, important constants const data = { duration: 1, // will be multiplied by 30 - block: 1, - machine: 2, + machine_id: "", } const API_URL = "https://backend.laundryweb.altafcreator.com" -// --- check user status -// returns true if there exists a timer, and returns false otherwise. -// cookie need to be included. -async function checkUserStatus() { - const response = await fetch(`${API_URL}/check`, { - credentials: "include", - method: "POST", +const PUBLIC_VAPID_KEY = "BCvVfKfWBtHKtzdakJfhYy604yTn0_FgZxy2sNtxcQm6YyC3qdzBBuCJLbVcG6pmbz_CZLa0I44Z-b5UVBbegGw" + +// --- REGISTER SERVICE WORKERS +if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw.js', { + scope: '/', }); - return await response.text(); } +// --- subscribe +async function subscribe() { + if (!('serviceWorker' in navigator)) { + alert("err: no service worker"); + return; + } + + console.log(await Notification.requestPermission()); + + const registration = await navigator.serviceWorker.ready; + + 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; + } + +} + +/// copied from somewhere +const urlBase64ToUint8Array = (base64String) => { + const padding = '='.repeat((4 - base64String.length % 4) % 4); + const base64 = (base64String + padding) + .replace(/\-/g, '+') + .replace(/_/g, '/'); + + const rawData = window.atob(base64); + const outputArray = new Uint8Array(rawData.length); + + for (let i = 0; i < rawData.length; ++i) { + outputArray[i] = rawData.charCodeAt(i); + } + return outputArray; +}; + // --- check machine status // returns a 2d array representing machines // []: root array @@ -26,10 +79,7 @@ async function checkUserStatus() { async function checkMachineStatus() { const response = await fetch(`${API_URL}/status`, { method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({block: 1}), + credentials: "include", }); return await response.json(); } @@ -53,7 +103,7 @@ function decreaseTime() { } // --- starting a timer -function start() { +async function start() { fetch(`${API_URL}/start`, { credentials: "include", method: "POST", @@ -67,39 +117,82 @@ 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", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ "machine_id": urlParam ? urlParam : "" }), + }); + + const json = await response.json(); + + if (json["block"]) { + document.getElementById("logo-id").innerText = "H" + json["block"]; + } else { + document.getElementById("logo-id").innerText = "H?"; + } + + return Promise.resolve(json); +} + // ------ page specific ----- +// wait WHY THE FUCK ARE THESE HERE THEN? // ---- machine status page +const STATUS_INTERVAL = 30 + // --- machines visual async function startUpdateMachines() { + const urlParams = new URLSearchParams(window.location.search); + + await information(urlParams.get("machine")); + console.log("info done") + updateMachines(); while (true) { - await delay(30 * 1000); + await delay(STATUS_INTERVAL * 1000); await updateMachines(); } } async function updateMachines() { - const dryer1 = document.getElementById("dryer1-img"); - const washer1 = document.getElementById("washer1-img"); - const dryer2 = document.getElementById("dryer2-img"); - const washer2 = document.getElementById("washer2-img"); - - const machine_imgs = [dryer1, washer1, dryer2, washer2]; + // less disgusting. + const types = ["dryer", "washer"]; + const ns = [1, 2]; + + const machineImgs = []; + const machineTxts = []; + const machineDetailImgs = []; + const machineDetailTitles = []; + const machineDetailDescs = []; - const dryer1txt = document.getElementById("dryer1-span"); - const washer1txt = document.getElementById("washer1-span"); - const dryer2txt = document.getElementById("dryer2-span"); - const washer2txt = document.getElementById("washer2-span"); + for (const n of ns) { + for (const t of types) { + machineImgs.push(document.getElementById(`${t}${n}-img`)); + machineTxts.push(document.getElementById(`${t}${n}-span`)); + machineDetailImgs.push(document.getElementById(`detail-${t[0]}${n}-img`)); + machineDetailTitles.push(document.getElementById(`detail-${t[0]}${n}-title`)); + machineDetailDescs.push(document.getElementById(`detail-${t[0]}${n}-desc`)); + } + } - const machine_txts = [dryer1txt, washer1txt, dryer2txt, washer2txt]; + console.log(machineDetailImgs); + console.log(machineDetailTitles); + console.log(machineDetailDescs); const status = await checkMachineStatus(); console.log(status); @@ -107,33 +200,62 @@ async function updateMachines() { for (let i = 0; i < status[0].length; i++) { if (status[0][i] == "RUNNING") { if ((i + 1) % 2 == 0) { - machine_imgs[i].src = "/washer_on.png"; + machineImgs[i].src = "/assets/img/washer_on.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_on.png"; + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "Timing might differ due to heavy load or excess suds." } else { - machine_imgs[i].src = "/dryer_on.png"; + machineImgs[i].src = "/assets/img/dryer_on.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_on.png"; + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle" } const now = Date.now(); - const start = Date.parse(status[1][i]); - machine_txts[i].innerHTML = Math.ceil(((start + (status[2][i] * 60000)) - now) / 60000).toString() + " min(s) left"; + 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 + " 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) { - machine_imgs[i].src = "/washer_clothes.png"; + machineImgs[i].src = "/assets/img/washer_clothes.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_clothes.png"; } else { - machine_imgs[i].src = "/dryer_clothes.png"; + machineImgs[i].src = "/assets/img/dryer_clothes.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_clothes.png"; } - machine_txts[i].innerHTML = "Idle" + machineTxts[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "Clothes may not be collected yet." } else { if ((i + 1) % 2 == 0) { - machine_imgs[i].src = "/washer_off.png"; + machineImgs[i].src = "/assets/img/washer_off.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_off.png"; } else { - machine_imgs[i].src = "/dryer_off.png"; + machineImgs[i].src = "/assets/img/dryer_off.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_off.png"; } - machine_txts[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "" + machineTxts[i].innerHTML = "Idle" } } + + console.log("done"); } // --- current timers async function startLoadTimers() { + information(); + const timersData = await fetchTimers(); if (timersData[0] != 200) { @@ -144,31 +266,33 @@ async function startLoadTimers() { const timers = timersData[1]; const container = document.getElementById("timer-container") + if (timers.length > 0) container.innerHTML = ''; const textList = [] const progList = [] + const startTimestamps = [] const endTimestamps = [] for (let i = 0; i < timers.length; i++) { container.innerHTML += ` - <div class="section-container no-pad"> + <div class="section-container no-pad" id="timer-${timers[i]["id"]}"> <h1>Timer #${(i + 1).toString()}</h1> <div class="machine-container"> <div class="txtcol-dryer ${timers[i]["machine"] == 1 ? "machine-selected" : ""}"> <span>Dryer 1</span> - <img src="/dryer_${timers[i]["machine"] == 1 ? "on" : "off"}.png" alt=""> + <img src="/assets/img/dryer_${timers[i]["machine"] == 1 ? "on" : "off"}.png" alt=""> </div> <div class="txtcol-washer ${timers[i]["machine"] == 2 ? "machine-selected" : ""}"> <span>Washer 1</span> - <img src="/washer_${timers[i]["machine"] == 2 ? "on" : "off"}.png" alt=""> + <img src="/assets/img/washer_${timers[i]["machine"] == 2 ? "on" : "off"}.png" alt=""> </div> <div class="txtcol-dryer ${timers[i]["machine"] == 3 ? "machine-selected" : ""}"> <span>Dryer 2</span> - <img src="/dryer_${timers[i]["machine"] == 3 ? "on" : "off"}.png" alt=""> + <img src="/assets/img/dryer_${timers[i]["machine"] == 3 ? "on" : "off"}.png" alt=""> </div> <div class="txtcol-washer ${timers[i]["machine"] == 4 ? "machine-selected" : ""}"> <span>Washer 2</span> - <img src="/washer_${timers[i]["machine"] == 4 ? "on" : "off"}.png" alt=""> + <img src="/assets/img/washer_${timers[i]["machine"] == 4 ? "on" : "off"}.png" alt=""> </div> </div> <div class="timer-container"> @@ -177,17 +301,27 @@ async function startLoadTimers() { <div class="prog" id="timer-prog-${i}"></div> </div> </div> - <button class="button bg-1" disabled>I have collected my laundry!</button> + <button class="button bg-1" disabled id="timer-btn-${i}">I have collected my laundry!</button> </div> ` textList.push(`timer-txt-${i}`); progList.push(`timer-prog-${i}`); - endTimestamps.push(Date.parse(timers[i]["start_time"]) + timers[i]["duration"] * 60000); + endTimestamps.push(Date.parse(timers[i]["end_time"])); + startTimestamps.push(Date.parse(timers[i]["start_time"])); + } + + for (let i = 0; i < timers.length; i++) { // html rebuilds everytime innerHTML is modified + document.getElementById(`timer-btn-${i}`).addEventListener("click", function () { + finishLaundryTimer(timers[i]["id"]); + }); + console.log("added!"); } console.log(textList); + console.log(progList); console.log(endTimestamps); + console.log(startTimestamps); while (true) { for (let i = 0; i < textList.length; i++) { @@ -195,14 +329,19 @@ async function startLoadTimers() { text.innerText = ""; const timeRemaining = Math.max(Math.round((endTimestamps[i] - Date.now()) / 1000), 0); const hours = Math.floor(timeRemaining / 3600); - const minutes = Math.floor(timeRemaining / 60); + const minutes = Math.floor(timeRemaining / 60) % 60; const seconds = timeRemaining % 60; if (hours > 0) text.innerText += hours.toString().padStart(2, '0') + ':'; text.innerText += minutes.toString().padStart(2, '0') + ':'; text.innerText += seconds.toString().padStart(2, '0'); const prog = document.getElementById(progList[i]); - prog.style.width = ((timeRemaining / (timers[i]["duration"] * 60)) * 100).toString() + "%"; + const totalTime = endTimestamps[0] - startTimestamps[0]; + prog.style.width = ((timeRemaining / (totalTime / 1000)) * 100).toString() + "%"; + + if (timeRemaining <= 0) { + document.getElementById(`timer-btn-${i}`).disabled = false; + } } await delay(1000); } @@ -216,6 +355,22 @@ async function fetchTimers() { return [response.status, await response.json()]; } +// --- finish / collect timer / laundry +async function finishLaundryTimer(timerId) { + console.log("finishing timer! w/ id "+timerId.toString()); + const response = await fetch(`${API_URL}/finish`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({id: timerId}), + }); + if (await response.text() == "laundry finished") { + window.location.reload(); + } +} + const delay = (durationMs) => { return new Promise(resolve => setTimeout(resolve, durationMs)); } diff --git a/frontend/manifest.json b/frontend/manifest.json new file mode 100644 index 0000000..4bbf313 --- /dev/null +++ b/frontend/manifest.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://json.schemastore.org/web-manifest-combined.json", + "name": "LaundryWeb", + "icons": [ + { + "src": "/assets/icons/512.png", + "type": "image/png", + "sizes": "512x512" + }, + { + "src": "/assets/icons/192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "/assets/icons/1024.png", + "type": "image/png", + "sizes": "1024x1024" + } + ], + "start_url": "/", + "display": "standalone", + "theme_color": "#93B6B1", + "background_color": "#FFFFFF" +} diff --git a/frontend/permissionrequest.js b/frontend/permissionrequest.js new file mode 100644 index 0000000..1a90109 --- /dev/null +++ b/frontend/permissionrequest.js @@ -0,0 +1,25 @@ +const notif = document.getElementById("notif-panel"); +const notbtn = document.getElementById("notbtn"); + +(async function () { + cookie = await cookieStore.get("subscription_endpoint"); + if (cookie) { + notif.style.display = "none"; + } +})(); + +notbtn.addEventListener("click", () => requestPermission()); +async function requestPermission() { + const sub_result = await subscribe(); + + if (!sub_result) { + return; + } + + notif.style.display = "none"; + + // this is disgusting + if (typeof startbtn !== 'undefined') { + startbtn.disabled = false; + } +} 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 4c860e5..82e23aa 100644 --- a/frontend/start.js +++ b/frontend/start.js @@ -1,15 +1,63 @@ -document.getElementById("startbtn").addEventListener("click", () => { +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(); + + console.log("timers: (start.js) " + timers); + + const existingPanel = document.getElementById("existing-laundry-panel"); + const existingText = document.getElementById("existing-laundry-text"); + + if (Array.isArray(timers[1]) && timers[1].length > 0) { + existingPanel.style.display = 'inherit'; + if (timers[1].length == 1) { + existingText.innerText = "You currently have another ongoing laundry. You are creating a new timer."; + } else { + existingText.innerText = "You currently have other ongoing laundries. You are creating a new timer."; + } + } + + const info = await information(data.machine_id); + + const machine = await info["machine"]; + + console.log(`machine is ${machine}`); + + const divs = [ + document.getElementById("dryer1"), + document.getElementById("washer1"), + document.getElementById("dryer2"), + document.getElementById("washer2"), + ] + + divs[machine - 1].classList.add("machine-selected"); + + cookie = await cookieStore.get("subscription_endpoint"); + + if (cookie) { + startbtn.disabled = false; + } +})(); + +startbtn.addEventListener("click", () => { start(); }); -startUpdateMachines(); -const notbtn = document.getElementById("notbtn") -notbtn.addEventListener("click", () => requestPermission()) -function requestPermission() { - console.log("Requesting permission..."); - OneSignal.Notifications.requestPermission(); -} -const notif = document.getElementById("notif-panel"); -if (Notification.permission == 'granted') { - notif.remove(); +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 bd7e407..bcfd1a6 100644 --- a/frontend/start/index.html +++ b/frontend/start/index.html @@ -4,50 +4,48 @@ <meta charset="UTF-8" /> <link rel="stylesheet" href="/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Victoria Hall LaundryWeb</title> - <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script> - <script> - window.OneSignalDeferred = window.OneSignalDeferred || []; - OneSignalDeferred.push(async function(OneSignal) { - await OneSignal.init({ - appId: "83901cc7-d964-475a-90ec-9f854df4ba52", - welcomeNotification: { - disable: true, - }, - }); - }); - </script> + <link rel="manifest" href="/manifest.json" /> + <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-id">H1</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 class="section-container row bg-dark" id="existing-laundry-panel" style="display: none;"> + <div class="flex-center-container"> + <span class="icon" style="font-weight: 900; font-family: monospace;">i</span> + </div> + <div class="flex"> + <span id="existing-laundry-text">You currently have (an)other laundry(ies) ongoing. You are creating a new timer.</span> + <button id="cancelbtn" class="button bg-darker" onclick="window.location.href = '/timer/'">Cancel</button> + </div> + </div> <div class="section-container no-pad" style="opacity: .5;"> <h1>Selected Machine</h1> <div class="machine-container"> <div class="txtcol-dryer" id="dryer1"> <span>Dryer 1</span> - <img src="/dryer_off.png" alt="" id="dryer1-img"> + <img src="/assets/img/dryer_off.png" alt="" id="dryer1-img"> <span id="dryer1-span"></span> </div> - <div class="txtcol-washer machine-selected" id="washer1"> + <div class="txtcol-washer" id="washer1"> <span>Washer 1</span> - <img src="/washer_off.png" alt="" id="washer1-img"> + <img src="/assets/img/washer_off.png" alt="" id="washer1-img"> <span id="washer1-span"></span> </div> <div class="txtcol-dryer" id="dryer2"> <span>Dryer 2</span> - <img src="/dryer_off.png" alt="" id="dryer2-img"> + <img src="/assets/img/dryer_off.png" alt="" id="dryer2-img"> <span id="dryer2-span"></span> </div> <div class="txtcol-washer" id="washer2"> <span>Washer 2</span> - <img src="/washer_off.png" alt="" id="washer2-img"> + <img src="/assets/img/washer_off.png" alt="" id="washer2-img"> <span id="washer2-span"></span> </div> </div> @@ -71,9 +69,35 @@ <button id="notbtn" class="button bg-redder">Enable Required Permissions</button> </div> </div> - <button class="button bg-1" id="startbtn">Start</button> + <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> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> <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.js b/frontend/status.js new file mode 100644 index 0000000..5f55fe8 --- /dev/null +++ b/frontend/status.js @@ -0,0 +1,7 @@ +startUpdateMachines(); + +(async () => { + const urlParams = new URLSearchParams(window.location.search); + const inf = await information(urlParams.get("machine")); + document.getElementById("status-title").innerHTML = `Machine Status for H${inf ? inf.block : '?'}` +})(); diff --git a/frontend/status/index.html b/frontend/status/index.html index 61a2e06..46c50ed 100644 --- a/frontend/status/index.html +++ b/frontend/status/index.html @@ -4,19 +4,8 @@ <meta charset="UTF-8" /> <link rel="stylesheet" href="/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Victoria Hall LaundryWeb</title> - <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script> - <script> - window.OneSignalDeferred = window.OneSignalDeferred || []; - OneSignalDeferred.push(async function(OneSignal) { - await OneSignal.init({ - appId: "83901cc7-d964-475a-90ec-9f854df4ba52", - welcomeNotification: { - disable: true, - }, - }); - }); - </script> + <link rel="manifest" href="/manifest.json" /> + <title>LaundryWeb</title> </head> <body> <style> @@ -25,36 +14,119 @@ } </style> <div class="section-container row bg-1" style="height: 164px;"> - <span id="logo">Victoria Hall<br>LaundryWeb</span> - <span id="logo-id">H1</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> + </div> + <div> + <span>Please allow this website to send you notifications to remind you about your laundry. That's like, the whole point of this website.</span> + <button id="notbtn" class="button bg-redder">Enable Required Permissions</button> + </div> </div> <div class="section-container no-pad"> + <h1 id="status-title">Machine Status for H?</h1> <div class="machine-container"> <div class="txtcol-dryer" id="dryer1"> <span>Dryer 1</span> - <img src="/dryer_off.png" alt="" id="dryer1-img"> + <img src="/assets/img/dryer_off.png" alt="" id="dryer1-img"> <span id="dryer1-span"></span> </div> <div class="txtcol-washer" id="washer1"> <span>Washer 1</span> - <img src="/washer_off.png" alt="" id="washer1-img"> + <img src="/assets/img/washer_off.png" alt="" id="washer1-img"> <span id="washer1-span"></span> </div> <div class="txtcol-dryer" id="dryer2"> <span>Dryer 2</span> - <img src="/dryer_off.png" alt="" id="dryer2-img"> + <img src="/assets/img/dryer_off.png" alt="" id="dryer2-img"> <span id="dryer2-span"></span> </div> <div class="txtcol-washer" id="washer2"> <span>Washer 2</span> - <img src="/washer_off.png" alt="" id="washer2-img"> + <img src="/assets/img/washer_off.png" alt="" id="washer2-img"> <span id="washer2-span"></span> </div> </div> </div> + <div class="section-container no-pad"> + <h1>Dryer 1</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-d1-img" src="/assets/img/dryer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-d1-title">Idle</span> + <span id="detail-d1-desc"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Washer 1</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-w1-img" src="/assets/img/washer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-w1-title">Idle</span> + <span id="detail-w1-desc"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Dryer 2</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-d2-img" src="/assets/img/dryer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-d2-title">Idle</span> + <span id="detail-d2-desc"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Washer 2</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-w2-img" src="/assets/img/washer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-w2-title">Idle</span> + <span id="detail-w2-desc"></span> + </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> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> <script src="/main.js"></script> - <script> - startUpdateMachines(); - </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 5713576..37e66e8 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -1,11 +1,20 @@ +@font-face { + font-family: "Interesting"; + src: + url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype"), + url("/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype"); +} + :root { --col-1: #93B6B1; --col-2: #E8DEB6; --col-3: #B3C9AA; + --darkcol-1: #656A85; + --darkcol-2: #798AA2; --col-red-bg: #FFD0D0; --col-red-fg: #A33939; - --col-washer: #666a83; - --col-dryer: #7c89a0; + --col-washer: var(--darkcol-1); + --col-dryer: var(--darkcol-2); } body { @@ -15,7 +24,8 @@ body { flex-direction: column; gap: 16px; padding: 16px; - font-family: sans-serif; + font-family: "Interesting", sans-serif; + padding-bottom: 64px; } .section-container { @@ -52,18 +62,37 @@ body { flex-direction: row !important; } +.col { + flex-direction: column !important; +} + +.flex-container { + display: flex; + gap: 16px !important; +} + .flex-center-container { display: flex; align-items: center; justify-content: center; } +.flex-center-container-jus { + display: flex; + justify-content: center; +} + +.flex { + flex: 1; +} + .button { width: 100%; height: 48px; border-radius: 48px; border: none; cursor: pointer; + color: black; } .button:hover:not(:disabled) { @@ -113,6 +142,16 @@ body { color: white; } +.bg-dark { + background-color: var(--darkcol-2); + color: white; +} + +.bg-darker { + background-color: var(--darkcol-1); + color: white; +} + .txtcol-washer { color: var(--col-washer); } @@ -222,6 +261,87 @@ body { background-color: var(--col-1); } +.credits-container { + opacity: .5; + font-size: .9rem; + text-align: center; +} + +a { + color: black; +} + +.feedback { + position: fixed; + bottom: 0; + padding: 12px; + padding-bottom: 12px; + background-color: var(--darkcol-1); + color: white; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + text-decoration: none; + right: 16px; + box-shadow: 0 0 8px #00000033; + transition: .3s padding-bottom, .3s background-color; +} + +.feedback:hover { + padding-bottom: 20px; + background-color: var(--darkcol-2); +} + +.big-text { + 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; @@ -231,3 +351,39 @@ body { #logo { 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 new file mode 100644 index 0000000..dd9a495 --- /dev/null +++ b/frontend/sw.js @@ -0,0 +1,47 @@ +const API_URL = "https://backend.laundryweb.altafcreator.com" + +self.addEventListener('push', (e) => { + console.log(e.data); + 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 6405843..724ebe8 100644 --- a/frontend/timer/index.html +++ b/frontend/timer/index.html @@ -4,30 +4,26 @@ <meta charset="UTF-8" /> <link rel="stylesheet" href="/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Victoria Hall LaundryWeb</title> - <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script> - <script> - window.OneSignalDeferred = window.OneSignalDeferred || []; - OneSignalDeferred.push(async function(OneSignal) { - await OneSignal.init({ - appId: "83901cc7-d964-475a-90ec-9f854df4ba52", - welcomeNotification: { - disable: true, - }, - }); - }); - </script> + <link rel="manifest" href="/manifest.json" /> + <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-id">H1</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> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> <script src="/main.js"></script> <script> startLoadTimers(); |
