profiled view finished

This commit is contained in:
Remy Moll 2021-10-31 02:14:05 +01:00
parent 045fd54891
commit 73ef0d5931
11 changed files with 379 additions and 179 deletions

View File

@ -3,13 +3,14 @@ import folium
class SwissMap:
def __init__(self) -> None:
self.m = folium.Map(location=[46.8132, 8.2242], tiles='OpenStreetMap', zoom_start=7.6, min_zoom = 6, max_zoom = 12)
self.m = folium.Map(location=[46.8132, 8.2242], tiles='OpenStreetMap', zoom_start=6.5, min_zoom = 6, max_zoom = 12)
# Returns travel map of customer as html string
def travel_history_map(self, customer_id, location_list):
def travel_history_map(self, customer_id, travel_history):
local_m = self.m
for place, coordinates in location_list:
for e in travel_history:
place, coordinates = e.location_name, e.location_coordinates
folium.Marker(
location=coordinates, # coordinates for the marker
popup=place, # pop-up label for the marker

54
dummy_data.py Normal file
View File

@ -0,0 +1,54 @@
import datetime
def populate_data(Users, Events):
Events.add_event(
id = 1,
location_name = 'Center of Switzerland',
location_coordinates = [46.8132, 8.2242],
date = datetime.date.today() - datetime.timedelta(days=100)
)
Events.add_event(
id = 2,
location_name = 'Center of Switzerland',
location_coordinates = [46, 8],
date = datetime.date.today() - datetime.timedelta(days=1)
)
Events.add_event(
id = 3,
location_name = 'Center of Switzerland',
location_coordinates = [46.8132, 9],
date = datetime.date.today() - datetime.timedelta(days=2)
)
Events.add_event(
id = 4,
location_name = 'Center of Switzerland',
location_coordinates = [47, 8.2242],
date = datetime.date.today() - datetime.timedelta(days=3)
)
Events.add_event(
id = 5,
location_name = 'Center of Switzerland',
location_coordinates = [40.8132, 8.2242],
date = datetime.date.today() - datetime.timedelta(days=56)
)
Events.add_event(
id = 6,
location_name = 'Zermatt',
location_coordinates = [46.11654, 10.445683],
date = datetime.date.today()
)
Users.add_user(
id=239842123,
name="Remy",
event_preferences=["hiking","skiing"],
event_blacklist = [],
home_coordinates=[0,0],
group_size=1,
min_age=20,
max_age=20,
)
u = Users.get_by_id(239842123)
for e in Events:
u.travel_history.append(e)

View File

@ -1,16 +1,22 @@
class Event:
coordinates = []
id = 0
location_name = []
location_coordinates = []
reviews = []
category = []
weather_requirements = 0
date = ""
trip_to = ""
duration = "" # datetime object
trip_to = "" # Trip object
trip_back = ""
def __init__(self, **kwargs):
pass
self.id = kwargs.pop("id")
self.location_name = kwargs.pop("location_name")
self.location_coordinates = kwargs.pop("location_coordinates")
self.date = kwargs.pop("date")
def find_optimal_trip(self):
pass
@ -19,6 +25,12 @@ class Event:
def trip_is_good(self):
pass
@property
def co2_savings(self):
try:
return self.trip_to.co2_savings + self.trip_back.co2_savings
except:
return 5
class Review:
@ -35,4 +47,16 @@ class Review:
def add_photo(self, photo):
pass
class Events:
_events = []
def add_event(self, **kwargs):
self._events.append(Event(**kwargs))
def get_by_id(self, id):
for e in self.events:
if e.id == id:
return e
def __iter__(self):
return iter(self._events)

View File

@ -7,8 +7,7 @@ class User:
group_size = 0
min_age = 0
max_age = 0
travel_history = [] # (Name, coordinates)
co2_savings = []
travel_history = [] # (list of Events)
def __init__(self, **kwargs):
self.id = kwargs.pop("id")
@ -27,7 +26,8 @@ class User:
@property
def total_co2_savings(self):
return sum(self.co2_savings)
return sum([e.co2_savings for e in self.travel_history])
class Users:

View File

@ -3,11 +3,16 @@ import random
from apis.interactive_maps import SwissMap
from models.user import Users
from models.event import Events
import plotly.graph_objects as go
from plotly.offline import plot
USERBASE = Users()
USERBASE.add_user(id=239842123, name="Remy", event_preferences=["hiking","skiing"], event_blacklist = [], home_coordinates=[0,0], group_size=1, min_age=20, max_age=20)
MAP = SwissMap()
EVENTBASE = Events()
import dummy_data
dummy_data.populate_data(USERBASE, EVENTBASE)
app = Flask(__name__)
app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'
@ -30,11 +35,30 @@ def index():
def profile():
uid = session["user_id"]
user = USERBASE.get_by_id(uid)
days, co2_savings = [], []
for e in user.travel_history:
days.append(e.date.replace(day=1))
co2_savings.append(e.co2_savings)
fig = go.Figure()
fig.layout.update(
xaxis = {'showgrid': False},
yaxis = {'showgrid': False},
showlegend=False,
margin=dict(l=0, r=0, t=0, b=0),
paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)',
colorway=["#D50505", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]
)
fig.add_trace(go.Bar(x=days, y=co2_savings))
plot_div = plot(fig, output_type='div', include_plotlyjs=False)
context = {
"map_path" : MAP.travel_history_map(user.id, user.travel_history)
"map_path" : MAP.travel_history_map(user.id, user.travel_history),
"plotly_html" : plot_div
}
return render_template("user_detail.html", conbtext=context, user=user)
return render_template("user_detail.html", context=context, user=user)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -23,7 +23,7 @@
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_4b63fb42cb6348acbbbbe2dc0559bc1e {
#map_d5b5420170d249a6ba85417022c9ebfb {
position: relative;
width: 100.0%;
height: 100.0%;
@ -35,13 +35,13 @@
</head>
<body>
<div class="folium-map" id="map_4b63fb42cb6348acbbbbe2dc0559bc1e" ></div>
<div class="folium-map" id="map_d5b5420170d249a6ba85417022c9ebfb" ></div>
</body>
<script>
var map_4b63fb42cb6348acbbbbe2dc0559bc1e = L.map(
"map_4b63fb42cb6348acbbbbe2dc0559bc1e",
var map_d5b5420170d249a6ba85417022c9ebfb = L.map(
"map_d5b5420170d249a6ba85417022c9ebfb",
{
center: [46.8132, 8.2242],
crs: L.CRS.EPSG3857,
@ -55,57 +55,57 @@
var tile_layer_b2bae53ccf9445a0b5609c122deab36b = L.tileLayer(
var tile_layer_c0ba73dafa184d5c895fdab3f93fe6e2 = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 12, "maxZoom": 12, "minZoom": 6, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_4b63fb42cb6348acbbbbe2dc0559bc1e);
).addTo(map_d5b5420170d249a6ba85417022c9ebfb);
var marker_84f3e52feaf44598b8d58d47cf2ad70f = L.marker(
var marker_963db999e24b4bcab3c75fbfc808cc5a = L.marker(
[46.8132, 8.2242],
{}
).addTo(map_4b63fb42cb6348acbbbbe2dc0559bc1e);
).addTo(map_d5b5420170d249a6ba85417022c9ebfb);
var icon_987ec2f0ba2749639d6e66b006ca73fe = L.AwesomeMarkers.icon(
var icon_1a35d0f8178a4bebbd50dd27e98a23d8 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "blue", "prefix": "glyphicon"}
);
marker_84f3e52feaf44598b8d58d47cf2ad70f.setIcon(icon_987ec2f0ba2749639d6e66b006ca73fe);
marker_963db999e24b4bcab3c75fbfc808cc5a.setIcon(icon_1a35d0f8178a4bebbd50dd27e98a23d8);
var popup_db1aeaec08e344808ae98672134955ad = L.popup({"maxWidth": "100%"});
var popup_399c30163d4c456587f9a3c1a594933d = L.popup({"maxWidth": "100%"});
var html_8865aed1bbfd4317a3a1237ebf1ab2e6 = $(`<div id="html_8865aed1bbfd4317a3a1237ebf1ab2e6" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_db1aeaec08e344808ae98672134955ad.setContent(html_8865aed1bbfd4317a3a1237ebf1ab2e6);
var html_4dec1408ddc94311b86adae27d817bc1 = $(`<div id="html_4dec1408ddc94311b86adae27d817bc1" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_399c30163d4c456587f9a3c1a594933d.setContent(html_4dec1408ddc94311b86adae27d817bc1);
marker_84f3e52feaf44598b8d58d47cf2ad70f.bindPopup(popup_db1aeaec08e344808ae98672134955ad)
marker_963db999e24b4bcab3c75fbfc808cc5a.bindPopup(popup_399c30163d4c456587f9a3c1a594933d)
;
var marker_1272f16aaca64b1ab1f4cb9b6d780f7b = L.marker(
var marker_af6e0569d1ae4e80ad017bdd55a9b30f = L.marker(
[46.11654, 7.445683],
{}
).addTo(map_4b63fb42cb6348acbbbbe2dc0559bc1e);
).addTo(map_d5b5420170d249a6ba85417022c9ebfb);
var icon_738d450b21d14420a5d2cd646d02205e = L.AwesomeMarkers.icon(
var icon_ea9fa99e7b3f40d1934375b15179bd6f = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_1272f16aaca64b1ab1f4cb9b6d780f7b.setIcon(icon_738d450b21d14420a5d2cd646d02205e);
marker_af6e0569d1ae4e80ad017bdd55a9b30f.setIcon(icon_ea9fa99e7b3f40d1934375b15179bd6f);
var popup_e9d4a3b3f96c4667a814e1ce08cd182a = L.popup({"maxWidth": "100%"});
var popup_baed6219f7bb4e16a41da77b000b8119 = L.popup({"maxWidth": "100%"});
var html_25f8c05b4a6148f9ad5c6afdef318f62 = $(`<div id="html_25f8c05b4a6148f9ad5c6afdef318f62" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
popup_e9d4a3b3f96c4667a814e1ce08cd182a.setContent(html_25f8c05b4a6148f9ad5c6afdef318f62);
var html_15b6473a5df44e19948282a085021d56 = $(`<div id="html_15b6473a5df44e19948282a085021d56" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
popup_baed6219f7bb4e16a41da77b000b8119.setContent(html_15b6473a5df44e19948282a085021d56);
marker_1272f16aaca64b1ab1f4cb9b6d780f7b.bindPopup(popup_e9d4a3b3f96c4667a814e1ce08cd182a)
marker_af6e0569d1ae4e80ad017bdd55a9b30f.bindPopup(popup_baed6219f7bb4e16a41da77b000b8119)
;

View File

@ -1,113 +0,0 @@
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_092483588e2c4ac5924c3622b8af1134 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
</head>
<body>
<div class="folium-map" id="map_092483588e2c4ac5924c3622b8af1134" ></div>
</body>
<script>
var map_092483588e2c4ac5924c3622b8af1134 = L.map(
"map_092483588e2c4ac5924c3622b8af1134",
{
center: [46.8132, 8.2242],
crs: L.CRS.EPSG3857,
zoom: 7.6,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_3ec4b3b1853e4987b667905c6ee46bd4 = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 12, "maxZoom": 12, "minZoom": 6, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_092483588e2c4ac5924c3622b8af1134);
var marker_c066dc7694ab4b9e9fd55be869c0fb43 = L.marker(
[46.8132, 8.2242],
{}
).addTo(map_092483588e2c4ac5924c3622b8af1134);
var icon_01dba90ea2af47ea88ed77a52322effb = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_c066dc7694ab4b9e9fd55be869c0fb43.setIcon(icon_01dba90ea2af47ea88ed77a52322effb);
var popup_4db25cb18ec545efbde0b7251804cae4 = L.popup({"maxWidth": "100%"});
var html_edaa011c18c648a093b0f3b96bc9e7d1 = $(`<div id="html_edaa011c18c648a093b0f3b96bc9e7d1" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_4db25cb18ec545efbde0b7251804cae4.setContent(html_edaa011c18c648a093b0f3b96bc9e7d1);
marker_c066dc7694ab4b9e9fd55be869c0fb43.bindPopup(popup_4db25cb18ec545efbde0b7251804cae4)
;
var marker_a70d653c5f63441bbbdda56d55a1fd9a = L.marker(
[46.11654, 7.445683],
{}
).addTo(map_092483588e2c4ac5924c3622b8af1134);
var icon_dba68870c65f416583684126793cfbb4 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_a70d653c5f63441bbbdda56d55a1fd9a.setIcon(icon_dba68870c65f416583684126793cfbb4);
var popup_0d9507747ef94271a44340243a8aed20 = L.popup({"maxWidth": "100%"});
var html_304ce481b37f4636ac95f95ef203e2a9 = $(`<div id="html_304ce481b37f4636ac95f95ef203e2a9" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
popup_0d9507747ef94271a44340243a8aed20.setContent(html_304ce481b37f4636ac95f95ef203e2a9);
marker_a70d653c5f63441bbbdda56d55a1fd9a.bindPopup(popup_0d9507747ef94271a44340243a8aed20)
;
</script>

View File

@ -23,7 +23,7 @@
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_43982fff96ac4010a4abc5d891617cbb {
#map_13bfc02c19da45a3a3baef1997c1ade5 {
position: relative;
width: 100.0%;
height: 100.0%;
@ -35,13 +35,13 @@
</head>
<body>
<div class="folium-map" id="map_43982fff96ac4010a4abc5d891617cbb" ></div>
<div class="folium-map" id="map_13bfc02c19da45a3a3baef1997c1ade5" ></div>
</body>
<script>
var map_43982fff96ac4010a4abc5d891617cbb = L.map(
"map_43982fff96ac4010a4abc5d891617cbb",
var map_13bfc02c19da45a3a3baef1997c1ade5 = L.map(
"map_13bfc02c19da45a3a3baef1997c1ade5",
{
center: [46.8132, 8.2242],
crs: L.CRS.EPSG3857,
@ -55,57 +55,57 @@
var tile_layer_b9dad930005b49d7a6ede10b36ae3893 = L.tileLayer(
var tile_layer_7371904fbde240ff9d0114f1783edaaf = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 12, "maxZoom": 12, "minZoom": 6, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_43982fff96ac4010a4abc5d891617cbb);
).addTo(map_13bfc02c19da45a3a3baef1997c1ade5);
var marker_3f81fbaf36ef48e4aac4e125680bcbde = L.marker(
var marker_a276875cec9846ff92da0a5ee8d2e284 = L.marker(
[46.8132, 8.2242],
{}
).addTo(map_43982fff96ac4010a4abc5d891617cbb);
).addTo(map_13bfc02c19da45a3a3baef1997c1ade5);
var icon_8f74cd48d4174f2da53e683ebe79b2a1 = L.AwesomeMarkers.icon(
var icon_a53cfad355d24550b9c721ec3c437bd8 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_3f81fbaf36ef48e4aac4e125680bcbde.setIcon(icon_8f74cd48d4174f2da53e683ebe79b2a1);
marker_a276875cec9846ff92da0a5ee8d2e284.setIcon(icon_a53cfad355d24550b9c721ec3c437bd8);
var popup_0516c2ff9ba64321beab63bd5c2dc036 = L.popup({"maxWidth": "100%"});
var popup_e08c5f0dbdfd40c0aa0806c91d8e929a = L.popup({"maxWidth": "100%"});
var html_3fb7d1b852e440e38d58826bc6138c85 = $(`<div id="html_3fb7d1b852e440e38d58826bc6138c85" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_0516c2ff9ba64321beab63bd5c2dc036.setContent(html_3fb7d1b852e440e38d58826bc6138c85);
var html_ada76b3a4d1f4ae6a815d86fa3ec79e1 = $(`<div id="html_ada76b3a4d1f4ae6a815d86fa3ec79e1" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_e08c5f0dbdfd40c0aa0806c91d8e929a.setContent(html_ada76b3a4d1f4ae6a815d86fa3ec79e1);
marker_3f81fbaf36ef48e4aac4e125680bcbde.bindPopup(popup_0516c2ff9ba64321beab63bd5c2dc036)
marker_a276875cec9846ff92da0a5ee8d2e284.bindPopup(popup_e08c5f0dbdfd40c0aa0806c91d8e929a)
;
var marker_56b1a2aedccd4326a7a2fd12e6e90e33 = L.marker(
var marker_8a21cbd766c448beb6b9ea117ce00be0 = L.marker(
[46.11654, 7.445683],
{}
).addTo(map_43982fff96ac4010a4abc5d891617cbb);
).addTo(map_13bfc02c19da45a3a3baef1997c1ade5);
var icon_4c40d69ea15e447782f4671a041bcf71 = L.AwesomeMarkers.icon(
var icon_09a316166eb142ea8cd18e321ffd6412 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_56b1a2aedccd4326a7a2fd12e6e90e33.setIcon(icon_4c40d69ea15e447782f4671a041bcf71);
marker_8a21cbd766c448beb6b9ea117ce00be0.setIcon(icon_09a316166eb142ea8cd18e321ffd6412);
var popup_f50bc115e4424589908ad94c7a17c6f2 = L.popup({"maxWidth": "100%"});
var popup_5dcef77f81e84e1bb45fa6b725c3a8df = L.popup({"maxWidth": "100%"});
var html_ae4e05924c31455bb2a115c202a4f83a = $(`<div id="html_ae4e05924c31455bb2a115c202a4f83a" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
popup_f50bc115e4424589908ad94c7a17c6f2.setContent(html_ae4e05924c31455bb2a115c202a4f83a);
var html_da9e1a0c86f64ea6aeb82084fc7e7d5e = $(`<div id="html_da9e1a0c86f64ea6aeb82084fc7e7d5e" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
popup_5dcef77f81e84e1bb45fa6b725c3a8df.setContent(html_da9e1a0c86f64ea6aeb82084fc7e7d5e);
marker_56b1a2aedccd4326a7a2fd12e6e90e33.bindPopup(popup_f50bc115e4424589908ad94c7a17c6f2)
marker_8a21cbd766c448beb6b9ea117ce00be0.bindPopup(popup_5dcef77f81e84e1bb45fa6b725c3a8df)
;

View File

@ -0,0 +1,213 @@
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_5ba084a655cd4fc584236f2425f4de29 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
</head>
<body>
<div class="folium-map" id="map_5ba084a655cd4fc584236f2425f4de29" ></div>
</body>
<script>
var map_5ba084a655cd4fc584236f2425f4de29 = L.map(
"map_5ba084a655cd4fc584236f2425f4de29",
{
center: [46.8132, 8.2242],
crs: L.CRS.EPSG3857,
zoom: 6.5,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_40152bdb738846ba8477c732f027648d = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 12, "maxZoom": 12, "minZoom": 6, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_5ba084a655cd4fc584236f2425f4de29);
var marker_0660c49d8fb24ff1b0409062f4679504 = L.marker(
[46.8132, 8.2242],
{}
).addTo(map_5ba084a655cd4fc584236f2425f4de29);
var icon_c7f93358bcb44e67a5c367b728b8e3e5 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_0660c49d8fb24ff1b0409062f4679504.setIcon(icon_c7f93358bcb44e67a5c367b728b8e3e5);
var popup_055041826c6e48abb64946ad1fd0e85c = L.popup({"maxWidth": "100%"});
var html_10f0fccc127d44768c1d1c9cba178d7e = $(`<div id="html_10f0fccc127d44768c1d1c9cba178d7e" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_055041826c6e48abb64946ad1fd0e85c.setContent(html_10f0fccc127d44768c1d1c9cba178d7e);
marker_0660c49d8fb24ff1b0409062f4679504.bindPopup(popup_055041826c6e48abb64946ad1fd0e85c)
;
var marker_7591da9e5d7e4359a88df76b3ca54633 = L.marker(
[46.0, 8.0],
{}
).addTo(map_5ba084a655cd4fc584236f2425f4de29);
var icon_feda126eb8ff45d9bbfc7cba013e3274 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_7591da9e5d7e4359a88df76b3ca54633.setIcon(icon_feda126eb8ff45d9bbfc7cba013e3274);
var popup_60efbb58821e48d09d5f097eef3f26e0 = L.popup({"maxWidth": "100%"});
var html_ae4580e3548843a4b867da474fe9cd08 = $(`<div id="html_ae4580e3548843a4b867da474fe9cd08" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_60efbb58821e48d09d5f097eef3f26e0.setContent(html_ae4580e3548843a4b867da474fe9cd08);
marker_7591da9e5d7e4359a88df76b3ca54633.bindPopup(popup_60efbb58821e48d09d5f097eef3f26e0)
;
var marker_8853064d921840c1af5740f4ee2e34e6 = L.marker(
[46.8132, 9.0],
{}
).addTo(map_5ba084a655cd4fc584236f2425f4de29);
var icon_ecdd50362a7443c0873edecc52dc57fd = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_8853064d921840c1af5740f4ee2e34e6.setIcon(icon_ecdd50362a7443c0873edecc52dc57fd);
var popup_18d1efa0560d451985de1860e853f20d = L.popup({"maxWidth": "100%"});
var html_dc83f40370374bc5b716197a6d8bf3e5 = $(`<div id="html_dc83f40370374bc5b716197a6d8bf3e5" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_18d1efa0560d451985de1860e853f20d.setContent(html_dc83f40370374bc5b716197a6d8bf3e5);
marker_8853064d921840c1af5740f4ee2e34e6.bindPopup(popup_18d1efa0560d451985de1860e853f20d)
;
var marker_f776dd130d2c41b4a4403cc20b089197 = L.marker(
[47.0, 8.2242],
{}
).addTo(map_5ba084a655cd4fc584236f2425f4de29);
var icon_eebb26101c2541aab20288eeba3fd092 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_f776dd130d2c41b4a4403cc20b089197.setIcon(icon_eebb26101c2541aab20288eeba3fd092);
var popup_7e654904d22f43bf9c55611b4a2d8f1a = L.popup({"maxWidth": "100%"});
var html_a6bd9db8dace4c23ac8bd4932f23e9b2 = $(`<div id="html_a6bd9db8dace4c23ac8bd4932f23e9b2" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_7e654904d22f43bf9c55611b4a2d8f1a.setContent(html_a6bd9db8dace4c23ac8bd4932f23e9b2);
marker_f776dd130d2c41b4a4403cc20b089197.bindPopup(popup_7e654904d22f43bf9c55611b4a2d8f1a)
;
var marker_531b4d892c1248528bed9e28c45a0071 = L.marker(
[40.8132, 8.2242],
{}
).addTo(map_5ba084a655cd4fc584236f2425f4de29);
var icon_207de4a422dd47d2ae255822073a20c5 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_531b4d892c1248528bed9e28c45a0071.setIcon(icon_207de4a422dd47d2ae255822073a20c5);
var popup_2e281073197241d69b565e29b7c30971 = L.popup({"maxWidth": "100%"});
var html_69e3f6cccf894922bb51d399f0f14421 = $(`<div id="html_69e3f6cccf894922bb51d399f0f14421" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
popup_2e281073197241d69b565e29b7c30971.setContent(html_69e3f6cccf894922bb51d399f0f14421);
marker_531b4d892c1248528bed9e28c45a0071.bindPopup(popup_2e281073197241d69b565e29b7c30971)
;
var marker_106fb6cf83a745b7b8d01d3ac5399d23 = L.marker(
[46.11654, 10.445683],
{}
).addTo(map_5ba084a655cd4fc584236f2425f4de29);
var icon_bdbfc792d78445ef9257d0e9dc2e53a6 = L.AwesomeMarkers.icon(
{"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
);
marker_106fb6cf83a745b7b8d01d3ac5399d23.setIcon(icon_bdbfc792d78445ef9257d0e9dc2e53a6);
var popup_5df9394c37c94f26bb59cfaf5b5216e5 = L.popup({"maxWidth": "100%"});
var html_b63d6c6945b546349c24295a4bebf7ca = $(`<div id="html_b63d6c6945b546349c24295a4bebf7ca" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
popup_5df9394c37c94f26bb59cfaf5b5216e5.setContent(html_b63d6c6945b546349c24295a4bebf7ca);
marker_106fb6cf83a745b7b8d01d3ac5399d23.bindPopup(popup_5df9394c37c94f26bb59cfaf5b5216e5)
;
</script>

View File

@ -1,5 +1,7 @@
{% extends "base.html" %}
{% block content %}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>.modebar{display: none !important;}</style>
<div class="card mb-4 shadow">
<div class="card-body">
@ -7,24 +9,19 @@
<ul class="list-group list-group-flush">
<li class="list-group-item">id: {{user.id }}</li>
<li class="list-group-item">total trips: {{ user.number_of_trips }}</li>
<li class="list-group-item">total CO2 saved: {{user.co2_economies }}</li>
<li class="list-group-item">total CO2 saved: {{ user.total_co2_savings }}</li>
</ul>
</div>
</div>
<div class="card mb-4 shadow">
<div class="card-body">
<h5 class="card-title">Previous destinations</h5>
<iframe src="/static/{{ context.map_path }}"></iframe>
<iframe src="{{ context.map_path }}" style="width: 100%; min-height: 23rem;"></iframe>
</div>
</div>
<div class="card mb-4 shadow">
<div class="card-body">
<h5 class="card-title">Travel overview</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">id: {{user.id }}</li>
<li class="list-group-item">total trips: {{ user.trips }}</li>
<li class="list-group-item">total CO2 saved: {{user.total_co2_savings }}</li>
</ul>
{{ context.plotly_html|safe }}
</div>
</div>
{% endblock %}