mymemory page with deleting problem
This commit is contained in:
parent
1f4d571197
commit
4a8669ca67
|
|
@ -3,6 +3,7 @@
|
|||
export let destination = '';
|
||||
export let onConfirm: () => void;
|
||||
export let onCancel: () => void;
|
||||
export let darkMode = false;
|
||||
|
||||
function handlePopupClick(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
|
|
@ -12,7 +13,7 @@
|
|||
{#if showPopup}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<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>
|
||||
<p>Are you sure you want to delete Trip to {destination}?</p>
|
||||
<div class="button-group">
|
||||
|
|
@ -88,4 +89,32 @@
|
|||
background: var(--memory-400);
|
||||
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>
|
||||
|
|
@ -1,70 +1,160 @@
|
|||
<script>
|
||||
export let destination = '';
|
||||
export let startDate = '';
|
||||
export let endDate = '';
|
||||
export let image = '';
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { fade } from 'svelte/transition';
|
||||
import DeleteConfirmationPopup from './DeleteConfirmationPopup.svelte';
|
||||
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>
|
||||
|
||||
<div class="memory-card">
|
||||
<div class="image" style="background-image: url({image})">
|
||||
<!-- Image placeholder if no image provided -->
|
||||
{#if !image}
|
||||
<div class="placeholder">
|
||||
<i class="fa-solid fa-image" style="color: var(--gray-800)"></i>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="info">
|
||||
<h3>{destination}</h3>
|
||||
<p class="date">{startDate} - {endDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="memory-card"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:mouseenter={handleMouseEnter}
|
||||
on:mouseleave={handleMouseLeave}
|
||||
on:click={handleClick}
|
||||
>
|
||||
<div class="image" style={`background-image: url("${image || ''}")`}>
|
||||
{#if !image}
|
||||
<div class="placeholder">
|
||||
<i class="fa-solid fa-image" style="color: var(--gray-400)"></i>
|
||||
</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>
|
||||
.memory-card {
|
||||
background: var(--black);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
cursor: pointer;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: var(--white);
|
||||
}
|
||||
.memory-card {
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
cursor: pointer;
|
||||
font-family: 'Inter', sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.memory-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.memory-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 160px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: var(--gray-900);
|
||||
}
|
||||
.image {
|
||||
height: 160px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: var(--gray-900);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.placeholder {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 1rem;
|
||||
}
|
||||
.info {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.info h3 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.info h3 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin: 0.25rem 0 0 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--gray-400);
|
||||
}
|
||||
.date {
|
||||
margin: 0.25rem 0 0 0;
|
||||
font-size: 0.8rem;
|
||||
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>
|
||||
|
|
@ -1,32 +1,53 @@
|
|||
<script lang="ts">
|
||||
import '../../app.css';
|
||||
import MemoryCard from '$lib/components/MemoryCard.svelte';
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import NewMemoryPopup from '$lib/components/NewMemoryPopup.svelte';
|
||||
import Nav from '$lib/components/Nav.svelte';
|
||||
import '../../app.css';
|
||||
import MemoryCard from '$lib/components/MemoryCard.svelte';
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import NewMemoryPopup from '$lib/components/NewMemoryPopup.svelte';
|
||||
import Nav from '$lib/components/Nav.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { ref, get } from 'firebase/database';
|
||||
import { db } from '../../firebase';
|
||||
|
||||
interface Trip {
|
||||
destination: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
imageUrl: string;
|
||||
}
|
||||
interface Memory {
|
||||
tripId: string;
|
||||
memoryId: string;
|
||||
destination: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
let showNewMemoryPopup = false;
|
||||
let contentContainer: HTMLElement;
|
||||
let showNewMemoryPopup = false;
|
||||
let contentContainer: HTMLElement;
|
||||
|
||||
// Sample data, replace with actual data later
|
||||
const sample_memories = {
|
||||
destination: "Taiwan",
|
||||
startDate: "04.27.2025",
|
||||
endDate: "04.30.2025",
|
||||
imageUrl: ""
|
||||
}
|
||||
let pastMemories = Array(3).fill(sample_memories);
|
||||
let pastMemories: Memory[] = [];
|
||||
|
||||
function handleNewMemory() {
|
||||
showNewMemoryPopup = true;
|
||||
}
|
||||
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>
|
||||
|
||||
<main>
|
||||
|
|
@ -40,12 +61,12 @@
|
|||
<div class="memories-container">
|
||||
{#if pastMemories.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>There is no past trip</p>
|
||||
<p>There is no memory</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="memories-grid">
|
||||
{#each pastMemories as memory}
|
||||
<MemoryCard {...memory} />
|
||||
<MemoryCard {...memory} on:deleted={(e) => handleDeletedMemory(e.detail.memoryId)} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
|
||||
if (memory?.images?.length) {
|
||||
columnGroups = await extractColumnwiseColors(memory.images, true);
|
||||
columnGroups = await extractColumnwiseColors(memory.images, false);
|
||||
currentImageIndex = 0;
|
||||
}
|
||||
} else {
|
||||
|
|
@ -79,12 +79,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
//get information from other trip in same region
|
||||
async function loadDroppedTrip(tripId, memoryId) {
|
||||
const memorySnap = await get(ref(db, `trips/${tripId}/memories/${memoryId}`));
|
||||
if (memorySnap.exists()) {
|
||||
droppedTripId = tripId;
|
||||
droppedMemory = memorySnap.val();
|
||||
droppedColumnGroups = await extractColumnwiseColors(droppedMemory.images, false);
|
||||
droppedColumnGroups = await extractColumnwiseColors(droppedMemory.images, true);
|
||||
droppedImageIndex = 0;
|
||||
isDroppedVisible = true;
|
||||
}
|
||||
|
|
@ -121,6 +122,7 @@
|
|||
return ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
//convert rgb to hsb for color adjustment
|
||||
function rgbToHsb(r, g, b) {
|
||||
const r_ = r / 255, g_ = g / 255, b_ = b / 255;
|
||||
const max = Math.max(r_, g_, b_), min = Math.min(r_, g_, b_);
|
||||
|
|
@ -141,6 +143,7 @@
|
|||
return [h, s * 100, v * 255];
|
||||
}
|
||||
|
||||
// get most frequent color from each section
|
||||
function getColumnColors(imageData, columnCount = 5) {
|
||||
const { data, width, height } = imageData;
|
||||
const columnWidth = Math.floor(width / columnCount);
|
||||
|
|
@ -167,20 +170,28 @@
|
|||
});
|
||||
}
|
||||
|
||||
//collect color by column
|
||||
async function extractColumnwiseColors(imageUrls, reverseColumns = true) {
|
||||
const columnColorGroups = [[], [], [], [], []];
|
||||
|
||||
for (const url of imageUrls) {
|
||||
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) => {
|
||||
columnColorGroups[index].push(color);
|
||||
});
|
||||
}
|
||||
|
||||
return reverseColumns ? columnColorGroups.reverse() : columnColorGroups;
|
||||
return columnColorGroups;
|
||||
}
|
||||
|
||||
// make gradient wheel
|
||||
function makeConcentricGradients(groups, rotationOffset = 0, imageCount = 1, isDropped = false) {
|
||||
const directionFactor = 1;
|
||||
const additionalAdjustment = isDropped ? -360 / imageCount : 0;
|
||||
|
|
@ -198,6 +209,7 @@
|
|||
const angleOffset = -(360 / memory.images.length) * currentImageIndex;
|
||||
const gradients = makeConcentricGradients(columnGroups, angleOffset, memory.images.length, false);
|
||||
|
||||
//mask for donut shape
|
||||
const MASK_COUNT = 3;
|
||||
for (let i = 0; i < MASK_COUNT; i++) {
|
||||
gradients.push('radial-gradient(circle, var(--black) 100%)');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user