20210782/travel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mymemory page with deleting problem

Browse Source
This commit is contained in:
Chaebean Yang 2025-06-10 04:46:00 +09:00
parent 1f4d571197
commit 4a8669ca67
4 changed files with 245 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/lib/components/DeleteConfirmationPopup.svelte
View File

@ -3,6 +3,7 @@
export let destination = ''; export let destination = '';
export let onConfirm: () => void; export let onConfirm: () => void;
export let onCancel: () => void; export let onCancel: () => void;
export let darkMode = false;
function handlePopupClick(event: MouseEvent) { function handlePopupClick(event: MouseEvent) {
event.stopPropagation(); event.stopPropagation();
@ -12,7 +13,7 @@
{#if showPopup} {#if showPopup}
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="overlay" role="button" tabindex="0"> <div class="overlay" role="button" tabindex="0">
<div class="popup" role="button" tabindex="0" onclick={handlePopupClick}> <div class="popup" class:dark-mode={darkMode} role="button" tabindex="0" onclick={handlePopupClick}>
<h2>Delete Trip</h2> <h2>Delete Trip</h2>
<p>Are you sure you want to delete Trip to {destination}?</p> <p>Are you sure you want to delete Trip to {destination}?</p>
<div class="button-group"> <div class="button-group">
@ -88,4 +89,32 @@
background: var(--memory-400); background: var(--memory-400);
color: white; color: white;
} }
.popup.dark-mode {
background-color: var(--gray-900);
color: var(--white);
}
.popup.darkdark-mode h2 {
color: var(--memory-400);
}
.popup.dark-mode p {
color: var(--gray-400);
}
.popup.dark-mode button {
background: var(--gray-50);
color: var(--gray-400);
}
.popup.dark-mode .cancel-btn:hover {
background-color: var(--gray-100);
color: var(--gray-600);
}
.popup.dark-mode .delete-btn:hover {
background: var(--memory-500);
color: white;
}
</style> </style>

210
src/lib/components/MemoryCard.svelte
View File

@ -1,70 +1,160 @@
<script> <script lang="ts">
export let destination = ''; import { goto } from '$app/navigation';
export let startDate = ''; import { fade } from 'svelte/transition';
export let endDate = ''; import DeleteConfirmationPopup from './DeleteConfirmationPopup.svelte';
export let image = ''; import { ref, remove } from 'firebase/database';
import { db } from '../../firebase';
export let tripId: string;
export let memoryId: string;
export let destination: string;
export let startDate: string;
export let endDate: string;
export let image: string;
let showDelete = false;
let showDeleteConfirmation = false;
function handleClick() {
goto(`/viewimage/${tripId}/${memoryId}`);
}
function handleMouseEnter() {
showDelete = true;
}
function handleMouseLeave() {
showDelete = false;
}
function handleDeleteClick(event: MouseEvent) {
event.stopPropagation();
showDeleteConfirmation = true;
}
async function handleConfirmDelete() {
try {
const memoryRef = ref(db, `trips/${tripId}/memories/${memoryId}`);
await remove(memoryRef);
showDeleteConfirmation = false;
} catch (error) {
console.error('Error deleting memory:', error);
}
}
function handleCancelDelete() {
showDeleteConfirmation = false;
}
</script> </script>
<div class="memory-card"> <div
<div class="image" style="background-image: url({image})"> class="memory-card"
<!-- Image placeholder if no image provided --> role="button"
{#if !image} tabindex="0"
<div class="placeholder"> on:mouseenter={handleMouseEnter}
<i class="fa-solid fa-image" style="color: var(--gray-800)"></i> on:mouseleave={handleMouseLeave}
</div> on:click={handleClick}
{/if} >
</div> <div class="image" style={`background-image: url("${image || ''}")`}>
<div class="info"> {#if !image}
<h3>{destination}</h3> <div class="placeholder">
<p class="date">{startDate} - {endDate}</p> <i class="fa-solid fa-image" style="color: var(--gray-400)"></i>
</div> </div>
</div> {/if}
{#if showDelete}
<button
class="delete-btn"
on:click={handleDeleteClick}
transition:fade={{ duration: 100 }}
aria-label="Delete memory"
>
<i class="fa-solid fa-xmark"></i>
</button>
{/if}
</div>
<div class="info">
<h3>{destination}</h3>
<p class="date">{startDate} - {endDate}</p>
</div>
</div>
<DeleteConfirmationPopup
showPopup={showDeleteConfirmation}
{destination}
darkMode={true}
onConfirm={handleConfirmDelete}
onCancel={handleCancelDelete}
/>
<style> <style>
.memory-card { .memory-card {
background: var(--black); background: var(--black);
border-radius: 12px; color: var(--white);
overflow: hidden; border-radius: 12px;
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
font-family: 'Inter', sans-serif; cursor: pointer;
color: var(--white); font-family: 'Inter', sans-serif;
} position: relative;
}
.memory-card:hover { .memory-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
} }
.image { .image {
height: 160px; height: 160px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-color: var(--gray-900); background-color: var(--gray-900);
} position: relative;
}
.placeholder { .placeholder {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 2rem; font-size: 2rem;
} }
.info { .info {
padding: 1rem; padding: 1rem;
} }
.info h3 { .info h3 {
margin: 0; margin: 0;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
} }
.date { .date {
margin: 0.25rem 0 0 0; margin: 0.25rem 0 0 0;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--gray-400); color: var(--gray-400);
} }
.delete-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(240, 240, 240, 0.8);
border: none;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--gray-600);
transition: all 0.2s ease;
}
.delete-btn:hover {
background-color: var(--memory-50);
color: var(--memory-600);
}
</style> </style>

