79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<MultiModal ref="multi_modal" />
|
||
|
|
|
||
|
|
<BulmaDrawer header="Kalender-Assistent">
|
||
|
|
<div class="card-content">
|
||
|
|
<div class="content">
|
||
|
|
<h4>Alle Türchen</h4>
|
||
|
|
<div class="tags are-medium">
|
||
|
|
<span
|
||
|
|
v-for="index in 24"
|
||
|
|
:key="index"
|
||
|
|
class="tag button is-primary"
|
||
|
|
@click.left="door_click(index - 1)"
|
||
|
|
>
|
||
|
|
<span class="icon">
|
||
|
|
<font-awesome-icon icon="fa-solid fa-door-open" />
|
||
|
|
</span>
|
||
|
|
<span>{{ index }}</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4>Lösungsbuchstaben</h4>
|
||
|
|
<div class="tags are-medium">
|
||
|
|
<span class="tag is-info">1: A</span>
|
||
|
|
<span class="tag is-info">2: G</span>
|
||
|
|
<span class="tag is-info">3: F</span>
|
||
|
|
<span class="tag is-info">4: C</span>
|
||
|
|
<span class="tag is-info">5: I</span>
|
||
|
|
<span class="tag is-info">6: N</span>
|
||
|
|
<span class="tag is-info">7: B</span>
|
||
|
|
<span class="tag is-info">…</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4>Bilderzuordnung</h4>
|
||
|
|
<div class="tags are-medium">
|
||
|
|
<span class="tag is-primary">1: images_auto/1.jpg</span>
|
||
|
|
<span class="tag is-primary">2: images_manual/1.jpg</span>
|
||
|
|
<span class="tag is-primary">3: images_auto/penelope.png</span>
|
||
|
|
<span class="tag is-primary">4: images_auto/hand.png</span>
|
||
|
|
<span class="tag is-primary">5: images_auto/hand.jpg</span>
|
||
|
|
<span class="tag is-primary">6: images_auto/Zaphod.jpg</span>
|
||
|
|
<span class="tag is-primary">7: images_auto/Zaphod.jpg</span>
|
||
|
|
<span class="tag is-primary">…</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</BulmaDrawer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
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 {
|
||
|
|
declare $refs: {
|
||
|
|
multi_modal: MultiModal;
|
||
|
|
};
|
||
|
|
|
||
|
|
public door_click(day: number) {
|
||
|
|
this.$refs.multi_modal.show_progress();
|
||
|
|
|
||
|
|
this.$advent22
|
||
|
|
.api_get_blob(`days/image/${day}`)
|
||
|
|
.then((data) => this.$refs.multi_modal.show_image(data))
|
||
|
|
.catch(() => this.$refs.multi_modal.set_active(false));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|