From 01d364a1ec1c5ca307d521b62c0b2d3283f58e81 Mon Sep 17 00:00:00 2001 From: lifegpc Date: Sun, 25 Jun 2023 16:06:32 +0800 Subject: [PATCH] Update --- components/NewTask.tsx | 30 ++++++++++++++++++++++++++++++ islands/Container.tsx | 30 +++++++++--------------------- islands/TaskManager.tsx | 27 +++++++++++++++++++++++++++ server/state.ts | 30 ++++++++++++++++++++++++++++++ static/common.css | 12 ++++++++++++ 5 files changed, 108 insertions(+), 21 deletions(-) create mode 100644 components/NewTask.tsx create mode 100644 server/state.ts diff --git a/components/NewTask.tsx b/components/NewTask.tsx new file mode 100644 index 0000000..6cc0f6d --- /dev/null +++ b/components/NewTask.tsx @@ -0,0 +1,30 @@ +import { Component, ContextType } from "preact"; +import { GlobalCtx } from "./GlobalContext.tsx"; +import Fab from "preact-material-components/Fab"; +import Icon from "preact-material-components/Icon"; +import { set_state } from "../server/state.ts"; + +export type NewTaskProps = { + show: boolean; +}; + +export default class NewTask extends Component { + static contextType = GlobalCtx; + declare context: ContextType; + render() { + if (!this.props.show) return null; + return ( +
+ + { + set_state((p) => p.slice(0, p.length - 4)); + }} + > + close + + +
+ ); + } +} diff --git a/islands/Container.tsx b/islands/Container.tsx index d267445..aa423f9 100644 --- a/islands/Container.tsx +++ b/islands/Container.tsx @@ -1,6 +1,6 @@ import { Head } from "$fresh/runtime.ts"; import { Component, ContextType } from "preact"; -import { StateUpdater, useEffect, useState } from "preact/hooks"; +import { useEffect, useState } from "preact/hooks"; import Icon from "preact-material-components/Icon"; import List from "preact-material-components/List"; import TopAppBar from "preact-material-components/TopAppBar"; @@ -9,6 +9,8 @@ import { GlobalCtx } from "../components/GlobalContext.tsx"; import Settings from "./Settings.tsx"; import t, { i18n_map, I18NMap } from "../server/i18n.ts"; import TaskManager from "./TaskManager.tsx"; +import { initState, set_state } from "../server/state.ts"; +import NewTask from "../components/NewTask.tsx"; export type ContainerProps = { i18n: I18NMap; @@ -21,26 +23,8 @@ export default class Container extends Component { i18n_map.value = this.props.i18n; const [display, set_display] = useState(false); const [state, set_state1] = useState("#/"); - const set_state: StateUpdater = (updater) => { - const v = typeof updater === "function" ? updater(state) : updater; - set_state1(v); - history.pushState(v, "", v); - }; useEffect(() => { - const hash = document.location.hash; - if (!hash || hash == "#") { - set_state("#/"); - } else { - set_state1(hash); - } - self.addEventListener("popstate", (e) => { - const s = e.state; - if (typeof s === "string") { - set_state1(s); - } else { - set_state1("#/"); - } - }); + initState(set_state1); }, []); return (
@@ -96,7 +80,11 @@ export default class Container extends Component {
- + +
); diff --git a/islands/TaskManager.tsx b/islands/TaskManager.tsx index fec5307..1378ceb 100644 --- a/islands/TaskManager.tsx +++ b/islands/TaskManager.tsx @@ -7,13 +7,25 @@ import { Sortable } from "sortable"; import { TaskClientSocketData, TaskServerSocketData } from "../server/task.ts"; import { get_ws_host } from "../server/utils.ts"; import Task from "../components/Task.tsx"; +import Fab from "preact-material-components/Fab"; +import Icon from "preact-material-components/Icon"; +import { set_state } from "../server/state.ts"; export type TaskManagerProps = { + base: string; show: boolean; }; const tasks = signal(new Map()); const task_list = signal(new Array()); +export const task_ws = signal(undefined); +export function sendTaskMessage(mes: TaskClientSocketData) { + const ws = task_ws.value; + if (ws && ws.readyState === ws.OPEN) { + ws.send(JSON.stringify(mes)); + return true; + } else return false; +} type SortableEvent = CustomEvent & { oldIndex: number | undefined; @@ -46,6 +58,7 @@ export default class TaskManager extends Component { useEffect(() => { const ws = new WebSocket(`${get_ws_host()}/api/task`); console.log(ws); + task_ws.value = ws; function sendMessage(mes: TaskClientSocketData) { ws.send(JSON.stringify(mes)); } @@ -153,6 +166,20 @@ export default class TaskManager extends Component { if (!this.props.show) return null; return (
+
+
+
+ + { + set_state(`${this.props.base}/new`); + }} + > + add + + +
+
| undefined = undefined; + +export function initState(l: StateUpdater) { + const hash = document.location.hash; + listener = l; + if (!hash || hash == "#") { + set_state("#/"); + } else { + set_state(hash); + } + self.addEventListener("popstate", (e) => { + const s = e.state; + if (typeof s === "string") { + l(s); + } else { + l("#/"); + } + }); +} + +export const set_state: StateUpdater = (updater) => { + const v = typeof updater === "function" ? updater(state.value) : updater; + state.value = v; + history.pushState(v, "", v); + if (listener) listener(v); +}; diff --git a/static/common.css b/static/common.css index 5b0e1aa..6cae7de 100644 --- a/static/common.css +++ b/static/common.css @@ -104,3 +104,15 @@ margin: 0; } } + +.task_manager #task_head { + display: flex; + justify-content: space-between; + align-items: center; +} + +.new_task .close { + position: absolute; + right: 10px; + top: 10px; +}