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}
<h3>{title}:</h3>
<div class="message-container subtext"> <div class="message-container subtext">
{JSON.stringify(device, null, 2)} {JSON.stringify(data, null, 2)}
</div>
<h3>app:</h3>
<div class="message-container subtext">
{JSON.stringify(app, null, 2)}
</div>
<h3>settings:</h3>
<div class="message-container subtext">
{JSON.stringify($storedSettings, null, 2)}
</div>
<h3>version:</h3>
<div class="message-container subtext">
{JSON.stringify($version, null, 2)}
</div> </div>
<ActionButton
id="copy-button"
click={() => {
clearTimeout(lastCopiedSectionResetTimeout);
lastCopiedSection = i;
copyURL(JSON.stringify(data, null, 2));
}}
>
<CopyIcon />
{lastCopiedSection === i
? $t("button.copied")
: $t("button.copy")}
</ActionButton>
{/each}
</div> </div>
{/if} {/if}