debug/+page.svelte: use translations, add copy button, iterate through array for template

This commit is contained in:
Alec Armbruster 2024-09-27 12:36:35 -07:00
parent 6e80703aa7
commit 39c269d70c
No known key found for this signature in database
GPG Key ID: 52BC7C84E960FD1B
2 changed files with 47 additions and 19 deletions

View File

@ -105,6 +105,10 @@
"advanced.debug": "debug", "advanced.debug": "debug",
"advanced.debug.title": "enable debug features", "advanced.debug.title": "enable debug features",
"advanced.debug.description": "gives you access to a page with various info that can be useful for debugging.", "advanced.debug.description": "gives you access to a page with various info that can be useful for debugging.",
"advanced.debug.device": "device",
"advanced.debug.app": "app",
"advanced.debug.settings": "settings",
"advanced.debug.version": "version",
"advanced.data": "settings data", "advanced.data": "settings data",

View File

@ -2,11 +2,35 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import ActionButton from "$components/buttons/ActionButton.svelte";
import CopyIcon from "$components/misc/CopyIcon.svelte";
import { t } from "$lib/i18n/translations";
import { copyURL } from "$lib/download";
import { version } from "$lib/version"; import { version } from "$lib/version";
import { device, app } from "$lib/device"; import { device, app } from "$lib/device";
import { defaultNavPage } from "$lib/subnav"; import { defaultNavPage } from "$lib/subnav";
import settings, { storedSettings } from "$lib/state/settings"; import settings, { storedSettings } from "$lib/state/settings";
$: sections = [
{ title: $t("settings.advanced.debug.device"), data: device },
{ title: $t("settings.advanced.debug.app"), data: app },
{
title: $t("settings.advanced.debug.settings"),
data: $storedSettings,
},
{ title: $t("settings.advanced.debug.version"), data: $version },
];
let lastCopiedSection = -1;
let lastCopiedSectionResetTimeout: ReturnType<typeof setTimeout>;
$: if (lastCopiedSection) {
lastCopiedSectionResetTimeout = setTimeout(() => {
lastCopiedSection = -1;
}, 1500);
}
onMount(() => { onMount(() => {
if (!$settings.advanced.debug) { if (!$settings.advanced.debug) {
goto(defaultNavPage("settings"), { replaceState: true }); goto(defaultNavPage("settings"), { replaceState: true });
@ -16,25 +40,25 @@
{#if $settings.advanced.debug} {#if $settings.advanced.debug}
<div id="advanced-page"> <div id="advanced-page">
<h3>device:</h3> {#each sections as { title, data }, i}
<div class="message-container subtext"> <h3>{title}:</h3>
{JSON.stringify(device, null, 2)} <div class="message-container subtext">
</div> {JSON.stringify(data, null, 2)}
</div>
<h3>app:</h3> <ActionButton
<div class="message-container subtext"> id="copy-button"
{JSON.stringify(app, null, 2)} click={() => {
</div> clearTimeout(lastCopiedSectionResetTimeout);
lastCopiedSection = i;
<h3>settings:</h3> copyURL(JSON.stringify(data, null, 2));
<div class="message-container subtext"> }}
{JSON.stringify($storedSettings, null, 2)} >
</div> <CopyIcon />
{lastCopiedSection === i
<h3>version:</h3> ? $t("button.copied")
<div class="message-container subtext"> : $t("button.copy")}
{JSON.stringify($version, null, 2)} </ActionButton>
</div> {/each}
</div> </div>
{/if} {/if}