Add file-kind icons to the GPX tree, fix drop into an empty panel
Each tree entry now shows a small waypoint/track icon based on a cheap substring check for <wpt>/<trk> (Maptool::Gpx.kinds) rather than a full REXML parse, since re-parsing a several-thousand-waypoint file on every tree fetch would make the panel noticeably slower to open. Also fix a real drop-target bug: .gpx-tree had no flex:1, so a short/empty tree left blank panel space below it that wasn't part of the drag & drop target — dropping a file there silently did nothing.
This commit is contained in:
1 parent
87df90f75c
commit
06ea8ea141
5 files changed
+58
-3
No files matched your search
+16
-1
@@ -1,5 +1,5 @@
|
||||
import { Popup } from "/vendor/maplibre-gl/maplibre-gl.mjs";
|
||||
import { GPX_ICON, NEW_FOLDER_ICON, UPLOAD_ICON } from "/js/icons.js";
|
||||
import { GPX_ICON, NEW_FOLDER_ICON, UPLOAD_ICON, WAYPOINT_ICON, TRACK_ICON } from "/js/icons.js";
|
||||
import { notifySidePanelOpen, onlyOneSidePanelOpen } from "/js/panels.js";
|
||||
|
||||
const TREE_URL = "/api/gpx/tree";
|
||||
@@ -205,9 +205,11 @@ export class GpxPanelControl {
|
||||
checkbox.checked = this._visible.has(file.path);
|
||||
checkbox.addEventListener("change", () => this._toggleFile(file.path, checkbox.checked));
|
||||
const name = document.createElement("span");
|
||||
name.className = "gpx-tree__file-name";
|
||||
name.textContent = file.name;
|
||||
name.title = file.name;
|
||||
label.appendChild(checkbox);
|
||||
(file.kinds || []).forEach((kind) => label.appendChild(this._kindIcon(kind)));
|
||||
label.appendChild(name);
|
||||
row.appendChild(label);
|
||||
row.appendChild(this._deleteButton(() => this._deleteFile(file.path)));
|
||||
@@ -215,6 +217,19 @@ export class GpxPanelControl {
|
||||
return row;
|
||||
}
|
||||
|
||||
_kindIcon(kind) {
|
||||
const icon = document.createElement("span");
|
||||
icon.className = "gpx-tree__kind-icon";
|
||||
if (kind === "waypoint") {
|
||||
icon.innerHTML = WAYPOINT_ICON;
|
||||
icon.title = "Has waypoints";
|
||||
} else {
|
||||
icon.innerHTML = TRACK_ICON;
|
||||
icon.title = "Has a track";
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
|
||||
_deleteButton(onClick) {
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
|
||||
Reference in new issue
Block a user