Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improve vue app lifecycle

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-11-04 15:58:31 +00:00
parent 4654032fa0
commit bd0c4e4abd
4 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/App.vue
View file

@ -51,10 +51,6 @@ import UserView from "./components/UserView.vue";
}) })
export default class extends Vue { export default class extends Vue {
public readonly store = advent22Store(); public readonly store = advent22Store();
public mounted(): void {
this.store.init();
}
} }
</script> </script>

4
ui/src/main.ts
View file

@ -1,5 +1,6 @@
import { Advent22Plugin } from "@/plugins/advent22"; import { Advent22Plugin } from "@/plugins/advent22";
import { FontAwesomePlugin } from "@/plugins/fontawesome"; import { FontAwesomePlugin } from "@/plugins/fontawesome";
import { advent22Store } from "@/plugins/store";
import { createPinia } from "pinia"; import { createPinia } from "pinia";
import { createApp } from "vue"; import { createApp } from "vue";
import App from "./App.vue"; import App from "./App.vue";
@ -11,4 +12,7 @@ app.use(Advent22Plugin);
app.use(FontAwesomePlugin); app.use(FontAwesomePlugin);
app.use(createPinia()); app.use(createPinia());
const store = advent22Store();
store.init(app.config.globalProperties.$advent22);
app.mount("#app"); app.mount("#app");

4
ui/src/plugins/advent22.ts
View file

@ -156,10 +156,8 @@ export class Advent22 {
} }
} }
export const ADVENT22 = new Advent22();
export const Advent22Plugin: Plugin = { export const Advent22Plugin: Plugin = {
install(app: App) { install(app: App) {
app.config.globalProperties.$advent22 = ADVENT22; app.config.globalProperties.$advent22 = new Advent22();
}, },
}; };

21
ui/src/plugins/store.ts
View file

@ -1,5 +1,5 @@
import { Credentials, DoorsSaved, SiteConfigModel } from "@/lib/api"; import { Credentials, DoorsSaved, SiteConfigModel } from "@/lib/api";
import { ADVENT22 } from "@/plugins/advent22"; import { Advent22 } from "@/plugins/advent22";
import { AxiosBasicCredentials } from "axios"; import { AxiosBasicCredentials } from "axios";
import { acceptHMRUpdate, defineStore } from "pinia"; import { acceptHMRUpdate, defineStore } from "pinia";
@ -10,6 +10,7 @@ export const advent22Store = defineStore({
id: "advent22", id: "advent22",
state: () => ({ state: () => ({
advent22: {} as Advent22,
api_creds: empty_creds(), api_creds: empty_creds(),
is_touch_device: check_touch_device(), is_touch_device: check_touch_device(),
is_admin: false, is_admin: false,
@ -31,8 +32,11 @@ export const advent22Store = defineStore({
}, },
actions: { actions: {
init(): void { init(advent22: Advent22): void {
ADVENT22.api_get_blob("user/favicon") this.advent22 = advent22;
advent22
.api_get_blob("user/favicon")
.then((favicon_src) => { .then((favicon_src) => {
const link: HTMLLinkElement = const link: HTMLLinkElement =
document.querySelector("link[rel*='icon']") || document.querySelector("link[rel*='icon']") ||
@ -47,9 +51,9 @@ export const advent22Store = defineStore({
.catch(() => {}); .catch(() => {});
Promise.all([ Promise.all([
ADVENT22.api_get<SiteConfigModel>("user/site_config"), advent22.api_get<SiteConfigModel>("user/site_config"),
ADVENT22.api_get<DoorsSaved>("user/doors"), advent22.api_get<DoorsSaved>("user/doors"),
ADVENT22.api_get<number | null>("user/next_door"), advent22.api_get<number | null>("user/next_door"),
]) ])
.then(([site_config, user_doors, next_door]) => { .then(([site_config, user_doors, next_door]) => {
document.title = site_config.title; document.title = site_config.title;
@ -63,14 +67,15 @@ export const advent22Store = defineStore({
if (next_door !== null) if (next_door !== null)
this.next_door_target = Date.now() + next_door; this.next_door_target = Date.now() + next_door;
}) })
.catch(ADVENT22.alert_user_error); .catch(advent22.alert_user_error);
}, },
login(creds: Credentials = empty_creds()): Promise<boolean> { login(creds: Credentials = empty_creds()): Promise<boolean> {
this.api_creds = creds; this.api_creds = creds;
return new Promise<boolean>((resolve, reject) => { return new Promise<boolean>((resolve, reject) => {
ADVENT22.api_get<boolean>("admin/is_admin") this.advent22
.api_get<boolean>("admin/is_admin")
.then((is_admin) => { .then((is_admin) => {
this.is_admin = is_admin; this.is_admin = is_admin;
resolve(is_admin); resolve(is_admin);