advent22/ui/src/App.vue

61 lines
1.2 KiB
Vue

<template>
<div class="container">
<LoginModal ref="login_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>
<DoorMapEditor />
</div>
<div class="section">
<button class="button" @click.left="$refs.login_modal.set_active(true)">
Login
</button>
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import DoorMapEditor from "./components/DoorMapEditor.vue";
import LoginModal from "./components/LoginModal.vue";
@Options({
components: {
DoorMapEditor,
LoginModal,
},
})
export default class extends Vue {
private visible_days = 0;
date = "";
declare $refs: {
login_modal: LoginModal;
};
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;
},
);
}
}
</script>
<style>
body {
min-height: 100vh;
}
</style>