Make sure config and version are loaded before app runs to avoid null checks.
This commit is contained in:
parent
0bbb2113e9
commit
dcfaae7955
10 changed files with 38 additions and 31 deletions
|
@ -19,7 +19,7 @@ interface Props {
|
||||||
const props = defineProps<Props>();
|
const props = defineProps<Props>();
|
||||||
const nodeStore = useNodeStore();
|
const nodeStore = useNodeStore();
|
||||||
const configStore = useConfigStore();
|
const configStore = useConfigStore();
|
||||||
const email = computed(() => configStore.getConfig?.community.contactEmail);
|
const email = computed(() => configStore.getConfig.community.contactEmail);
|
||||||
|
|
||||||
const errorDeletingNode = ref<boolean>(false);
|
const errorDeletingNode = ref<boolean>(false);
|
||||||
|
|
||||||
|
@ -70,7 +70,7 @@ async function onAbort() {
|
||||||
Beim Löschen des Knotens ist ein Fehler aufgetreten. Bitte probiere
|
Beim Löschen des Knotens ist ein Fehler aufgetreten. Bitte probiere
|
||||||
es später nochmal. Sollte dieses Problem weiter bestehen, so wende
|
es später nochmal. Sollte dieses Problem weiter bestehen, so wende
|
||||||
dich bitte per E-Mail an
|
dich bitte per E-Mail an
|
||||||
<a v-if="email" :href="`mailto:${email}`">{{ email }}</a
|
<a :href="`mailto:${email}`">{{ email }}</a
|
||||||
>.
|
>.
|
||||||
</ErrorCard>
|
</ErrorCard>
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@ import RouteButton from "@/components/form/RouteButton.vue";
|
||||||
import { ApiError } from "@/utils/Api";
|
import { ApiError } from "@/utils/Api";
|
||||||
|
|
||||||
const configStore = useConfigStore();
|
const configStore = useConfigStore();
|
||||||
const email = computed(() => configStore.getConfig?.community.contactEmail);
|
const email = computed(() => configStore.getConfig.community.contactEmail);
|
||||||
|
|
||||||
const nodeStore = useNodeStore();
|
const nodeStore = useNodeStore();
|
||||||
|
|
||||||
|
@ -67,7 +67,7 @@ async function onSubmit() {
|
||||||
<strong>
|
<strong>
|
||||||
Solltest Du den Token nicht mehr haben, wende Dich einfach
|
Solltest Du den Token nicht mehr haben, wende Dich einfach
|
||||||
per E-Mail an
|
per E-Mail an
|
||||||
<a v-if="email" :href="`mailto:${email}`">{{ email }}</a
|
<a :href="`mailto:${email}`">{{ email }}</a
|
||||||
>.
|
>.
|
||||||
</strong>
|
</strong>
|
||||||
</p>
|
</p>
|
||||||
|
@ -80,7 +80,7 @@ async function onSubmit() {
|
||||||
Beim Abrufen des Knotens ist ein Fehler aufgetreten. Bitte
|
Beim Abrufen des Knotens ist ein Fehler aufgetreten. Bitte
|
||||||
probiere es später nochmal. Sollte dieses Problem weiter
|
probiere es später nochmal. Sollte dieses Problem weiter
|
||||||
bestehen, so wende dich bitte per E-Mail an
|
bestehen, so wende dich bitte per E-Mail an
|
||||||
<a v-if="email" :href="`mailto:${email}`">{{ email }}</a
|
<a :href="`mailto:${email}`">{{ email }}</a
|
||||||
>.
|
>.
|
||||||
</ErrorCard>
|
</ErrorCard>
|
||||||
|
|
||||||
|
|
|
@ -8,8 +8,8 @@ import RouteButton from "@/components/form/RouteButton.vue";
|
||||||
import { route, RouteName } from "@/router";
|
import { route, RouteName } from "@/router";
|
||||||
|
|
||||||
const configStore = useConfigStore();
|
const configStore = useConfigStore();
|
||||||
const email = computed(() => configStore.getConfig?.community.contactEmail);
|
const email = computed(() => configStore.getConfig.community.contactEmail);
|
||||||
const mapUrl = computed(() => configStore.getConfig?.map.mapUrl);
|
const mapUrl = computed(() => configStore.getConfig.map.mapUrl);
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
hostname: Hostname;
|
hostname: Hostname;
|
||||||
|
|
|
@ -21,7 +21,8 @@ const props = defineProps<Props>();
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<strong>Token:</strong> <code>{{ props.node.token }}</code>
|
<strong>Token: </strong>
|
||||||
|
<code>{{ props.node.token }}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
|
@ -30,7 +31,8 @@ const props = defineProps<Props>();
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<strong>MAC-Adresse:</strong> <code>{{ props.node.mac }}</code>
|
<strong>MAC-Adresse: </strong>
|
||||||
|
<code>{{ props.node.mac }}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
|
|
|
@ -91,8 +91,8 @@ function pushFilter(filterGroup: Filter[], filter: Filter): void {
|
||||||
|
|
||||||
const suggestedFilters = computed<Filter[][]>(() => {
|
const suggestedFilters = computed<Filter[][]>(() => {
|
||||||
const cfg = configStore.getConfig;
|
const cfg = configStore.getConfig;
|
||||||
const sites = cfg?.community.sites || [];
|
const sites = cfg.community.sites;
|
||||||
const domains = cfg?.community.domains || [];
|
const domains = cfg.community.domains;
|
||||||
|
|
||||||
const filterGroups: Filter[][] = [];
|
const filterGroups: Filter[][] = [];
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,7 @@ const versionStore = useVersionStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<footer v-if="configStore.getConfig">
|
<footer>
|
||||||
ffffng ({{ versionStore.getVersion }})
|
ffffng ({{ versionStore.getVersion }})
|
||||||
<a href="https://github.com/freifunkhamburg/ffffng" target="_blank">
|
<a href="https://github.com/freifunkhamburg/ffffng" target="_blank">
|
||||||
<i class="fa fa-code" aria-hidden="true" /> Source Code
|
<i class="fa fa-code" aria-hidden="true" /> Source Code
|
||||||
|
|
|
@ -6,7 +6,7 @@ const configStore = useConfigStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header v-if="configStore.getConfig">
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<RouterLink class="logo" :to="route(RouteName.HOME)">
|
<RouterLink class="logo" :to="route(RouteName.HOME)">
|
||||||
<img
|
<img
|
||||||
|
|
|
@ -6,16 +6,19 @@ import router from "./router";
|
||||||
import { useConfigStore } from "@/stores/config";
|
import { useConfigStore } from "@/stores/config";
|
||||||
import { useVersionStore } from "@/stores/version";
|
import { useVersionStore } from "@/stores/version";
|
||||||
|
|
||||||
|
async function main() {
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
app.use(createPinia());
|
app.use(createPinia());
|
||||||
app.use(router);
|
app.use(router);
|
||||||
|
|
||||||
useConfigStore()
|
const configLoaded = useConfigStore().refresh();
|
||||||
.refresh()
|
const versionLoaded = useVersionStore().refresh();
|
||||||
.catch((err) => console.error(err));
|
|
||||||
useVersionStore()
|
await configLoaded;
|
||||||
.refresh()
|
await versionLoaded;
|
||||||
.catch((err) => console.error(err));
|
|
||||||
|
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
|
}
|
||||||
|
|
||||||
|
main().catch((error) => console.error("Unhandled error:", error));
|
||||||
|
|
|
@ -3,18 +3,19 @@ import { type ClientConfig, isClientConfig } from "@/types";
|
||||||
import { api } from "@/utils/Api";
|
import { api } from "@/utils/Api";
|
||||||
|
|
||||||
interface ConfigStoreState {
|
interface ConfigStoreState {
|
||||||
config: ClientConfig | null;
|
config: ClientConfig;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useConfigStore = defineStore({
|
export const useConfigStore = defineStore({
|
||||||
id: "config",
|
id: "config",
|
||||||
state(): ConfigStoreState {
|
state(): ConfigStoreState {
|
||||||
return {
|
return {
|
||||||
config: null,
|
// Initialized in main.ts before mounting app.
|
||||||
|
config: undefined as unknown as ClientConfig,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
getConfig(state: ConfigStoreState): ClientConfig | null {
|
getConfig(state: ConfigStoreState): ClientConfig {
|
||||||
return state.config;
|
return state.config;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -11,18 +11,19 @@ function isVersionResponse(arg: unknown): arg is VersionResponse {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface VersionStoreState {
|
interface VersionStoreState {
|
||||||
version: Version | null;
|
version: Version;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useVersionStore = defineStore({
|
export const useVersionStore = defineStore({
|
||||||
id: "version",
|
id: "version",
|
||||||
state(): VersionStoreState {
|
state(): VersionStoreState {
|
||||||
return {
|
return {
|
||||||
version: null,
|
// Initialized in main.ts before mounting app.
|
||||||
|
version: undefined as unknown as Version,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
getVersion(state: VersionStoreState): Version | null {
|
getVersion(state: VersionStoreState): Version {
|
||||||
return state.version;
|
return state.version;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue