implement auto reconnect
This commit is contained in:
marlon-erler
+183
-171
@@ -13,184 +13,196 @@ import StorageViewModel from "../ViewModel/Global/storageViewModel";
|
||||
import { translations } from "./translations";
|
||||
|
||||
export function HomePage(
|
||||
storageViewModel: StorageViewModel,
|
||||
settingsViewModel: SettingsViewModel,
|
||||
connectionViewModel: ConnectionViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
chatListViewModel: ChatListViewModel
|
||||
storageViewModel: StorageViewModel,
|
||||
settingsViewModel: SettingsViewModel,
|
||||
connectionViewModel: ConnectionViewModel,
|
||||
fileTransferViewModel: FileTransferViewModel,
|
||||
chatListViewModel: ChatListViewModel,
|
||||
) {
|
||||
// sections
|
||||
const overviewSection = (
|
||||
<div id="overview-section">
|
||||
<h2>{translations.homePage.overviewHeadline}</h2>
|
||||
// sections
|
||||
const overviewSection = (
|
||||
<div id="overview-section">
|
||||
<h2>{translations.homePage.overviewHeadline}</h2>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">cell_tower</span>
|
||||
<div>
|
||||
<span>{translations.homePage.serverAddress}</span>
|
||||
<input
|
||||
list="previous-connection-list"
|
||||
placeholder={translations.homePage.serverAddressPlaceholder}
|
||||
bind:value={connectionViewModel.serverAddressInput}
|
||||
on:enter={connectionViewModel.connect}
|
||||
></input>
|
||||
<datalist
|
||||
hidden
|
||||
id="previous-connection-list"
|
||||
children:append={[
|
||||
connectionViewModel.previousAddresses,
|
||||
StringToOption,
|
||||
]}
|
||||
></datalist>
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">cell_tower</span>
|
||||
<div>
|
||||
<span>{translations.homePage.serverAddress}</span>
|
||||
<input
|
||||
list="previous-connection-list"
|
||||
placeholder={
|
||||
translations.homePage.serverAddressPlaceholder
|
||||
}
|
||||
bind:value={connectionViewModel.serverAddressInput}
|
||||
on:enter={connectionViewModel.connect}
|
||||
></input>
|
||||
<datalist
|
||||
hidden
|
||||
id="previous-connection-list"
|
||||
children:append={[
|
||||
connectionViewModel.previousAddresses,
|
||||
StringToOption,
|
||||
]}
|
||||
></datalist>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="flex-row">
|
||||
<button
|
||||
class="danger flex justify-center"
|
||||
aria-label={translations.homePage.disconnectAudioLabel}
|
||||
on:click={connectionViewModel.disconnect}
|
||||
toggle:disabled={connectionViewModel.cannotDisonnect}
|
||||
>
|
||||
<span class="icon">link_off</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex justify-center"
|
||||
aria-label={
|
||||
translations.homePage.manageConnectionsAudioLabel
|
||||
}
|
||||
on:click={connectionViewModel.showConnectionModal}
|
||||
toggle:disabled={
|
||||
connectionViewModel.hasNoPreviousConnections
|
||||
}
|
||||
>
|
||||
<span class="icon">history</span>
|
||||
</button>
|
||||
<button
|
||||
class="primary flex justify-center"
|
||||
aria-label={translations.homePage.connectAudioLabel}
|
||||
on:click={connectionViewModel.connect}
|
||||
toggle:disabled={connectionViewModel.cannotConnect}
|
||||
>
|
||||
<span class="icon">link</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">account_circle</span>
|
||||
<div>
|
||||
<span>{translations.homePage.yourNameLabel}</span>
|
||||
<input
|
||||
placeholder={translations.homePage.yourNamePlaceholder}
|
||||
bind:value={settingsViewModel.usernameInput}
|
||||
on:enter={settingsViewModel.setName}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex-row justify-end">
|
||||
<button
|
||||
class="width-50"
|
||||
on:click={settingsViewModel.setName}
|
||||
toggle:disabled={settingsViewModel.cannotSetName}
|
||||
aria-label={translations.homePage.setNameButtonAudioLabel}
|
||||
>
|
||||
{translations.general.setButton}
|
||||
<span class="icon">check</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">calendar_month</span>
|
||||
<div>
|
||||
<span>{translations.homePage.firstDayOfWeekLabel}</span>
|
||||
<select bind:value={settingsViewModel.firstDayOfWeekInput}>
|
||||
{...translations.regional.weekdays.full.map(
|
||||
(weekdayName, i) =>
|
||||
Option(
|
||||
weekdayName,
|
||||
i.toString(),
|
||||
i.toString() ==
|
||||
settingsViewModel.firstDayOfWeekInput
|
||||
.value,
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
<span class="icon">arrow_drop_down</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<button
|
||||
class="tile flex-no"
|
||||
on:click={fileTransferViewModel.showDirectionSelectionModal}
|
||||
>
|
||||
<span class="icon">sync_alt</span>
|
||||
<div>
|
||||
<span>{translations.homePage.transferDataButton}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="tile flex-no"
|
||||
on:click={storageViewModel.showStorageModal}
|
||||
>
|
||||
<span class="icon">hard_drive_2</span>
|
||||
<div>
|
||||
<span>{translations.homePage.manageStorageButton}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="mobile-only">
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-row justify-end">
|
||||
<button class="ghost width-50" on:click={scrollToChat}>
|
||||
{translations.homePage.scrollToChatButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
|
||||
<div class="flex-row">
|
||||
<button
|
||||
class="danger flex justify-center"
|
||||
aria-label={translations.homePage.disconnectAudioLabel}
|
||||
on:click={connectionViewModel.disconnect}
|
||||
toggle:disabled={connectionViewModel.cannotDisonnect}
|
||||
>
|
||||
<span class="icon">link_off</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex justify-center"
|
||||
aria-label={translations.homePage.manageConnectionsAudioLabel}
|
||||
on:click={connectionViewModel.showConnectionModal}
|
||||
toggle:disabled={connectionViewModel.hasNoPreviousConnections}
|
||||
>
|
||||
<span class="icon">history</span>
|
||||
</button>
|
||||
<button
|
||||
class="primary flex justify-center"
|
||||
aria-label={translations.homePage.connectAudioLabel}
|
||||
on:click={connectionViewModel.connect}
|
||||
toggle:disabled={connectionViewModel.cannotConnect}
|
||||
>
|
||||
<span class="icon">link</span>
|
||||
</button>
|
||||
</div>
|
||||
const chatSection = (
|
||||
<div id="chat-section">
|
||||
<h2>{translations.homePage.chatsHeadline}</h2>
|
||||
|
||||
<hr></hr>
|
||||
<div class="flex-row width-input">
|
||||
<input
|
||||
placeholder={translations.homePage.addChatPlaceholder}
|
||||
aria-label={translations.homePage.addChatAudioLabel}
|
||||
bind:value={chatListViewModel.newChatPrimaryChannel}
|
||||
on:enter={chatListViewModel.createChat}
|
||||
></input>
|
||||
<button
|
||||
class="primary"
|
||||
aria-label={translations.homePage.addChatButton}
|
||||
on:click={chatListViewModel.createChat}
|
||||
toggle:disabled={chatListViewModel.cannotCreateChat}
|
||||
>
|
||||
<span class="icon">add</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">account_circle</span>
|
||||
<div>
|
||||
<span>{translations.homePage.yourNameLabel}</span>
|
||||
<input
|
||||
placeholder={translations.homePage.yourNamePlaceholder}
|
||||
bind:value={settingsViewModel.usernameInput}
|
||||
on:enter={settingsViewModel.setName}
|
||||
></input>
|
||||
<div
|
||||
id="chat-grid"
|
||||
children:append={[
|
||||
chatListViewModel.chatViewModels,
|
||||
ChatViewModelToChatEntry,
|
||||
]}
|
||||
></div>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex-row justify-end">
|
||||
<button
|
||||
class="width-50"
|
||||
on:click={settingsViewModel.setName}
|
||||
toggle:disabled={settingsViewModel.cannotSetName}
|
||||
aria-label={translations.homePage.setNameButtonAudioLabel}
|
||||
>
|
||||
{translations.general.setButton}
|
||||
<span class="icon">check</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
<hr></hr>
|
||||
// methods
|
||||
function scrollToChat() {
|
||||
chatSection.scrollIntoView();
|
||||
}
|
||||
|
||||
<label class="tile flex-no">
|
||||
<span class="icon">calendar_month</span>
|
||||
<div>
|
||||
<span>{translations.homePage.firstDayOfWeekLabel}</span>
|
||||
<select bind:value={settingsViewModel.firstDayOfWeekInput}>
|
||||
{...translations.regional.weekdays.full.map((weekdayName, i) =>
|
||||
Option(
|
||||
weekdayName,
|
||||
i.toString(),
|
||||
i.toString() == settingsViewModel.firstDayOfWeekInput.value
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
<span class="icon">arrow_drop_down</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<button
|
||||
class="tile flex-no"
|
||||
on:click={fileTransferViewModel.showDirectionSelectionModal}
|
||||
>
|
||||
<span class="icon">sync_alt</span>
|
||||
<div>
|
||||
<span>{translations.homePage.transferDataButton}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button class="tile flex-no" on:click={storageViewModel.showStorageModal}>
|
||||
<span class="icon">hard_drive_2</span>
|
||||
<div>
|
||||
<span>{translations.homePage.manageStorageButton}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="mobile-only">
|
||||
<hr></hr>
|
||||
|
||||
<div class="flex-row justify-end">
|
||||
<button class="ghost width-50" on:click={scrollToChat}>
|
||||
{translations.homePage.scrollToChatButton}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const chatSection = (
|
||||
<div id="chat-section">
|
||||
<h2>{translations.homePage.chatsHeadline}</h2>
|
||||
|
||||
<div class="flex-row width-input">
|
||||
<input
|
||||
placeholder={translations.homePage.addChatPlaceholder}
|
||||
aria-label={translations.homePage.addChatAudioLabel}
|
||||
bind:value={chatListViewModel.newChatPrimaryChannel}
|
||||
on:enter={chatListViewModel.createChat}
|
||||
></input>
|
||||
<button
|
||||
class="primary"
|
||||
aria-label={translations.homePage.addChatButton}
|
||||
on:click={chatListViewModel.createChat}
|
||||
toggle:disabled={chatListViewModel.cannotCreateChat}
|
||||
>
|
||||
<span class="icon">add</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="chat-grid"
|
||||
children:append={[
|
||||
chatListViewModel.chatViewModels,
|
||||
ChatViewModelToChatEntry,
|
||||
]}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// methods
|
||||
function scrollToChat() {
|
||||
chatSection.scrollIntoView();
|
||||
}
|
||||
|
||||
// final
|
||||
return (
|
||||
<article id="home-page">
|
||||
<div>
|
||||
{overviewSection}
|
||||
{chatSection}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
// final
|
||||
return (
|
||||
<article id="home-page">
|
||||
<div>
|
||||
{overviewSection}
|
||||
{chatSection}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user