VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
marlon-erler
2026-09-26 23:32:38 +02:00
parent ce9f6d89f0
commit 9622c196cd
40 changed files with 2866 additions and 2706 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ViewModel/Global/coreViewModel.ts
+103 -93
View File
@@ -9,13 +9,19 @@ import ConnectionModel from "../../Model/Global/connectionModel";
import ChatListModel from "../../Model/Chat/chatListModel";
export default class CoreViewModel {
swRegistration: ServiceWorkerRegistration|undefined = undefined;
swRegistration: ServiceWorkerRegistration | undefined = undefined;
version: React.State<string> = new React.State("");
latestVersion: React.State<string> = new React.State("");
noUpdateAvailable: React.State<boolean> = React.createProxyState([this.latestVersion], () => {
return (this.latestVersion.value == "" || this.latestVersion.value == this.version.value)
})
version: React.State<string> = new React.State("");
latestVersion: React.State<string> = new React.State("");
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;
@@ -82,11 +88,11 @@ export default class CoreViewModel {
};
handleChron = (): void => {
const newDate = new Date();
if (this.unwrappedTodayDate.toDateString() != newDate.toDateString())
this.todayDate.value = new Date();
if (formatTime(newDate) != this.time.value)
this.time.value = formatTime(newDate);
const newDate = new Date();
if (this.unwrappedTodayDate.toDateString() != newDate.toDateString())
this.todayDate.value = new Date();
if (formatTime(newDate) != this.time.value)
this.time.value = formatTime(newDate);
};
// DRAG & DROP
@@ -94,75 +100,79 @@ export default class CoreViewModel {
// OFFLINE MODE & UPDATE
configureServiceWorker = async (): Promise<void> => {
if ("serviceWorker" in navigator) {
try {
this.swRegistration = await navigator.serviceWorker.register(
"sw.js",
{
scope: "/",
},
);
if (this.swRegistration.active) {
console.log("Service worker active");
}
} catch (error) {
console.error(`Could not install service worker: ${error}`);
}
}
}
if ("serviceWorker" in navigator) {
try {
this.swRegistration = await navigator.serviceWorker.register(
"sw.js",
{
scope: "/",
},
);
if (this.swRegistration.active) {
console.log("Service worker active");
}
} catch (error) {
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", "");
})
}
fetch("/version").then(async (response) => {
this.version.value = await response.text();
});
fetch("/latestVersion").then(async (response) => {
this.latestVersion.value = (await response.text()).replace(
"\n",
"",
);
});
};
update = async (): Promise<void> => {
if (!this.swRegistration) return;
await this.swRegistration.update();
setTimeout(()=>{
window.location.reload();
}, 500);
}
if (!this.swRegistration) return;
await this.swRegistration.update();
setTimeout(() => {
window.location.reload();
}, 500);
};
// init
constructor(
public readonly storageModel: StorageModel,
public readonly settingsModel: SettingsModel,
public readonly connectionModel: ConnectionModel,
public readonly chatListModel: ChatListModel,
public readonly fileTransferModel: FileTransferModel,
public readonly storageModel: StorageModel,
public readonly settingsModel: SettingsModel,
public readonly connectionModel: ConnectionModel,
public readonly chatListModel: ChatListModel,
public readonly fileTransferModel: FileTransferModel,
) {
this.translations =
allTranslations[settingsModel.language] || allTranslations.en;
this.translations =
allTranslations[settingsModel.language] || allTranslations.en;
this.latestVersion.subscribe(latestVersion => {
this.updateText.value = this.translations.homePage.updateButton(latestVersion);
});
this.latestVersion.subscribe((latestVersion) => {
this.updateText.value =
this.translations.homePage.updateButton(latestVersion);
});
document.body.addEventListener("keydown", this.handleKeyDown);
document.body.addEventListener("keydown", this.handleKeyDown);
window.onpopstate = () => {
if (!this.context) return;
this.closeContext(this.context.contextId, true);
};
window.onpopstate = () => {
if (!this.context) return;
this.closeContext(this.context.contextId, true);
};
this.configureServiceWorker();
this.checkUpdates();
this.configureServiceWorker();
this.checkUpdates();
this.startChron();
this.chronHandlerManager.setHandler(
"core-view-model",
this.handleChron,
);
this.startChron();
this.chronHandlerManager.setHandler(
"core-view-model",
this.handleChron,
);
}
// util
static checkIsKeystroke(e: KeyboardEvent): boolean {
return (e.metaKey || e.altKey) && e.ctrlKey;
return (e.metaKey || e.altKey) && e.ctrlKey;
}
}
@@ -171,19 +181,19 @@ export class Context {
keystrokes = new Map<string, () => void>();
handleKeystroke = (e: KeyboardEvent): boolean => {
const fn: (() => void) | undefined = this.keystrokes.get(
e.key.toLowerCase(),
);
if (!fn) return false;
fn();
return true;
const fn: (() => void) | undefined = this.keystrokes.get(
e.key.toLowerCase(),
);
if (!fn) return false;
fn();
return true;
};
close = (): void => {};
handleContextClose = (fromHistoryEvent: boolean): void => {};
registerKeyStroke = (key: string, fn: () => void): void => {
this.keystrokes.set(key, fn);
this.keystrokes.set(key, fn);
};
constructor(public contextDebugDescription: string) {}
@@ -194,45 +204,45 @@ export class ContextHost<T> extends Context {
currentContext = new React.State<Context | undefined>(undefined);
get isOpen(): boolean {
return false;
return false;
}
get contextSelection(): T | undefined {
return undefined;
return undefined;
}
registerContext = (key: T, context: Context): void => {
this.contexts.set(key, context);
this.contexts.set(key, context);
};
closeCurrentContext = (): void => {
if (this.currentContext.value) {
this.coreViewModel.closeContext(
this.currentContext.value.contextId,
);
}
this.currentContext.value = undefined;
if (this.currentContext.value) {
this.coreViewModel.closeContext(
this.currentContext.value.contextId,
);
}
this.currentContext.value = undefined;
};
updateContexts = (): void => {
if (this.isOpen == false) return;
if (this.isOpen == false) return;
const selection = this.contextSelection;
if (!selection) return;
const selectedContext: Context | undefined =
this.contexts.get(selection);
if (!selectedContext) return;
if (selectedContext != this.currentContext.value) {
this.closeCurrentContext();
}
const selection = this.contextSelection;
if (!selection) return;
const selectedContext: Context | undefined =
this.contexts.get(selection);
if (!selectedContext) return;
if (selectedContext != this.currentContext.value) {
this.closeCurrentContext();
}
this.coreViewModel.context = selectedContext;
this.currentContext.value = selectedContext;
this.coreViewModel.context = selectedContext;
this.currentContext.value = selectedContext;
};
constructor(
contextDebugDescription: string,
public coreViewModel: CoreViewModel,
contextDebugDescription: string,
public coreViewModel: CoreViewModel,
) {
super(contextDebugDescription);
super(contextDebugDescription);
}
}
src/ViewModel/Global/fileTransferViewModel.ts
+2 -2
View File
@@ -1,13 +1,13 @@
import CoreViewModel, { Context } from "./coreViewModel";
import * as React from "../../react";
import { CommonKeys } from "../../View/keystrokes";
import { formatISO } from "../../Model/Utility/utility";
import StorageModel, {
StorageModelSubPaths,
filePaths,
} from "../../Model/Global/storageModel";
import { TransferData } from "../../Model/Global/fileTransferModel";
import ChatModel from "../../Model/Chat/chatModel";
import {formatISO} from "../../Model/Utility/utility";
export default class FileTransferViewModel extends Context {
// state
@@ -143,7 +143,7 @@ export default class FileTransferViewModel extends Context {
downloadFile = async (): Promise<void> => {
if (this.cannotExport.value == true) return;
const date = formatISO(new Date());
const date = formatISO(new Date());
const backup: Blob =
await this.coreViewModel.fileTransferModel.generateBackup(
src/ViewModel/Global/notificationViewModel.ts
+6 -11
View File
@@ -16,11 +16,9 @@ export default class NotificationViewModel {
if (this.seenMessageIds.has(message.id)) return;
if (this.chatListViewModel.selectedChat.value == undefined) return;
const notification: Notification =
this.createNotification(message);
const notification: Notification = this.createNotification(message);
const currentChat =
this.chatListViewModel.selectedChat.value.chatModel
.id;
this.chatListViewModel.selectedChat.value.chatModel.id;
const currentPage =
this.chatListViewModel.selectedChat.value.selectedPage.value;
if (
@@ -39,10 +37,7 @@ export default class NotificationViewModel {
const chat = [
...this.chatListViewModel.chatViewModels.value.values(),
].find(
(chat) =>
chat.chatModel.id == notification.fullChannel,
);
].find((chat) => chat.chatModel.id == notification.fullChannel);
if (!chat) return;
chat.open();
chat.openPage(ChatPageTypes.Messages);
@@ -86,12 +81,12 @@ export default class NotificationViewModel {
// util
createNotification(message: ChatMessage): Notification {
const fullChannel = ChatModel.splitChannel(message.channel)[0];
const chat = this.chatListViewModel.getDisplayName(fullChannel);
const fullChannel = ChatModel.splitChannel(message.channel)[0];
const chat = this.chatListViewModel.getDisplayName(fullChannel);
return {
messageId: message.id,
chat,
fullChannel,
fullChannel,
sender: message.sender,
body: message.body,
};
src/ViewModel/Global/settingsViewModel.ts
+87 -87
View File
@@ -53,129 +53,129 @@ export default class SettingsViewModel extends Context {
// view
applyTheme = (): void => {
let theme: string = this.theme.value;
if (theme == ThemeSettings.System)
theme = SettingsViewModel.getSystemTheme();
let theme: string = this.theme.value;
switch (theme) {
case ThemeSettings.Dynamic:
const scene = this.selectDynamicScene();
this.setScene(scene);
break;
case ThemeSettings.Dark:
this.setScene(DynamicSceneNight);
break;
case ThemeSettings.Black:
this.setScene(DynamicSceneBlack);
break;
default:
this.setScene(DynamicSceneDay);
}
if (theme == ThemeSettings.System)
theme = SettingsViewModel.getSystemTheme();
switch (theme) {
case ThemeSettings.Dynamic:
const scene = this.selectDynamicScene();
this.setScene(scene);
break;
case ThemeSettings.Dark:
this.setScene(DynamicSceneNight);
break;
case ThemeSettings.Black:
this.setScene(DynamicSceneBlack);
break;
default:
this.setScene(DynamicSceneDay);
}
};
selectDynamicScene = (): DynamicScene => {
let hour = new Date().getHours();
let hour = new Date().getHours();
if (hour >= 21 || hour <= 6) {
return DynamicSceneNight;
} else if (hour > 6 && hour < 10) {
return DynamicSceneSunrise;
} else if (hour < 14) {
return DynamicSceneDay;
} else if (hour < 17) {
return DynamicSceneAfternoon;
} else {
return DynamicSceneSunset;
}
if (hour >= 21 || hour <= 6) {
return DynamicSceneNight;
} else if (hour > 6 && hour < 10) {
return DynamicSceneSunrise;
} else if (hour < 14) {
return DynamicSceneDay;
} else if (hour < 17) {
return DynamicSceneAfternoon;
} else {
return DynamicSceneSunset;
}
};
setScene = (scene: DynamicScene): void => {
document.body.style.setProperty(
"--backdrop-grass-filter",
`brightness(${scene.brightness})`,
);
document.body.style.setProperty(
"--backdrop-grass-filter",
`brightness(${scene.brightness})`,
);
function setSkyColor(
tone: 1 | 2,
hue: number,
saturation: number,
luma: number,
) {
document.body.style.setProperty(
`--sky-${tone}`,
`hsl(${hue}, ${saturation}%, ${luma}%)`,
);
}
setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10);
function setSkyColor(
tone: 1 | 2,
hue: number,
saturation: number,
luma: number,
) {
document.body.style.setProperty(
`--sky-${tone}`,
`hsl(${hue}, ${saturation}%, ${luma}%)`,
);
}
setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10);
document.body.setAttribute("theme", scene.baseTheme);
document.body.setAttribute("theme", scene.baseTheme);
};
// exit
close = (): void => {
this.coreViewModel.closeContext(this.contextId);
this.coreViewModel.closeContext(this.contextId);
};
handleContextClose = (): void => {
this.isShowingSettingsModal.value = false;
if (this.requiresReload.value == true) {
window.location.reload();
}
this.isShowingSettingsModal.value = false;
if (this.requiresReload.value == true) {
window.location.reload();
}
};
// init
constructor(public readonly coreViewModel: CoreViewModel) {
super("settings");
super("settings");
this.username.value = coreViewModel.settingsModel.username;
this.usernameInput.value = coreViewModel.settingsModel.username;
this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
this.language.value = coreViewModel.settingsModel.language;
this.theme.value = coreViewModel.settingsModel.theme;
this.username.value = coreViewModel.settingsModel.username;
this.usernameInput.value = coreViewModel.settingsModel.username;
this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
this.language.value = coreViewModel.settingsModel.language;
this.theme.value = coreViewModel.settingsModel.theme;
// subscriptions
this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
this.language.subscribeSilent((newValue) => {
this.coreViewModel.settingsModel.setLanguage(newValue);
this.requiresReload.value = true;
});
this.theme.subscribeSilent((newValue) => {
this.coreViewModel.settingsModel.setTheme(newValue);
});
// subscriptions
this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
this.language.subscribeSilent((newValue) => {
this.coreViewModel.settingsModel.setLanguage(newValue);
this.requiresReload.value = true;
});
this.theme.subscribeSilent((newValue) => {
this.coreViewModel.settingsModel.setTheme(newValue);
});
// set theme
this.theme.subscribe(() => {
this.applyTheme();
});
SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
this.applyTheme(),
);
const seconds = new Date().getSeconds();
const secondsUntilNewMinute = 60 - seconds;
setTimeout(() => {
setInterval(this.applyTheme, 1000 * 60);
}, secondsUntilNewMinute);
// set theme
this.theme.subscribe(() => {
this.applyTheme();
});
SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
this.applyTheme(),
);
const seconds = new Date().getSeconds();
const secondsUntilNewMinute = 60 - seconds;
setTimeout(() => {
setInterval(this.applyTheme, 1000 * 60);
}, secondsUntilNewMinute);
// keystrokes
this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
// keystrokes
this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
}
static generateThemeMedia(): MediaQueryList {
return window.matchMedia("(prefers-color-scheme: dark)");
return window.matchMedia("(prefers-color-scheme: dark)");
}
static getSystemTheme(): string {
const media = SettingsViewModel.generateThemeMedia();
return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
const media = SettingsViewModel.generateThemeMedia();
return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
}
}
export enum SettingsModalPages {
Appearance,
Regional,
Info,
Regional,
Info,
}
export interface DynamicScene {
src/ViewModel/Global/storageViewModel.ts
+6 -4
View File
@@ -50,15 +50,17 @@ export default class StorageViewModel extends Context {
};
calculateUsage = (): void => {
this.occupiedSpaceMB.value = this.coreViewModel.storageModel.calculateUsage();
this.maximumSpaceMB.value = this.coreViewModel.storageModel.determineCapacity();
}
this.occupiedSpaceMB.value =
this.coreViewModel.storageModel.calculateUsage();
this.maximumSpaceMB.value =
this.coreViewModel.storageModel.determineCapacity();
};
// view
showStorageModal = (): void => {
this.coreViewModel.context = this;
this.isShowingStorageModal.value = true;
this.calculateUsage();
this.calculateUsage();
};
// exit