add method for filtering
This commit is contained in:
marlon-erler
@@ -1,5 +1,5 @@
|
||||
import * as React from "../../react";
|
||||
import CoreViewModel, { Context } from "./coreViewModel";
|
||||
import * as React from "../../react";
|
||||
import { CommonKeys } from "../../View/keystrokes";
|
||||
import { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
|
||||
|
||||
@@ -13,12 +13,12 @@ export default class SettingsViewModel extends Context {
|
||||
requiresReload = new React.State<boolean>(false);
|
||||
|
||||
firstDayOfWeek: React.State<string> = new React.State("0");
|
||||
language: React.State<Languages | string> = new React.State<Languages | string>(
|
||||
Languages.English,
|
||||
);
|
||||
theme: React.State<ThemeSettings | string> = new React.State<ThemeSettings | string>(
|
||||
ThemeSettings.System,
|
||||
);
|
||||
language: React.State<Languages | string> = new React.State<
|
||||
Languages | string
|
||||
>(Languages.English);
|
||||
theme: React.State<ThemeSettings | string> = new React.State<
|
||||
ThemeSettings | string
|
||||
>(ThemeSettings.System);
|
||||
|
||||
// guards
|
||||
cannotSetName: React.State<boolean> = React.createProxyState(
|
||||
@@ -48,121 +48,132 @@ export default class SettingsViewModel extends Context {
|
||||
};
|
||||
|
||||
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.Dynamic) {
|
||||
const scene = this.selectDynamicScene();
|
||||
this.setScene(scene);
|
||||
return;
|
||||
}
|
||||
if (theme == ThemeSettings.Dynamic) {
|
||||
const scene = this.selectDynamicScene();
|
||||
this.setScene(scene);
|
||||
return;
|
||||
}
|
||||
|
||||
if (theme == ThemeSettings.System) {
|
||||
theme = SettingsViewModel.getSystemTheme();
|
||||
}
|
||||
if (theme == ThemeSettings.System) {
|
||||
theme = SettingsViewModel.getSystemTheme();
|
||||
}
|
||||
|
||||
if (theme == ThemeSettings.Dark) {
|
||||
this.setScene(DynamicSceneNight);
|
||||
} else {
|
||||
this.setScene(DynamicSceneDay);
|
||||
}
|
||||
if (theme == ThemeSettings.Dark) {
|
||||
this.setScene(DynamicSceneNight);
|
||||
} else {
|
||||
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 {
|
||||
@@ -176,40 +187,40 @@ export interface DynamicScene {
|
||||
export const DynamicSceneNight: DynamicScene = {
|
||||
hue1: 215,
|
||||
hue2: 220,
|
||||
saturation : 50,
|
||||
saturation: 50,
|
||||
luma: 25,
|
||||
brightness: 0.4,
|
||||
baseTheme: ThemeSettings.Dark,
|
||||
}
|
||||
};
|
||||
export const DynamicSceneSunrise: DynamicScene = {
|
||||
hue1: 45,
|
||||
hue2: 190,
|
||||
saturation : 100,
|
||||
saturation: 100,
|
||||
luma: 50,
|
||||
brightness: 1.2,
|
||||
baseTheme: ThemeSettings.Light,
|
||||
}
|
||||
};
|
||||
export const DynamicSceneDay: DynamicScene = {
|
||||
hue1: 190,
|
||||
hue2: 180,
|
||||
saturation : 100,
|
||||
saturation: 100,
|
||||
luma: 70,
|
||||
brightness: 1.4,
|
||||
baseTheme: ThemeSettings.Light,
|
||||
}
|
||||
};
|
||||
export const DynamicSceneAfternoon: DynamicScene = {
|
||||
hue1: 195,
|
||||
hue2: 220,
|
||||
saturation : 100,
|
||||
saturation: 100,
|
||||
luma: 50,
|
||||
brightness: 0.8,
|
||||
baseTheme: ThemeSettings.Light,
|
||||
}
|
||||
};
|
||||
export const DynamicSceneSunset: DynamicScene = {
|
||||
hue1: 20,
|
||||
hue2: 260,
|
||||
saturation : 100,
|
||||
saturation: 100,
|
||||
luma: 50,
|
||||
brightness: 0.4,
|
||||
baseTheme: ThemeSettings.Dark,
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user