63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="section">
|
|
<h1 class="title has-text-centered is-uppercase">
|
|
Adventskalender {{ date }}
|
|
</h1>
|
|
<h2 class="subtitle has-text-centered">Der Gelöt</h2>
|
|
|
|
<LoginModal ref="login_modal" />
|
|
<ImageModal v-model="modal_visible" :imageUrl="image_url" />
|
|
<CalendarDoor
|
|
v-for="(_, index) in 24"
|
|
:key="index"
|
|
:day="index"
|
|
@openDoor="paula"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
import CalendarDoor from "./components/CalendarDoor.vue";
|
|
import ImageModal from "./components/ImageModal.vue";
|
|
import LoginModal from "./components/LoginModal.vue";
|
|
|
|
@Options({
|
|
components: {
|
|
CalendarDoor,
|
|
ImageModal,
|
|
LoginModal,
|
|
},
|
|
})
|
|
export default class App extends Vue {
|
|
image_url = "";
|
|
modal_visible = false;
|
|
date = "";
|
|
|
|
declare $refs: {
|
|
login_modal: LoginModal;
|
|
};
|
|
|
|
public mounted(): void {
|
|
this.$advent22.api_get_string("days/date", (date: string) => {
|
|
this.date = date;
|
|
});
|
|
|
|
this.$refs.login_modal.set_active(true);
|
|
}
|
|
|
|
private paula(url: string): void {
|
|
this.image_url = url;
|
|
this.modal_visible = true;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
min-height: 100vh;
|
|
}
|
|
</style>
|