first attempt at making a UI (clickdummy)
This commit is contained in:
parent
66c22a915f
commit
b80e3fe4f0
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
13 changed files with 4775 additions and 0 deletions
24
app/.gitignore
vendored
Normal file
24
app/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# jetbrains setting folder
|
||||||
|
.idea/
|
||||||
17
app/astro.config.mjs
Normal file
17
app/astro.config.mjs
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
// @ts-check
|
||||||
|
import {defineConfig} from 'astro/config';
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
|
||||||
|
import vue from "@astrojs/vue";
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
vite: {
|
||||||
|
plugins: [tailwindcss()],
|
||||||
|
},
|
||||||
|
i18n: {
|
||||||
|
locales: ["en", "de"],
|
||||||
|
defaultLocale: "en",
|
||||||
|
},
|
||||||
|
integrations: [vue()],
|
||||||
|
});
|
||||||
27
app/package.json
Normal file
27
app/package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "dooris-app",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=22.12.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/vue": "^6.0.1",
|
||||||
|
"@lucide/astro": "^1.14.0",
|
||||||
|
"@lucide/vue": "^1.14.0",
|
||||||
|
"@tailwindcss/vite": "^4.2.4",
|
||||||
|
"astro": "^6.2.1",
|
||||||
|
"lucide-solid": "^1.14.0",
|
||||||
|
"tailwindcss": "^4.2.4",
|
||||||
|
"vue": "^3.5.33"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"daisyui": "^5.5.19"
|
||||||
|
}
|
||||||
|
}
|
||||||
4298
app/pnpm-lock.yaml
generated
Normal file
4298
app/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
45
app/src/components/Alert.astro
Normal file
45
app/src/components/Alert.astro
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
---
|
||||||
|
import {Check, CircleAlert, Info, TriangleAlert} from "@lucide/astro"
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
id: string;
|
||||||
|
classList: string;
|
||||||
|
color: "info" | "success" | "warning" | "error";
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {id, classList = "", color = "info", title, description} = Astro.props
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class:list={[
|
||||||
|
classList,
|
||||||
|
"alert alert-soft w-full",
|
||||||
|
color == "info" && "alert-info",
|
||||||
|
color == "success" && "alert-success",
|
||||||
|
color == "warning" && "alert-warning",
|
||||||
|
color == "error" && "alert-error",
|
||||||
|
]}
|
||||||
|
id={id}
|
||||||
|
role="alert">
|
||||||
|
<slot name="icon">
|
||||||
|
{color === "info" && (
|
||||||
|
<Info class="size-7"/>
|
||||||
|
)}
|
||||||
|
{color === "success" && (
|
||||||
|
<Check class="size-7"/>
|
||||||
|
)}
|
||||||
|
{color === "warning" && (
|
||||||
|
<CircleAlert class="size-7"/>
|
||||||
|
)}
|
||||||
|
{color === "error" && (
|
||||||
|
<TriangleAlert class="size-7"/>
|
||||||
|
)}
|
||||||
|
</slot>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<span>{title}</span>
|
||||||
|
<span class="text-sm opacity-90 mt-1" set:html={description}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
61
app/src/components/DoorTemplate.astro
Normal file
61
app/src/components/DoorTemplate.astro
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
---
|
||||||
|
import {CircleQuestionMark, Lock, LockOpen, TriangleAlert} from "@lucide/astro"
|
||||||
|
import {getLangFromUrl, useTranslations} from "../i18n/utils"
|
||||||
|
|
||||||
|
const lang = getLangFromUrl(Astro.url)
|
||||||
|
const t = useTranslations(lang)
|
||||||
|
---
|
||||||
|
|
||||||
|
<template id="template-door">
|
||||||
|
<div
|
||||||
|
class:list={[
|
||||||
|
"card flex flex-col w-full group ring",
|
||||||
|
"data-[state=open]:ring-success data-[state=open]:bg-success/5",
|
||||||
|
"data-[state=closed]:ring-error data-[state=closed]:bg-error/5",
|
||||||
|
"data-[state=unknown]:ring-warning data-[state=unknown]:bg-warning/5",
|
||||||
|
"data-[state=moving]:ring-info data-[state=moving]:bg-info/5",
|
||||||
|
]}
|
||||||
|
data-state
|
||||||
|
data-battery
|
||||||
|
data-active
|
||||||
|
data-id
|
||||||
|
>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="flex max-md:flex-wrap items-center gap-2">
|
||||||
|
<div class="w-full flex justify-between">
|
||||||
|
<h2 class="text-xl font-bold" data-label></h2>
|
||||||
|
<span class="badge badge-error hidden ms-auto group-data-battery:flex whitespace-nowrap">
|
||||||
|
<TriangleAlert class="size-4"/>
|
||||||
|
{t("batteryLow")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden group-data-active:grid grid-cols-2 w-full items-center gap-2 mt-4">
|
||||||
|
<button class="btn btn-outline btn-error">
|
||||||
|
{t("button.close")}
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline btn-success">
|
||||||
|
{t("button.open")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="w-full rounded-t-none badge badge-lg badge-success hidden group-data-[state=open]:flex">
|
||||||
|
<LockOpen class="size-4"/>
|
||||||
|
{t("state.open")}
|
||||||
|
</span>
|
||||||
|
<span class="w-full rounded-t-none badge badge-lg badge-error hidden group-data-[state=closed]:flex">
|
||||||
|
<Lock class="size-4"/>
|
||||||
|
{t("state.closed")}
|
||||||
|
</span>
|
||||||
|
<span class="w-full rounded-t-none badge badge-lg badge-warning hidden group-data-[state=unknown]:flex">
|
||||||
|
<CircleQuestionMark class="size-4"/>
|
||||||
|
{t("state.unknown")}
|
||||||
|
</span>
|
||||||
|
<span class="w-full rounded-t-none badge badge-lg badge-info hidden group-data-[state=moving]:flex">
|
||||||
|
<span class="loading loading-spinner loading-xs"></span>
|
||||||
|
{t("state.moving")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
41
app/src/i18n/ui.ts
Normal file
41
app/src/i18n/ui.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
export const languages = {
|
||||||
|
en: "English",
|
||||||
|
de: "Deutsch",
|
||||||
|
}
|
||||||
|
|
||||||
|
export const defaultLang = "en"
|
||||||
|
|
||||||
|
export const ui = {
|
||||||
|
en: {
|
||||||
|
"unauthorized.title": "Unauthorized",
|
||||||
|
"unauthorized.description": `To use the locks you have to have the "intern@" status.<br>
|
||||||
|
More infos: <a class='underline' href='https://wiki.hamburg.ccc.de/club:prozesse:aufnahmeprozesse-fuer-berechtigungsgruppen'>CCCHH Wiki</a>`,
|
||||||
|
"unauthenticated.title": "Unauthenticated",
|
||||||
|
"unauthenticated.description": `To use the locks you have to log in with your CCCHH ID and have the "intern@" status.<br>
|
||||||
|
More infos: <a class='underline' href='https://wiki.hamburg.ccc.de/club:prozesse:aufnahmeprozesse-fuer-berechtigungsgruppen'>CCCHH Wiki</a>`,
|
||||||
|
"state.open": "Open",
|
||||||
|
"state.closed": "Closed",
|
||||||
|
"state.unknown": "Unknown",
|
||||||
|
"state.moving": "Moving",
|
||||||
|
"batteryLow": "Battery low",
|
||||||
|
"button.open": "Open",
|
||||||
|
"button.close": "Close",
|
||||||
|
"login": "Login",
|
||||||
|
},
|
||||||
|
de: {
|
||||||
|
"unauthorized.title": "Nicht berechtigt",
|
||||||
|
"unauthorized.description": `Um die Schlösser bedienen zu können, musst du den "intern@" Status haben.<br>
|
||||||
|
Weitere Infos: <a class='underline' href='https://wiki.hamburg.ccc.de/club:prozesse:aufnahmeprozesse-fuer-berechtigungsgruppen'>CCCHH Wiki</a>`,
|
||||||
|
"unauthenticated.title": "Nicht angemeldet",
|
||||||
|
"unauthenticated.description": `Um die Schlösser bedienen zu können, musst du dich mit deiner CCCHH ID anmelden und den "intern@" Status haben.<br>
|
||||||
|
Weitere Infos: <a class='underline' href='https://wiki.hamburg.ccc.de/club:prozesse:aufnahmeprozesse-fuer-berechtigungsgruppen'>CCCHH Wiki</a>`,
|
||||||
|
"state.open": "Offen",
|
||||||
|
"state.closed": "Geschlossen",
|
||||||
|
"state.unknown": "Unbekannt",
|
||||||
|
"state.moving": "In Bewegung",
|
||||||
|
"batteryLow": "Batterie fast leer",
|
||||||
|
"button.open": "Öffnen",
|
||||||
|
"button.close": "Schließen",
|
||||||
|
"login": "Anmelden",
|
||||||
|
},
|
||||||
|
} as const
|
||||||
13
app/src/i18n/utils.ts
Normal file
13
app/src/i18n/utils.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { ui, defaultLang } from './ui';
|
||||||
|
|
||||||
|
export function getLangFromUrl(url: URL) {
|
||||||
|
const [, lang] = url.pathname.split('/');
|
||||||
|
if (lang in ui) return lang as keyof typeof ui;
|
||||||
|
return defaultLang;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTranslations(lang: keyof typeof ui) {
|
||||||
|
return function t(key: keyof typeof ui[typeof defaultLang]) {
|
||||||
|
return ui[lang][key] || ui[defaultLang][key];
|
||||||
|
}
|
||||||
|
}
|
||||||
42
app/src/layouts/Layout.astro
Normal file
42
app/src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
---
|
||||||
|
import {UserRound, LogIn, DoorOpen} from "@lucide/astro"
|
||||||
|
import {getLangFromUrl, useTranslations} from "../i18n/utils"
|
||||||
|
|
||||||
|
const lang = getLangFromUrl(Astro.url)
|
||||||
|
const t = useTranslations(lang)
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
|
||||||
|
<link rel="icon" href="/favicon.ico"/>
|
||||||
|
<meta name="generator" content={Astro.generator}/>
|
||||||
|
<title>dooris</title>
|
||||||
|
</head>
|
||||||
|
<body class="min-h-screen">
|
||||||
|
<header class="p-2">
|
||||||
|
<div class="navbar bg-base-300 text-neutral-content flex w-full justify-between items-center rounded-xl px-4">
|
||||||
|
|
||||||
|
<span class="text-xl font-semibold flex gap-1 items-center">
|
||||||
|
<DoorOpen/>
|
||||||
|
DOORIS
|
||||||
|
</span>
|
||||||
|
<div class="badge badge-soft badge-xl hidden" id="badge-username">
|
||||||
|
<UserRound class="size-5"/>
|
||||||
|
<span id="username"></span>
|
||||||
|
</div>
|
||||||
|
<a href={`/auth/login?next=/${lang}`} class="btn btn-soft btn-info" id="button-login">
|
||||||
|
<LogIn/>
|
||||||
|
{t("login")}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<main class="p-2">
|
||||||
|
<slot/>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
163
app/src/pages/[lang]/index.astro
Normal file
163
app/src/pages/[lang]/index.astro
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
---
|
||||||
|
import Layout from "../../layouts/Layout.astro"
|
||||||
|
import "../../styles/global.css"
|
||||||
|
import Alert from "../../components/Alert.astro"
|
||||||
|
import DoorTemplate from "../../components/DoorTemplate.astro"
|
||||||
|
import {LogIn, Lock} from "@lucide/astro"
|
||||||
|
import {getLangFromUrl, useTranslations} from "../../i18n/utils"
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
return [
|
||||||
|
{params: {lang: "en"}},
|
||||||
|
{params: {lang: "de"}},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const lang = getLangFromUrl(Astro.url)
|
||||||
|
const t = useTranslations(lang)
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout username="">
|
||||||
|
<div class="grid place-items-center grid-cols-1 gap-4 max-w-xl mx-auto" id="list">
|
||||||
|
<Alert
|
||||||
|
classList="hidden"
|
||||||
|
id="alert-unauthenticated"
|
||||||
|
color="info"
|
||||||
|
title={t("unauthenticated.title")}
|
||||||
|
description={t("unauthenticated.description")}
|
||||||
|
>
|
||||||
|
<Fragment slot="icon"> <!-- pass table header -->
|
||||||
|
<LogIn class="size-7"/>
|
||||||
|
</Fragment>
|
||||||
|
</Alert>
|
||||||
|
<Alert
|
||||||
|
classList="hidden"
|
||||||
|
id="alert-unauthorized"
|
||||||
|
color="info"
|
||||||
|
title={t("unauthorized.title")}
|
||||||
|
description={t("unauthorized.description")}
|
||||||
|
>
|
||||||
|
<Fragment slot="icon"> <!-- pass table header -->
|
||||||
|
<Lock class="size-7"/>
|
||||||
|
</Fragment>
|
||||||
|
</Alert>
|
||||||
|
<div class="divider w-full my-0" id="alert-divider"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DoorTemplate state="unknown"/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import user from "@lucide/astro/icons/user"
|
||||||
|
|
||||||
|
const list: HTMLDivElement = document.querySelector("#list")!
|
||||||
|
const template: HTMLTemplateElement = document.querySelector("#template-door")!
|
||||||
|
|
||||||
|
type DoorType = {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
state: "open" | "closed" | "unknown" | "moving";
|
||||||
|
batteryLow: boolean;
|
||||||
|
}
|
||||||
|
type AuthType = {
|
||||||
|
username: string;
|
||||||
|
authorized: boolean;
|
||||||
|
authenticated: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const auth: AuthType = {
|
||||||
|
username: "user",
|
||||||
|
authorized: true,
|
||||||
|
authenticated: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
const doors: Array<DoorType> = [
|
||||||
|
{
|
||||||
|
id: "abcdef",
|
||||||
|
label: "Hauptraum",
|
||||||
|
state: "open",
|
||||||
|
batteryLow: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "12345",
|
||||||
|
label: "Werkstatt",
|
||||||
|
state: "closed",
|
||||||
|
batteryLow: true,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
function setDoorInfo(doorElement: HTMLDivElement, door: DoorType) {
|
||||||
|
const labelElement: HTMLDivElement = doorElement.querySelector("[data-label]")!
|
||||||
|
const buttonElements: Array<HTMLButtonElement> = Array.from(doorElement.querySelectorAll("button"))
|
||||||
|
|
||||||
|
doorElement.dataset.id = door.id
|
||||||
|
doorElement.dataset.state = door.state
|
||||||
|
|
||||||
|
if (auth.authenticated && auth.authorized) {
|
||||||
|
doorElement.dataset.active = ""
|
||||||
|
} else {
|
||||||
|
delete doorElement.dataset.active
|
||||||
|
}
|
||||||
|
|
||||||
|
if (door.batteryLow) {
|
||||||
|
doorElement.dataset.battery = ""
|
||||||
|
} else {
|
||||||
|
delete doorElement.dataset.battery
|
||||||
|
}
|
||||||
|
|
||||||
|
labelElement.innerHTML = door.label
|
||||||
|
|
||||||
|
buttonElements.forEach(button => {
|
||||||
|
console.log(button)
|
||||||
|
button.disabled = door.state === "moving"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function refresh() {
|
||||||
|
for (const door of doors) {
|
||||||
|
let doorElement: HTMLDivElement | null = list.querySelector(`[data-id='${door.id}']`)
|
||||||
|
if (doorElement) {
|
||||||
|
setDoorInfo(doorElement, door)
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
const targetElement = document.importNode(template.content, true)
|
||||||
|
doorElement = targetElement.querySelector("[data-state]")!
|
||||||
|
setDoorInfo(doorElement, door)
|
||||||
|
list.appendChild(targetElement)
|
||||||
|
}
|
||||||
|
|
||||||
|
const alertUnauthenticated: HTMLDivElement = document.querySelector("#alert-unauthenticated")!
|
||||||
|
const alertUnauthorized: HTMLDivElement = document.querySelector("#alert-unauthorized")!
|
||||||
|
const alertDivider: HTMLDivElement = document.querySelector("#alert-divider")!
|
||||||
|
const badgeUsername: HTMLDivElement = document.querySelector("#badge-username")!
|
||||||
|
const buttonLogin: HTMLDivElement = document.querySelector("#button-login")!
|
||||||
|
const usernameElement: HTMLSpanElement = badgeUsername.querySelector('#username')!
|
||||||
|
|
||||||
|
alertUnauthenticated.classList.toggle("hidden", auth.authenticated)
|
||||||
|
alertUnauthorized.classList.toggle("hidden", !auth.authenticated || auth.authorized)
|
||||||
|
alertDivider.classList.toggle("hidden", auth.authenticated && auth.authorized)
|
||||||
|
badgeUsername.classList.toggle("hidden", !auth.authenticated)
|
||||||
|
usernameElement.innerHTML = auth.username
|
||||||
|
buttonLogin.classList.toggle("hidden", auth.authenticated)
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh()
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
doors[0] = {
|
||||||
|
id: "abcdef",
|
||||||
|
label: "Hauptraum",
|
||||||
|
state: "unknown",
|
||||||
|
batteryLow: false,
|
||||||
|
}
|
||||||
|
doors[1] = {
|
||||||
|
id: "12345",
|
||||||
|
label: "Werkstatt",
|
||||||
|
state: "moving",
|
||||||
|
batteryLow: true,
|
||||||
|
}
|
||||||
|
refresh()
|
||||||
|
}, 2000)
|
||||||
|
</script>
|
||||||
|
</Layout>
|
||||||
26
app/src/pages/index.astro
Normal file
26
app/src/pages/index.astro
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
|
||||||
|
<link rel="icon" href="/favicon.ico"/>
|
||||||
|
<meta name="generator" content={Astro.generator}/>
|
||||||
|
<title>dooris</title>
|
||||||
|
<script>
|
||||||
|
const userLang = new Intl.Locale(navigator.language).language;
|
||||||
|
const urls: Record<string, string> = {
|
||||||
|
'en': './en',
|
||||||
|
'de': './de',
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = urls[userLang] ?? urls.en;
|
||||||
|
document.location.href = url;
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
5
app/src/styles/global.css
Normal file
5
app/src/styles/global.css
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "daisyui" {
|
||||||
|
themes: light --default, dark --prefersdark;
|
||||||
|
}
|
||||||
|
|
||||||
13
app/tsconfig.json
Normal file
13
app/tsconfig.json
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"include": [
|
||||||
|
".astro/types.d.ts",
|
||||||
|
"**/*"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"jsx": "preserve"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue