106 lines
2.8 KiB
Vue
106 lines
2.8 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 mobile = ref(screen.width < 760);
|
|
|
|
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>
|
|
<template v-if="mobile">
|
|
<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/>
|
|
</template>
|
|
<div v-else style="text-align: center;">
|
|
|
|
<TopFleur/>
|
|
<div class="desktop-container">
|
|
<div>
|
|
<template v-if="wishes.length>0">
|
|
<template v-for="i in 5">
|
|
<Wish :wish="wishes[i-1]" :selected="i-1 == selected" :index="i-1" @selectedWish="selectedWish" v-if="wishes.length>=i"/>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
<div>
|
|
<template v-if="wishes.length>5">
|
|
<template v-for="i in 5">
|
|
<Wish :wish="wishes[i + 4]" :selected="i + 4 == selected" :index="i + 4" @selectedWish="selectedWish" v-if="wishes.length>=(i+5)"/>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
<div>
|
|
<WishPanel :wish="wishes[selected]" @closeWish="selected = -1" v-if="selected != -1"/>
|
|
</div>
|
|
</div>
|
|
|
|
<BottomFleur/>
|
|
</div>
|
|
</body>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wrapper {
|
|
min-height: 100%;
|
|
margin-bottom: -50px;
|
|
}
|
|
.push{
|
|
height: 50px;
|
|
}
|
|
.v-enter-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
.v-enter-from {
|
|
opacity: 0;
|
|
}
|
|
.desktop-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
</style> |