k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-06-19 21:31:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge PR #488: KMZ/KML place import

Browse Source 
Resolves conflicts with Naver list import (PR #662) — kept both unified
list-import dialog and new KMZ/KML dialog. Dropped duplicate react-dom
import and unused CustomSelect import from PlacesSidebar.
This commit is contained in:
jubnl
2026-04-15 05:09:45 +02:00
parent 4491b109ee 0e3e6df1f0
commit a1a7795945
25 changed files with 983 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Planner/PlacesSidebar.tsx
+200 -2
View File
@@ -1,13 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { useState, useRef, useMemo, useCallback, useEffect } from 'react'
import DOM from 'react-dom'
import { Search, Plus, X, CalendarDays, Pencil, Trash2, ExternalLink, Navigation, Upload, ChevronDown, Check, MapPin, Eye } from 'lucide-react'
import PlaceAvatar from '../shared/PlaceAvatar'
import { getCategoryIcon } from '../shared/categoryIcons'
import { useTranslation } from '../../i18n'
import { useToast } from '../shared/Toast'
import CustomSelect from '../shared/CustomSelect'
import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
import { placesApi } from '../../api/client'
import { useTripStore } from '../../store/tripStore'
@@ -15,6 +13,14 @@ import { useCanDo } from '../../store/permissionsStore'
import { useAddonStore } from '../../store/addonStore'
import type { Place, Category, Day, AssignmentsMap } from '../../types'
interface PlacesImportSummary {
totalPlacemarks: number
createdCount: number
skippedCount: number
warnings: string[]
errors: string[]
}
interface PlacesSidebarProps {
tripId: number
places: Place[]
@@ -42,11 +48,13 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
const toast = useToast()
const ctxMenu = useContextMenu()
const gpxInputRef = useRef<HTMLInputElement>(null)
const keyholeMarkupFileInputRef = useRef<HTMLInputElement>(null)
const trip = useTripStore((s) => s.trip)
const loadTrip = useTripStore((s) => s.loadTrip)
const can = useCanDo()
const canEditPlaces = can('place_edit', trip)
const isNaverListImportEnabled = useAddonStore((s) => s.isEnabled('naver_list_import'))
const importFileLimitBytes = 10 * 1024 * 1024
const handleGpxImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]
@@ -76,6 +84,68 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
const [listImportProvider, setListImportProvider] = useState<'google' | 'naver'>('google')
const availableListImportProviders: Array<'google' | 'naver'> = isNaverListImportEnabled ? ['google', 'naver'] : ['google']
const hasMultipleListImportProviders = availableListImportProviders.length > 1
const [keyholeMarkupFileOpen, setKeyholeMarkupFileOpen] = useState(false)
const [keyholeMarkupFileLoading, setKeyholeMarkupFileLoading] = useState(false)
const [keyholeMarkupFile, setKeyholeMarkupFileFile] = useState<File | null>(null)
const [keyholeMarkupFileSummary, setKeyholeMarkupFileSummary] = useState<PlacesImportSummary | null>(null)
const [keyholeMarkupFileError, setKeyholeMarkupFileError] = useState('')
const resetKeyholeMarkupFileDialog = () => {
setKeyholeMarkupFileFile(null)
setKeyholeMarkupFileSummary(null)
setKeyholeMarkupFileError('')
setKeyholeMarkupFileLoading(false)
}
const handleKeyholeMarkupFileImport = async () => {
if (!keyholeMarkupFile) return
const ext = keyholeMarkupFile.name.toLowerCase().split('.').pop()
if (ext !== 'kml' && ext !== 'kmz') {
setKeyholeMarkupFileError(t('places.kmlKmzInvalidType'))
return
}
if (keyholeMarkupFile.size > importFileLimitBytes) {
setKeyholeMarkupFileError(t('places.kmlKmzTooLarge', { maxMb: 10 }))
return
}
setKeyholeMarkupFileLoading(true)
setKeyholeMarkupFileError('')
setKeyholeMarkupFileSummary(null)
try {
const result = await placesApi.importMapFile(tripId, keyholeMarkupFile)
await loadTrip(tripId)
setKeyholeMarkupFileSummary(result.summary || null)
toast.success(t('places.kmlKmzImported', { count: result.count }))
if (result.summary?.errors?.length > 0) {
setKeyholeMarkupFileError(result.summary.errors.join('\n'))
}
if (result.places?.length > 0) {
const importedIds: number[] = result.places.map((p: { id: number }) => p.id)
pushUndo?.(t('undo.importKeyholeMarkup'), async () => {
for (const id of importedIds) {
try { await placesApi.delete(tripId, id) } catch {}
}
await loadTrip(tripId)
})
}
} catch (err: any) {
const responseSummary = err?.response?.data?.summary as PlacesImportSummary | undefined
if (responseSummary) {
setKeyholeMarkupFileSummary(responseSummary)
}
const message = err?.response?.data?.error || t('places.kmlKmzImportError')
setKeyholeMarkupFileError(message)
toast.error(message)
} finally {
setKeyholeMarkupFileLoading(false)
}
}
useEffect(() => {
if (!isNaverListImportEnabled && listImportProvider === 'naver') {
@@ -173,6 +243,18 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
>
<Upload size={11} strokeWidth={2} /> {t('places.importGpx')}
</button>
<button
onClick={() => { resetKeyholeMarkupFileDialog(); setKeyholeMarkupFileOpen(true) }}
style={{
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
flex: 1, padding: '5px 12px', borderRadius: 8,
border: '1px dashed var(--border-primary)', background: 'none',
color: 'var(--text-faint)', fontSize: 11, fontWeight: 500,
cursor: 'pointer', fontFamily: 'inherit',
}}
>
<Upload size={11} strokeWidth={2} /> {t('places.importKeyholeMarkup')}
</button>
<button
onClick={() => setListImportOpen(true)}
style={{
@@ -537,6 +619,122 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
</div>,
document.body
)}
{keyholeMarkupFileOpen && ReactDOM.createPortal(
<div
onClick={() => { setKeyholeMarkupFileOpen(false); resetKeyholeMarkupFileDialog() }}
style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
>
<div
onClick={e => e.stopPropagation()}
style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 520, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)' }}
>
<div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 6 }}>
{t('places.importKeyholeMarkup')}
</div>
<div style={{ fontSize: 12, color: 'var(--text-faint)', marginBottom: 14, lineHeight: 1.45 }}>
{t('places.kmlKmzHint')}
</div>
<input
ref={keyholeMarkupFileInputRef}
type="file"
accept=".kml,.kmz"
style={{ display: 'none' }}
onChange={e => {
const file = e.target.files?.[0] || null
setKeyholeMarkupFileFile(file)
setKeyholeMarkupFileSummary(null)
setKeyholeMarkupFileError('')
}}
/>
<button
onClick={() => keyholeMarkupFileInputRef.current?.click()}
style={{
width: '100%',
height: 44,
borderRadius: 12,
border: '1px dashed var(--border-primary)',
background: 'transparent',
color: 'var(--text-primary)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: 8,
fontSize: 13,
fontWeight: 500,
cursor: 'pointer',
marginBottom: 12,
fontFamily: 'inherit',
}}
>
<Upload size={14} strokeWidth={2} />
{keyholeMarkupFile ? t('places.kmlKmzSelectedFile', { name: keyholeMarkupFile.name }) : t('places.kmlKmzSelectFile')}
</button>
{keyholeMarkupFileSummary && (
<div style={{
border: '1px solid var(--border-primary)', borderRadius: 10,
background: 'var(--bg-tertiary)', padding: 10, marginBottom: 10,
}}>
<div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
{t('places.kmlKmzSummaryValues', {
total: keyholeMarkupFileSummary.totalPlacemarks,
created: keyholeMarkupFileSummary.createdCount,
skipped: keyholeMarkupFileSummary.skippedCount,
})}
</div>
{keyholeMarkupFileSummary.warnings?.length > 0 && (
<div style={{ marginTop: 8, fontSize: 12, color: '#b45309', whiteSpace: 'pre-wrap' }}>
{keyholeMarkupFileSummary.warnings.join('\n')}
</div>
)}
</div>
)}
{keyholeMarkupFileError && (
<div style={{
border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10,
background: 'rgba(239,68,68,0.08)', padding: '8px 10px',
fontSize: 12, color: '#b91c1c', whiteSpace: 'pre-wrap', marginBottom: 10,
}}>
{keyholeMarkupFileError}
</div>
)}
<div style={{ fontSize: 11, color: 'var(--text-faint)', marginBottom: 12 }}>
{t('places.kmlKmzSizeHint', { maxMb: 10 })}
</div>
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
<button
onClick={() => { setKeyholeMarkupFileOpen(false); resetKeyholeMarkupFileDialog() }}
style={{
padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)',
background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500,
cursor: 'pointer', fontFamily: 'inherit',
}}
>
{t('common.cancel')}
</button>
<button
onClick={handleKeyholeMarkupFileImport}
disabled={!keyholeMarkupFile || keyholeMarkupFileLoading}
style={{
padding: '8px 16px', borderRadius: 10, border: 'none',
background: !keyholeMarkupFile || keyholeMarkupFileLoading ? 'var(--bg-tertiary)' : 'var(--accent)',
color: !keyholeMarkupFile || keyholeMarkupFileLoading ? 'var(--text-faint)' : 'var(--accent-text)',
fontSize: 13, fontWeight: 500, cursor: !keyholeMarkupFile || keyholeMarkupFileLoading ? 'default' : 'pointer',
fontFamily: 'inherit',
}}
>
{keyholeMarkupFileLoading ? t('common.loading') : t('common.import')}
</button>
</div>
</div>
</div>,
document.body
)}
<ContextMenu menu={ctxMenu.menu} onClose={ctxMenu.close} />
</div>
)