mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-09 08:47:11 -05:00
8934c29fce
* fix: move foreman to global gems to fix startup crash (#1971) * Update exporting code to stream points data to file in batches to red… (#1980) * Update exporting code to stream points data to file in batches to reduce memory usage * Update changelog * Update changelog * Feature/maplibre frontend (#1953) * Add a plan to use MapLibre GL JS for the frontend map rendering, replacing Leaflet * Implement phase 1 * Phases 1-3 + part of 4 * Fix e2e tests * Phase 6 * Implement fog of war * Phase 7 * Next step: fix specs, phase 7 done * Use our own map tiles * Extract v2 map logic to separate manager classes * Update settings panel on v2 map * Update v2 e2e tests structure * Reimplement location search in maps v2 * Update speed routes * Implement visits and places creation in v2 * Fix last failing test * Implement visits merging * Fix a routes e2e test and simplify the routes layer styling. * Extract js to modules from maps_v2_controller.js * Implement area creation * Fix spec problem * Fix some e2e tests * Implement live mode in v2 map * Update icons and panel * Extract some styles * Remove unused file * Start adding dark theme to popups on MapLibre maps * Make popups respect dark theme * Move v2 maps to maplibre namespace * Update v2 references to maplibre * Put place, area and visit info into side panel * Update API to use safe settings config method * Fix specs * Fix method name to config in SafeSettings and update usages accordingly * Add missing public files * Add handling for real time points * Fix remembering enabled/disabled layers of the v2 map * Fix lots of e2e tests * Add settings to select map version * Use maps/v2 as main path for MapLibre maps * Update routing * Update live mode * Update maplibre controller * Update changelog * Remove some console.log statements --------- Co-authored-by: Robin Tuszik <mail@robin.gg>
100 lines
2.3 KiB
JavaScript
100 lines
2.3 KiB
JavaScript
/**
|
|
* Factory for creating photo popups
|
|
*/
|
|
export class PhotoPopupFactory {
|
|
/**
|
|
* Create popup for a photo
|
|
* @param {Object} properties - Photo properties
|
|
* @returns {string} HTML for popup
|
|
*/
|
|
static createPhotoPopup(properties) {
|
|
const {
|
|
id,
|
|
thumbnail_url,
|
|
taken_at,
|
|
filename,
|
|
city,
|
|
state,
|
|
country,
|
|
type,
|
|
source
|
|
} = properties
|
|
|
|
const takenDate = taken_at ? new Date(taken_at).toLocaleString() : 'Unknown'
|
|
const location = [city, state, country].filter(Boolean).join(', ') || 'Unknown location'
|
|
const mediaType = type === 'VIDEO' ? '🎥 Video' : '📷 Photo'
|
|
|
|
return `
|
|
<div class="photo-popup">
|
|
<div class="photo-preview">
|
|
<img src="${thumbnail_url}"
|
|
alt="${filename}"
|
|
loading="lazy">
|
|
</div>
|
|
<div class="photo-info">
|
|
<div class="filename">${filename}</div>
|
|
<div class="timestamp">Taken: ${takenDate}</div>
|
|
<div class="location">Location: ${location}</div>
|
|
<div class="source">Source: ${source}</div>
|
|
<div class="media-type">${mediaType}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.photo-popup {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.photo-preview {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-bottom: 12px;
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
.photo-preview img {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 300px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.photo-info {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.photo-info > div {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.photo-info .filename {
|
|
font-weight: 600;
|
|
color: #111827;
|
|
}
|
|
|
|
.photo-info .timestamp {
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.photo-info .location {
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.photo-info .source {
|
|
color: #9ca3af;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.photo-info .media-type {
|
|
font-size: 14px;
|
|
margin-top: 8px;
|
|
}
|
|
</style>
|
|
`
|
|
}
|
|
}
|