81 lines
1.8 KiB
Vue
81 lines
1.8 KiB
Vue
<template>
|
||
<section class="hero is-small is-primary" style="overflow-x: auto">
|
||
<div class="hero-body">
|
||
<h1 class="title is-uppercase">{{ title }}</h1>
|
||
<h2 class="subtitle">{{ subtitle }}</h2>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<AdminView v-if="is_admin" />
|
||
<UserView v-else />
|
||
</div>
|
||
</section>
|
||
|
||
<div class="is-flex-grow-1" />
|
||
|
||
<footer class="footer">
|
||
<div class="level is-mobile">
|
||
<div class="level-item">
|
||
<p v-html="footer" />
|
||
</div>
|
||
<div class="level-right">
|
||
<AdminButton
|
||
class="level-item tag is-link is-outlined"
|
||
v-model="is_admin"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { Options, Vue } from "vue-class-component";
|
||
|
||
import AdminView from "./components/admin/AdminView.vue";
|
||
import AdminButton from "./components/AdminButton.vue";
|
||
import UserView from "./components/UserView.vue";
|
||
|
||
@Options({
|
||
components: {
|
||
AdminView,
|
||
AdminButton,
|
||
UserView,
|
||
},
|
||
})
|
||
export default class extends Vue {
|
||
public is_admin = false;
|
||
public title = "Adventskalender";
|
||
public subtitle = "Lorem Ipsum";
|
||
public footer = "";
|
||
|
||
public mounted(): void {
|
||
Promise.all([
|
||
this.$advent22.api_get<string>("user/title"),
|
||
this.subtitle, // TODO
|
||
this.$advent22.api_get<string>("user/footer"),
|
||
])
|
||
.then(([title, subtitle, footer]) => {
|
||
document.title = `${title} – ${subtitle}`;
|
||
|
||
this.title = title;
|
||
this.subtitle = subtitle;
|
||
this.footer = footer;
|
||
})
|
||
.catch((error) => alert(this.$advent22.format_user_error(error)));
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
html {
|
||
overflow-y: auto !important;
|
||
}
|
||
|
||
#app {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
</style>
|