CCCHH/dooris
1
1
Fork 0
Code Issues 1 Pull requests 1 Releases Packages 1 Activity Actions

fetch door data from api; improved error handling

Browse source
This commit is contained in:
kritzl 2026-05-11 14:48:18 +02:00
commit 5fed0859af
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
3 changed files with 243 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/src/i18n/ui.ts
View file

@ -24,6 +24,11 @@ export const ui = {
"button.open": "Open",
"button.close": "Close",
"login": "Login",
"loggedOut.title": "Signed out",
"loggedOut.description": `Your Session is expired and you were logged out.
Log in again: <a class='underline' href='/auth/login'>Login</a>`,
"serverError.title": "Server Error",
"serverError.description": `Please try again later.`,
},
de: {
"unauthorized.title": "Nicht berechtigt",
@ -43,5 +48,10 @@ export const ui = {
"button.open": "Öffnen",
"button.close": "Schließen",
"login": "Anmelden",
"loggedOut.title": "Abgemeldet",
"loggedOut.description": `Deine Sitzung ist abgelaufen und du wurdest abgemeldet.
Melde dich hier erneut an: <a class='underline' href='/auth/login'>Anmelden</a>`,
"serverError.title": "Serverfehler",
"serverError.description": `Bitte versuche es später erneut.`,
},
} as const

1
app/src/layouts/Layout.astro
View file

@ -15,6 +15,7 @@ const t = useTranslations(lang)
<link rel="icon" href="/favicon.ico"/>
<meta name="generator" content={Astro.generator}/>
<title>dooris</title>
<slot name="head"/>
</head>
<body class="min-h-screen">
<header class="p-2">

204
app/src/pages/[lang]/index.astro
View file

