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

update name setting when own contact changes

Browse Source
This commit is contained in:
marlon-erler
2026-09-28 15:07:02 +02:00
parent f4daca315c
commit 0afbfc2d0b
6 changed files with 309 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Model/Global/contactListModel.ts
+6 -2
View File
@@ -1,4 +1,5 @@
import {HandlerManager} from "../Utility/utility";
import SettingsModel from "./settingsModel";
import StorageModel, {StorageModelSubPaths} from "./storageModel";
export default class ContactListModel {
@@ -11,14 +12,17 @@ export default class ContactListModel {
loadContacts = (): [string, string][] => {
const contactIds: string[] = this.storageModel.list([StorageModelSubPaths.ContactsModel]);
const contacts: [string, string][] = contactIds.map(id => [id, this.storageModel.read(this.getContactPath(id)) ?? "?"]);
contacts.push([this.settingsModel.userid, this.settingsModel.username]);
return contacts;
}
storeContact = (id: string, name: string) => {
this.contactHandlerManager.trigger([id, name]);
if (id == this.settingsModel.userid) return;
const path = this.getContactPath(id);
this.storageModel.write(path, name)
this.contactHandlerManager.trigger([id, name]);
}
constructor(public storageModel: StorageModel) {}
constructor(public storageModel: StorageModel, public settingsModel: SettingsModel) {}
}
src/Model/Global/settingsModel.ts
+1 -3
View File
@@ -1,6 +1,5 @@
import StorageModel, { StorageModelSubPaths, filePaths } from "./storageModel";
import { UUID } from "../../react";
import ContactListModel from "./contactListModel";
export default class SettingsModel {
// data
@@ -30,7 +29,6 @@ export default class SettingsModel {
readonly setName = (newValue: string): void => {
this.username = newValue;
this.storeSetting("username", newValue);
this.contactListModel.storeContact(this.userid,newValue);
};
readonly setFirstDayOfWeek = (newValue: string): void => {
@@ -87,7 +85,7 @@ export default class SettingsModel {
};
// init
constructor(public storageModel: StorageModel, public contactListModel: ContactListModel) {
constructor(public storageModel: StorageModel) {
this.loadId();
this.loadUsername();
this.loadFirstDayofWeek();
src/ViewModel/Global/contactViewModel.ts
+6 -1
View File
@@ -1,5 +1,6 @@
import ContactListModel from "../../Model/Global/contactListModel";
import * as React from "../../react";
import SettingsViewModel from "./settingsViewModel";
export default class ContactListViewModel {
// state
@@ -7,6 +8,10 @@ export default class ContactListViewModel {
// main
updateContact = (id: string, name: string): ContactViewModel => {
if (id == this.settingsViewModel.settingsModel.userid) {
this.settingsViewModel.setName(name);
}
const match = this.contacts.get(id);
if (match) {
match.name.value = name;
@@ -37,7 +42,7 @@ export default class ContactListViewModel {
}
// init
constructor(public contactListModel: ContactListModel) {
constructor(public contactListModel: ContactListModel, public settingsViewModel: SettingsViewModel) {
this.loadData();
this.contactListModel.contactHandlerManager.setHandler("contact-list-view-model", this.handleContact);
}
src/ViewModel/Global/settingsViewModel.ts
+99 -96
View File
@@ -30,152 +30,155 @@ export default class SettingsViewModel extends Context {
);
// methods
setName = (): void => {
this.coreViewModel.settingsModel.setName(this.usernameInput.value);
this.username.value = this.coreViewModel.settingsModel.username;
this.usernameInput.callSubscriptions();
setName = (name?: string): void => {
if (typeof name == "string") {
this.usernameInput.value = name;
}
this.coreViewModel.settingsModel.setName(this.usernameInput.value);
this.username.value = this.coreViewModel.settingsModel.username;
this.usernameInput.callSubscriptions();
};
setFirstDayofWeek = (): void => {
this.coreViewModel.settingsModel.setFirstDayOfWeek(
this.firstDayOfWeek.value,
);
this.coreViewModel.settingsModel.setFirstDayOfWeek(
this.firstDayOfWeek.value,
);
};
showSettingsModal = (): void => {
this.coreViewModel.context = this;
this.isShowingSettingsModal.value = true;
this.coreViewModel.context = this;
this.isShowingSettingsModal.value = true;
};
showModalPage = (page: SettingsModalPages): void => {
this.selectedModalPage.value = page;
this.selectedModalPage.value = page;
};
// view
applyTheme = (): void => {
let theme: string = this.theme.value;
let theme: string = this.theme.value;
if (theme == ThemeSettings.System)
theme = SettingsViewModel.getSystemTheme();
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);
}
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, public readonly settingsModel: SettingsModel) {
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/index.tsx
+3 -3
View File
@@ -25,8 +25,8 @@ import ContactListViewModel from "./ViewModel/Global/contactViewModel";
// models
const storageModel = new StorageModel();
const contactListModel = new ContactListModel(storageModel);
const settingsModel = new SettingsModel(storageModel, contactListModel);
const settingsModel = new SettingsModel(storageModel);
const contactListModel = new ContactListModel(storageModel, settingsModel);
const connectionModel = new ConnectionModel(storageModel);
const chatListModel = new ChatListModel(
storageModel,
@@ -46,8 +46,8 @@ const coreViewModel = new CoreViewModel(
);
const storageViewModel = new StorageViewModel(coreViewModel);
const contactListViewModel = new ContactListViewModel(contactListModel);
const settingsViewModel = new SettingsViewModel(coreViewModel, settingsModel);
const contactListViewModel = new ContactListViewModel(contactListModel, settingsViewModel);
const connectionViewModel = new ConnectionViewModel(coreViewModel);
const chatListViewModel = new ChatListViewModel(
coreViewModel,