Initial frontend. Fetch only for now.

src/main.rs

@@ -1,17 +1,13 @@
 #[macro_use]
 extern crate rocket;
+use rocket::fs::{relative, FileServer};
 
 mod place;
 mod routes;
 
-#[get("/")]
-fn index() -> &'static str {
-    "Hello, world!"
-}
-
 #[launch]
 fn rocket() -> _ {
     rocket::build()
-        .mount("/", routes![index])
+        .mount("/", FileServer::from(relative!("static")))
         .attach(routes::stage())
 }

static/icons/bar.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7.5,7L5.5,5H18.5L16.5,7M11,13V19H6V21H18V19H13V13L21,5V3H3V5L11,13Z" style="fill:#00aa44"/></svg>

static/icons/book.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.59 22.5,21.59C22.75,21.59 23,21.34 23,21.09V6.5C22.4,6.05 21.75,5.75 21,5.5V7.5L21,13V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V13L12,8.5V6.5C10.55,5.4 8.45,5 6.5,5V5Z" style="fill:#442178"/></svg>

static/icons/coffee.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z" style="fill:#ff6600"/></svg>

static/icons/dining.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M14.88,11.53L13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.47,10.12C12.76,8.59 13.26,6.44 14.85,4.85C16.76,2.93 19.5,2.57 20.96,4.03C22.43,5.5 22.07,8.24 20.15,10.15C18.56,11.74 16.41,12.24 14.88,11.53Z" style="fill:#2ca02c"/></svg>

static/icons/film.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M18,9H16V7H18M18,13H16V11H18M18,17H16V15H18M8,9H6V7H8M8,13H6V11H8M8,17H6V15H8M18,3V5H16V3H8V5H6V3H4V21H6V19H8V21H16V19H18V21H20V3H18Z" style="fill:#aa0000"/></svg>

static/icons/food.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5,21L14,8H16.23L15.1,3.46L16.84,3L18.09,8H22L20.5,21H15.5M5,11H10A3,3 0 0,1 13,14H2A3,3 0 0,1 5,11M13,18A3,3 0 0,1 10,21H5A3,3 0 0,1 2,18H13M3,15H8L9.5,16.5L11,15H12A1,1 0 0,1 13,16A1,1 0 0,1 12,17H3A1,1 0 0,1 2,16A1,1 0 0,1 3,15Z" style="fill:#c83771"/></svg>

static/icons/marker.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" style="fill:#892ca0"/></svg>

static/icons/mask.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path style="fill:#2c89a0;" d="m 14.310547,2.7421875 -11.4003908,2.4277344 1.9375,9.1250001 c 0.3145984,1.484684 1.1786891,2.712083 2.3300782,3.527344 -0.4835469,-1.162875 -0.6383119,-2.472561 -0.3789063,-3.791016 0.00162,-0.04462 0.00685,-0.08903 0.015625,-0.132812 l 0.5449219,-2.56836 c -0.046296,0.01225 -0.084901,0.03785 -0.1328125,0.04687 -0.81688,0.186715 -1.597322,-0.139269 -1.9824219,-0.746094 C 5.3491676,9.9073383 5.9330713,9.288377 6.7382812,9.125 6.9395833,9.08127 7.1405214,9.0683044 7.3339844,9.0839844 c 0.1674509,0.013573 0.3278328,0.053817 0.4804687,0.1074218 l 0.9375,-4.4199218 c 0.083111,-0.3905787 0.4328374,-0.6664192 0.8320313,-0.65625 0.050561,0.00126 0.1009015,0.00714 0.1503906,0.017578 L 14.835938,5.21875 Z M 6.7988281,14.03125 c -9.581e-4,0.013 -0.00161,0.02603 -0.00195,0.03906 v 0.0332 l 0.017578,-0.171875 c -0.00707,0.03325 -0.00908,0.06637 -0.015625,0.09961 z M 9.5625,4.9433594 7.625,14.070312 v 0.0332 c -0.6651733,3.127482 1.3530361,6.209826 4.492188,6.875 3.139152,0.665173 6.24303,-1.343271 6.908203,-4.482422 l 1.9375,-9.1250002 z m 1.273438,5.1308596 c 0.192367,-0.01568 0.392447,-0.0047 0.59375,0.03906 0.781871,0.163376 1.398829,0.794008 1.492187,1.50586 -0.385101,0.606825 -1.165493,0.944674 -1.970703,0.792968 -0.805209,-0.198385 -1.3890643,-0.817445 -1.482422,-1.529297 0.280073,-0.46387 0.790082,-0.76155 1.367188,-0.808593 z m 5.703124,1.21289 c 0.193464,-0.01568 0.396355,-0.0027 0.597657,0.04102 0.80521,0.163377 1.38716,0.780384 1.492187,1.503906 -0.3851,0.606825 -1.165542,0.934762 -1.982422,0.748047 -0.80521,-0.151706 -1.391018,-0.77057 -1.484375,-1.482422 0.280073,-0.463871 0.796569,-0.763503 1.376953,-0.810547 z m -6.6621089,4.439453 6.4179689,1.353516 c -0.735192,1.248658 -2.205496,1.938129 -3.699219,1.623047 -1.482053,-0.315082 -2.543704,-1.541187 -2.7187499,-2.976563 z" /></svg>

