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

refreshable Drawer

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

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

@ -1,9 +1,9 @@
<template> <template>
<BulmaDrawer <BulmaDrawer
header="Konfiguration" header="Konfiguration"
:ready="config_loaded" :ready="is_loaded"
@open="on_open" @open="on_open"
@close="on_close" refreshable
> >
<div class="card-content"> <div class="card-content">
<div class="columns"> <div class="columns">
@ -178,7 +178,7 @@ interface ConfigModel {
}, },
}) })
export default class extends Vue { export default class extends Vue {
public config_loaded = false; public is_loaded = false;
public admin_config_model: ConfigModel = { public admin_config_model: ConfigModel = {
puzzle: { puzzle: {
solution: "ABCDEFGHIJKLMNOPQRSTUVWX", solution: "ABCDEFGHIJKLMNOPQRSTUVWX",
@ -205,18 +205,16 @@ export default class extends Vue {
}; };
public on_open(): void { public on_open(): void {
this.is_loaded = false;
this.$advent22 this.$advent22
.api_get<ConfigModel>("admin/config_model") .api_get<ConfigModel>("admin/config_model")
.then((data) => { .then((data) => {
this.admin_config_model = data; this.admin_config_model = data;
this.config_loaded = true; this.is_loaded = true;
}) })
.catch(console.log); .catch(console.log);
} }
public on_close(): void {
this.config_loaded = false;
}
} }
</script> </script>

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

@ -1,11 +1,13 @@
<template> <template>
<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" <p class="card-header-title" @click="toggle">{{ header }}</p>
@click="toggle" <button v-if="refreshable" class="card-header-icon pr-0" @click="refresh">
> <span class="tag button is-info icon">
<p class="card-header-title">{{ header }}</p> <font-awesome-icon icon="fa-solid fa-arrows-rotate" />
<button class="card-header-icon"> </span>
</button>
<button class="card-header-icon" @click="toggle">
<span class="icon"> <span class="icon">
<font-awesome-icon <font-awesome-icon
:icon="'fa-solid fa-angle-' + (is_open ? 'down' : 'right')" :icon="'fa-solid fa-angle-' + (is_open ? 'down' : 'right')"
@ -17,7 +19,7 @@
<template v-if="is_open"> <template v-if="is_open">
<slot v-if="ready" name="default" /> <slot v-if="ready" name="default" />
<div v-else class="card-content"> <div v-else class="card-content">
<progress class="progress is-primary" max="100" /> <progress class="progress is-info" max="100" />
</div> </div>
</template> </template>
</div> </div>
@ -34,18 +36,29 @@ import { Options, Vue } from "vue-class-component";
default: "", default: "",
}, },
ready: Boolean, ready: Boolean,
refreshable: {
type: Boolean,
required: false,
default: false,
},
}, },
emits: ["open", "close"], emits: ["open"],
}) })
export default class extends Vue { export default class extends Vue {
public header!: string; public header!: string;
public ready!: boolean; public ready!: boolean;
public refreshable!: boolean;
public is_open = false; public is_open = false;
public toggle() { public toggle() {
this.is_open = !this.is_open; this.is_open = !this.is_open;
this.$emit(this.is_open ? "open" : "close"); this.refresh();
}
public refresh() {
if (!this.is_open) return;
this.$emit("open");
} }
} }
</script> </script>