@panoramax/web-viewer 5.1.1-develop-942a7005 → 5.1.1-develop-4f8bcb22

package/build/esm/components/core/Basic.css

@@ -29,6 +29,7 @@
 	--widget-bg-primary: var(--blue-semi);
 	--widget-bg-primary-hover: #e0e7ff;
 	--widget-bg-warn: #FFECB3;
+	--widget-bg-danger: #FFCDD2;
 	--widget-bg-success: #C8E6C9;
 	--widget-border-div: var(--grey-pale);
 	--widget-border-btn: var(--blue);
@@ -36,6 +37,7 @@
 	--widget-font-active: var(--white);
 	--widget-font-direct: var(--blue);
 	--widget-font-warn: #BF360C;
+	--widget-font-danger: #B71C1C;
 	--widget-font-success: #1B5E20;
 	--font-family: "Atkinson Hyperlegible Next", sans-serif;
 	--widget-option-left: #6A1B9A;

package/build/esm/components/core/Basic.js

@@ -9,7 +9,7 @@ import BasicStyles from "./Basic.css" with { type: "css" };
 document.adoptedStyleSheets.push(AtkinsonStyles);
 document.adoptedStyleSheets.push(BasicStyles);
 
-const __COMMIT_HASH__ = "942a700";
+const __COMMIT_HASH__ = "4f8bcb2";
 const __PACKAGE_VERSION__ = "5.1.1";
 const __PACKAGE_ISSUES_URL__ = "https://gitlab.com/panoramax/clients/web-viewer/-/work_items";
 

package/build/esm/components/menus/PictureLegend.js

@@ -4,7 +4,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { fa, onceParentAvailable } from "../../utils/widgets.js";
 import {
 	faArrowLeft, faCalendarAlt, faChevronDown, faChevronUp, faShareNodes,
-	faTriangleExclamation, faUser, faUserLock,
+	faTriangleExclamation, faUser, faUserLock, faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { hidden, panel, placeholder } from "../styles.js";
 import { reverseGeocodingNominatim } from "../../utils/geocoder.js";
@@ -250,6 +250,28 @@ export default class PictureLegend extends LitElement {
 		}
 	}
 
