lifegpc/eh-downloader
1
0
Fork 0
mirror of https://github.com/lifegpc/eh-downloader.git synced 2026-07-02 11:21:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
lifegpc
2023-07-03 22:07:27 +08:00
parent d97f832a78
commit 14723e2cd1
9 changed files with 222 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
components/BMd3TextField.tsx Normal file
View File

@@ -0,0 +1,146 @@
import { Component, ComponentChildren, ContextType } from "preact";
import { BCtx } from "./BContext.tsx";
import { Ref, useRef, useState } from "preact/hooks";
import type _TextField from "../server/md3/md-outlined-text-field.ts";
import type { MdOutlinedTextField as _TextFieldE } from "../server/md3/md-outlined-text-field.ts";
import { MdOutlinedTextField } from "../server/dmodule.ts";
import List from "preact-material-components/List";
interface TextType {
text: string;
password: string;
number: number;
}
interface DataType {
text: never;
password: never;
number: number;
}
type Props<T extends keyof TextType> = {
/**@default {true} */
clear_cache?: boolean;
label?: string;
description?: string;
value?: TextType[T];
name?: string;
type: T;
disabled?: boolean;
children?: ComponentChildren;
set_value?: (v?: TextType[T]) => void;
min?: DataType[T];
max?: DataType[T];
id?: string;
list?: string;
datalist?: { value: TextType[T]; label?: string }[];
};
export default class BMd3TextField<T extends keyof TextType>
extends Component<Props<T>, unknown> {
static contextType = BCtx;
ref: Ref<typeof _TextField | null> | undefined;
declare context: ContextType<typeof BCtx>;
get clear_cache() {
return this.props.clear_cache !== undefined
? this.props.clear_cache
: true;
}
get_value(e: _TextFieldE): TextType[T] | undefined {
const type = this.props.type;
if (!e.value.length) return undefined;
// @ts-ignore Checked
if (type === "text" || type === "password") return e.value;
// @ts-ignore Checked
return e.valueAsNumber;
}
render() {
this.ref = useRef(null);
if (!MdOutlinedTextField.value) return null;
let datalist_div = null;
const [display_datalist, set_display_datalist] = useState(false);
let cn = "b-text-field md3 text";
if (this.props.label) cn += " label";
if (this.props.datalist && this.props.datalist.length) {
cn += " datalist";
let cn2 = "datalist";
if (display_datalist) cn2 += " open";
const v = this.props.value?.toString();
datalist_div = (
<List class={cn2}>
{this.props.datalist.map((d) => {
if (v !== undefined) {
if (!d.value.toString().startsWith(v)) return null;
}
let label_div = null;
if (d.label) {
label_div = <div class="label">{d.label}</div>;
}
return (
<List.Item
onMousedown={() => {
this.set_value(d.value);
}}
>
<div class="value">{d.value}</div>
{label_div}
</List.Item>
);
})}
</List>
);
}
const TextField = MdOutlinedTextField.value;
let desc = null;
if (this.props.description) {
desc = <label>{this.props.description}</label>;
}
let value: string | undefined;
if (this.props.value !== undefined) {
if (typeof this.props.value === "string") {
value = this.props.value;
} else {
value = this.props.value.toString();
}
} else if (this.clear_cache) {
value = "";
}
return (
<div class={cn} id={this.props.id}>
{desc}
<TextField
/**@ts-ignore */
ref={this.ref}
value={value}
type={this.props.type}
label={this.props.label}
disabled={this.props.disabled}
min={this.props.min ? this.props.min.toString() : undefined}
max={this.props.max ? this.props.max.toString() : undefined}
list={this.props.list}
/**@ts-ignore */
onInput={(ev: InputEvent) => {
if (ev.target) {
const e = ev.target as _TextFieldE;
this.set_value(this.get_value(e));
}
}}
onFocus={() => set_display_datalist(true)}
onBlur={() => set_display_datalist(false)}
/>
{datalist_div}
{this.props.children}
</div>
);
}
set_value(value?: TextType[T]) {
if (this.props.set_value) {
this.props.set_value(value);
} else if (this.context) {
this.context.set_value((v) => {
v[this.props.name || ""] = value;
return v;
});
}
}
}

15
components/CreateRootUser.tsx
View File

