76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<script setup>
|
|
import Wish from '../components/Wish.vue';
|
|
import {ref, onMounted} from 'vue';
|
|
import axios from 'axios';
|
|
import TopFleur from '../components/TopFleur.vue';
|
|
import WishPanel from '../components/WishPanel.vue';
|
|
import BottomFleur from '../components/BottomFleur.vue';
|
|
import Header from '../components/Header.vue';
|
|
|
|
let interval;
|
|
|
|
const wishes = ref([]);
|
|
const selected = ref(-1);
|
|
|
|
const call = () => {
|
|
axios
|
|
.get('/api/get_wishes')
|
|
.then(response => {
|
|
wishes.value = response.data;
|
|
})
|
|
}
|
|
|
|
function selectedWish(index) {
|
|
selected.value = index;
|
|
}
|
|
|
|
onMounted(() => {
|
|
call();
|
|
interval = setInterval(call, 10000);
|
|
})
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<body>
|
|
<Header></Header>
|
|
<TopFleur/>
|
|
<div class="wrapper">
|
|
<Transition>
|
|
<div v-if="selected==-1">
|
|
<template v-for="(wish, i) in wishes">
|
|
<Wish :wish="wish" :selected="false" :index="i" @selectedWish="selectedWish"/>
|
|
</template>
|
|
</div>
|
|
</Transition>
|
|
<Transition>
|
|
<div v-if="selected!=-1">
|
|
<Wish :wish="wishes[selected]" selected :index="selected" @selectedWish="selectedWish"/>
|
|
<WishPanel :wish="wishes[selected]" @closeWish="selected = -1"></WishPanel>
|
|
</div>
|
|
</Transition>
|
|
|
|
</div>
|
|
<div class="push"></div>
|
|
<BottomFleur/>
|
|
</body>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wrapper {
|
|
min-height: 100%;
|
|
margin-bottom: -50px;
|
|
}
|
|
.push{
|
|
height: 50px;
|
|
}
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style> |