huellas/ts-client/client.ts

import * as L from 'leaflet-contextmenu';
import { Feature, FeatureCollection, GeoJSON } from 'geojson';

interface PlaceModel {
	id: number | null;
	name: string;
	address: string;
	open_hours: string;
	icon: string;
	description: string;
	latitude: number;
	longitude: number;
}

async function loadPlaces(): Promise<Array<PlaceModel>> {
	return await fetch('places').then(response => response.json());
}

function toFeature(place: PlaceModel): Feature {
	return {
		"type": "Feature",
		"properties": {
			"name": place.name,
			"address": place.address,
			"open_hours": place.open_hours,
			"icon": place.icon,
			"description": place.description
		},
		"geometry": {
			"type": "Point",
			"coordinates": [place.latitude, place.longitude]
		}
	}
}

function toLeafletPlaces(backendPlaces: Array<PlaceModel>): GeoJSON {
	let result: FeatureCollection = {
		type: "FeatureCollection",
		features: new Array<Feature>(),
	}
	for (const place of backendPlaces) {
		result.features.push(toFeature(place));
	}
	return result;
}

let placesLayer: L.GeoJSON;
let places = new Map<L.LatLngLiteral, PlaceModel>();

async function createPlace(): Promise<void> {
	const name =
		(document.getElementById("name") as HTMLInputElement).value;
	const address =
		(document.getElementById("address") as HTMLInputElement).value;
	const open_hours =
		(document.getElementById("open_hours") as HTMLTextAreaElement).value;
	const icon =
		(document.getElementById("icon") as HTMLSelectElement).value;
	const description =
		(document.getElementById("description") as HTMLTextAreaElement).value;
	const latitude = parseFloat(
		(document.getElementById("lat") as HTMLInputElement).value);
	const longitude = parseFloat(
		(document.getElementById("long") as HTMLSelectElement).value);

	const newPlace: PlaceModel = {
		id: null,
		name: name,
		address: address,
		open_hours: open_hours,
		icon: icon,
		description: description,
		latitude: latitude,
		longitude: longitude,
	};

	await fetch('places', {
		method: 'PUT',
		headers: {
			'Content-Type': 'application/json',
		},
		body: JSON.stringify(newPlace),
	})
		.then((response) => response.json())
		.then((place: PlaceModel) => {
			places.set(
				{ lat: place.latitude, lng: place.longitude },
				place
			);
			placesLayer.addData(toFeature(place));
		})
		.catch((error) => alert(error));
}

interface MapEvent {
	latlng: L.latlng;
}

async function setupMap(): Promise<void> {
	/* Create/Edit form */
	const modal = document.getElementById("modal");
	const closeButton = document.getElementById("close");

	closeButton.onclick = function() {
		modal.style.display = "none";
	}

	window.onclick = function(e: Event) {
		if (e.target == modal) {
			modal.style.display = "none";
		}
	}

	function openForm(title: string, lat: number, long: number): void {
		const h1 = modal.getElementsByTagName("h1")[0];
		h1.innerText = title;
		const latInput = (document.getElementById("lat") as HTMLInputElement);
		latInput.value = lat.toString();
		const longInput = (document.getElementById("long") as HTMLInputElement);
		longInput.value = long.toString();

		modal.style.display = "block";
	}

	function openCreateForm(e: MapEvent) {
		const lat = e.latlng.lat;
		const long = e.latlng.lng;
		openForm("Añadir lugar nuevo", lat, long);
	}

	/* Get places from backend */
	const backendPlaces = await loadPlaces();
	const leafletPlaces = toLeafletPlaces(backendPlaces);
	for (const place of backendPlaces) {
		places.set(
			{ lat: place.latitude, lng: place.longitude },
			place
		);
	}

	/* Set up the map*/
	const map = new L.Map('map', {
		contextmenu: true,
		contextmenuWidth: 140,
		contextmenuItems: [
			{
				text: 'Añadir lugar',
				callback: openCreateForm
			}
		]
	});

	/* Create the tile layer with correct attribution*/
	const osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
	const osmAttrib = 'Mapa © <a href="https://openstreetmap.org">OpenStreetMap</a>';
	const osm = new L.TileLayer(osmUrl, { minZoom: 4, maxZoom: 20, attribution: osmAttrib });

	/* Start the map in Santiago */
	map.setView(new L.LatLng(-33.45, -70.666667), 13);
	/* Try to get user position, if not, put the map in Santiago again */
	map.locate({ setView: true, maxZoom: 16 })
		.on('locationerror', function(_event: L.LocationEvent) {
			map.setView(new L.LatLng(-33.45, -70.666667), 13);
		});
	map.addLayer(osm);

	function onEachFeature(feature: Feature, layer: L.Layer) {
		if (feature.properties) {
			let popupStr = "<h3>" + feature.properties.name + "</h3>";
			popupStr += "<ul>"
			if (feature.properties.address)
				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>";
			if (feature.properties.description)
				popupStr += "<li>" + feature.properties.description + "</li>";
			popupStr += "</ul>";

			layer.bindPopup(popupStr);
			layer.bindContextMenu({
				contextmenu: true,
				contextmenuInheritItems: false,
				contextmenuItems: [{
					text: 'Marker item'
				}]
			});
		}
	}

	/* Icons */
	const icons = new Map<string, L.Icon>();
	icons.set('bar', new L.Icon({ iconUrl: 'icons/bar.svg' }));
	icons.set('coffee', new L.Icon({ iconUrl: 'icons/coffee.svg' }));
	icons.set('cinema', new L.Icon({ iconUrl: 'icons/film.svg' }));
	icons.set('dining', new L.Icon({ iconUrl: 'icons/dining.svg' }));
	icons.set('food', new L.Icon({ iconUrl: 'icons/food.svg' }));
	icons.set('jazz', new L.Icon({ iconUrl: 'icons/saxophone.svg' }));
	icons.set('library', new L.Icon({ iconUrl: 'icons/book.svg' }));
	icons.set('marker', new L.Icon({ iconUrl: 'icons/marker.svg' }));
	icons.set('mask', new L.Icon({ iconUrl: 'icons/mask.svg' }));
	icons.set('museum', new L.Icon({ iconUrl: 'icons/museum.svg' }));
	icons.set('shop', new L.Icon({ iconUrl: 'icons/store.svg' }));

	for (let [_name, icon] of icons) {
		icon.options.iconSize = [36, 36];
		icon.options.popupAnchor = [0, -18];
	}

	function pointToLayer(feature: Feature, latlng: L.LatLng) {
		let markerIcon = null;
		if (feature.properties && feature.properties.icon) {
			markerIcon = icons.get(feature.properties.icon);
		}
		if (markerIcon !== null && markerIcon !== undefined)
			return L.marker(latlng, { icon: markerIcon });
		else
			return L.marker(latlng);
	}

	placesLayer = L.geoJSON(leafletPlaces, {
		onEachFeature: onEachFeature,
		pointToLayer: pointToLayer
	})
	map.addLayer(placesLayer);
}