add button to check for updates

src/View/ChatPages/boardKanbanPage.tsx

@@ -10,7 +10,6 @@ import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPro
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
-import * as Utility from "../../Model/Utility/utility";
 
 export function BoardKanbanPage(
     coreViewModel: CoreViewModel,

src/View/Modals/settingsModal.tsx

@@ -124,8 +124,26 @@ function SettingsInfoPane(
                     coreViewModel.translations.settings.version,
                     settingsViewModel.coreViewModel.version,
                 )}
-            </div>
-        </div>
+
+		<button
+		    class="primary"
+		    on:click={coreViewModel.update}
+		    toggle:hidden={coreViewModel.noUpdateAvailable}
+		>
+		    <span
+			subscribe:innerText={coreViewModel.updateText}
+		    ></span>
+		    <span class="icon">update</span>
+		</button>
+
+		<button
+		    class="standard"
+		    on:click={coreViewModel.checkUpdates}
+		>
+		    {coreViewModel.translations.settings.checkUpdatesButton}
+		</button>
+	    </div>
+	</div>
     );
 }
 
@@ -134,30 +152,30 @@ function SettingsRegionalPane(
     settingsViewModel: SettingsViewModel,
 ) {
     return (
-        <div class="slide-up">
-            <h2>{coreViewModel.translations.settings.pages.regional}</h2>
+	<div class="slide-up">
+	    <h2>{coreViewModel.translations.settings.pages.regional}</h2>
 
-            <hr></hr>
-            <h3>{coreViewModel.translations.settings.language}</h3>
-            {OptionButtonList(
-                new React.ListState<[string, string]>(
-                    Object.values(Languages).map((x) => [languageNames[x], x]),
-                ),
-                settingsViewModel.language,
-            )}
+	    <hr></hr>
+	    <h3>{coreViewModel.translations.settings.language}</h3>
+	{OptionButtonList(
+	    new React.ListState<[string, string]>(
+		Object.values(Languages).map((x) => [languageNames[x], x]),
+	    ),
+	    settingsViewModel.language,
+	)}
 
-            <hr></hr>
-            <h3>{coreViewModel.translations.settings.firstDayOfWeekLabel}</h3>
-            {OptionButtonList(
-                new React.ListState<[string, string]>(
-                    coreViewModel.translations.regional.weekdays.full.map(
-                        (x, i) => [x, i.toString()],
-                    ),
-                ),
-                settingsViewModel.firstDayOfWeek,
-            )}
-        </div>
-    );
+	<hr></hr>
+	<h3>{coreViewModel.translations.settings.firstDayOfWeekLabel}</h3>
+	{OptionButtonList(
+	    new React.ListState<[string, string]>(
+		coreViewModel.translations.regional.weekdays.full.map(
+		    (x, i) => [x, i.toString()],
+		),
+	    ),
+	    settingsViewModel.firstDayOfWeek,
+	)}
+    </div>
+);
 }
 
 function SettingsAppearancePane(
@@ -165,30 +183,30 @@ function SettingsAppearancePane(
     settingsViewModel: SettingsViewModel,
 ) {
     return (
-        <div class="slide-up">
-            <h2>{coreViewModel.translations.settings.pages.appearance}</h2>
-            <hr></hr>
-            {OptionButtonList(
-                new React.ListState<[string, string]>([
-                    [
-                        coreViewModel.translations.settings.themes.dynamic,
-                        ThemeSettings.Dynamic,
-                    ],
-                    [
-                        coreViewModel.translations.settings.themes.dark,
-                        ThemeSettings.Dark,
-                    ],
-                    [
-                        coreViewModel.translations.settings.themes.light,
-                        ThemeSettings.Light,
-                    ],
-                    [
-                        coreViewModel.translations.settings.themes.system,
-                        ThemeSettings.System,
-                    ],
-                ]),
-                settingsViewModel.theme,
-            )}
-        </div>
-    );
+	<div class="slide-up">
+	    <h2>{coreViewModel.translations.settings.pages.appearance}</h2>
+	    <hr></hr>
+	{OptionButtonList(
+	    new React.ListState<[string, string]>([
+		[
+		    coreViewModel.translations.settings.themes.dynamic,
+		    ThemeSettings.Dynamic,
+		],
+		[
+		    coreViewModel.translations.settings.themes.dark,
+		    ThemeSettings.Dark,
+		],
+		[
+		    coreViewModel.translations.settings.themes.light,
+		    ThemeSettings.Light,
+		],
+		[
+		    coreViewModel.translations.settings.themes.system,
+		    ThemeSettings.System,
+		],
+	    ]),
+	    settingsViewModel.theme,
+	)}
+    </div>
+);
 }

