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

refactor(client): rename kmlKmz vars to keyholeMarkupFile, remove unused imports

Browse Source
This commit is contained in:
Yannis Biasutti
2026-04-06 21:47:35 +02:00
parent aacfd24b58
commit 2f4e067a65
1 changed files with 51 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Planner/PlacesSidebar.tsx
+51 -53
View File
@@ -1,13 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { useState, useRef, useMemo, useCallback } from 'react'
import DOM from 'react-dom'
import { useState, useRef, useMemo } from 'react'
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'
@@ -48,7 +46,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
const toast = useToast()
const ctxMenu = useContextMenu()
const gpxInputRef = useRef<HTMLInputElement>(null)
const kmlKmzInputRef = useRef<HTMLInputElement>(null)
const keyholeMarkupFileInputRef = useRef<HTMLInputElement>(null)
const trip = useTripStore((s) => s.trip)
const loadTrip = useTripStore((s) => s.loadTrip)
const can = useCanDo()
@@ -80,45 +78,45 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
const [googleListOpen, setGoogleListOpen] = useState(false)
const [googleListUrl, setGoogleListUrl] = useState('')
const [googleListLoading, setGoogleListLoading] = useState(false)
const [kmlKmzOpen, setKmlKmzOpen] = useState(false)
const [kmlKmzLoading, setKmlKmzLoading] = useState(false)
const [kmlKmzFile, setKmlKmzFile] = useState<File | null>(null)
const [kmlKmzSummary, setKmlKmzSummary] = useState<PlacesImportSummary | null>(null)
const [kmlKmzError, setKmlKmzError] = useState('')
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 resetKmlKmzDialog = () => {
setKmlKmzFile(null)
setKmlKmzSummary(null)
setKmlKmzError('')
setKmlKmzLoading(false)
const resetKeyholeMarkupFileDialog = () => {
setKeyholeMarkupFileFile(null)
setKeyholeMarkupFileSummary(null)
setKeyholeMarkupFileError('')
setKeyholeMarkupFileLoading(false)
}
const handleKmlKmzImport = async () => {
if (!kmlKmzFile) return
const handleKeyholeMarkupFileImport = async () => {
if (!keyholeMarkupFile) return
const ext = kmlKmzFile.name.toLowerCase().split('.').pop()
const ext = keyholeMarkupFile.name.toLowerCase().split('.').pop()
if (ext !== 'kml' && ext !== 'kmz') {
setKmlKmzError(t('places.kmlKmzInvalidType'))
setKeyholeMarkupFileError(t('places.kmlKmzInvalidType'))
return
}
if (kmlKmzFile.size > importFileLimitBytes) {
setKmlKmzError(t('places.kmlKmzTooLarge', { maxMb: 10 }))
if (keyholeMarkupFile.size > importFileLimitBytes) {
setKeyholeMarkupFileError(t('places.kmlKmzTooLarge', { maxMb: 10 }))
return
}
setKmlKmzLoading(true)
setKmlKmzError('')
setKmlKmzSummary(null)
setKeyholeMarkupFileLoading(true)
setKeyholeMarkupFileError('')
setKeyholeMarkupFileSummary(null)
try {
const result = await placesApi.importMapFile(tripId, kmlKmzFile)
const result = await placesApi.importMapFile(tripId, keyholeMarkupFile)
await loadTrip(tripId)
setKmlKmzSummary(result.summary || null)
setKeyholeMarkupFileSummary(result.summary || null)
toast.success(t('places.kmlKmzImported', { count: result.count }))
if (result.summary?.errors?.length > 0) {
setKmlKmzError(result.summary.errors.join('\n'))
setKeyholeMarkupFileError(result.summary.errors.join('\n'))
}
if (result.places?.length > 0) {
@@ -133,13 +131,13 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
} catch (err: any) {
const responseSummary = err?.response?.data?.summary as PlacesImportSummary | undefined
if (responseSummary) {
setKmlKmzSummary(responseSummary)
setKeyholeMarkupFileSummary(responseSummary)
}
const message = err?.response?.data?.error || t('places.kmlKmzImportError')
setKmlKmzError(message)
setKeyholeMarkupFileError(message)
toast.error(message)
} finally {
setKmlKmzLoading(false)
setKeyholeMarkupFileLoading(false)
}
}
@@ -232,7 +230,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
<Upload size={11} strokeWidth={2} /> {t('places.importGpx')}
</button>
<button
onClick={() => { resetKmlKmzDialog(); setKmlKmzOpen(true) }}
onClick={() => { resetKeyholeMarkupFileDialog(); setKeyholeMarkupFileOpen(true) }}
style={{
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
flex: 1, padding: '5px 12px', borderRadius: 8,
@@ -589,9 +587,9 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
</div>,
document.body
)}
{kmlKmzOpen && ReactDOM.createPortal(
{keyholeMarkupFileOpen && ReactDOM.createPortal(
<div
onClick={() => { setKmlKmzOpen(false); resetKmlKmzDialog() }}
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
@@ -606,20 +604,20 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
</div>
<input
ref={kmlKmzInputRef}
ref={keyholeMarkupFileInputRef}
type="file"
accept=".kml,.kmz"
style={{ display: 'none' }}
onChange={e => {
const file = e.target.files?.[0] || null
setKmlKmzFile(file)
setKmlKmzSummary(null)
setKmlKmzError('')
setKeyholeMarkupFileFile(file)
setKeyholeMarkupFileSummary(null)
setKeyholeMarkupFileError('')
}}
/>
<button
onClick={() => kmlKmzInputRef.current?.click()}
onClick={() => keyholeMarkupFileInputRef.current?.click()}
style={{
width: '100%',
height: 44,
@@ -639,36 +637,36 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
}}
>
<Upload size={14} strokeWidth={2} />
{kmlKmzFile ? t('places.kmlKmzSelectedFile', { name: kmlKmzFile.name }) : t('places.kmlKmzSelectFile')}
{keyholeMarkupFile ? t('places.kmlKmzSelectedFile', { name: keyholeMarkupFile.name }) : t('places.kmlKmzSelectFile')}
</button>
{kmlKmzSummary && (
{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: kmlKmzSummary.totalPlacemarks,
created: kmlKmzSummary.createdCount,
skipped: kmlKmzSummary.skippedCount,
total: keyholeMarkupFileSummary.totalPlacemarks,
created: keyholeMarkupFileSummary.createdCount,
skipped: keyholeMarkupFileSummary.skippedCount,
})}
</div>
{kmlKmzSummary.warnings?.length > 0 && (
{keyholeMarkupFileSummary.warnings?.length > 0 && (
<div style={{ marginTop: 8, fontSize: 12, color: '#b45309', whiteSpace: 'pre-wrap' }}>
{kmlKmzSummary.warnings.join('\n')}
{keyholeMarkupFileSummary.warnings.join('\n')}
</div>
)}
</div>
)}
{kmlKmzError && (
{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,
}}>
{kmlKmzError}
{keyholeMarkupFileError}
</div>
)}
@@ -678,7 +676,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
<button
onClick={() => { setKmlKmzOpen(false); resetKmlKmzDialog() }}
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,
@@ -688,17 +686,17 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
{t('common.cancel')}
</button>
<button
onClick={handleKmlKmzImport}
disabled={!kmlKmzFile || kmlKmzLoading}
onClick={handleKeyholeMarkupFileImport}
disabled={!keyholeMarkupFile || keyholeMarkupFileLoading}
style={{
padding: '8px 16px', borderRadius: 10, border: 'none',
background: !kmlKmzFile || kmlKmzLoading ? 'var(--bg-tertiary)' : 'var(--accent)',
color: !kmlKmzFile || kmlKmzLoading ? 'var(--text-faint)' : 'var(--accent-text)',
fontSize: 13, fontWeight: 500, cursor: !kmlKmzFile || kmlKmzLoading ? 'default' : 'pointer',
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',
}}
>
{kmlKmzLoading ? t('common.loading') : t('common.import')}
{keyholeMarkupFileLoading ? t('common.loading') : t('common.import')}
</button>
</div>
</div>