@@ -1,6 +1,8 @@
import { Component, ContextType } from "preact";
import { GlobalCtx } from "./GlobalContext.tsx";
import { MdOutlinedTextField } from "../server/dmodule.ts";
import BMd3TextField from "./BMd3TextField.tsx";
import t from "../server/i18n.ts";
import { useState } from "preact/hooks";
type Props = {
show: boolean;
@@ -10,12 +12,17 @@ export default class CreateRootUser extends Component<Props> {
static contextType = GlobalCtx;
declare context: ContextType<typeof GlobalCtx>;
render() {
if (!MdOutlinedTextField.value) return null;
if (!this.props.show) return null;
const OutlinedTextField = MdOutlinedTextField.value;
const [username, set_username] = useState<string>();
console.log(username);
return (
<div>
<OutlinedTextField />
<BMd3TextField
label={t("user.username")}
type="text"
value={username}
set_value={set_username}
/>
</div>
);
}

27
islands/Container.tsx
View File

@@ -42,6 +42,7 @@ export default class Container extends Component<ContainerProps> {
const [display, set_display] = useState(false);
const [state, set_state1] = useState("#/");
const [darkmode, set_darkmode1] = useState(DarkMode.Auto);
const [dmodule_loaded, set_dmodule_loaded] = useState(false);
const set_darkmode: StateUpdater<DarkMode> = (u) => {
const v = typeof u === "function" ? u(darkmode) : u;
set_darkmode1(v);
@@ -88,10 +89,24 @@ export default class Container extends Component<ContainerProps> {
}
}
});
load_dmodule().catch((e) => {
load_dmodule().then(() => set_dmodule_loaded(true)).catch((e) => {
console.error(e);
});
}, []);
let main = null;
if (dmodule_loaded) {
main = (
<div class="main">
<Settings show={state === "#/settings"} />
<TaskManager
base="#/task_manager"
show={state === "#/task_manager"}
/>
<NewTask show={state === "#/task_manager/new"} />
<CreateRootUser show={state === "#/create_root_user"} />
</div>
);
}
return (
<div>
<Head>
@@ -156,15 +171,7 @@ export default class Container extends Component<ContainerProps> {
<Icon>settings</Icon>
</List.Item>
</List>
<div class="main">
<Settings show={state === "#/settings"} />
<TaskManager
base="#/task_manager"
show={state === "#/task_manager"}
/>
<NewTask show={state === "#/task_manager/new"} />
<CreateRootUser show={state === "#/create_root_user"} />
</div>
{main}
</div>
);
}

4
server/dmodule.ts
View File

@@ -6,6 +6,6 @@ export const MdOutlinedTextField = signal<
>(undefined);
export async function load_dmodule() {
const m = await import("./md3/md-outlined-text-field.ts");
MdOutlinedTextField.value = m.default;
MdOutlinedTextField.value =
(await import("./md3/md-outlined-text-field.ts")).default;
}

4
server/i18ns.ts
View File

@@ -7,8 +7,8 @@ import { get_host } from "./utils.ts";
const whole_maps = new Map<string, I18NMap>();
const LANGUAGES = ["zh-cn"];
type MODULE = "common" | "settings" | "task";
const MODULES: MODULE[] = ["common", "settings", "task"];
type MODULE = "common" | "settings" | "task" | "user";
const MODULES: MODULE[] = ["common", "settings", "task", "user"];
export async function load_translation(signal?: AbortSignal) {
const base = import.meta.resolve("../translation").slice(8);

1
server/md3/md-outlined-text-field.ts
View File

@@ -9,4 +9,5 @@ const MdOutlinedTextField = createComponent({
react: Preact,
});
export { _MdOutlinedTextField as MdOutlinedTextField };
export default MdOutlinedTextField;

37
static/common.css
View File

@@ -313,6 +313,43 @@ div.new_task div.content .text .mdc-text-field {
position: relative;
}
.dark-scheme {
--md-sys-color-primary: #4CDADA;
--md-sys-color-primary-container: #004F4F;
--md-sys-color-on-primary: #003737;
--md-sys-color-on-primary-container: #6FF7F6;
--md-sys-color-secondary: #B0CCCB;
--md-sys-color-secondary-container: #324B4B;
--md-sys-color-on-secondary: #1B3534;
--md-sys-color-on-secondary-container: #CCE8E7;
--md-sys-color-tertiary: #B3C8E8;
--md-sys-color-tertiary-container: #334863;
--md-sys-color-on-tertiary: #1C314B;
--md-sys-color-on-tertiary-container: #D3E4FF;
--md-sys-color-error: #FFB4AB;
--md-sys-color-error-container: #93000A;
--md-sys-color-on-error: #690005;
--md-sys-color-on-error-container: #FFDAD6;
--md-sys-color-outline: #889392;
--md-sys-color-background: #191C1C;
--md-sys-color-on-background: #E0E3E2;
--md-sys-color-surface: #191C1C;
--md-sys-color-on-surface: #E0E3E2;
--md-sys-color-surface-variant: #3F4948;
--md-sys-color-on-surface-variant: #BEC9C8;
--md-sys-color-inverse-surface: #E0E3E2;
--md-sys-color-inverse-on-surface: #191C1C;
--md-sys-color-inverse-primary: #006A6A;
--md-sys-color-shadow: #000000;
--md-sys-color-surface-tint: #4CDADA;
--md-sys-color-outline-variant: #3F4948;
--md-sys-color-scrim: #000000;
}
.b-text-field.md3.label md-outlined-text-field {
margin-top: 6px;
}
@media (max-width:1280px) {
.settings {
margin: 0;

3
translation/en/user.jsonc Normal file
View File

@@ -0,0 +1,3 @@
{
"username": "Username"
}

3
translation/zh-cn/user.jsonc Normal file
View File

@@ -0,0 +1,3 @@
{
"username": "用户名"
}