Initial frontend. Fetch only for now.
This commit is contained in:
Felipe Contreras
parent
9f60c838f8
commit
bd19b463b7
13 changed files with 166 additions and 6 deletions
|
|
@ -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())
|
||||
}
|
||||
|
|
|
|||
1
static/icons/bar.svg
Normal file
1
static/icons/bar.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 384 B |
1
static/icons/book.svg
Normal file
1
static/icons/book.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 767 B |
1
static/icons/coffee.svg
Normal file
1
static/icons/coffee.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 430 B |
1
static/icons/dining.svg
Normal file
1
static/icons/dining.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 609 B |
1
static/icons/film.svg
Normal file
1
static/icons/film.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 449 B |
1
static/icons/food.svg
Normal file
1
static/icons/food.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 550 B |
1
static/icons/marker.svg
Normal file
1
static/icons/marker.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 483 B |
1
static/icons/mask.svg
Normal file
1
static/icons/mask.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
static/icons/museum.svg
Normal file
1
static/icons/museum.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 393 B |
1
static/icons/saxophone.svg
Normal file
1
static/icons/saxophone.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 618 B |
1
static/icons/store.svg
Normal file
1
static/icons/store.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 392 B |
153
static/index.html
Normal file
153
static/index.html
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue