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

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

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