implement auto reconnect

This commit is contained in:
marlon-erler
2026-04-01 08:29:39 +00:00
parent c52d7b7685
commit 9d400a9929
82 changed files with 8340 additions and 7641 deletions
+86 -76
View File
@@ -8,87 +8,97 @@ import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
import { translations } from "../translations";
export function TaskPage(taskPageViewModel: TaskPageViewModel) {
taskPageViewModel.loadData();
taskPageViewModel.loadData();
const isShowingBoard = React.createProxyState(
[taskPageViewModel.selectedBoardId],
() => taskPageViewModel.selectedBoardId.value != undefined
);
const isShowingBoard = React.createProxyState(
[taskPageViewModel.selectedBoardId],
() => taskPageViewModel.selectedBoardId.value != undefined,
);
const paneContent = React.createProxyState(
[taskPageViewModel.selectedBoardId],
() => {
const selectedBoardId = taskPageViewModel.selectedBoardId.value;
if (selectedBoardId == undefined) {
return (
<div class="pane align-center justify-center">
<span class="secondary">
{translations.chatPage.task.noBoardSelected}
</span>
</div>
);
}
const selectedBoard =
taskPageViewModel.boardViewModels.value.get(selectedBoardId);
if (selectedBoard == undefined) {
return (
<div class="pane align-center justify-center">
<span class="secondary">
{translations.chatPage.task.boardNotFound}
</span>
</div>
);
}
const paneContent = React.createProxyState(
[taskPageViewModel.selectedBoardId],
() => {
const selectedBoardId = taskPageViewModel.selectedBoardId.value;
if (selectedBoardId == undefined) {
return (
<div class="pane align-center justify-center">
<span class="secondary">
{translations.chatPage.task.noBoardSelected}
</span>
</div>
);
}
const selectedBoard =
taskPageViewModel.boardViewModels.value.get(selectedBoardId);
if (selectedBoard == undefined) {
return (
<div class="pane align-center justify-center">
<span class="secondary">
{translations.chatPage.task.boardNotFound}
</span>
</div>
);
}
return BoardPage(selectedBoard);
}
);
return BoardPage(selectedBoard);
},
);
return (
<div id="task-page" toggle:isshowingboard={isShowingBoard} set:showingboardlist={taskPageViewModel.isShowingBoadList}>
<div
id="board-list"
class="pane-wrapper side background"
set:color={taskPageViewModel.chatViewModel.displayedColor}
>
<div class="pane">
<div class="toolbar">
<div class="flex-row width-input">
<input
class="no-outline"
bind:value={taskPageViewModel.newBoardNameInput}
on:enter={taskPageViewModel.createBoard}
placeholder={translations.chatPage.task.newBoardNamePlaceholder}
></input>
<button
class="primary"
aria-label={
translations.chatPage.task.createBoardButtonAudioLabel
}
on:click={taskPageViewModel.createBoard}
toggle:disabled={taskPageViewModel.cannotCreateBoard}
>
<span class="icon">add</span>
</button>
</div>
</div>
<div class="content">
return (
<div
id="task-page"
toggle:isshowingboard={isShowingBoard}
set:showingboardlist={taskPageViewModel.isShowingBoadList}
>
<div
class="grid gap"
style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
children:append={[
taskPageViewModel.boardViewModels,
BoardViewModelToEntry,
]}
id="board-list"
class="pane-wrapper side background"
set:color={taskPageViewModel.chatViewModel.displayedColor}
>
<div class="pane">
<div class="toolbar">
<div class="flex-row width-input">
<input
class="no-outline"
bind:value={taskPageViewModel.newBoardNameInput}
on:enter={taskPageViewModel.createBoard}
placeholder={
translations.chatPage.task
.newBoardNamePlaceholder
}
></input>
<button
class="primary"
aria-label={
translations.chatPage.task
.createBoardButtonAudioLabel
}
on:click={taskPageViewModel.createBoard}
toggle:disabled={
taskPageViewModel.cannotCreateBoard
}
>
<span class="icon">add</span>
</button>
</div>
</div>
<div class="content">
<div
class="grid gap"
style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
children:append={[
taskPageViewModel.boardViewModels,
BoardViewModelToEntry,
]}
></div>
</div>
</div>
</div>
<div
id="board-content"
class="pane-wrapper"
children:set={paneContent}
></div>
</div>
</div>
</div>
<div
id="board-content"
class="pane-wrapper"
children:set={paneContent}
></div>
</div>
);
);
}