From 5f3189cd90739fd4c5187eb575dfab500e98cff8 Mon Sep 17 00:00:00 2001
From: Felipe Contreras Salinas <felipe@bstr.cl>
Date: Tue, 28 Mar 2023 01:57:12 -0300
Subject: [PATCH] URLs on frontend

---
 src/routes.rs       |  2 +-
 static/index.html   |  4 ++++
 ts-client/client.ts | 36 ++++++++++++++++++++++++++++--------
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/routes.rs b/src/routes.rs
index 0527969..91f1219 100644
--- a/src/routes.rs
+++ b/src/routes.rs
@@ -89,8 +89,8 @@ async fn update_place(mut db: Connection<Db>, place: Json<Place>) -> Result<Upse
         place.description,
         place.longitude,
         place.latitude,
-        place.id,
         place.url,
+        place.id,
     )
     .execute(&mut *db)
     .await?;
diff --git a/static/index.html b/static/index.html
index 47fca0f..a2335c5 100644
--- a/static/index.html
+++ b/static/index.html
@@ -136,6 +136,10 @@
 						<option value="shop">Tienda</option>
 					</select>
 				</p>
+				<p>
+					<label for="url"> URL:</label>
+					<input type="text" id="url" name="url" size="30">
+				</p>
 				<p>
 					<label for="description"> Descripción:</label>
 					<textarea id="description" name="description"
diff --git a/ts-client/client.ts b/ts-client/client.ts
index af68056..bbf6224 100644
--- a/ts-client/client.ts
+++ b/ts-client/client.ts
@@ -10,6 +10,7 @@ interface PlaceModel {
 	description: string;
 	latitude: number;
 	longitude: number;
+	url: string | null;
 }
 
 async function loadPlaces(): Promise<Array<PlaceModel>> {
@@ -24,7 +25,8 @@ function toFeature(place: PlaceModel): Feature {
 			"address": place.address,
 			"open_hours": place.open_hours,
 			"icon": place.icon,
-			"description": place.description
+			"description": place.description,
+			"url": place.url,
 		},
 		"geometry": {
 			"type": "Point",
@@ -68,6 +70,8 @@ function getPlaceFromForm(): PlaceModel {
 		(document.getElementById("lat") as HTMLInputElement).value);
 	const longitude = parseFloat(
 		(document.getElementById("long") as HTMLSelectElement).value);
+	const url =
+		(document.getElementById("url") as HTMLInputElement).value;
 
 	return {
 		id: id,
@@ -78,6 +82,7 @@ function getPlaceFromForm(): PlaceModel {
 		description: description,
 		latitude: latitude,
 		longitude: longitude,
+		url: url,
 	};
 }
 
@@ -88,6 +93,7 @@ function clearForm(): void {
 	const longInput = (document.getElementById("long") as HTMLInputElement);
 	const nameInput = (document.getElementById("name") as HTMLInputElement);
 	const addressInput = (document.getElementById("address") as HTMLInputElement);
+	const urlInput = (document.getElementById("url") as HTMLInputElement);
 	const openHoursArea = (document.getElementById("open_hours") as HTMLTextAreaElement);
 	const descriptionArea = (document.getElementById("description") as HTMLTextAreaElement);
 
@@ -97,6 +103,7 @@ function clearForm(): void {
 	longInput.value = "";
 	nameInput.value = "";
 	addressInput.value = "";
+	urlInput.value = "";
 	openHoursArea.value = "";
 	descriptionArea.value = "";
 
@@ -168,6 +175,14 @@ async function getAddressReverse(lat: number, long: number): Promise<string> {
 	return `${address.road} ${address.house_number}, ${address.city}`;
 }
 
+function toLink(url: string): string {
+	let content = url;
+	const m = url.match("https://instagram.com/(.*)");
+	if (m) {
+		content = `@${m[1]}`;
+	}
+	return `<a href="${url}" target="_blank">${content}</a>`
+}
 async function setupMap(): Promise<void> {
 	/* Create/Edit form */
 	const modal = document.getElementById("modal");
@@ -204,6 +219,7 @@ async function setupMap(): Promise<void> {
 			/*Get the form elements*/
 			const idInput = (document.getElementById("id") as HTMLInputElement);
 			const nameInput = (document.getElementById("name") as HTMLInputElement);
+			const urlInput = (document.getElementById("url") as HTMLInputElement);
 			const openHoursArea = (document.getElementById("open_hours") as HTMLTextAreaElement);
 			const iconSelect = (document.getElementById("icon") as HTMLSelectElement);
 			const descriptionArea = (document.getElementById("description") as HTMLTextAreaElement);
@@ -212,6 +228,7 @@ async function setupMap(): Promise<void> {
 			idInput.value = place.id.toString();
 			nameInput.value = place.name;
 			addressInput.value = place.address;
+			urlInput.value = place.url;
 			openHoursArea.value = place.open_hours;
 			iconSelect.value = place.icon;
 			descriptionArea.value = place.description;
@@ -287,19 +304,22 @@ async function setupMap(): Promise<void> {
 
 	function onEachFeature(feature: Feature, layer: L.Layer) {
 		if (feature.properties) {
-			let popupStr = "<h3>" + feature.properties.name + "</h3>";
+			let popupStr = `<h3>${feature.properties.name}</h3>`;
 			popupStr += "<ul>"
 			if (feature.properties.address)
-				popupStr += "<li><b>Dirección:</b> " + feature.properties.address + "</li>";
+				popupStr += `<li><b>Dirección:</b>${feature.properties.address}</li>`;
 			if (feature.properties.open_hours)
-				popupStr += "<li><b>Horario:</b> " + feature.properties.open_hours + "</li>";
+				popupStr += `<li><b>Horario:</b>${feature.properties.open_hours}</li>`;
 			if (feature.properties.description)
-				popupStr += "<li>" + feature.properties.description + "</li>";
+				popupStr += `<li>${feature.properties.description}</li>`;
+			if (feature.properties.url)
+				popupStr += `<li>${toLink(feature.properties.url)}</li>`;
 
 			const lnglat = (feature.geometry as Point).coordinates;
-			popupStr += "<a href=\"https://www.google.com/maps/dir//" +
-				lnglat[1] + "," + lnglat[0] + "/@" + lnglat[1] + "," + lnglat[0] +
-				",15z\" target=\"_blank\">GMaps</a>"
+			const lng = lnglat[0];
+			const lat = lnglat[0];
+			popupStr += `<a href="https://www.google.com/maps/dir//` +
+				`${lat},${lng}/@${lat},${lng},15z" target="_blank">GMaps</a>`
 			popupStr += "</ul>";
 
 			layer.bindPopup(popupStr);