119 lines
4.4 KiB
TypeScript
119 lines
4.4 KiB
TypeScript
import "./homePage.css";
|
|
|
|
import * as React from "bloatless-react";
|
|
|
|
import ChatViewModel, { ChatPageTypes } from "../ViewModel/Chat/chatViewModel";
|
|
|
|
import { CalendarPage } from "./ChatPages/calendarPage";
|
|
import { ChatViewToggleButton } from "./Components/chatViewToggleButton";
|
|
import { MessagePage } from "./ChatPages/messagePage";
|
|
import { SettingsPage } from "./ChatPages/settingsPage";
|
|
import { TaskPage } from "./ChatPages/taskPage";
|
|
import { translations } from "./translations";
|
|
|
|
export function ChatPage(chatViewModel: ChatViewModel) {
|
|
const mainContent = React.createProxyState(
|
|
[chatViewModel.selectedPage],
|
|
() => {
|
|
chatViewModel.closeSubPages();
|
|
|
|
switch (chatViewModel.selectedPage.value) {
|
|
case ChatPageTypes.Settings: {
|
|
return SettingsPage(chatViewModel.settingsPageViewModel);
|
|
}
|
|
case ChatPageTypes.Tasks: {
|
|
return TaskPage(chatViewModel.taskPageViewModel);
|
|
}
|
|
case ChatPageTypes.Calendar: {
|
|
return CalendarPage(chatViewModel.calendarViewModel);
|
|
}
|
|
default: {
|
|
return MessagePage(chatViewModel.messagePageViewModel);
|
|
}
|
|
}
|
|
},
|
|
);
|
|
|
|
const marqueeContent = React.createProxyState(
|
|
[chatViewModel.notificationViewModel.marquee],
|
|
() => {
|
|
const value = chatViewModel.notificationViewModel.marquee.value;
|
|
if (value == undefined) return <span></span>;
|
|
return (
|
|
<span
|
|
on:click={
|
|
chatViewModel.notificationViewModel.openNotification
|
|
}
|
|
>
|
|
<b>{value.sender}</b>
|
|
<span class="secondary">{value.chat}: </span>
|
|
<span>{value.body}</span>
|
|
</span>
|
|
);
|
|
},
|
|
);
|
|
|
|
return (
|
|
<article
|
|
id="chat-page"
|
|
set:color={chatViewModel.displayedColor}
|
|
class="subtle-background"
|
|
>
|
|
<div>
|
|
<div id="ribbon">
|
|
<button
|
|
class="ghost"
|
|
aria-label={translations.chatPage.closeChatAudioLabe}
|
|
on:click={chatViewModel.close}
|
|
>
|
|
<span class="icon">close</span>
|
|
</button>
|
|
<button
|
|
class="danger"
|
|
aria-label={translations.general.restoreConnection}
|
|
on:click={
|
|
chatViewModel.connectionViewModel
|
|
.showConnectionModal
|
|
}
|
|
toggle:hidden={
|
|
chatViewModel.connectionViewModel.isConnected
|
|
}
|
|
>
|
|
<span class="icon">signal_disconnected</span>
|
|
</button>
|
|
|
|
<span class="marquee" children:set={marqueeContent}></span>
|
|
|
|
<span class="navigation-buttons">
|
|
{ChatViewToggleButton(
|
|
translations.chatPage.pages.calendar,
|
|
"calendar_month",
|
|
ChatPageTypes.Calendar,
|
|
chatViewModel,
|
|
)}
|
|
{ChatViewToggleButton(
|
|
translations.chatPage.pages.tasks,
|
|
"task_alt",
|
|
ChatPageTypes.Tasks,
|
|
chatViewModel,
|
|
)}
|
|
{ChatViewToggleButton(
|
|
translations.chatPage.pages.messages,
|
|
"forum",
|
|
ChatPageTypes.Messages,
|
|
chatViewModel,
|
|
)}
|
|
{ChatViewToggleButton(
|
|
translations.chatPage.pages.settings,
|
|
"settings",
|
|
ChatPageTypes.Settings,
|
|
chatViewModel,
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div id="main" children:set={mainContent}></div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|