59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<MultiModal ref="multi_modal" />
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<figure class="image">
|
||
|
|
<img :src="$advent22.api_url('general/background')" />
|
||
|
|
<ThouCanvas>
|
||
|
|
<CalendarDoor v-for="(_, index) in doors" :key="`door-${index}`" :door="doors[index]" @doorClick="door_click"
|
||
|
|
@doorSuccess="door_success" @doorFailure="door_failure" />
|
||
|
|
</ThouCanvas>
|
||
|
|
</figure>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Options, Vue } from "vue-class-component";
|
||
|
|
import { Door } from "./door_map/calendar";
|
||
|
|
|
||
|
|
import CalendarDoor from "./CalendarDoor.vue";
|
||
|
|
import MultiModal from "./MultiModal.vue";
|
||
|
|
import ThouCanvas from "./rects/ThouCanvas.vue";
|
||
|
|
|
||
|
|
@Options({
|
||
|
|
components: {
|
||
|
|
MultiModal,
|
||
|
|
ThouCanvas,
|
||
|
|
CalendarDoor,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
doors: Array,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
export default class extends Vue {
|
||
|
|
public readonly doors!: Door[];
|
||
|
|
|
||
|
|
declare $refs: {
|
||
|
|
multi_modal: MultiModal;
|
||
|
|
};
|
||
|
|
|
||
|
|
public door_click() {
|
||
|
|
this.$refs.multi_modal.show_progress();
|
||
|
|
}
|
||
|
|
|
||
|
|
public door_success(image_src: string) {
|
||
|
|
this.$refs.multi_modal.show_image(image_src);
|
||
|
|
}
|
||
|
|
|
||
|
|
public door_failure(msg: string) {
|
||
|
|
this.$refs.multi_modal.set_active(false);
|
||
|
|
alert(msg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
section>figure {
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
</style>
|