mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-18 01:50:50 +00:00
I'm too tired to make a proper debug page, so here's a lazy port of the old one
This commit is contained in:
parent
dfeb2fbf65
commit
03377cbaef
1 changed files with 123 additions and 4 deletions
|
@ -1,6 +1,20 @@
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button, PageContainer, PageHeader, PageTitle, styled } from '../theme';
|
import { useSelector } from 'react-redux';
|
||||||
|
import { RootState } from '../../store';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Field,
|
||||||
|
FieldNote,
|
||||||
|
FlexRow,
|
||||||
|
InputBox,
|
||||||
|
Label,
|
||||||
|
PageContainer,
|
||||||
|
PageHeader,
|
||||||
|
PageTitle,
|
||||||
|
styled,
|
||||||
|
Textarea,
|
||||||
|
} from '../theme';
|
||||||
|
|
||||||
const Disclaimer = styled('div', {
|
const Disclaimer = styled('div', {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
@ -21,7 +35,36 @@ const DisclaimerParagraph = styled('p', {
|
||||||
|
|
||||||
export default function DebugPage(): React.ReactElement {
|
export default function DebugPage(): React.ReactElement {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [warningDismissed, setWarningDismissed] = React.useState(false);
|
const [warningDismissed, setWarningDismissed] = useState(false);
|
||||||
|
const [readKey, setReadKey] = useState('');
|
||||||
|
const [readValue, setReadValue] = useState('');
|
||||||
|
const [writeKey, setWriteKey] = useState('');
|
||||||
|
const [writeValue, setWriteValue] = useState('');
|
||||||
|
const [writeErrorMsg, setWriteErrorMsg] = useState(null);
|
||||||
|
const api = useSelector((state: RootState) => state.api.client);
|
||||||
|
|
||||||
|
const performRead = async () => {
|
||||||
|
const value = await api.getKey(readKey);
|
||||||
|
setReadValue(value);
|
||||||
|
};
|
||||||
|
const performWrite = async () => {
|
||||||
|
const result = await api.putKey(writeKey, writeValue);
|
||||||
|
console.log(result);
|
||||||
|
};
|
||||||
|
const fixJSON = () => {
|
||||||
|
try {
|
||||||
|
setWriteValue(JSON.stringify(JSON.parse(writeValue)));
|
||||||
|
setWriteErrorMsg(null);
|
||||||
|
} catch (e) {
|
||||||
|
setWriteErrorMsg(e.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const dumpKeys = async () => {
|
||||||
|
console.log(await api.keyList());
|
||||||
|
};
|
||||||
|
const dumpAll = async () => {
|
||||||
|
console.log(await api.getKeysByPrefix(''));
|
||||||
|
};
|
||||||
|
|
||||||
if (!warningDismissed) {
|
if (!warningDismissed) {
|
||||||
return (
|
return (
|
||||||
|
@ -36,5 +79,81 @@ export default function DebugPage(): React.ReactElement {
|
||||||
</Disclaimer>
|
</Disclaimer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return <PageContainer>WIP</PageContainer>;
|
return (
|
||||||
|
<PageContainer>
|
||||||
|
<PageHeader>
|
||||||
|
<PageTitle>{t('pages.debug.title')}</PageTitle>
|
||||||
|
</PageHeader>
|
||||||
|
<Field size="fullWidth">
|
||||||
|
<Label htmlFor="read-key">{t('pages.debug.console-ops')}</Label>
|
||||||
|
<FlexRow align="left" spacing="1">
|
||||||
|
<Button type="button" onClick={() => dumpKeys()}>
|
||||||
|
{t('pages.debug.dump-keys')}
|
||||||
|
</Button>
|
||||||
|
<Button type="button" onClick={() => dumpAll()}>
|
||||||
|
{t('pages.debug.dump-all')}
|
||||||
|
</Button>
|
||||||
|
</FlexRow>
|
||||||
|
</Field>
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if ((e.target as HTMLFormElement).checkValidity()) {
|
||||||
|
performRead();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Field size="fullWidth">
|
||||||
|
<Label htmlFor="read-key">{t('pages.debug.read-key')}</Label>
|
||||||
|
<FlexRow spacing="1">
|
||||||
|
<InputBox
|
||||||
|
required
|
||||||
|
value={readKey ?? ''}
|
||||||
|
onChange={(e) => setReadKey(e.target.value)}
|
||||||
|
id="read-key"
|
||||||
|
css={{ flex: '1' }}
|
||||||
|
/>
|
||||||
|
<Button type="submit">{t('form-actions.submit')}</Button>
|
||||||
|
</FlexRow>
|
||||||
|
<Textarea value={readValue ?? ''} readOnly>
|
||||||
|
{readValue ?? ''}
|
||||||
|
</Textarea>
|
||||||
|
</Field>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if ((e.target as HTMLFormElement).checkValidity()) {
|
||||||
|
performWrite;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Field size="fullWidth">
|
||||||
|
<Label htmlFor="write-key">{t('pages.debug.write-key')}</Label>
|
||||||
|
<FlexRow spacing={1}>
|
||||||
|
<InputBox
|
||||||
|
required
|
||||||
|
value={writeKey ?? ''}
|
||||||
|
onChange={(e) => setWriteKey(e.target.value)}
|
||||||
|
id="write-key"
|
||||||
|
css={{ flex: '1' }}
|
||||||
|
/>
|
||||||
|
<Button type="button" onClick={() => fixJSON()}>
|
||||||
|
{t('pages.debug.fix-json')}
|
||||||
|
</Button>
|
||||||
|
<Button type="submit">{t('form-actions.submit')}</Button>
|
||||||
|
</FlexRow>
|
||||||
|
<Textarea
|
||||||
|
required
|
||||||
|
value={writeValue ?? ''}
|
||||||
|
onChange={(e) => setWriteValue(e.target.value)}
|
||||||
|
>
|
||||||
|
{writeValue ?? ''}
|
||||||
|
</Textarea>
|
||||||
|
{writeErrorMsg && <FieldNote>{writeErrorMsg}</FieldNote>}
|
||||||
|
</Field>
|
||||||
|
</form>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue