@panoramax/web-viewer 5.0.0-develop-d7206514 → 5.0.0-develop-d26305dd

package/build/components/menus/MapFilters.js

@@ -0,0 +1,567 @@
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { QUALITYSCORE_GPS_VALUES, getUserAccount } from "../../utils/utils.js";
+import { isPanoramaxEndpointSingleUser } from "../../utils/map.js";
+import { faSvg, titles } from "../styles.js";
+import {
+	faArrowRight, faCalendar, faGlobeEurope, faImage, faInfoCircle,
+	faMapMarkerAlt, faMedal, faStar, faUser,
+} from "@fortawesome/free-solid-svg-icons";
+
+
+/**
+ * Map Filters menu allows user to select map data they want displayed.
+ * @class Panoramax.components.menus.MapFilters
+ * @element pnx-map-filters-menu
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-map-filters-menu user-search="" _parent=${viewer} />
+ * ```
+ */
+export default class MapFilters extends LitElement {
+	/** @private */
+	static styles = [ faSvg, titles, css`
+		.pnx-input-group {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			gap: 5px;
+		}
+
+		/* Filter block */
+		.pnx-filter-block {
+			position: relative;
+			padding: 10px 15px;
+			border-bottom: 2px solid var(--widget-border-div);
+		}
+		.pnx-filter-block:first-child {
+			padding-top: 15px;
+		}
+		.pnx-filter-block:last-child {
+			border-bottom: none;
+			padding-bottom: 15px;
+		}
+		.pnx-filter-block h4 {
+			margin-bottom: 5px;
+		}
+		.pnx-filter-zoomin {
+			z-index: 131;
+			background-color: rgba(255,255,255,0.9);
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			bottom: 0;
+			border-radius: 25px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: baseline;
+			padding: 15px;
+		}
+		.pnx-filter-zoomin h5 {
+			font-weight: 900;
+			margin: 0 0 5px 0;
+			font-size: 1em;
+		}
+		.pnx-filter-zoomin div {
+			font-weight: unset;
+  			font-size: 0.9em;
+		}
+		.pnx-filter-zoomin.hidden {
+			display: none;
+		}
+
+		/* Input styles */
+		.pnx-filter-active,
+		pnx-search-bar.pnx-filter-active::part(container),
+		pnx-search-bar.pnx-filter-active::part(input) {
+			background-color: var(--widget-bg-active) !important;
+			border-color: var(--widget-bg-active) !important;
+			color: var(--widget-font-active) !important;
+		}
+		input[type=date] {
+			min-width: 0;
+			flex-grow: 2;
+			padding: 2px 0;
+			text-align: center;
+			background-color: var(--widget-bg);
+			color: var(--widget-font);
+			border: 1px solid var(--widget-border-div);
+			border-radius: 20px;
+			font-family: var(--font-family);
+		}
+
+		/* Input shortcuts */
+		.pnx-input-shortcuts {
+			margin-top: 0px;
+			margin-bottom: 5px;
+		}
+		.pnx-input-shortcuts button {
+			border: none;
+			font-size: 0.75em;
+			padding: 2px 6px;
+			vertical-align: middle;
+			background-color: var(--grey-pale);
+			color: var(--black);
+			border-radius: 10px;
+			cursor: pointer;
+			font-family: var(--font-family);
+		}
+		.pnx-input-shortcuts button:hover {
+			background-color: #d9dcd9;
+		}
+
+		/* Checkbox looking like buttons */
+		.pnx-input-group.pnx-checkbox-btns {
+			gap: 0;
+			align-items: stretch;
+		}
+		.pnx-checkbox-btns label {
+			display: inline-block;
+			padding: 2px 7px;
+			background: none;
+			border: 1px solid var(--widget-border-btn);
+			color: var(--widget-font-direct);
+			cursor: pointer;
+			font-size: 16px;
+			text-decoration: none;
+			border-left-width: 0px;
+		}
+		.pnx-checkbox-btns label:hover {
+			background-color: var(--widget-bg-hover);
+		}
+		.pnx-checkbox-btns label:first-of-type {
+			border-top-left-radius: 8px;
+			border-bottom-left-radius: 8px;
+			border-left-width: 1px;
+		}
+		.pnx-checkbox-btns label:last-of-type {
+			border-top-right-radius: 8px;
+			border-bottom-right-radius: 8px;
+		}
+		.pnx-checkbox-btns input[type="radio"] { display: none; }
+		.pnx-checkbox-btns input[type="radio"]:checked + label {
+			background-color: var(--widget-bg-active);
+			color: var(--widget-font-active);
+		}
+		.pnx-checkbox-btns input[type="radio"]:checked + label:first-of-type {
+			border-right-color: white;
+		}
+
+		/* Force user search width */
+		#pnx-filter-search-user::part(container) { width: 100%; }
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.MapFilters#
+	 * @type {Object}
+	 * @property {boolean} [user-search=false] Should user search filter show up ?
+	 * @property {boolean} [quality-score=false] Should quality score filter show up ?
+	 * @property {boolean} [no-date=false] Should date filters be hidden ?
+	 * @property {boolean} [no-picture-type=false] Should picture type filter be hidden ?
+	 * @property {boolean} [no-gps=false] Should GPS precision filter be hidden ?
+	 * @property {boolean} [no-source=false] Should pictures source (world, instance) filter be hidden ?
+	 */
+	static properties = {
+		"quality-score": {type: Boolean},	// Should be available in pnx-widget-mapfilters as well
+		"user-search": {type: Boolean},		// Should be available in pnx-widget-mapfilters as well
+		"no-date": {type: Boolean},			// Should be available in pnx-widget-mapfilters as well
+		"no-picture-type": {type: Boolean},	// Should be available in pnx-widget-mapfilters as well
+		"no-gps": {type: Boolean},			// Should be available in pnx-widget-mapfilters as well
+		"no-source": {type: Boolean},		// Should be available in pnx-widget-mapfilters as well
+		showZoomIn: {state: true},
+		minDate: {state: true},
+		maxDate: {state: true},
+		type: {state: true},
+		score: {state: true},
+		user: {state: true},
+		gps: {state: true},
+		source: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._formDelay = null;
+		this.showZoomIn = true;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		// Input changes
+		for(let i of this.shadowRoot.querySelectorAll("input")) {
+			i.addEventListener("change", this._onFormChange.bind(this));
+			i.addEventListener("keypress", this._onFormChange.bind(this));
+			i.addEventListener("paste", this._onFormChange.bind(this));
+			i.addEventListener("input", this._onFormChange.bind(this));
+		}
+
+		// Map zoom
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(() => {
+			this._parent.map.on("zoomend", this._onMapZoom.bind(this));
+			this._parent.mapStyleComposer.addEventListener("filters-changed", e => this._onParentFilterChange(e.detail));
+			this._parent.mapStyleComposer.addEventListener("panoramax-changed", () => this._onParentFilterChange(this._parent.mapStyleComposer.panoramaxFilters));
+			this._onMapZoom();
+			this._onParentFilterChange(this._parent.mapStyleComposer.panoramaxFilters);
+		}));
+	}
+
+	/**
+	 * Map zoom event handler: show/hide "zoom in" labels
+	 * @private
+	 */
+	_onMapZoom() {
+		this.showZoomIn = this._parent.map.getZoom() < 7;
+	}
+
+	/**
+	 * Filter changes on parent: update input fields
+	 * @private
+	 */
+	_onParentFilterChange(e) {
+		this.minDate = e?.minDate || null;
+		this.maxDate = e?.maxDate || null;
+
+		// Sanity check for date
+		if(this.minDate && this.maxDate && this.minDate > this.maxDate) {
+			const prevMin = this.minDate;
+			this.minDate = this.maxDate;
+			this.maxDate = prevMin;
+			this._onFormChange();
+		}
+
+		this.score = Array.isArray(e?.qualityscore) ? e.qualityscore.join(",") : (e?.qualityscore || "");
+		this.gps = e?.gps && Array.isArray(e.gps) ? e.gps.join(",") : (e?.gps?.length > 0 ? e.gps : "");
+
+		this.type = "";
+		if(e?.pic_type && e.pic_type !== "") {
+			this.type = e.pic_type === "flat" ? "flat" : "equirectangular";
+		}
+
+		if(!isPanoramaxEndpointSingleUser(this._parent.mapStyleComposer.panoramax)) {
+			this.source = this._parent.mapStyleComposer.panoramax;
+			this.user = null;
+		}
+		else {
+			this.source = this._parent.mapStyleComposer.panoramax.startsWith("metacatalog_") ? "metacatalog" : "default";
+
+			// Find username if first load
+			// eslint-disable-next-line eqeqeq
+			if(this.user == null) {
+				let userId = this._parent.mapStyleComposer.panoramax.replace("metacatalog_", "");
+				this._parent.getAPI().getUserName(userId).then(username => {
+					this.user = username;
+					this.shadowRoot.querySelector("#pnx-filter-search-user").setAttribute("value", username);
+				});
+			}
+		}
+	}
+
+	/** @private */
+	_onSubmit(e) {
+		e.preventDefault();
+		this._onFormChange();
+		return false;
+	}
+
+	/** @private */
+	_onFormChange() {
+		if(this._formDelay) { clearTimeout(this._formDelay); }
+		this._formDelay = setTimeout(() => {
+			this.minDate = this.shadowRoot.querySelector("#pnx-filter-date-from")?.value;
+			this.maxDate = this.shadowRoot.querySelector("#pnx-filter-date-end")?.value;
+			const fTypeFlat = this.shadowRoot.querySelector("#pnx-filter-type-flat");
+			const fType360 = this.shadowRoot.querySelector("#pnx-filter-type-360");
+			this.type = fType360.checked ? "equirectangular" : (fTypeFlat.checked ? "flat" : "");
+			this.score = this.shadowRoot.querySelector("#pnx-filter-qualityscore")?.grade;
+			this.gps = this.shadowRoot.querySelector("#pnx-filter-gps")?.grade;
+			const msc = this._parent.mapStyleComposer;
+			const newFilters = {
+				minDate: this.minDate,
+				maxDate: this.maxDate,
+				pic_type: this.type,
+				qualityscore: this.score,
+				gps: this.gps,
+				featuresRestrictions: msc.panoramaxFilters.featuresRestrictions,
+			};
+			msc.setPanoramaxFilters(newFilters);
+		}, 250);
+	}
+
+	/** @private */
+	_onSourceChange(e) {
+		this.source = e.target.checked ? "default" : "metacatalog";
+		this.user = null;
+		this._onUserSearchResult();
+	}
+
+	/** @private */
+	_userSearch(value) {
+		return this._parent.getAPI?.().searchUsers(value)
+			.then(data => ((data || [])
+				.map(f => ({
+					title: f.label,
+					data: f
+				}))
+			));
+	}
+
+	/** @private */
+	_onUserSearchResult(e) {
+		if(e?.detail?.data) {
+			e.target.classList.add("pnx-filter-active");
+			const userid = this.source === "metacatalog" ? "metacatalog_"+e.detail.data.id : e.detail.data.id;
+			return this._parent?.mapStyleComposer._createPanoramaxEndpointForUser(userid);
+		} else {
+			const field = (e?.target || this.shadowRoot.querySelector("#pnx-filter-search-user"));
+			if(field) {
+				field.classList.remove("pnx-filter-active");
+				field.setAttribute("value", "");
+			}
+			return this._parent?.mapStyleComposer.switchPanoramaxEndpoint(this.source);
+		}
+	}
+
+	/** @private */
+	_onReset() {
+		this.shadowRoot.querySelector("#pnx-filter-qualityscore")?.setAttribute("grade", "");
+		this.shadowRoot.querySelector("#pnx-filter-search-user")?.reset();
+		this.shadowRoot.querySelector("#pnx-filter-gps")?.setAttribute("grade", "");
+		this.minDate = null;
+		this.maxDate = null;
+		this.type = "";
+		this.score = null;
+		this.user = null;
+		this._onFormChange();
+	}
+
+	/** @private */
+	_onDateShortcut(date) {
+		const dateFromField = this.shadowRoot.getElementById("pnx-filter-date-from");
+		const dateToField = this.shadowRoot.getElementById("pnx-filter-date-end");
+
+		if(dateFromField) {
+			if(dateFromField.value !== date) { dateFromField.value = date; }
+			else { dateFromField.value = ""; }
+		}
+
+		if(dateToField) { dateToField.value = ""; }
+	}
+
+	/** @private */
+	_onMeUserSearch() {
+		const userAccount = getUserAccount();
+		if(!userAccount) { return; }
+
+		const userField = this.shadowRoot.getElementById("pnx-filter-search-user");
+		if(!this._parent?.mapStyleComposer?.panoramax?.endsWith(userAccount.id)) {
+			userField?._onResultClick({title: userAccount.name, data: {id: userAccount.id }});
+		}
+		else {
+			userField?._onResultClick();
+		}
+	}
+
+	/** @private */
+	render() {
+		const userAccount = getUserAccount();
+
+		const gpsPrecLabels = {
+			"1": this._parent?._t.pnx.filter_gps_precision_morethan
+				.replace("{n}", QUALITYSCORE_GPS_VALUES[7])
+				.replace(/\.01/g, ""),
+			"2": this._parent?._t.pnx.filter_gps_precision_between
+				.replace("{n1}", QUALITYSCORE_GPS_VALUES[5])
+				.replace("{n2}", QUALITYSCORE_GPS_VALUES[7])
+				.replace(/\.01/g, ""),
+			"3": this._parent?._t.pnx.filter_gps_precision_between
+				.replace("{n1}", QUALITYSCORE_GPS_VALUES[3])
+				.replace("{n2}", QUALITYSCORE_GPS_VALUES[5])
+				.replace(/\.01/g, ""),
+			"4": this._parent?._t.pnx.filter_gps_precision_between
+				.replace("{n1}", QUALITYSCORE_GPS_VALUES[1])
+				.replace("{n2}", QUALITYSCORE_GPS_VALUES[3])
+				.replace(/\.01/g, ""),
+			"5": this._parent?._t.pnx.filter_gps_precision_lessthan
+				.replace("{n}", QUALITYSCORE_GPS_VALUES[1])
+				.replace(/\.01/g, ""),
+		};
+
+		let serverName = this._parent.api._metadata?.name; // Keep _parent.api as it's local instance name
+		if(!serverName || serverName === "Unnamed") { serverName = this._parent?._t.pnx.filter_source_local; }
+
+		const lockedFilter = () => html`
+			<div class="pnx-filter-zoomin ${this.showZoomIn ? "" : "hidden"}">
+				<h5>${this._parent?._t.pnx.filter_locked}</h5>
+				<div>${this._parent?._t.pnx.filter_zoom_in}</div>
+			</div>`;
+
+		return html`<form
+			@reset=${this._onReset}
+			@change=${this._onFormChange}
+			@submit=${this._onSubmit}
+		>
+			${this["no-source"] ? "" : html`<div class="pnx-filter-block">
+				<pnx-icon-switch
+					id="pnx-pictures-source"
+					name="pnx-pictures-source"
+					@change=${this._onSourceChange}
+					.checked=${this.source === "default"}
+				>
+					${fa(faGlobeEurope, { attributes: { slot: "icon-left" }})}
+					<span slot="label-left">${this._parent?._t.pnx.filter_source_world}</span>
+					${fa(faStar, { attributes: { slot: "icon-right" }})}
+					<span slot="label-right">${serverName}</span>
+				</pnx-icon-switch>
+			</div>`}
+
+			${this["no-picture-type"] ? "" : html`<div class="pnx-filter-block">
+				<h4>${fa(faImage)} ${this._parent?._t.pnx.filter_picture}</h4>
+				<div class="pnx-input-group pnx-checkbox-btns" style="justify-content: center;">
+					<input
+						type="radio"
+						id="pnx-filter-type-all"
+						name="pnx-filter-type"
+						value=""
+						.checked=${!this.type || this.type === ""}
+					/>
+					<label for="pnx-filter-type-all">${this._parent?._t.pnx.picture_all}</label>
+					<input
+						type="radio"
+						id="pnx-filter-type-flat"
+						name="pnx-filter-type"
+						value="flat"
+						.checked=${this.type === "flat"}
+					/>
+					<label for="pnx-filter-type-flat">${this._parent?._t.pnx.picture_flat}</label>
+					<input
+						type="radio"
+						id="pnx-filter-type-360"
+						name="pnx-filter-type"
+						value="equirectangular"
+						.checked=${this.type === "equirectangular"}
+					/>
+					<label for="pnx-filter-type-360">${this._parent?._t.pnx.picture_360}</label>
+				</div>
+			</div>`}
+
+			${this["user-search"] ? html`
+				<div class="pnx-filter-block">
+					<h4>${fa(faUser)} ${this._parent?._t.pnx.filter_user}</h4>
+					${this.source === "default" && userAccount ? html`
+						<div class="pnx-input-shortcuts">
+							<button @click=${this._onMeUserSearch}>
+								${this._parent?._t.pnx.filter_user_mypics}
+							</button>
+						</div>
+					` : nothing}
+					<pnx-search-bar
+						id="pnx-filter-search-user"
+						placeholder=${this._parent?._t.pnx.search_user}
+						class=${this.user ? "pnx-filter-active" : ""}
+						.value=${this.user}
+						@result=${this._onUserSearchResult}
+						.searcher=${this._userSearch.bind(this)}
+						._parent=${this._parent}
+						no-menu-closure
+					>
+					</pnx-search-bar>
+				</div>
+			` : nothing}
+
+			${this["no-date"] ? "" : html`<div class="pnx-filter-block">
+				${lockedFilter()}
+				<h4>${fa(faCalendar)} ${this._parent?._t.pnx.filter_date}</h4>
+				<div class="pnx-input-shortcuts">
+					<button
+						@click=${() => this._onDateShortcut(new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split("T")[0])}
+					>${this._parent?._t.pnx.filter_date_1month}</button>
+					<button
+						@click=${() => this._onDateShortcut(new Date(new Date().setMonth(new Date().getMonth() - 6)).toISOString().split("T")[0])}
+					>${this._parent?._t.pnx.filter_date_6months}</button>
+					<button
+						@click=${() => this._onDateShortcut(new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0])}
+					>${this._parent?._t.pnx.filter_date_1year}</button>
+				</div>
+				<div class="pnx-input-group">
+					<input
+						type="date"
+						id="pnx-filter-date-from"
+						.value=${this.minDate}
+						class=${this.minDate && this.minDate !== "" ? "pnx-filter-active" : ""}
+					/>
+					${fa(faArrowRight)}
+					<input
+						type="date"
+						id="pnx-filter-date-end"
+						.value=${this.maxDate}
+						class=${this.maxDate && this.maxDate !== "" ? "pnx-filter-active" : ""}
+					/>
+				</div>
+			</div>`}
+
+			${this["quality-score"] ? html`
+				<div class="pnx-filter-block">
+					${lockedFilter()}
+					<h4>
+						${fa(faMedal)} ${this._parent?._t.pnx.filter_qualityscore}
+						<pnx-button
+							title="${this._parent?._t.pnx.metadata_quality_help}"
+							kind="superinline"
+							@click=${() => this._parent?._showQualityScoreDoc()}
+						>
+							${fa(faInfoCircle)}
+						</pnx-button>
+					</h4>
+					<div class="pnx-input-group">
+						<pnx-quality-score
+							id="pnx-filter-qualityscore"
+							._t=${this._parent?._t}
+							input="pnx-filter-qualityscore"
+							grade=${this.score}
+							@change=${this._onFormChange}
+						>
+						</pnx-quality-score>
+					</div>
+				</div>
+			` : nothing}
+
+			${this["no-gps"] ? "" : html`
+				<div class="pnx-filter-block">
+					${lockedFilter()}
+					<h4>
+						${fa(faMapMarkerAlt)} ${this._parent?._t.pnx.filter_gps_precision}
+						${this._parent._showLocationPrecisionDoc ? html`
+							<pnx-button
+								title="${this._parent?._t.pnx.filter_gps_precision_help}"
+								kind="superinline"
+								@click=${() => this._parent._showLocationPrecisionDoc()}
+							>
+								${fa(faInfoCircle)}
+							</pnx-button>
+						` : nothing}
+					</h4>
+					<div class="pnx-input-group">
+						<pnx-grade-filter
+							id="pnx-filter-gps"
+							._t=${this._parent?._t}
+							input="pnx-filter-gps"
+							grade=${this.gps}
+							@change=${this._onFormChange}
+							.labels=${gpsPrecLabels}
+						>
+						</pnx-grade-filter>
+					</div>
+				</div>
+			`}
+
+		</form>`;
+	}
+}
+
+customElements.define("pnx-map-filters-menu", MapFilters);