@ -18,35 +18,8 @@ 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"/>
<Layout>
<Fragment slot="head">
<script>
import {Fetcher} from "openapi-typescript-fetch"
import {type paths} from "../../api/schema"
@ -64,37 +37,39 @@ const t = useTranslations(lang)
unreachable: boolean;
jammed: boolean;
}
type AuthType = {
username: string;
authorized: boolean;
authenticated: boolean;
until: Date | null;
recentLogout: boolean;
}
const auth: AuthType = {
username: "user",
authorized: true,
authenticated: false,
until: null,
recentLogout: false,
}
const doors: Array<DoorType> = [
{
id: "abcdef",
label: "Hauptraum",
state: "unlocked",
batteryLow: false,
unreachable: false,
jammed: false,
},
{
id: "12345",
label: "Werkstatt",
state: "locked",
batteryLow: true,
unreachable: false,
jammed: false,
},
]
const apiError: {
current: "serverError" | null;
} = {
current: null,
}
const doors: Array<DoorType> = []
function loadAuthFromLocalStorage() {
const localAuth = JSON.parse(localStorage.getItem("auth") ?? "")
auth.recentLogout = localAuth.recentLogout // set recentLogout true, if user was logged in before
auth.authenticated = localAuth.authenticated
auth.authorized = localAuth.authorized
auth.until = localAuth.until ? new Date(localAuth.until) : null
auth.username = localAuth.username
}
async function checkUser() {
const getUserInfo = fetcher.path("/api/user-info/").method("get").create()
@ -102,22 +77,78 @@ const t = useTranslations(lang)
try {
const {status, data: userInfo} = await getUserInfo({})
apiError.current = null
auth.authenticated = userInfo.is_logged_in
auth.authorized = true
auth.until = userInfo.guaranteed_session_until ? new Date(userInfo.guaranteed_session_until) : null
auth.username = userInfo.user_info?.username ?? ''
auth.username = userInfo.user_info?.username ?? ""
auth.recentLogout = false
} catch (e) {
// check which operation threw the exception
if (e instanceof getUserInfo.Error) {
const error = e.getActualType()
if (error.status === 401) {
auth.recentLogout = auth.authenticated // set recentLogout true, if user was logged in before
auth.authenticated = false
auth.authorized = false
auth.until = null
auth.username = ''
auth.username = ""
} else if (error.status >= 500 && error.status < 600) {
apiError.current = "serverError"
} else {
console.log('unknown error')
console.error("unknown error:", error)
}
}
} finally {
localStorage.setItem("auth", JSON.stringify(auth))
refresh()
}
}
async function fetchDoors() {
const getDoors = fetcher.path("/api/locks/").method("get").create()
try {
const {status, data: doorInfo} = await getDoors({})
apiError.current = null
while (doors.length) {
doors.pop()
}
doorInfo.forEach(door => {
let state: DoorType["state"] = "unknown"
switch (door.status.activity_state) {
case "locking":
case "unlocking":
case "unknown":
state = door.status.activity_state
break
case "stable":
state = door.status.lock_state
}
doors.push({
id: door.name, // TODO: replace by actual ID
label: door.name,
state: state,
batteryLow: door.status.is_low_battery,
unreachable: door.status.is_unreachable,
jammed: door.status.is_error_jammed,
})
})
} catch (e) {
// check which operation threw the exception
if (e instanceof getDoors.Error) {
const error = e.getActualType()
if (error.status === 401) {
console.log("unauthorized")
} else if (error.status >= 500 && error.status < 600) {
apiError.current = "serverError"
} else {
console.error("unknown error:", error)
}
}
} finally {
@ -159,7 +190,7 @@ const t = useTranslations(lang)
labelElement.innerHTML = door.label
buttonElements.forEach(button => {
button.disabled = ["unlocking", "locking"].includes(door.state)
button.disabled = ["unlocking", "locking"].includes(door.state) || apiError.current !== null
})
}
@ -179,6 +210,8 @@ const t = useTranslations(lang)
const alertUnauthenticated: HTMLDivElement = document.querySelector("#alert-unauthenticated")!
const alertUnauthorized: HTMLDivElement = document.querySelector("#alert-unauthorized")!
const alertLoggedout: HTMLDivElement = document.querySelector("#alert-loggedout")!
const alertServerError: HTMLDivElement = document.querySelector("#alert-serverError")!
const alertDivider: HTMLDivElement = document.querySelector("#alert-divider")!
const badgeUsername: HTMLDivElement = document.querySelector("#badge-username")!
const buttonLogin: HTMLDivElement = document.querySelector("#button-login")!
@ -186,33 +219,62 @@ const t = useTranslations(lang)
alertUnauthenticated.classList.toggle("hidden", auth.authenticated)
alertUnauthorized.classList.toggle("hidden", !auth.authenticated || auth.authorized)
alertDivider.classList.toggle("hidden", auth.authenticated && auth.authorized)
alertLoggedout.classList.toggle("hidden", !auth.recentLogout)
alertServerError.classList.toggle("hidden", apiError.current !== "serverError")
alertDivider.classList.toggle("hidden", auth.authenticated && auth.authorized && !auth.recentLogout && apiError.current === null)
badgeUsername.classList.toggle("hidden", !auth.authenticated)
usernameElement.innerHTML = auth.username
buttonLogin.classList.toggle("hidden", auth.authenticated)
}
refresh()
loadAuthFromLocalStorage()
fetchDoors()
checkUser()
setTimeout(() => {
doors[0] = {
id: "abcdef",
label: "Hauptraum",
state: "unknown",
batteryLow: true,
unreachable: false,
jammed: true,
}
doors[1] = {
id: "12345",
label: "Werkstatt",
state: "unlocking",
batteryLow: false,
unreachable: true,
jammed: false,
}
document.addEventListener("loadeddata", () => {
refresh()
}, 2000)
})
</script>
</Fragment>
<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>
<Alert
classList="hidden"
id="alert-loggedout"
color="warning"
title={t("loggedOut.title")}
description={t("loggedOut.description")}
/>
<Alert
classList="hidden"
id="alert-serverError"
color="error"
title={t("serverError.title")}
description={t("serverError.description")}
/>
<div class="divider w-full my-0" id="alert-divider"></div>
</div>
<DoorTemplate state="unknown"/>
</Layout>