move name to settings modal
This commit is contained in:
marlon-erler
@@ -1,6 +1,6 @@
|
||||
import ContactListModel from "../../Model/Global/contactListModel";
|
||||
import * as React from "../../react";
|
||||
import SettingsViewModel from "./settingsViewModel";
|
||||
import * as React from "../../react";
|
||||
import ContactListModel from "../../Model/Global/contactListModel";
|
||||
|
||||
export default class ContactListViewModel {
|
||||
// state
|
||||
@@ -8,43 +8,49 @@ export default class ContactListViewModel {
|
||||
|
||||
// main
|
||||
updateContact = (id: string, name: string): ContactViewModel => {
|
||||
if (id == this.settingsViewModel.settingsModel.userid) {
|
||||
this.settingsViewModel.setName(name);
|
||||
}
|
||||
if (id == this.settingsViewModel.settingsModel.userid) {
|
||||
this.settingsViewModel.setName(name);
|
||||
}
|
||||
|
||||
const match = this.contacts.get(id);
|
||||
if (match) {
|
||||
match.name.value = name;
|
||||
return match;
|
||||
}
|
||||
const vm = new ContactViewModel(id, name);
|
||||
this.contacts.set(id, vm);
|
||||
return vm;
|
||||
}
|
||||
const match = this.contacts.get(id);
|
||||
if (match) {
|
||||
match.name.value = name;
|
||||
return match;
|
||||
}
|
||||
const vm = new ContactViewModel(id, name);
|
||||
this.contacts.set(id, vm);
|
||||
return vm;
|
||||
};
|
||||
|
||||
handleContact = (contact: [string, string]): void => {
|
||||
this.updateContact(...contact);
|
||||
}
|
||||
this.updateContact(...contact);
|
||||
};
|
||||
|
||||
unwrapContact = (id: string, knownName: string): ContactViewModel => {
|
||||
if (this.contacts.has(id))
|
||||
return this.contacts.get(id)!
|
||||
return this.updateContact(id, knownName);
|
||||
}
|
||||
if (this.contacts.has(id)) return this.contacts.get(id)!;
|
||||
return this.updateContact(id, knownName);
|
||||
};
|
||||
|
||||
// load
|
||||
loadData = (): void => {
|
||||
const contacts: [string, string][] = this.contactListModel.loadContacts();
|
||||
for (const contact of contacts) {
|
||||
const vm = new ContactViewModel(...contact);
|
||||
this.contacts.set(vm.id, vm);
|
||||
}
|
||||
}
|
||||
|
||||
const contacts: [string, string][] =
|
||||
this.contactListModel.loadContacts();
|
||||
for (const contact of contacts) {
|
||||
const vm = new ContactViewModel(...contact);
|
||||
this.contacts.set(vm.id, vm);
|
||||
}
|
||||
};
|
||||
|
||||
// init
|
||||
constructor(public contactListModel: ContactListModel, public settingsViewModel: SettingsViewModel) {
|
||||
this.loadData();
|
||||
this.contactListModel.contactHandlerManager.setHandler("contact-list-view-model", this.handleContact);
|
||||
constructor(
|
||||
public contactListModel: ContactListModel,
|
||||
public settingsViewModel: SettingsViewModel,
|
||||
) {
|
||||
this.loadData();
|
||||
this.contactListModel.contactHandlerManager.setHandler(
|
||||
"contact-list-view-model",
|
||||
this.handleContact,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,7 +59,10 @@ export class ContactViewModel {
|
||||
name: React.State<string> = new React.State("");
|
||||
|
||||
// init
|
||||
constructor(public id: string, name: string) {
|
||||
this.name.value = name;
|
||||
constructor(
|
||||
public id: string,
|
||||
name: string,
|
||||
) {
|
||||
this.name.value = name;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import CoreViewModel, { Context } from "./coreViewModel";
|
||||
import * as React from "../../react";
|
||||
import { CommonKeys } from "../../View/keystrokes";
|
||||
import SettingsModel, { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
|
||||
import SettingsModel, {
|
||||
Languages,
|
||||
ThemeSettings,
|
||||
} from "../../Model/Global/settingsModel";
|
||||
|
||||
export default class SettingsViewModel extends Context {
|
||||
// state
|
||||
@@ -31,154 +34,158 @@ export default class SettingsViewModel extends Context {
|
||||
|
||||
// methods
|
||||
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();
|
||||
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");
|
||||
constructor(
|
||||
public readonly coreViewModel: CoreViewModel,
|
||||
public readonly settingsModel: SettingsModel,
|
||||
) {
|
||||
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,
|
||||
Account,
|
||||
Regional,
|
||||
Info,
|
||||
}
|
||||
|
||||
export interface DynamicScene {
|
||||
|
||||
Reference in New Issue
Block a user