src/View/homePage.tsx

@@ -19,8 +19,6 @@ export function HomePage(
     chatListViewModel: ChatListViewModel,
 ) {
     // sections
-    const updateText = React.createProxyState([coreViewModel.latestVersion], ()=>coreViewModel.translations.homePage.updateButton(coreViewModel.latestVersion.value));
-
     const overviewSection = (
 	<div id="overview-section">
 	    <h2>{coreViewModel.translations.homePage.overviewHeadline}</h2>
@@ -144,7 +142,7 @@ export function HomePage(
 	    toggle:hidden={coreViewModel.noUpdateAvailable}
 	>
 	    <span
-		subscribe:innerText={updateText}
+		subscribe:innerText={coreViewModel.updateText}
 	    ></span>
 	    <span class="icon">update</span>
 	</button>

src/View/translations.ts

@@ -104,6 +104,8 @@ const englishTranslations = {
 	language: "Language",
 
 	firstDayOfWeekLabel: "First day of week",
+
+	checkUpdatesButton: "Check for updates",
     },
 
     connectionModal: {
@@ -446,6 +448,8 @@ export const allTranslations: {
 	    language: "Sprache",
 
 	    firstDayOfWeekLabel: "Erster Wochentag",
+
+	    checkUpdatesButton: "Nach updates suchen",
 	},
 
 	connectionModal: {
@@ -756,6 +760,8 @@ export const allTranslations: {
 	    language: "Idioma",
 
 	    firstDayOfWeekLabel: "Primer día de la semana",
+
+	    checkUpdatesButton: "Buscar actualizaciones",
 	},
 	connectionModal: {
 	    connectionModalHeadline: "Gestionar Conexiones",

src/ViewModel/Global/coreViewModel.ts

@@ -16,6 +16,7 @@ export default class CoreViewModel {
     noUpdateAvailable: React.State<boolean> = React.createProxyState([this.latestVersion], () => {
 	return (this.latestVersion.value == "" || this.latestVersion.value == this.version.value) 
     })
+    updateText: React.State<string> = new React.State("");
 
     translations: Translations;
 
@@ -107,13 +108,14 @@ export default class CoreViewModel {
 		console.error(`Could not install service worker: ${error}`);
 	    }
 	}
-	
+    }
+
+    checkUpdates = (): void => {
 	fetch("/version").then(async response => {
 	    this.version.value = await response.text();
 	});
 	fetch("/latestVersion").then(async response => {
 	    this.latestVersion.value = (await response.text()).replace("\n", "");
-	    console.log("LATEST", this.latestVersion.value);
 	})
     }
 
@@ -134,6 +136,10 @@ export default class CoreViewModel {
 	this.translations =
 	    allTranslations[settingsModel.language] || allTranslations.en;
 
+	this.latestVersion.subscribe(latestVersion => {
+	    this.updateText.value = this.translations.homePage.updateButton(latestVersion);
+	});
+
 	document.body.addEventListener("keydown", this.handleKeyDown);
 
 	window.onpopstate = () => {
@@ -142,6 +148,7 @@ export default class CoreViewModel {
 	};
 
 	this.configureServiceWorker();
+	this.checkUpdates();
 	this.noUpdateAvailable.subscribe(() => {
 	    console.log(this.noUpdateAvailable.value, this.latestVersion.value, this.version.value);
 	})