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
+135 -115
View File
@@ -1,7 +1,7 @@
import * as React from "bloatless-react";
import BoardViewModel, {
BoardPageType,
BoardPageType,
} from "../../ViewModel/Pages/boardViewModel";
import { BoardKanbanPage } from "./boardKanbanPage";
@@ -14,120 +14,140 @@ import { TaskViewModelToEntry } from "../Components/taskEntry";
import { translations } from "../translations";
export function BoardPage(boardViewModel: BoardViewModel) {
boardViewModel.loadData();
boardViewModel.loadData();
// main content
const mainContent = React.createProxyState(
[boardViewModel.selectedPage],
() => {
switch (boardViewModel.selectedPage.value) {
case BoardPageType.Kanban: {
return BoardKanbanPage(boardViewModel);
}
case BoardPageType.StatusGrid: {
return BoardStatusGridPage(boardViewModel);
}
default: {
return (
<div
class="task-grid"
children:append={[
boardViewModel.filteredTaskViewModels,
// main content
const mainContent = React.createProxyState(
[boardViewModel.selectedPage],
() => {
switch (boardViewModel.selectedPage.value) {
case BoardPageType.Kanban: {
return BoardKanbanPage(boardViewModel);
}
case BoardPageType.StatusGrid: {
return BoardStatusGridPage(boardViewModel);
}
default: {
return (
<div
class="task-grid"
children:append={[
boardViewModel.filteredTaskViewModels,
TaskViewModelToEntry,
]}
></div>
);
}
}
},
);
// task modal
const taskSettingsModal = React.createProxyState(
[boardViewModel.selectedTaskViewModel],
() => {
if (boardViewModel.selectedTaskViewModel.value == undefined) {
return <div></div>;
} else {
return TaskSettingsModal(
boardViewModel.selectedTaskViewModel.value,
);
}
},
);
return (
<div class="pane">
<div class="toolbar">
<span>
<button
class="ghost board-close-button"
aria-label={
translations.chatPage.task
.closeBoardButtonAudioLabel
}
on:click={boardViewModel.close}
>
<span class="icon">arrow_back</span>
</button>
<button
class="ghost board-toggle-button inset-outline"
aria-label={
translations.chatPage.task
.toggleBoardButtonAudioLabel
}
on:click={
boardViewModel.taskPageViewModel.toggleBoardList
}
toggle:selected={
boardViewModel.taskPageViewModel.isShowingBoadList
}
>
<span class="icon">dock_to_right</span>
</button>
<button
class="ghost"
aria-label={
translations.chatPage.task.boardSettingsHeadline
}
on:click={boardViewModel.showSettings}
>
<span class="icon">settings</span>
</button>
</span>
<span class="scroll-h ribbon">
{BoardViewToggleButton(
translations.chatPage.task.listViewButtonAudioLabel,
"view_list",
BoardPageType.List,
boardViewModel,
)}
{BoardViewToggleButton(
translations.chatPage.task.kanbanViewButtonAudioLabel,
"view_kanban",
BoardPageType.Kanban,
boardViewModel,
)}
{BoardViewToggleButton(
translations.chatPage.task.statusViewButtonAudioLabel,
"grid_view",
BoardPageType.StatusGrid,
boardViewModel,
)}
</span>
<span>
<button
class="ghost"
aria-label={
translations.chatPage.task
.filterTasksButtonAudioLabel
}
on:click={boardViewModel.showFilterModal}
>
<span class="icon">filter_alt</span>
</button>
<button
class="ghost"
aria-label={
translations.chatPage.task
.createTaskButtonAudioLabel
}
on:click={boardViewModel.createTask}
>
<span class="icon">add</span>
</button>
</span>
</div>
<div class="content main-content" children:set={mainContent}></div>
{BoardSettingsModal(boardViewModel)}
{SearchModal(
boardViewModel.searchViewModel,
translations.chatPage.task.filterTasksHeadline,
TaskViewModelToEntry,
]}
></div>
);
}
}
}
);
// task modal
const taskSettingsModal = React.createProxyState(
[boardViewModel.selectedTaskViewModel],
() => {
if (boardViewModel.selectedTaskViewModel.value == undefined) {
return <div></div>;
} else {
return TaskSettingsModal(boardViewModel.selectedTaskViewModel.value);
}
}
);
return (
<div class="pane">
<div class="toolbar">
<span>
<button
class="ghost board-close-button"
aria-label={translations.chatPage.task.closeBoardButtonAudioLabel}
on:click={boardViewModel.close}
>
<span class="icon">arrow_back</span>
</button>
<button
class="ghost board-toggle-button inset-outline"
aria-label={translations.chatPage.task.toggleBoardButtonAudioLabel}
on:click={boardViewModel.taskPageViewModel.toggleBoardList}
toggle:selected={boardViewModel.taskPageViewModel.isShowingBoadList}
>
<span class="icon">dock_to_right</span>
</button>
<button
class="ghost"
aria-label={translations.chatPage.task.boardSettingsHeadline}
on:click={boardViewModel.showSettings}
>
<span class="icon">settings</span>
</button>
</span>
<span class="scroll-h ribbon">
{BoardViewToggleButton(
translations.chatPage.task.listViewButtonAudioLabel,
"view_list",
BoardPageType.List,
boardViewModel
)}
{BoardViewToggleButton(
translations.chatPage.task.kanbanViewButtonAudioLabel,
"view_kanban",
BoardPageType.Kanban,
boardViewModel
)}
{BoardViewToggleButton(
translations.chatPage.task.statusViewButtonAudioLabel,
"grid_view",
BoardPageType.StatusGrid,
boardViewModel
)}
</span>
<span>
<button
class="ghost"
aria-label={translations.chatPage.task.filterTasksButtonAudioLabel}
on:click={boardViewModel.showFilterModal}
>
<span class="icon">filter_alt</span>
</button>
<button
class="ghost"
aria-label={translations.chatPage.task.createTaskButtonAudioLabel}
on:click={boardViewModel.createTask}
>
<span class="icon">add</span>
</button>
</span>
</div>
<div class="content main-content" children:set={mainContent}></div>
{BoardSettingsModal(boardViewModel)}
{SearchModal(
boardViewModel.searchViewModel,
translations.chatPage.task.filterTasksHeadline,
TaskViewModelToEntry,
boardViewModel.isPresentingFilterModal
)}
<div children:set={taskSettingsModal}></div>
</div>
);
boardViewModel.isPresentingFilterModal,
)}
<div children:set={taskSettingsModal}></div>
</div>
);
}