84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
import {Component, html} from 'htm/preact';
|
|
|
|
import ExternalAnchor from '../components/external-anchor.js';
|
|
import SharedFooter from '../components/shared-footer.js';
|
|
import {isDebugEnabled} from '../utilities/debug.js';
|
|
import {
|
|
defaultTheme,
|
|
getThemeByCssClass,
|
|
setTheme,
|
|
themes,
|
|
} from '../utilities/themes.js';
|
|
|
|
type Props = Record<string, unknown>;
|
|
|
|
type State = {
|
|
debugChecked: boolean;
|
|
selectedTheme: string;
|
|
};
|
|
|
|
export default class SettingsPage extends Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
debugChecked: isDebugEnabled(),
|
|
selectedTheme:
|
|
window.localStorage.getItem('theme') ?? defaultTheme.cssClass,
|
|
};
|
|
}
|
|
|
|
onDebugChange = (event: Event) => {
|
|
const checked = (event.target as HTMLInputElement).checked;
|
|
window.localStorage.setItem('debug', checked.toString());
|
|
};
|
|
|
|
onThemeChange = (event: Event) => {
|
|
const theme = getThemeByCssClass((event.target as HTMLSelectElement).value);
|
|
setTheme(theme);
|
|
this.setState({selectedTheme: theme.cssClass});
|
|
};
|
|
|
|
render() {
|
|
document.title = 'Settings';
|
|
|
|
const {selectedTheme} = this.state;
|
|
const themeOptions = themes.map(
|
|
(theme) => html`<option value=${theme.cssClass}>${theme.name}</option>`,
|
|
);
|
|
|
|
return html`
|
|
<div class="settings-page">
|
|
<header>
|
|
<h1>Settings</h1>
|
|
</header>
|
|
|
|
<section class="setting">
|
|
<h2>Theme</h2>
|
|
|
|
<select value=${selectedTheme} onChange=${this.onThemeChange}>
|
|
${themeOptions}
|
|
</select>
|
|
</section>
|
|
|
|
<section class="setting">
|
|
<h2>Debug</h2>
|
|
|
|
<input
|
|
checked=${this.state.debugChecked}
|
|
id="debug-checkbox"
|
|
name="debug-checkbox"
|
|
onChange=${this.onDebugChange}
|
|
type="checkbox"
|
|
/>
|
|
<label for="debug-checkbox">
|
|
Log debug information to the console.
|
|
</label>
|
|
</section>
|
|
|
|
<${SharedFooter} page="settings" />
|
|
</div>
|
|
`;
|
|
}
|
|
}
|