mirror of
https://code.lenaisten.de/Lenaisten/advent22.git
synced 2026-02-25 02:20:17 +00:00
Jörn-Michael Miehe
022c9138bf
- built a new bare vue 3.5 project with vite - partly merged in old configs
301 lines
8.6 KiB
Vue
301 lines
8.6 KiB
Vue
<template>
|
|
<BulmaDrawer header="Konfiguration" :opening="on_open" refreshable>
|
|
<div class="card-content">
|
|
<div class="columns">
|
|
<div class="column is-one-third">
|
|
<div class="content">
|
|
<h3>Lösung</h3>
|
|
<dl>
|
|
<dt>Wert</dt>
|
|
<dd>
|
|
Eingabe:
|
|
<span class="is-family-monospace">
|
|
"{{ admin_config_model.solution.value }}"
|
|
</span>
|
|
</dd>
|
|
<dd>
|
|
Ausgabe:
|
|
<span class="is-family-monospace">
|
|
"{{ admin_config_model.solution.clean }}"
|
|
</span>
|
|
</dd>
|
|
|
|
<dt>Transformation</dt>
|
|
<dd>
|
|
Whitespace:
|
|
<span class="is-uppercase is-family-monospace">
|
|
{{ admin_config_model.solution.whitespace }}
|
|
</span>
|
|
</dd>
|
|
<dd>
|
|
Sonderzeichen:
|
|
<span class="is-uppercase is-family-monospace">
|
|
{{ admin_config_model.solution.special_chars }}
|
|
</span>
|
|
</dd>
|
|
<dd>
|
|
Buchstaben:
|
|
<span class="is-uppercase is-family-monospace">
|
|
{{ admin_config_model.solution.case }}
|
|
</span>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h3>Rätsel</h3>
|
|
<dl>
|
|
<dt>Offene Türchen</dt>
|
|
<dd>{{ store.user_doors.length }}</dd>
|
|
|
|
<dt>Zeit zum nächsten Türchen</dt>
|
|
<dd v-if="store.next_door_target === null">
|
|
Kein nächstes Türchen
|
|
</dd>
|
|
<dd v-else><CountDown :until="store.next_door_target" /></dd>
|
|
|
|
<dt>Erstes Türchen</dt>
|
|
<dd>{{ fmt_puzzle_date("first") }}</dd>
|
|
|
|
<dt>Nächstes Türchen</dt>
|
|
<dd>{{ fmt_puzzle_date("next") }}</dd>
|
|
|
|
<dt>Letztes Türchen</dt>
|
|
<dd>{{ fmt_puzzle_date("last") }}</dd>
|
|
|
|
<dt>Rätsel schließt nach</dt>
|
|
<dd>{{ fmt_puzzle_date("end") }}</dd>
|
|
|
|
<dt>Zufalls-Seed</dt>
|
|
<dd class="is-family-monospace">
|
|
"{{ admin_config_model.puzzle.seed }}"
|
|
</dd>
|
|
|
|
<dt>Extra-Tage</dt>
|
|
<dd>
|
|
<template
|
|
v-for="(day, index) in admin_config_model.puzzle.extra_days"
|
|
:key="`extra_day-${index}`"
|
|
>
|
|
<span>
|
|
<template v-if="index > 0">, </template>
|
|
{{ day }}
|
|
</span>
|
|
</template>
|
|
</dd>
|
|
|
|
<dt>Leere Türchen</dt>
|
|
<dd v-if="admin_config_model.puzzle.skip_empty">Überspringen</dd>
|
|
<dd v-else>Anzeigen</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div class="column is-one-third">
|
|
<div class="content">
|
|
<h3>Kalender</h3>
|
|
<dl>
|
|
<dt>Definition</dt>
|
|
<dd>{{ admin_config_model.calendar.config_file }}</dd>
|
|
|
|
<dt>Hintergrundbild</dt>
|
|
<dd>{{ admin_config_model.calendar.background }}</dd>
|
|
|
|
<dt>Favicon</dt>
|
|
<dd>{{ admin_config_model.calendar.favicon }}</dd>
|
|
|
|
<dt>Türchen ({{ doors.length }} Stück)</dt>
|
|
<dd>
|
|
<template v-for="(door, index) in doors" :key="`door-${index}`">
|
|
<span>
|
|
<template v-if="index > 0">, </template>
|
|
{{ door.day }}
|
|
</span>
|
|
</template>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h3>Bilder</h3>
|
|
<dl>
|
|
<dt>Größe</dt>
|
|
<dd>{{ admin_config_model.image.size }} px</dd>
|
|
|
|
<dt>Rand</dt>
|
|
<dd>{{ admin_config_model.image.border }} px</dd>
|
|
|
|
<dt>Schriftarten</dt>
|
|
<dd
|
|
v-for="(font, index) in admin_config_model.fonts"
|
|
:key="`font-${index}`"
|
|
>
|
|
{{ font.file }} ({{ font.size }} pt)
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div class="column is-one-third">
|
|
<div class="content">
|
|
<h3>WebDAV</h3>
|
|
<dl>
|
|
<dt>URL</dt>
|
|
<dd>{{ admin_config_model.webdav.url }}</dd>
|
|
|
|
<dt>Zugangsdaten</dt>
|
|
<dd class="is-family-monospace">
|
|
<BulmaSecret
|
|
@show="load_credentials(creds.dav, 'admin/credentials/dav')"
|
|
@hide="clear_credentials(creds.dav)"
|
|
>
|
|
<span class="tag is-danger">user</span>
|
|
{{ creds.dav.username }}
|
|
<br />
|
|
<span class="tag is-danger">pass</span>
|
|
{{ creds.dav.password }}
|
|
</BulmaSecret>
|
|
</dd>
|
|
|
|
<dt>Cache-Dauer</dt>
|
|
<dd>{{ admin_config_model.webdav.cache_ttl }} s</dd>
|
|
|
|
<dt>Konfigurationsdatei</dt>
|
|
<dd>{{ admin_config_model.webdav.config_file }}</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<h3>Sonstige</h3>
|
|
<dl>
|
|
<dt>Redis</dt>
|
|
<dd>Host: {{ admin_config_model.redis.host }}</dd>
|
|
<dd>Port: {{ admin_config_model.redis.port }}</dd>
|
|
<dd>Datenbank: {{ admin_config_model.redis.db }}</dd>
|
|
<dd>Protokoll: {{ admin_config_model.redis.protocol }}</dd>
|
|
|
|
<dt>UI-Admin</dt>
|
|
<dd class="is-family-monospace">
|
|
<BulmaSecret
|
|
@show="load_credentials(creds.ui, 'admin/credentials/ui')"
|
|
@hide="clear_credentials(creds.ui)"
|
|
>
|
|
<span class="tag is-danger">user</span>
|
|
{{ creds.ui.username }}
|
|
<br />
|
|
<span class="tag is-danger">pass</span>
|
|
{{ creds.ui.password }}
|
|
</BulmaSecret>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BulmaDrawer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { API } from "@/lib/api";
|
|
import type { AdminConfigModel, Credentials, DoorSaved } from "@/lib/model";
|
|
import { advent22Store } from "@/lib/store";
|
|
import { DateTime } from "luxon";
|
|
import { ref } from "vue";
|
|
|
|
import BulmaDrawer from "../bulma/Drawer.vue";
|
|
import BulmaSecret from "../bulma/Secret.vue";
|
|
import CountDown from "../CountDown.vue";
|
|
|
|
const store = advent22Store();
|
|
|
|
const admin_config_model = ref<AdminConfigModel>({
|
|
solution: {
|
|
value: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
|
|
whitespace: "KEEP",
|
|
special_chars: "KEEP",
|
|
case: "KEEP",
|
|
clean: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
|
|
},
|
|
puzzle: {
|
|
first: "2023-12-01",
|
|
next: "2023-12-01",
|
|
last: "2023-12-24",
|
|
end: "2024-04-01",
|
|
seed: "",
|
|
extra_days: [],
|
|
skip_empty: true,
|
|
},
|
|
calendar: {
|
|
config_file: "lorem ipsum",
|
|
background: "dolor sit",
|
|
favicon: "sit amet",
|
|
},
|
|
image: {
|
|
size: 500,
|
|
border: 0,
|
|
},
|
|
fonts: [{ file: "consetetur", size: 0 }],
|
|
redis: {
|
|
host: "0.0.0.0",
|
|
port: 6379,
|
|
db: 0,
|
|
protocol: 3,
|
|
},
|
|
webdav: {
|
|
url: "sadipscing elitr",
|
|
cache_ttl: 0,
|
|
config_file: "sed diam nonumy",
|
|
},
|
|
});
|
|
|
|
const doors = ref<DoorSaved[]>([]);
|
|
const creds = ref<Record<string, Credentials>>({
|
|
dav: {
|
|
username: "",
|
|
password: "",
|
|
},
|
|
ui: {
|
|
username: "",
|
|
password: "",
|
|
},
|
|
});
|
|
|
|
function fmt_puzzle_date(name: keyof AdminConfigModel["puzzle"]): string {
|
|
const iso_date = admin_config_model.value.puzzle[name];
|
|
if (!(typeof iso_date === "string")) return "-";
|
|
|
|
return DateTime.fromISO(iso_date).toLocaleString(DateTime.DATE_SHORT);
|
|
}
|
|
|
|
async function on_open(): Promise<void> {
|
|
const [store_update, new_admin_config_model, new_doors] = await Promise.all([
|
|
store.update(),
|
|
API.request<AdminConfigModel>("admin/config_model"),
|
|
API.request<DoorSaved[]>("admin/doors"),
|
|
]);
|
|
|
|
void store_update; // discard value
|
|
admin_config_model.value = new_admin_config_model;
|
|
doors.value = new_doors;
|
|
|
|
clear_credentials(creds.value.dav);
|
|
clear_credentials(creds.value.ui);
|
|
}
|
|
|
|
async function load_credentials(
|
|
creds: Credentials,
|
|
endpoint: string,
|
|
): Promise<void> {
|
|
try {
|
|
const new_creds = await API.request<Credentials>(endpoint);
|
|
|
|
creds.username = new_creds.username;
|
|
creds.password = new_creds.password;
|
|
} catch {}
|
|
}
|
|
|
|
function clear_credentials(creds: Credentials): void {
|
|
creds.username = "";
|
|
creds.password = "";
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
dd {
|
|
overflow-x: auto;
|
|
}
|
|
</style>
|