Compare commits
4 commits
17541a5724
...
db5713e8ad
| Author | SHA1 | Date | |
|---|---|---|---|
| db5713e8ad | |||
| 6abed314c8 | |||
| c716288e20 | |||
| b1c59923bc |
7 changed files with 2396 additions and 1798 deletions
|
|
@ -3,10 +3,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">
|
||||
<title>carnet de voyage été 2024 - kektus</title>
|
||||
<script defer src="https://pythagore.p0m.fr/script.js" data-website-id="76657392-8b72-4657-bf5d-b8f2cbc03203"></script>
|
||||
<title>Carnet de voyage</title>
|
||||
</head>
|
||||
<!--
|
||||
|
||||
|
|
|
|||
4062
summer2024-frontend/package-lock.json
generated
4062
summer2024-frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -8,15 +8,7 @@ const appVersion = ref(import.meta.env.VITE_APP_VERSION)
|
|||
|
||||
<template>
|
||||
<div class="fixed w-full top-0 z-50 flex items-center backdrop-blur-md bg-black/10 gap-2 px-3">
|
||||
<a href="https://www.kektus.fr"
|
||||
><h1
|
||||
id="kektus"
|
||||
class="font-bold select-none mx-3 my-3 text-2xl hover:text-3xl transition-all duration-300"
|
||||
>
|
||||
kektus
|
||||
</h1></a
|
||||
>
|
||||
<h1 class="font-light text-lg my-2 mr-3">carnet de voyage été 2024</h1>
|
||||
<h1 class="font-light text-lg my-2 mr-3">Carnet de voyage</h1>
|
||||
<div class="flex-grow"></div>
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<div class="p-2 bg-black/10 hover:bg-black/20 transition-colors duration-300 rounded-lg">
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@ function scrollSlideToIndex(index) {
|
|||
<div
|
||||
ref="postData"
|
||||
class="m-6 p-2 bg-gray-400/10 h-full w-full backdrop-blur-sm rounded-lg pointer-events-auto transition-colors duration-500"
|
||||
style="text-shadow: black 0 0 7px"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 right-0 m-2 p-2 backdrop-blur-sm rounded-sm bg-black/10 hover:bg-black/20 cursor-pointer transition-colors duration-200 opacity-100"
|
||||
|
|
@ -180,12 +181,12 @@ function scrollSlideToIndex(index) {
|
|||
:key="asset.id"
|
||||
>
|
||||
<img
|
||||
class="absolute top-0 left-0 w-full h-dvh object-cover -z-10"
|
||||
class="absolute top-0 left-0 w-full h-dvh object-contain -z-10"
|
||||
:data-src="asset.presignedUrl"
|
||||
v-if="asset.contentType.startsWith('image/')"
|
||||
/>
|
||||
<video
|
||||
class="absolute top-0 left-0 w-full h-dvh object-cover -z-10"
|
||||
class="absolute top-0 left-0 w-full h-dvh object-contain -z-10"
|
||||
preload="none"
|
||||
loop
|
||||
muted="true"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { onMounted, ref } from 'vue'
|
|||
import { ChevronDown } from 'lucide-vue-next'
|
||||
|
||||
const enableCountdown = ref(false)
|
||||
const countdownDate = ref(new Date('2024-07-28 07:00:00'))
|
||||
const countdownDate = ref(new Date('2025-09-03 07:00:00'))
|
||||
|
||||
onMounted(() => {
|
||||
const now = new Date().getTime()
|
||||
|
|
@ -22,23 +22,30 @@ const postsStore = usePostsStore()
|
|||
|
||||
<template>
|
||||
<div :class="props.class" ref="section" data-anchor="welcome-section">
|
||||
<div class="flex flex-col w-full h-full items-center justify-center text-center">
|
||||
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mx-4 my-4">
|
||||
3 semaines pour traverser 7 pays d'Europe en train
|
||||
</h3>
|
||||
<p v-if="postsStore.posts.length > 0" class="mx-4">
|
||||
suivez mon voyage en naviguant vers le bas
|
||||
</p>
|
||||
<div
|
||||
class="flex flex-col w-full h-full items-center justify-center text-center"
|
||||
style="background-image: url(https://polarsteps.s3.amazonaws.com/user_images/trip/large_thumb/u_17405032/c588cad8-cfc0-4ec0-938a-d0048dc824fc_23dc784c-71c7-4faf-981e-90d17ca9714c.jpg); background-size: cover; text-shadow: black 0 0 5px"
|
||||
>
|
||||
<div class="flex flex-col rounded-xl items-center backdrop-blur-md bg-black/10 gap-2 px-3 pb-4">
|
||||
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mx-4 my-4">
|
||||
Voyage en Asie du Sud-Est
|
||||
</h3>
|
||||
<p v-if="postsStore.posts.length > 0" class="mx-4">
|
||||
suivez le voyage en naviguant vers le bas
|
||||
</p>
|
||||
<div v-else>
|
||||
<div class="mt-16 mx-4" v-if="enableCountdown">
|
||||
<p>ça commence dans...</p>
|
||||
<Countdown class="text-3xl font-extrabold" :date="countdownDate" />
|
||||
</div>
|
||||
<div v-else class="flex flex-col items-center">
|
||||
<svg class="mr-3 -ml-1 size-9 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="postsStore.posts.length > 0" class="arrow mt-6">
|
||||
<ChevronDown size="96" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="mx-4">le contenu n'est pas encore disponible, revenez plus tard</p>
|
||||
<div class="mt-16 mx-4" v-if="enableCountdown">
|
||||
<p>ça commence dans...</p>
|
||||
<Countdown class="text-3xl font-extrabold" :date="countdownDate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
35
summer2024-frontend/src/stores/goals.js
Normal file
35
summer2024-frontend/src/stores/goals.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { formatRelative } from 'date-fns'
|
||||
import { fr } from 'date-fns/locale'
|
||||
import { marked } from 'marked'
|
||||
import { API_BASE_URL } from '@/config.js'
|
||||
import { fromLonLat } from 'ol/proj.js'
|
||||
|
||||
export const useGoalsStore = defineStore('goals', () => {
|
||||
const goalsApiPath = API_BASE_URL + '/goals'
|
||||
|
||||
const goals = ref([])
|
||||
|
||||
function fetchGoals() {
|
||||
return fetch(goalsApiPath)
|
||||
.then((response) => {
|
||||
return response.json()
|
||||
})
|
||||
.then(async (data) => {
|
||||
goals.value = data.sort((a, b) => a.id - b.id) // lower ID (older) first
|
||||
for (const goal of goals.value) {
|
||||
const goalDate = new Date(goal.date)
|
||||
goal.formatedDate = formatRelative(goalDate, new Date(), { locale: fr })
|
||||
goal.projectedCoordinates = fromLonLat([goal.longitude, goal.latitude])
|
||||
}
|
||||
|
||||
return goals.value
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('goal list parsing failed with error: ' + error)
|
||||
})
|
||||
}
|
||||
|
||||
return { goals, fetchGoals }
|
||||
})
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import { Map, Layers, Sources, MapControls, Geometries, Styles } from 'vue3-openlayers'
|
||||
import { usePostsStore } from '@/stores/posts.js'
|
||||
import { useGoalsStore } from '@/stores/goals.js'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { Camera, Goal, MapPin } from 'lucide-vue-next'
|
||||
import {
|
||||
|
|
@ -12,6 +13,7 @@ import {
|
|||
import { useLocationStore } from '@/stores/location.js'
|
||||
import { fromLonLat } from 'ol/proj.js'
|
||||
|
||||
const goalStore = useGoalsStore()
|
||||
const postStore = usePostsStore()
|
||||
const locationStore = useLocationStore()
|
||||
|
||||
|
|
@ -26,20 +28,20 @@ const postsLinesCoordinates = computed(() => {
|
|||
return coords
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
postStore.fetchPosts()
|
||||
locationStore.fetchLocation()
|
||||
const goalLocations = computed(() => {
|
||||
const coords = []
|
||||
for (const goal of goalStore.goals) {
|
||||
coords.push({name: goal.name, formatedDate: goal.formatedDate, coords: goal.projectedCoordinates})
|
||||
}
|
||||
return coords
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
goalStore.fetchGoals()
|
||||
locationStore.fetchLocation()
|
||||
postStore.fetchPosts()
|
||||
})
|
||||
|
||||
const goalLocations = ref([
|
||||
{ name: 'Amsterdam', coords: fromLonLat([4.893611, 52.372778]) },
|
||||
{ name: 'Berlin', coords: fromLonLat([13.405, 52.52]) },
|
||||
{ name: 'Prague', coords: fromLonLat([14.421389, 50.0875]) },
|
||||
{ name: 'Varsovie', coords: fromLonLat([21.011111, 52.23]) },
|
||||
{ name: 'Vilnius', coords: fromLonLat([25.28, 54.687222]) },
|
||||
{ name: 'Riga', coords: fromLonLat([24.106389, 56.948889]) },
|
||||
{ name: 'Tallinn', coords: fromLonLat([24.745278, 59.437222]) }
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -116,7 +118,8 @@ const goalLocations = ref([
|
|||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Objectif : {{ loc.name }}</p>
|
||||
<p>Objectif : {{ loc.name }}</p>
|
||||
<p>Arrivée : {{ loc.formatedDate }}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue