profiled view finished

apis/interactive_maps.py

@@ -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

dummy_data.py

@@ -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)
+    

models/event.py

@@ -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)

models/user.py

@@ -7,8 +7,7 @@ class User:
     group_size = 0
     min_age = 0
     max_age = 0
-    travel_history = [] # (Name, coordinates)
+    travel_history = [] # (list of Events)
-    co2_savings = []
     
     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:

server.py

@@ -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)
 
 
 

static/destinationmap_customer=235_destinationZermatt.html

@@ -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(
+            var map_d5b5420170d249a6ba85417022c9ebfb = L.map(
-                "map_4b63fb42cb6348acbbbbe2dc0559bc1e",
+                "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];
+            var html_4dec1408ddc94311b86adae27d817bc1 = $(`<div id="html_4dec1408ddc94311b86adae27d817bc1" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
-            popup_db1aeaec08e344808ae98672134955ad.setContent(html_8865aed1bbfd4317a3a1237ebf1ab2e6);
+            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];
+            var html_15b6473a5df44e19948282a085021d56 = $(`<div id="html_15b6473a5df44e19948282a085021d56" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
-            popup_e9d4a3b3f96c4667a814e1ce08cd182a.setContent(html_25f8c05b4a6148f9ad5c6afdef318f62);
+            popup_baed6219f7bb4e16a41da77b000b8119.setContent(html_15b6473a5df44e19948282a085021d56);
         
 
-        marker_1272f16aaca64b1ab1f4cb9b6d780f7b.bindPopup(popup_e9d4a3b3f96c4667a814e1ce08cd182a)
+        marker_af6e0569d1ae4e80ad017bdd55a9b30f.bindPopup(popup_baed6219f7bb4e16a41da77b000b8119)
         ;
 
         

static/swissmap_customer=235.html

@@ -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>

static/travelhistorymap_customer235.html

@@ -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(
+            var map_13bfc02c19da45a3a3baef1997c1ade5 = L.map(
-                "map_43982fff96ac4010a4abc5d891617cbb",
+                "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];
+            var html_ada76b3a4d1f4ae6a815d86fa3ec79e1 = $(`<div id="html_ada76b3a4d1f4ae6a815d86fa3ec79e1" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
-            popup_0516c2ff9ba64321beab63bd5c2dc036.setContent(html_3fb7d1b852e440e38d58826bc6138c85);
+            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];
+            var html_da9e1a0c86f64ea6aeb82084fc7e7d5e = $(`<div id="html_da9e1a0c86f64ea6aeb82084fc7e7d5e" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
-            popup_f50bc115e4424589908ad94c7a17c6f2.setContent(html_ae4e05924c31455bb2a115c202a4f83a);
+            popup_5dcef77f81e84e1bb45fa6b725c3a8df.setContent(html_da9e1a0c86f64ea6aeb82084fc7e7d5e);
         
 
-        marker_56b1a2aedccd4326a7a2fd12e6e90e33.bindPopup(popup_f50bc115e4424589908ad94c7a17c6f2)
+        marker_8a21cbd766c448beb6b9ea117ce00be0.bindPopup(popup_5dcef77f81e84e1bb45fa6b725c3a8df)
         ;
 
         

static/travelhistorymap_customer239842123.html

@@ -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>

templates/user_detail.html

@@ -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>
+      {{ context.plotly_html|safe }}
-      <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>
     </div>
 </div>
 {% endblock %}