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

ConfigView loading flow

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-12 15:10:54 +00:00
parent 3892276313
commit 0bf2ce0b9e
2 changed files with 33 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/src/components/ConfigView.vue
View file

@ -1,5 +1,10 @@
<template> <template>
<BulmaDrawer header="Konfiguration"> <BulmaDrawer
header="Konfiguration"
:ready="config_loaded"
@open="on_open"
@close="on_close"
>
<div class="card-content"> <div class="card-content">
<div class="columns"> <div class="columns">
<div class="column is-one-third"> <div class="column is-one-third">
@ -173,6 +178,7 @@ interface ConfigModel {
}, },
}) })
export default class extends Vue { export default class extends Vue {
public config_loaded = false;
public admin_config_model: ConfigModel = { public admin_config_model: ConfigModel = {
puzzle: { puzzle: {
solution: "ABCDEFGHIJKLMNOPQRSTUVWX", solution: "ABCDEFGHIJKLMNOPQRSTUVWX",
@ -198,12 +204,19 @@ export default class extends Vue {
}, },
}; };
public mounted(): void { public on_open(): void {
this.$advent22 this.$advent22
.api_get<ConfigModel>("admin/config_model") .api_get<ConfigModel>("admin/config_model")
.then((data) => (this.admin_config_model = data)) .then((data) => {
this.admin_config_model = data;
this.config_loaded = true;
})
.catch(console.log); .catch(console.log);
} }
public on_close(): void {
this.config_loaded = false;
}
} }
</script> </script>

20
ui/src/components/bulma/Drawer.vue
View file

@ -2,7 +2,7 @@
<div class="card"> <div class="card">
<header <header
class="card-header has-background-grey-lighter is-unselectable" class="card-header has-background-grey-lighter is-unselectable"
@click="is_open = !is_open" @click="toggle"
> >
<p class="card-header-title">{{ header }}</p> <p class="card-header-title">{{ header }}</p>
<button class="card-header-icon"> <button class="card-header-icon">
@ -14,7 +14,12 @@
</button> </button>
</header> </header>
<slot v-if="is_open" name="default" /> <template v-if="is_open">
<slot v-if="ready" name="default" />
<div v-else class="card-content">
<progress class="progress is-primary" max="100" />
</div>
</template>
</div> </div>
</template> </template>
@ -28,11 +33,20 @@ import { Options, Vue } from "vue-class-component";
required: false, required: false,
default: "", default: "",
}, },
ready: Boolean,
}, },
emits: ["open", "close"],
}) })
export default class extends Vue { export default class extends Vue {
public is_open = false;
public header!: string; public header!: string;
public ready!: boolean;
public is_open = false;
public toggle() {
this.is_open = !this.is_open;
this.$emit(this.is_open ? "open" : "close");
}
} }
</script> </script>