488 lines
No EOL
15 KiB
Vue
488 lines
No EOL
15 KiB
Vue
<template>
|
|
<q-page>
|
|
<div class="visualization-container">
|
|
<div class="gradient-bg"></div>
|
|
<div class="scroll-container" id="scroll-container"></div>
|
|
<div class="median"></div>
|
|
</div>
|
|
|
|
<!-- Entry Detail Lightbox -->
|
|
<q-dialog v-model="showEntryDetail" maximized transition-show="slide-up" transition-hide="slide-down">
|
|
<q-card class="entry-lightbox">
|
|
<q-card-section class="lightbox-header">
|
|
<q-btn icon="close" flat round dense v-close-popup color="white" />
|
|
</q-card-section>
|
|
|
|
<q-card-section class="lightbox-content">
|
|
<EntryDetailPage :entry-data="selectedEntryData" />
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted, onBeforeUnmount, defineComponent, ref } from 'vue'
|
|
import { ConnectedDotsVisualization } from "../utils/ConnectedDotsVisualization"
|
|
import EntryDetailPage from './EntryDetailPage.vue'
|
|
|
|
export default defineComponent({
|
|
name: 'WavePage',
|
|
components: {
|
|
EntryDetailPage
|
|
},
|
|
setup() {
|
|
let visualization = null;
|
|
let isDown = false;
|
|
let startX;
|
|
let scrollLeft;
|
|
|
|
// Lightbox state
|
|
const showEntryDetail = ref(false)
|
|
const selectedEntryData = ref(null)
|
|
|
|
// Sample detailed entry data
|
|
const sampleEntryData = {
|
|
// 1: {
|
|
// id: 1,
|
|
// title: "Beginn des neuen Abenteuers",
|
|
// subtitle: "Ein wichtiger Meilenstein in meinem Leben",
|
|
// date: "2024-10-01",
|
|
// time: "14:30",
|
|
// location: "München, Deutschland",
|
|
// level: 2,
|
|
// keyImage: "/images/familie2.png",
|
|
// description: "Dies war ein wirklich wichtiger Tag für mich. Nach langer Planung und Vorbereitung konnte ich endlich mein neues Abenteuer beginnen. Es war aufregend und gleichzeitig etwas beängstigend, aber ich wusste, dass es der richtige Schritt war. Die Erfahrungen, die ich an diesem Tag gemacht habe, werden mich noch lange begleiten.",
|
|
// additionalImages: [
|
|
// { url: "/images/feier.png", caption: "Familie beim Start" },
|
|
// { url: "/images/see.png", caption: "Der schöne Ort" }
|
|
// ],
|
|
// audioRecordings: [
|
|
// { name: "Gedanken zum Tag", url: "/audio/ferien_erlebnisbericht.mp3" }
|
|
// ],
|
|
// videoRecordings: [
|
|
// { name: "UHD Nature Video", url: "/videos/3191901-uhd_3840_2160_25fps.mp4" },
|
|
// { name: "HD Landscape Video", url: "/videos/3326928-hd_1920_1080_24fps.mp4" }
|
|
// ],
|
|
// relatedPersons: [
|
|
// { id: 1, name: "Maria Schmidt", relation: "Freundin", avatar: null },
|
|
// { id: 2, name: "Thomas Müller", relation: "Bruder", avatar: null }
|
|
// ],
|
|
// categories: [
|
|
// { id: 1, name: "Familie", icon: "family_restroom" },
|
|
// { id: 2, name: "Abenteuer", icon: "explore" }
|
|
// ],
|
|
// tags: [
|
|
// { id: 1, name: "Aufregend", icon: "emoji_emotions" },
|
|
// { id: 2, name: "Neuanfang", icon: "new_releases" }
|
|
// ]
|
|
// }
|
|
// Add more entries as needed
|
|
1:{
|
|
id: 1,
|
|
title: "Beginn des neuen Abenteuers",
|
|
subtitle: "Ein wichtiger Meilenstein in meinem Leben",
|
|
date: "2024-10-01",
|
|
time: "14:30",
|
|
location: "München, Deutschland",
|
|
level: 2,
|
|
keyImage: "/images/familie2.png",
|
|
description: "Dies war ein wirklich wichtiger Tag für mich. Nach langer Planung und Vorbereitung konnte ich endlich mein neues Abenteuer beginnen. Es war aufregend und gleichzeitig etwas beängstigenden, aber ich wusste, dass es der richtige Schritt war. Die Erfahrungen, die ich an diesem Tag gemacht habe, werden mich noch lange begleiten.",
|
|
additionalImages: [
|
|
{ url: "/images/see.png", caption: "Der schöne Ort" },
|
|
{ url: "/images/feier.png", caption: "Kleiner Umtrunk danach" }
|
|
],
|
|
audioRecordings: [
|
|
{ name: "Gedanken zum Tag", url: "/audio/ferien_erlebnisbericht.mp3" },
|
|
],
|
|
videoRecordings: [
|
|
{
|
|
name: "UHD Nature Video",
|
|
url: "/videos/3191901-uhd_3840_2160_25fps.mp4",
|
|
poster: "/videos/thumbs/3191901-uhd_3840_2160_25fps_thumb.jpg"
|
|
},
|
|
{
|
|
name: "HD Landscape Video",
|
|
url: "/videos/3326928-hd_1920_1080_24fps.mp4",
|
|
poster: "/videos/thumbs/3326928-hd_1920_1080_24fps_thumb.jpg"
|
|
}
|
|
],
|
|
relatedPersons: [
|
|
{ id: 1, name: "Maria Schmidt", relation: "Freundin", avatar: null },
|
|
{ id: 2, name: "Thomas Müller", relation: "Bruder", avatar: null }
|
|
],
|
|
categories: [
|
|
{ id: 1, name: "Familie", icon: "family_restroom" },
|
|
{ id: 2, name: "Abenteuer", icon: "explore" }
|
|
],
|
|
tags: [
|
|
{ id: 1, name: "Aufregend", icon: "emoji_emotions" },
|
|
{ id: 2, name: "Neuanfang", icon: "new_releases" },
|
|
{ id: 3, name: "Wichtig", icon: "star" }
|
|
]
|
|
}
|
|
}
|
|
|
|
// Method to open entry detail lightbox
|
|
const openEntryDetail = (entryId) => {
|
|
selectedEntryData.value = sampleEntryData[entryId] || sampleEntryData[1] // Fallback to first entry
|
|
showEntryDetail.value = true
|
|
}
|
|
|
|
// Function to handle cleanup of event listeners
|
|
const cleanupEventListeners = () => {
|
|
const scrollContainer = document.querySelector('.scroll-container');
|
|
if (scrollContainer) {
|
|
scrollContainer.removeEventListener('mousedown', handleMouseDown);
|
|
scrollContainer.removeEventListener('mouseleave', handleMouseLeave);
|
|
scrollContainer.removeEventListener('mouseup', handleMouseUp);
|
|
scrollContainer.removeEventListener('mousemove', handleMouseMove);
|
|
scrollContainer.removeEventListener('touchstart', handleTouchStart);
|
|
scrollContainer.removeEventListener('touchend', handleTouchEnd);
|
|
scrollContainer.removeEventListener('touchmove', handleTouchMove);
|
|
}
|
|
window.removeEventListener('resize', handleResize);
|
|
};
|
|
|
|
// Event handlers
|
|
const handleResize = () => {
|
|
if (visualization) {
|
|
visualization.resize();
|
|
}
|
|
};
|
|
|
|
const handleMouseDown = (e) => {
|
|
const scrollContainer = e.currentTarget;
|
|
isDown = true;
|
|
scrollContainer.classList.add('active');
|
|
startX = e.pageX - scrollContainer.offsetLeft;
|
|
scrollLeft = scrollContainer.scrollLeft;
|
|
scrollContainer.classList.remove('smooth-scroll');
|
|
};
|
|
|
|
const handleMouseLeave = (e) => {
|
|
if (!isDown) return;
|
|
isDown = false;
|
|
e.currentTarget.classList.remove('active');
|
|
e.currentTarget.classList.add('smooth-scroll');
|
|
};
|
|
|
|
const handleMouseUp = (e) => {
|
|
if (!isDown) return;
|
|
isDown = false;
|
|
e.currentTarget.classList.remove('active');
|
|
e.currentTarget.classList.add('smooth-scroll');
|
|
};
|
|
|
|
const handleMouseMove = (e) => {
|
|
if (!isDown) return;
|
|
e.preventDefault();
|
|
const scrollContainer = e.currentTarget;
|
|
const x = e.pageX - scrollContainer.offsetLeft;
|
|
const walk = (x - startX) * 3;
|
|
scrollContainer.scrollLeft = scrollLeft - walk;
|
|
};
|
|
|
|
const handleTouchStart = (e) => {
|
|
const scrollContainer = e.currentTarget;
|
|
isDown = true;
|
|
scrollContainer.classList.add('active');
|
|
startX = e.touches[0].pageX - scrollContainer.offsetLeft;
|
|
scrollLeft = scrollContainer.scrollLeft;
|
|
scrollContainer.classList.remove('smooth-scroll');
|
|
};
|
|
|
|
const handleTouchEnd = (e) => {
|
|
if (!isDown) return;
|
|
isDown = false;
|
|
e.currentTarget.classList.remove('active');
|
|
e.currentTarget.classList.add('smooth-scroll');
|
|
};
|
|
|
|
const handleTouchMove = (e) => {
|
|
if (!isDown) return;
|
|
e.preventDefault();
|
|
const scrollContainer = e.currentTarget;
|
|
const x = e.touches[0].pageX - scrollContainer.offsetLeft;
|
|
const walk = (x - startX) * 3;
|
|
scrollContainer.scrollLeft = scrollLeft - walk;
|
|
};
|
|
|
|
onMounted(() => {
|
|
try {
|
|
console.log("Initializing Wave visualization...");
|
|
|
|
// Example sample dots data
|
|
const sampleDots = [
|
|
{
|
|
id: 1,
|
|
value: -1.8,
|
|
x: -2,
|
|
imageUrl: "/images/0_3.png",
|
|
title: "Beginn des neuen Abenteuers",
|
|
description: "01.10.2024",
|
|
onClick: () => openEntryDetail(1),
|
|
},
|
|
{
|
|
id: 2,
|
|
value: 1.2,
|
|
x: 0,
|
|
imageUrl: "/images/0_2.png",
|
|
title: "Omas Annis Geburtstag",
|
|
description: "02.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 3,
|
|
value: -0.6,
|
|
x: 2,
|
|
imageUrl: "/images/disco.png",
|
|
title: "Konzertbesuch mit Freunden",
|
|
description: "03.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 4,
|
|
value: 3,
|
|
x: 4,
|
|
imageUrl: "/images/pferd.png",
|
|
title: "Wanderreiten in den Bergen",
|
|
description: "04.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 5,
|
|
value: 1,
|
|
x: 6,
|
|
imageUrl: "/images/gpt.png",
|
|
title: "Ruhiger Tag zu Hause",
|
|
description: "05.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 6,
|
|
value: -3,
|
|
x: 8,
|
|
imageUrl: "/images/oma.png",
|
|
title: "Oma Erna verstorben",
|
|
description: "06.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 7,
|
|
value: 1.5,
|
|
x: 10,
|
|
imageUrl: "/images/see.png",
|
|
title: "Erholungsausflug zum See",
|
|
description: "07.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 8,
|
|
value: 0,
|
|
x: 12,
|
|
imageUrl: "/images/feier.png",
|
|
title: "Kleine Wochenendsfeier",
|
|
description: "08.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 9,
|
|
value: 3,
|
|
x: 14,
|
|
imageUrl: "/images/hochzeit.png",
|
|
title: "Hochzeit von Cousine Tatjana",
|
|
description: "09.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 10,
|
|
value: 1,
|
|
x: 16,
|
|
imageUrl: "/images/work.png",
|
|
title: "Erster Tag im neuen Job",
|
|
description: "10.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 11,
|
|
value: -1.2,
|
|
x: 18,
|
|
imageUrl: "/images/klasse.png",
|
|
title: "Klassentreffen nach vielen Jahren",
|
|
description: "11.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 12,
|
|
value: -0.6,
|
|
x: 20,
|
|
imageUrl: "/images/familie.png",
|
|
title: "Familienabendessen",
|
|
description: "12.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 13,
|
|
value: 2.7,
|
|
x: 22,
|
|
imageUrl:
|
|
"/images/kinobesuch.png",
|
|
title: "Kinobesuch mit der ganzen Familie",
|
|
description: "13.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 14,
|
|
value: 0,
|
|
x: 24,
|
|
imageUrl:
|
|
"/images/entspannung.png",
|
|
title: "Entspannung",
|
|
description: "14.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 15,
|
|
value: -2.9,
|
|
x: 26,
|
|
imageUrl: "/images/sonntag.png",
|
|
title: "Geruhsamer Sonntag",
|
|
description: "15.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 16,
|
|
value: 1.5,
|
|
x: 28,
|
|
imageUrl:
|
|
"/images/kindergeburtstag.png",
|
|
title: "Kindergeburtstag",
|
|
description: "16.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 17,
|
|
value: 0,
|
|
x: 30,
|
|
imageUrl:
|
|
"/images/familie2.png",
|
|
title: "Spaziergang mit der Familie",
|
|
description: "17.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
{
|
|
id: 18,
|
|
value: 2.1,
|
|
x: 32,
|
|
imageUrl:
|
|
"/images/grosseltern.png",
|
|
title: "Familienfeier bei den Großeltern",
|
|
description: "18.10.2024",
|
|
onClick: () => openEntryDetail(1), // Using same entry for now
|
|
},
|
|
];
|
|
|
|
// Initialize the visualization with the sample dots
|
|
visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, {
|
|
// Optional custom configuration
|
|
dotRadius: 6,
|
|
});
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
// Set up scroll interactions
|
|
const scrollContainer = document.querySelector('.scroll-container');
|
|
if (scrollContainer) {
|
|
// Mouse events
|
|
scrollContainer.addEventListener('mousedown', handleMouseDown);
|
|
scrollContainer.addEventListener('mouseleave', handleMouseLeave);
|
|
scrollContainer.addEventListener('mouseup', handleMouseUp);
|
|
scrollContainer.addEventListener('mousemove', handleMouseMove);
|
|
|
|
// Touch events
|
|
scrollContainer.addEventListener('touchstart', handleTouchStart);
|
|
scrollContainer.addEventListener('touchend', handleTouchEnd);
|
|
scrollContainer.addEventListener('touchmove', handleTouchMove);
|
|
}
|
|
} catch (err) {
|
|
console.error("Error initializing visualization:", err);
|
|
}
|
|
});
|
|
|
|
// Clean up event listeners when component is unmounted
|
|
onBeforeUnmount(() => {
|
|
cleanupEventListeners();
|
|
});
|
|
|
|
return {
|
|
showEntryDetail,
|
|
selectedEntryData,
|
|
openEntryDetail
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.visualization-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gradient-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.scroll-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
z-index: 2;
|
|
cursor: grab;
|
|
}
|
|
|
|
.scroll-container.active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.scroll-container.smooth-scroll {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Lightbox Styles */
|
|
.entry-lightbox {
|
|
background: rgba(0, 0, 0, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.lightbox-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 16px 24px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.lightbox-content {
|
|
padding: 0;
|
|
max-height: calc(100vh - 80px);
|
|
overflow-y: auto;
|
|
background: transparent;
|
|
}
|
|
</style> |