104 lines
2.6 KiB
Vue
104 lines
2.6 KiB
Vue
<template>
|
|
<MultiModal ref="multi_modal" />
|
|
|
|
<BulmaDrawer
|
|
header="Kalender-Assistent"
|
|
:ready="is_loaded"
|
|
:failed="is_failed"
|
|
@open="on_open"
|
|
refreshable
|
|
>
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<h4>Buchstaben-Zuordnung</h4>
|
|
<div class="tags are-medium">
|
|
<span
|
|
v-for="(day_part, index) in day_parts"
|
|
:key="`part-${index}`"
|
|
class="tag is-info"
|
|
>
|
|
{{ day_part.day }}: {{ day_part.value.split("").join(", ") }}
|
|
</span>
|
|
</div>
|
|
|
|
<h4>Bilder-Zuordnung</h4>
|
|
<div class="tags are-medium">
|
|
<span
|
|
v-for="(day_part, index) in day_image_names"
|
|
:key="`part-${index}`"
|
|
class="tag is-primary"
|
|
>
|
|
{{ day_part.day }}: {{ day_part.value }}
|
|
</span>
|
|
</div>
|
|
|
|
<h4>Alle Türchen</h4>
|
|
<div class="tags are-medium">
|
|
<BulmaButton
|
|
v-for="(day_part, index) in day_parts"
|
|
:key="`btn-${index}`"
|
|
class="tag button is-primary"
|
|
icon="fa-solid fa-door-open"
|
|
:text="`${day_part.day}`"
|
|
@click.left="door_click(day_part.day)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BulmaDrawer>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { DayStrModel } from "@/lib/api";
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
import BulmaButton from "./bulma/Button.vue";
|
|
import BulmaDrawer from "./bulma/Drawer.vue";
|
|
import MultiModal from "./calendar/MultiModal.vue";
|
|
|
|
@Options({
|
|
components: {
|
|
BulmaButton,
|
|
BulmaDrawer,
|
|
MultiModal,
|
|
},
|
|
})
|
|
export default class extends Vue {
|
|
public is_loaded = false;
|
|
public is_failed = false;
|
|
|
|
public day_parts: DayStrModel[] = [];
|
|
public day_image_names: DayStrModel[] = [];
|
|
|
|
declare $refs: {
|
|
multi_modal: MultiModal;
|
|
};
|
|
|
|
public on_open(): void {
|
|
this.is_loaded = false;
|
|
this.is_failed = false;
|
|
|
|
Promise.all([
|
|
this.$advent22.api_get<DayStrModel[]>("admin/day_parts"),
|
|
this.$advent22.api_get<DayStrModel[]>("admin/day_image_names"),
|
|
])
|
|
.then(([day_parts, day_image_names]) => {
|
|
this.day_parts = day_parts;
|
|
this.day_image_names = day_image_names;
|
|
this.is_loaded = true;
|
|
})
|
|
.catch(() => (this.is_failed = true));
|
|
}
|
|
|
|
public door_click(day: number) {
|
|
this.$refs.multi_modal.show_progress();
|
|
|
|
this.$advent22
|
|
.api_get_blob(`user/image_${day}`)
|
|
.then((data) =>
|
|
this.$refs.multi_modal.show_image(data, this.$advent22.name_door(day)),
|
|
)
|
|
.catch(() => this.$refs.multi_modal.set_active(false));
|
|
}
|
|
}
|
|
</script>
|