78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
Vue
<template>
|
|
<div class="container">
|
|
<LoginModal ref="login_modal" />
|
|
<ImageModal ref="image_modal" />
|
|
|
|
<div class="section">
|
|
<h1 class="title has-text-centered is-uppercase">
|
|
Adventskalender {{ date }}
|
|
</h1>
|
|
<h2 class="subtitle has-text-centered">Der Gelöt</h2>
|
|
|
|
<CalendarImage />
|
|
|
|
<CalendarDoor
|
|
v-for="(_, index) in 24"
|
|
:key="index"
|
|
:day="index"
|
|
@openDoor="open_calendar_door"
|
|
/>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<button class="button" @click="$refs.login_modal.set_active(true)">
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
import CalendarDoor from "./components/CalendarDoor.vue";
|
|
import CalendarImage from "./components/CalendarImage.vue";
|
|
import ImageModal from "./components/ImageModal.vue";
|
|
import LoginModal from "./components/LoginModal.vue";
|
|
|
|
@Options({
|
|
components: {
|
|
CalendarDoor,
|
|
CalendarImage,
|
|
ImageModal,
|
|
LoginModal,
|
|
},
|
|
})
|
|
export default class App extends Vue {
|
|
private visible_days = 0;
|
|
date = "";
|
|
|
|
declare $refs: {
|
|
login_modal: LoginModal;
|
|
image_modal: ImageModal;
|
|
};
|
|
|
|
public mounted() {
|
|
this.$advent22.api_get_string("days/date", (date: string) => {
|
|
this.date = date;
|
|
});
|
|
|
|
this.$advent22.api_get_number(
|
|
"days/visible_days",
|
|
(visible_days: number) => {
|
|
this.visible_days = visible_days;
|
|
}
|
|
);
|
|
}
|
|
|
|
private open_calendar_door(image_src: string) {
|
|
this.$refs.image_modal.show_src(image_src);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
min-height: 100vh;
|
|
}
|
|
</style>
|