+	/** @private */
+	_onDeleteClick() {
+		if(confirm(this._parent?._t.pnx.delete_picture_warn)) {
+			const meta = this._parent.psv.getPictureMetadata();
+			const nextId = meta.sequence.nextPic || meta.sequence.prevPic || null;
+			this._parent.api.deletePicture(meta.sequence.id, meta.id)
+				.then(() => {
+					// Clear cache
+					this._parent.psv.clearPictureMetadataCache();
+					this._parent.map?.reloadVectorTiles();
+
+					alert(this._parent?._t.pnx.delete_picture_ok);
+					if(nextId) {
+						this._parent.select(meta.sequence.id, nextId);
+					} else {
+						this._parent.select(null, null);
+					}
+				})
+				.catch(e => alert(this._parent?._t.pnx.delete_picture_error.replace("{e}", e)));
+		}
+	}
+
 	/**
 	 * Force legend to not go anywhere beyond tags editor.
 	 * @memberof Panoramax.components.menus.PictureLegend#
@@ -349,11 +371,15 @@ export default class PictureLegend extends LitElement {
 					${fa(faShareNodes)} ${this._parent?._t.pnx.share}
 				</pnx-button>
 
-				${this._parent.getAPI()._endpoints.report ? html`
-						<pnx-button kind="fullwarn" size="sm" @click=${() => this._parent._showReportForm()}>
-							${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
-						</pnx-button>
-				` : nothing}
+				${this._parent.psv.getPictureMetadata().permissions.delete_picture ? html`
+					<pnx-button kind="fulldanger" size="sm" @click=${this._onDeleteClick.bind(this)}>
+						${fa(faTrash)} ${this._parent?._t.pnx.delete_picture}
+					</pnx-button>` : (
+				this._parent.getAPI()._endpoints.report ? html`
+					<pnx-button kind="fullwarn" size="sm" @click=${() => this._parent._showReportForm()}>
+						${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
+					</pnx-button>
+				` : nothing)}
 
 				<slot name="editors">
 					<pnx-widget-osmeditors ._parent=${this._parent} />

package/build/esm/components/styles.js

@@ -227,6 +227,17 @@ export const btn = css`
 		background-color: var(--widget-bg-warn);
 	}
 
+	/* Fully-filled danger style */
+	.pnx-btn-fulldanger {
+		background-color: var(--widget-bg-danger);
+		color: var(--widget-font-danger);
+		border: none;
+	}
+
+	.pnx-btn-fulldanger:not(:disabled):hover {
+		background-color: var(--widget-bg-danger);
+	}
+
 	/* Fully-filled success style */
 	.pnx-btn-fullsuccess {
 		background-color: var(--widget-bg-success);

package/build/esm/components/ui/Button.js

@@ -23,7 +23,7 @@ export default class Button extends LitElement {
 	 * @memberof Panoramax.components.ui.Button#
 	 * @type {Object}
 	 * @property {boolean} [active=false] Whether the button is in an active state.
-	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, fullsuccess, outline, flat, superflat, inline, superinline)
+	 * @property {string} [kind=full] The style variation of the button (full, fullwarn, fulldanger, fullsuccess, outline, flat, superflat, inline, superinline)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 * @property {boolean} [disabled=false] Whether the button is disabled.
 	 * @property {string} [type] The button type (e.g., 'submit').

package/build/esm/translations/en.json

@@ -254,6 +254,10 @@
         "semantics_download_title": "Download tags",
         "semantics_download_info": "All semantic data (tags) are available as open data. You can download them and use it as you like.",
         "semantics_download_cta": "Download open data",
+        "delete_picture": "Delete",
+        "delete_picture_warn": "⚠️ Caution: this deletes permanently the image.\nAre you sure you want to erase completely this image?",
+        "delete_picture_ok": "Picture was successfully deleted",
+        "delete_picture_error": "An error happened when trying to delete picture:\n{e}",
         "report": "Report",
         "report_auth": "This report will be sent using your account \"{a}\"",
         "report_nature_label": "Cause of the issue",

package/build/esm/translations/fr.json

@@ -254,6 +254,10 @@
         "semantics_download_title": "Télécharger les tags",
         "semantics_download_info": "Toutes les données sémantiques (tags) sont disponibles en open data. Vous pouvez les télécharger et en faire un libre usage.",
         "semantics_download_cta": "Télécharger les données",
+        "delete_picture": "Supprimer",
+        "delete_picture_warn": "⚠️ Attention : ceci supprimera définitivement la photo.\nÊtes-vous sûr·e de vraiment vouloir complètement supprimer la photo ?",
+        "delete_picture_ok": "La photo a bien été supprimée",
+        "delete_picture_error": "Une erreur s'est produite lors de la suppression de la photo :\n{e}",
         "report": "Signaler",
         "report_auth": "Ce signalement sera envoyé en utilisant votre compte \"{a}\"",
         "report_nature_label": "Nature du problème",

package/build/esm/utils/API.js

@@ -683,6 +683,41 @@ export default class API extends EventTarget {
 			});
 	}
 
+	/**
+	 * Delete a single picture on its origin API.
+	 * @memberof Panoramax.utils.API#
+	 * @param {string} sequenceId The sequence UUID
+	 * @param {string} pictureId The picture UUID
+	 * @returns {Promise}
+	 * @fulfil {object} The JSON API response
+	 */
+	deletePicture(sequenceId, pictureId) {
+		// Fake send version
+		// console.log("Delete", sequenceId, pictureId);
+		// return Promise.resolve(true);
+
+		if(!this.isReady()) { throw new Error("API is not ready to use"); }
+		let picLink = `${this._endpoint}/collections/${sequenceId}/items/${pictureId}`;
+
+		const opts = {
+			...this._getFetchOptions(),
+			method: "DELETE",
+		};
+
+		return fetch(picLink, opts)
+			.then(async res => {
+				if(res.status >= 400) {
+					let txt = await res.text();
+					try {
+						txt = JSON.parse(txt)["message"];
+					}
+					catch(e) {}  
+					return Promise.reject(txt);
+				}
+				return true;
+			});
+	}
+
 	/**
 	 * Send picture semantics change to origin API.
 	 * @memberof Panoramax.utils.API#

package/build/esm/utils/picture.js

@@ -491,6 +491,7 @@ export function filterRelatedPicsLinks(metadata, customFilter = null) {
  */
 export function getPermissions(f) {
 	let edit_semantics = false;
+	let delete_picture = false;
 
 	if(
 		f.links.find(l => l.method === "PATCH" && l.attributes.includes("semantics"))
@@ -499,7 +500,11 @@ export function getPermissions(f) {
 		edit_semantics = true;
 	}
 
-	return { edit_semantics };
+	if(f.links.find(l => l.method === "DELETE" && l.rel === "delete")) {
+		delete_picture = true;
+	}
+
+	return { edit_semantics, delete_picture };
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "5.1.1-develop-942a7005",
+  "version": "5.1.1-develop-4f8bcb22",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",