static/icons/museum.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M11.5,1L2,6V8H21V6M16,10V17H19V10M2,22H21V19H2M10,10V17H13V10M4,10V17H7V10H4Z" style="fill:#0044aa"/></svg>

static/icons/saxophone.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M4,2A1,1 0 0,0 3,3A1,1 0 0,0 4,4A3,3 0 0,1 7,7V8.66L7,15.5C7,19.1 9.9,22 13.5,22C17.1,22 20,19.1 20,15.5V13A1,1 0 0,0 21,12A1,1 0 0,0 20,11H14A1,1 0 0,0 13,12A1,1 0 0,0 14,13V15A1,1 0 0,1 13,16A1,1 0 0,1 12,15V11A1,1 0 0,0 13,10A1,1 0 0,0 12,9V8A1,1 0 0,0 13,7A1,1 0 0,0 12,6V5.5A3.5,3.5 0 0,0 8.5,2H4Z" style="fill:#ffcc00"/></svg>

static/icons/store.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,18H6V14H12M21,14V12L20,7H4L3,12V14H4V20H14V14H18V20H20V14M20,4H4V6H20V4Z" style="fill:#aa00d4"/></svg>

static/index.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset=utf-8>
+	<title>Huellas</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+	integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+	crossorigin=""/>
+	<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
+	integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
+	crossorigin=""></script>
+
+	<style type="text/css" media="screen">
+		body {
+			padding: 0;
+			margin: 0;
+		}
+
+		html, body, #map {
+			height: 100vh;
+			width: 100vw;
+		}
+
+		.leaflet-popup-content h3 {
+			margin-top: 1em;
+			margin-bottom: 0.5em;
+		}
+		.leaflet-popup-content ul{
+			list-style-type: none;
+			padding: 0;
+			margin: 0;
+		}
+	</style>
+
+</head>
+<body>
+	<div id="map"></div>
+
+	<script charset="utf-8">
+		async function loadPlaces ()
+		{
+			result = await fetch('places/').then(response => response.json());
+			return result;
+		}
+
+		function toLeafletPlaces(backendPlaces) {
+			const result = {
+				"type": "FeatureCollection",
+				"features": []
+			};
+			for (const place of backendPlaces) {
+				result.features.push({
+					"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]
+					}
+				});
+			}
+			return result;
+		}
+
+		async function setupMap() {
+			const backendPlaces = await loadPlaces();
+			const leafletPlaces = toLeafletPlaces(backendPlaces);
+
+			/* Set up the map*/
+			var map = new L.Map('map');
+
+			/* Create the tile layer with correct attribution*/
+			var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+			var osmAttrib='Mapa © <a href="https://openstreetmap.org">OpenStreetMap</a>';
+			var 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(e) {
+					map.setView(new L.LatLng(-33.45,-70.666667),13);
+				});
+			map.addLayer(osm);
+
+			function onEachFeature(feature, layer)
+			{
+				if (feature.properties)
+				{
+					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);
+				}
+			}
+
+			/* Icons */
+			var SVGIcon = L.Icon.extend({
+				options: {
+					iconSize: [36,36],
+					popupAnchor: [0, -18]
+				}
+			});
+
+			const icons = new Map();
+			icons.set('bar', new SVGIcon({iconUrl: 'icons/bar.svg'}));
+			icons.set('coffe', new SVGIcon({iconUrl: 'icons/coffe.svg'}));
+			icons.set('dining', new SVGIcon({iconUrl: 'icons/dining.svg'}));
+			icons.set('food', new SVGIcon({iconUrl: 'icons/food.svg'}));
+			icons.set('jazz', new SVGIcon({iconUrl: 'icons/saxophone.svg'}));
+			icons.set('library', new SVGIcon({iconUrl: 'icons/book.svg'}));
+			icons.set('marker', new SVGIcon({iconUrl: 'icons/marker.svg'}));
+			icons.set('museum', new SVGIcon({iconUrl: 'icons/museum.svg'}));
+			icons.set('shop', new SVGIcon({iconUrl: 'icons/store.svg'}));
+
+			function pointToLayer(feature, latlng)
+			{
+				var 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);
+			}
+
+			map.addLayer(L.geoJSON(leafletPlaces, {
+				onEachFeature: onEachFeature,
+				pointToLayer: pointToLayer
+			}));
+		}
+
+		setupMap();
+
+	</script>
+
+</body>
+</html>