77
src/routes/mymemory/+page.svelte
View File

@ -1,32 +1,53 @@
<script lang="ts"> <script lang="ts">
import '../../app.css'; import '../../app.css';
import MemoryCard from '$lib/components/MemoryCard.svelte'; import MemoryCard from '$lib/components/MemoryCard.svelte';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import NewMemoryPopup from '$lib/components/NewMemoryPopup.svelte'; import NewMemoryPopup from '$lib/components/NewMemoryPopup.svelte';
import Nav from '$lib/components/Nav.svelte'; import Nav from '$lib/components/Nav.svelte';
import { onMount } from 'svelte';
interface Trip { import { ref, get } from 'firebase/database';
destination: string; import { db } from '../../firebase';
startDate: string;
endDate: string;
imageUrl: string;
}
let showNewMemoryPopup = false; interface Memory {
let contentContainer: HTMLElement; tripId: string;
memoryId: string;
// Sample data, replace with actual data later destination: string;
const sample_memories = { startDate: string;
destination: "Taiwan", endDate: string;
startDate: "04.27.2025", image: string;
endDate: "04.30.2025", }
imageUrl: ""
}
let pastMemories = Array(3).fill(sample_memories);
function handleNewMemory() { let showNewMemoryPopup = false;
showNewMemoryPopup = true; let contentContainer: HTMLElement;
}
let pastMemories: Memory[] = [];
onMount(async () => {
const snapshot = await get(ref(db, 'trips'));
const data = snapshot.val();
pastMemories = Object.entries(data).flatMap(([tripId, trip]: any) => {
const memories = Object.entries(trip.memories ?? {});
if (memories.length === 0) return [];
//latest memoryID
const sorted = memories.sort((a, b) => new Date(b[1].createdAt) - new Date(a[1].createdAt));
const [memoryId, memory] = sorted[0];
return [{
tripId,
memoryId,
destination: trip.destination?.name ?? 'Unknown',
startDate: memory.startDate,
endDate: memory.endDate,
image: memory.images?.[0] ?? ''
}];
});
});
function handleNewMemory() {
showNewMemoryPopup = true;
}
</script> </script>
<main> <main>
@ -40,12 +61,12 @@
<div class="memories-container"> <div class="memories-container">
{#if pastMemories.length === 0} {#if pastMemories.length === 0}
<div class="empty-state"> <div class="empty-state">
<p>There is no past trip</p> <p>There is no memory</p>
</div> </div>
{:else} {:else}
<div class="memories-grid"> <div class="memories-grid">
{#each pastMemories as memory} {#each pastMemories as memory}
<MemoryCard {...memory} /> <MemoryCard {...memory} on:deleted={(e) => handleDeletedMemory(e.detail.memoryId)} />
{/each} {/each}
</div> </div>
{/if} {/if}

20
src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
View File

@ -68,7 +68,7 @@
} }
if (memory?.images?.length) { if (memory?.images?.length) {
columnGroups = await extractColumnwiseColors(memory.images, true); columnGroups = await extractColumnwiseColors(memory.images, false);
currentImageIndex = 0; currentImageIndex = 0;
} }
} else { } else {
@ -79,12 +79,13 @@
} }
} }
//get information from other trip in same region
async function loadDroppedTrip(tripId, memoryId) { async function loadDroppedTrip(tripId, memoryId) {
const memorySnap = await get(ref(db, `trips/${tripId}/memories/${memoryId}`)); const memorySnap = await get(ref(db, `trips/${tripId}/memories/${memoryId}`));
if (memorySnap.exists()) { if (memorySnap.exists()) {
droppedTripId = tripId; droppedTripId = tripId;
droppedMemory = memorySnap.val(); droppedMemory = memorySnap.val();
droppedColumnGroups = await extractColumnwiseColors(droppedMemory.images, false); droppedColumnGroups = await extractColumnwiseColors(droppedMemory.images, true);
droppedImageIndex = 0; droppedImageIndex = 0;
isDroppedVisible = true; isDroppedVisible = true;
} }
@ -121,6 +122,7 @@
return ctx.getImageData(0, 0, canvas.width, canvas.height); return ctx.getImageData(0, 0, canvas.width, canvas.height);
} }
//convert rgb to hsb for color adjustment
function rgbToHsb(r, g, b) { function rgbToHsb(r, g, b) {
const r_ = r / 255, g_ = g / 255, b_ = b / 255; const r_ = r / 255, g_ = g / 255, b_ = b / 255;
const max = Math.max(r_, g_, b_), min = Math.min(r_, g_, b_); const max = Math.max(r_, g_, b_), min = Math.min(r_, g_, b_);
@ -141,6 +143,7 @@
return [h, s * 100, v * 255]; return [h, s * 100, v * 255];
} }
// get most frequent color from each section
function getColumnColors(imageData, columnCount = 5) { function getColumnColors(imageData, columnCount = 5) {
const { data, width, height } = imageData; const { data, width, height } = imageData;
const columnWidth = Math.floor(width / columnCount); const columnWidth = Math.floor(width / columnCount);
@ -167,20 +170,28 @@
}); });
} }
//collect color by column
async function extractColumnwiseColors(imageUrls, reverseColumns = true) { async function extractColumnwiseColors(imageUrls, reverseColumns = true) {
const columnColorGroups = [[], [], [], [], []]; const columnColorGroups = [[], [], [], [], []];
for (const url of imageUrls) { for (const url of imageUrls) {
const imageData = await getImageData(url); const imageData = await getImageData(url);
const colColors = getColumnColors(imageData); let colColors = getColumnColors(imageData);
// reverse column order
if (reverseColumns) {
colColors = colColors.reverse();
}
colColors.forEach((color, index) => { colColors.forEach((color, index) => {
columnColorGroups[index].push(color); columnColorGroups[index].push(color);
}); });
} }
return reverseColumns ? columnColorGroups.reverse() : columnColorGroups; return columnColorGroups;
} }
// make gradient wheel
function makeConcentricGradients(groups, rotationOffset = 0, imageCount = 1, isDropped = false) { function makeConcentricGradients(groups, rotationOffset = 0, imageCount = 1, isDropped = false) {
const directionFactor = 1; const directionFactor = 1;
const additionalAdjustment = isDropped ? -360 / imageCount : 0; const additionalAdjustment = isDropped ? -360 / imageCount : 0;
@ -198,6 +209,7 @@
const angleOffset = -(360 / memory.images.length) * currentImageIndex; const angleOffset = -(360 / memory.images.length) * currentImageIndex;
const gradients = makeConcentricGradients(columnGroups, angleOffset, memory.images.length, false); const gradients = makeConcentricGradients(columnGroups, angleOffset, memory.images.length, false);
//mask for donut shape
const MASK_COUNT = 3; const MASK_COUNT = 3;
for (let i = 0; i < MASK_COUNT; i++) { for (let i = 0; i < MASK_COUNT; i++) {
gradients.push('radial-gradient(circle, var(--black) 100%)'); gradients.push('radial-gradient(circle, var(--black) 100%)');