108 lines
2.1 KiB
Vue
108 lines
2.1 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<banner :routes="routes"/>
|
|
<router-view />
|
|
<Footer />
|
|
<UpdateToast
|
|
v-if="showToast"
|
|
:text="toastText"
|
|
:refreshButton="refreshToast"
|
|
v-on:closeToast="closeToast"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ServiceWorkerMixin from "@/mixins/ServiceWorkerMixin";
|
|
import banner from "@/ui/Banner";
|
|
import Footer from "@/ui/Footer";
|
|
import UpdateToast from "@/ui/UpdateToast";
|
|
|
|
export default {
|
|
name: "vinlottis",
|
|
components: { banner, UpdateToast, Footer },
|
|
props: {},
|
|
data() {
|
|
return {
|
|
showToast: false,
|
|
toastText: null,
|
|
refreshToast: false,
|
|
routes: [
|
|
{
|
|
name: "Virtuelt lotteri",
|
|
route: "/lottery"
|
|
},
|
|
{
|
|
name: "Dagens viner",
|
|
route: "/dagens/"
|
|
},
|
|
{
|
|
name: "Highscore",
|
|
route: "/highscore"
|
|
},
|
|
{
|
|
name: "Historie",
|
|
route: "/history/"
|
|
},
|
|
{
|
|
name: "Foreslå vin",
|
|
route: "/request"
|
|
},
|
|
{
|
|
name: "Foreslåtte viner",
|
|
route: "/requested-wines"
|
|
},
|
|
{
|
|
name: "Login",
|
|
route: "/login"
|
|
}
|
|
]
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log("SNEAKY PETE!");
|
|
this.$on("service-worker-updated", () => {
|
|
this.toastText = "Det er ny oppdatering av siden, vil du oppdatere?";
|
|
this.showToast = true;
|
|
this.refreshToast = true;
|
|
});
|
|
this.$on("push-allowed", () => {
|
|
this.toastText = "Push-notifications er skrudd på!";
|
|
this.refreshToast = false;
|
|
this.showToast = true;
|
|
});
|
|
},
|
|
computed: {},
|
|
mixins: [ServiceWorkerMixin],
|
|
methods: {
|
|
closeToast: function() {
|
|
this.showToast = false;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "styles/global.scss";
|
|
@import "styles/positioning.scss";
|
|
@import "styles/vinlottis-icons";
|
|
|
|
body {
|
|
background-color: $primary;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
background-color: white;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: 80px auto 100px;
|
|
|
|
.main-container{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|