This commit is contained in:
2023-05-26 17:01:13 +08:00
parent ee9c54af61
commit b257cd9fb9
10 changed files with 125 additions and 20 deletions

View File

@@ -23,9 +23,7 @@ export default class Container extends Component {
<Head>
<GlobalCtx.Provider value={this.context}>
<StyleSheet href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<StyleSheet href="preact-material-components/TopAppBar/style.css" />
<StyleSheet href="preact-material-components/List/style.css" />
<StyleSheet href="preact-material-components/Icon/style.css" />
<StyleSheet href="preact-material-components/style.css" />
<StyleSheet href="common.css" />
</GlobalCtx.Provider>
</Head>
@@ -42,10 +40,7 @@ export default class Container extends Component {
</TopAppBar.Section>
</TopAppBar.Row>
</TopAppBar>
<List
class="nav-menu"
style={{ display: display ? "block" : "none" }}
>
<List class={"nav-menu" + (display ? " open" : "")}>
<List.Item onClick={() => set_display(false)}>
<Icon>close</Icon>
</List.Item>

View File

@@ -1,5 +1,10 @@
import { Component, ContextType } from "preact";
import { useEffect, useState } from "preact/hooks";
import Button from "preact-material-components/Button";
import Checkbox from "preact-material-components/Checkbox";
import { tw } from "twind";
import { GlobalCtx } from "../components/GlobalContext.tsx";
import { ConfigType } from "../config.ts";
export type SettingsProps = {
show: boolean;
@@ -10,6 +15,34 @@ export default class Settings extends Component<SettingsProps> {
declare context: ContextType<typeof GlobalCtx>;
render() {
if (!this.props.show) return;
return <div>Settings</div>;
const [settings, set_settings] = useState<ConfigType | undefined>();
const [error, set_error] = useState<string | undefined>();
const fetchSettings = async () => {
const re = await fetch("/api/config");
set_settings(await re.json());
};
const loadData = () => {
fetchSettings().catch((e) => {
set_error("Failed to fetch settings.");
console.error(e);
});
};
useEffect(loadData, []);
let data;
if (error) {
data = <div class={tw`text-red-500`}>{error}</div>;
} else if (settings) {
data = (
<div class="settings">
<Checkbox id="s-ex" checked={settings.ex} />
<label for="s-ex">Use exhentai.org.</label>
<br />
<Button onClick={loadData}>Reload</Button>
</div>
);
} else {
data = <div>Loading...</div>;
}
return <div>{data}</div>;
}
}