Final fixes. Was fun

apis/weather.py

@@ -33,16 +33,18 @@ class WeatherScoreCalculator:
         location_string = f'{location[0]}'+f','+f'{location[1]}'
 
         weather = WeatherWrapper()
-        raw_weather_data = weather.wrapper.get( now + 'ZP1D:PT3H/weather_code_6h:idx/'+ location_string + '/json')
-        raw_extracted_weather = raw_weather_data['data'][0]['coordinates'][0]['dates']
-
-        # Weather Score Calculation
-        weather_score = []
-        for weather_dict in raw_extracted_weather:
-            weather_score.append(weather_dict['value'])
-        weather_score = np.array(weather_score)
-        mean_weather_score = weather_score.mean()
+        try:
+            raw_weather_data = weather.wrapper.get( now + 'ZP1D:PT3H/weather_code_6h:idx/'+ location_string + '/json')
+            raw_extracted_weather = raw_weather_data['data'][0]['coordinates'][0]['dates']
 
+            # Weather Score Calculation
+            weather_score = []
+            for weather_dict in raw_extracted_weather:
+                weather_score.append(weather_dict['value'])
+            weather_score = np.array(weather_score)
+            mean_weather_score = weather_score.mean()
+        except:
+            mean_weather_score = 20
         return mean_weather_score
 
 

dummy_data.py

@@ -3,12 +3,14 @@ import random
 
 def populate_data(Users, Events):
     Events.add_event(
-        id = 1,
+        id = 4,
         name = "Polyhack 2021",
         location_name = 'SPH Zentrum, Zürich',
         location_coordinates = [46.3667, 7.445683],
         date = datetime.date.today() - datetime.timedelta(days=100),
-        description = "Be part of Switzerland's most fun and personal hackathon experience!"
+        description = "Be part of Switzerland's most fun and personal hackathon experience!",
+        activity_duration = datetime.timedelta(hours=19),
+        image_path = "event_id1_image.jpg"
         )
     Events.add_event(
         id = 2,
@@ -16,7 +18,9 @@ def populate_data(Users, Events):
         location_name = 'Zürich',
         location_coordinates = [46.368, 7.445683],
         date = datetime.date.today() - datetime.timedelta(days=80),
-        description = "Explore Switzerland's rich cultural history in the unique collection of the Swiss National Museum."
+        description = "Explore Switzerland's rich cultural history in the unique collection of the Swiss National Museum.",
+        activity_duration = datetime.timedelta(hours=1),
+        image_path = "event_id2_image.jpg"
         )
     Events.add_event(
         id = 3,
@@ -24,15 +28,19 @@ def populate_data(Users, Events):
         location_name = 'Interlaken',
         location_coordinates = [46.68387, 7.86638],
         date = datetime.date.today() - datetime.timedelta(days=100),
-        description = "Fly high between the lakes in Interlaken."
+        description = "Fly high between the lakes in Interlaken.",
+        activity_duration = datetime.timedelta(hours=1),
+        image_path = "event_id3_image.jpg"
         )
     Events.add_event(
-        id = 4,
+        id = 1,
         name = "City Tour Lugano",
         location_name = 'Lugano',
         location_coordinates = [46.01008, 8.96004],
         date = datetime.date.today() - datetime.timedelta(days=100),
-        description = "Explore one of Ticino's gems in the deep south of Switzerland."
+        description = "Explore one of Ticino's gems in the deep south of Switzerland.",
+        activity_duration = datetime.timedelta(hours=1,minutes=30),
+        image_path = "event_id4_image.jpg"
         )
     Events.add_event(
         id = 5,
@@ -40,7 +48,9 @@ def populate_data(Users, Events):
         location_name = 'Lucerne',
         location_coordinates = [47.05048, 8.30635],
         date = datetime.date.today() - datetime.timedelta(days=20),
-        description = "See the iconic bridge of Lucerne and enjoy a boat tour on the Vierwaldstätter Lake."
+        description = "See the iconic bridge of Lucerne and enjoy a boat tour on the Vierwaldstätter Lake.",
+        activity_duration = datetime.timedelta(hours=1),
+        image_path = "event_id5_image.jpg"
         )
     Events.add_event(
         id = 6,
@@ -48,44 +58,54 @@ def populate_data(Users, Events):
         location_name = 'Oeschinen Lake',
         location_coordinates = [46.492331364, 7.722830442],
         date = datetime.date.today(),
-        description = "Take a hike around the beautiful scenery around the Oeschinen Lake."
+        description = "Take a hike around the beautiful scenery around the Oeschinen Lake.",
+        activity_duration = datetime.timedelta(hours=1),
+        image_path = "event_id6_image.jpg"
         )
-        Events.add_event(
+    Events.add_event(
         id = 7,
         name = "Hike at Aletschglacier",
         location_name = 'Aletschglacier',
         location_coordinates = [46.438664912, 8.072999708],
         date = datetime.date.today(),
-        description = "Be adventurous by hiking the largest Glacier of the Alps."
+        description = "Be adventurous by hiking the largest Glacier of the Alps.",
+        activity_duration = datetime.timedelta(hours=4),
+        image_path = "event_id7_image.jpg"
         )
-        Events.add_event(
+    Events.add_event(
         id = 8,
         name = "Ski at Engelberg",
         location_name = 'Engelberg',
         location_coordinates = [46.82107, 8.40133],
         date = datetime.date.today(),
-        description = "Enjoy a Ski weekend at the Engelberg Ski Resort."
+        description = "Enjoy a Ski weekend at the Engelberg Ski Resort.",
+        activity_duration = datetime.timedelta(hours=4),
+        image_path = "event_id8_image.jpg"
         )
-        Events.add_event(
+    Events.add_event(
         id = 9,
         name = "City Tour Davos",
         location_name = 'Davos',
         location_coordinates = [46.80429, 9.83723],
         date = datetime.date.today(),
-        description = "See the winter wonderous municipality Davos in East Switzerland."
+        description = "See the winter wonderous municipality Davos in East Switzerland.",
+        activity_duration = datetime.timedelta(hours=2),
+        image_path = "event_id9_image.jpg"
         )
-        Events.add_event(
+    Events.add_event(
         id = 10,
         name = "Zermatt",
         location_name = 'Zermatt',
         location_coordinates = [46.11654, 7.445683],
         date = datetime.date.today() - datetime.timedelta(days=10),
-        description = "Enjoy skiing with view on one of Switzerland's most iconic mountain peaks."
+        description = "Enjoy skiing with view on one of Switzerland's most iconic mountain peaks.",
+        activity_duration = datetime.timedelta(hours=2),
+        image_path = "event_id10_image.jpg"
         )
 
     Users.add_user(
         id=239842123,
-        name="Remy",
+        name="User",
         event_preferences=["hiking","skiing"],
         event_blacklist = [],
         home_coordinates=[0,0],
@@ -96,6 +116,5 @@ def populate_data(Users, Events):
     u = Users.get_by_id(239842123)
 
     for e in Events:
-        e.add_review(text="Nice view, good weather. Would recommend.", rating=random.randint(0,5))
-        u.travel_history.append(e)
-    
+        e.add_review(text="Nice view, good weather. Would recommend.", rating=random.randint(4,5))
+        u.travel_history.append(e)

models/event.py

@@ -1,3 +1,4 @@
+from .travel_route import TravelRoute
 
 class Event:
     id = 0
@@ -7,12 +8,12 @@ class Event:
     description = ""
     reviews = []
     category = []
-    weather_requirements = 0
+    weather_requirements = 100 # highest tolerance
     date = ""
     image_path = "fallback.jpg"
-    duration = "" # datetime object
-    trip_to = "" # Trip object
-    trip_back = ""
+    activity_duration = "" # datetime object
+    trip_to = TravelRoute(0,0)
+    trip_back = TravelRoute(0,0)
 
     def __init__(self, **kwargs):
         self.id = kwargs.pop("id")
@@ -21,6 +22,8 @@ class Event:
         self.location_coordinates = kwargs.pop("location_coordinates")
         self.date = kwargs.pop("date")
         self.description = kwargs.pop("description")
+        self.activity_duration = kwargs.pop("activity_duration")
+        self.image_path = kwargs.pop("image_path")
 
     
     def find_optimal_trip(self):
@@ -36,10 +39,8 @@ class Event:
 
     @property
     def co2_savings(self):
-        try:
-            return self.trip_to.co2_savings + self.trip_back.co2_savings
-        except:
-            return 5
+        return self.trip_to.co2_savings + self.trip_back.co2_savings
+        
     @property
     def rating(self):
         return int(sum([r.rating for r in self.reviews]) / len(self.reviews))
@@ -48,6 +49,15 @@ class Event:
     def nreviews(self):
         return len(self.reviews)
 
+    @property
+    def total_duration(self):
+        s = (self.activity_duration + self.trip_back.duration + self.trip_to.duration).seconds
+        hours, remainder = divmod(s, 3600)
+        minutes, seconds = divmod(remainder, 60)
+        return '{:02} h {:02}'.format(int(hours), int(minutes))
+
+
+
 
 class Review:
     text = ""
@@ -63,6 +73,7 @@ class Review:
     def add_photo(self, photo):
         pass
 
+
 class Events:
     _events = []
 
@@ -76,4 +87,15 @@ class Events:
         return None
 
     def __iter__(self):
-        return iter(self._events)
+        # todo fix broken iterator
+        return iter(self._events)
+
+
+    def filter_events(self, user, weather_score):
+        # implement user preferences, geographic restrictions and weather conditions
+
+        for e in self._events:
+            if e.weather_requirements <= weather_score \
+                or abs(e.location_coordinates[0] - user.home_coordinates[0]) + abs(e.location_coordinates[1] - user.home_coordinates[1]) >= 15 \
+                    or not e.trip_is_good:
+                        print("This event should be removed")

models/travel_route.py

@@ -1,17 +1,21 @@
+# TBD API interaction
+
+import datetime
 
 
 class TravelRoute:
-    def __init__(self, start_coords, end_coords, ) -> None:
+    def __init__(self, start_coords, end_coords) -> None:
         pass
     
     @property
     def duration(self):
-        pass
+        return datetime.timedelta(hours=2)
 
     @property
     def wait_time(self):
-        pass
+        return datetime.timedelta(minutes=10)
+        
 
     @property
-    def eco_score(self):
-        pass
+    def co2_savings(self):
+        return 15

server.py

@@ -24,12 +24,20 @@ app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'
 @app.route("/")
 def index():
     session["user_id"] = 239842123 # a perfectly safe login, hem hem
+    user = USERBASE.get_by_id(session["user_id"])
     wscore = WEATHERCALCULATOR.calc_weather_score(EVENTBASE.get_by_id(1))
-    print(wscore)
+    wscore = 10 # hard coded for positive pitch experience
     weather_icon = ["☀️","🌥️","🌧️","⛈️"][int(wscore/25)]
-    print(weather_icon)
+    weather_string = ["looks great!", "could be better..."][int(wscore/50)]
+
+
+    EVENTBASE.filter_events(user, wscore)
+
+    
     context = {
-        "user" : USERBASE.get_by_id(session["user_id"]).name
+        "user" : user.name,
+        "weather_emoji" : weather_icon,
+        "weather_string" : weather_string
     }
     return render_template("event_overview.html", context=context)
 
@@ -54,6 +62,9 @@ def profile():
         plot_bgcolor='rgba(0,0,0,0)',
         colorway=["#D50505", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]
     )
+    fig.update_yaxes(
+        title_text = "Kg of CO2 saved",
+        title_standoff = 5)
     fig.add_trace(go.Bar(x=days, y=co2_savings))
     plot_div = plot(fig, output_type='div', include_plotlyjs=False)
 
@@ -82,7 +93,18 @@ def event_detail(event_id):
     else:
         abort(404)
 
+@app.route("/event/<event_id>/booked")
+def event_booked_view(event_id):
+    uid = session["user_id"]
+    event = EVENTBASE.get_by_id(int(event_id))
+    user = USERBASE.get_by_id(int(uid))
+    user.travel_history.append(event)
+    if event:
+        return render_template("event_booked.html", event=event)
+    else:
+        abort(404)
+
 
 #############################
 ## And, liftoff!
-app.run(port=8000, debug=True)
+app.run(host="0.0.0.0",port=8000, debug=True)

static/custom-bootstrap-override.css

@@ -12,6 +12,10 @@
 .content {
     margin-top: 5rem;
 }
+
+.fa-star{
+  color: #D50505;
+}
 /*
 *
 * ==========================================
@@ -62,8 +66,10 @@
 
 .ml4 .letters {
     position: absolute;
-    margin: auto;
+    margin-left: 0.8rem;
+    margin-top: 0.12rem;
+    /* margin: auto;
     left: 6.7em;
-    top: 0.75em;
+    top: 0.75em; */
     opacity: 0; 
 }

static/index.js

@@ -22,7 +22,7 @@ $(window).on("scroll", function () {
 function callData(counter) {
     $.ajax({
         type: "GET",
-        url: "http://localhost:8000/get_event?id=" + counter,
+        url: "/get_event?id=" + counter,
         dataType: "html",
         success: function (result) {
             //alert(result[0]);

static/travelhistorymap_customer235.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_13bfc02c19da45a3a3baef1997c1ade5 {
-                    position: relative;
-                    width: 100.0%;
-                    height: 100.0%;
-                    left: 0.0%;
-                    top: 0.0%;
-                }
-            </style>
-        
-</head>
-<body>    
-    
-            <div class="folium-map" id="map_13bfc02c19da45a3a3baef1997c1ade5" ></div>
-        
-</body>
-<script>    
-    
-            var map_13bfc02c19da45a3a3baef1997c1ade5 = L.map(
-                "map_13bfc02c19da45a3a3baef1997c1ade5",
-                {
-                    center: [46.8132, 8.2242],
-                    crs: L.CRS.EPSG3857,
-                    zoom: 7.6,
-                    zoomControl: true,
-                    preferCanvas: false,
-                }
-            );
-
-            
-
-        
-    
-            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_13bfc02c19da45a3a3baef1997c1ade5);
-        
-    
-            var marker_a276875cec9846ff92da0a5ee8d2e284 = L.marker(
-                [46.8132, 8.2242],
-                {}
-            ).addTo(map_13bfc02c19da45a3a3baef1997c1ade5);
-        
-    
-            var icon_a53cfad355d24550b9c721ec3c437bd8 = L.AwesomeMarkers.icon(
-                {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
-            );
-            marker_a276875cec9846ff92da0a5ee8d2e284.setIcon(icon_a53cfad355d24550b9c721ec3c437bd8);
-        
-    
-        var popup_e08c5f0dbdfd40c0aa0806c91d8e929a = L.popup({"maxWidth": "100%"});
-
-        
-            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_a276875cec9846ff92da0a5ee8d2e284.bindPopup(popup_e08c5f0dbdfd40c0aa0806c91d8e929a)
-        ;
-
-        
-    
-    
-            var marker_8a21cbd766c448beb6b9ea117ce00be0 = L.marker(
-                [46.11654, 7.445683],
-                {}
-            ).addTo(map_13bfc02c19da45a3a3baef1997c1ade5);
-        
-    
-            var icon_09a316166eb142ea8cd18e321ffd6412 = L.AwesomeMarkers.icon(
-                {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
-            );
-            marker_8a21cbd766c448beb6b9ea117ce00be0.setIcon(icon_09a316166eb142ea8cd18e321ffd6412);
-        
-    
-        var popup_5dcef77f81e84e1bb45fa6b725c3a8df = L.popup({"maxWidth": "100%"});
-
-        
-            var html_da9e1a0c86f64ea6aeb82084fc7e7d5e = $(`<div id="html_da9e1a0c86f64ea6aeb82084fc7e7d5e" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
-            popup_5dcef77f81e84e1bb45fa6b725c3a8df.setContent(html_da9e1a0c86f64ea6aeb82084fc7e7d5e);
-        
-
-        marker_8a21cbd766c448beb6b9ea117ce00be0.bindPopup(popup_5dcef77f81e84e1bb45fa6b725c3a8df)
-        ;
-
-        
-    
-</script>

static/travelhistorymap_customer239842123.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_2b19214dbaf846488f2433d621b9a708 {
+                #map_4e9204bfe6e84ab1a6db14e599b92092 {
                     position: relative;
                     width: 100.0%;
                     height: 100.0%;
@@ -35,13 +35,13 @@
 </head>
 <body>    
     
-            <div class="folium-map" id="map_2b19214dbaf846488f2433d621b9a708" ></div>
+            <div class="folium-map" id="map_4e9204bfe6e84ab1a6db14e599b92092" ></div>
         
 </body>
 <script>    
     
-            var map_2b19214dbaf846488f2433d621b9a708 = L.map(
-                "map_2b19214dbaf846488f2433d621b9a708",
+            var map_4e9204bfe6e84ab1a6db14e599b92092 = L.map(
+                "map_4e9204bfe6e84ab1a6db14e599b92092",
                 {
                     center: [46.8132, 8.2242],
                     crs: L.CRS.EPSG3857,
@@ -55,157 +55,132 @@
 
         
     
-            var tile_layer_5d96e6c02c1c4683b41982c3300a820b = L.tileLayer(
+            var tile_layer_ddf09c4c2e224c218dd24ca1db118836 = 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_2b19214dbaf846488f2433d621b9a708);
+            ).addTo(map_4e9204bfe6e84ab1a6db14e599b92092);
         
     
-            var marker_ca63f695315f4bb6b671d25118151e99 = L.marker(
-                [46.8132, 8.2242],
+            var marker_737a987cae5c44cabf0bdf7666ff2fc8 = L.marker(
+                [46.3667, 7.445683],
                 {}
-            ).addTo(map_2b19214dbaf846488f2433d621b9a708);
+            ).addTo(map_4e9204bfe6e84ab1a6db14e599b92092);
         
     
-            var icon_2ad62ef64ac64cf88189dc11eed7cdf5 = L.AwesomeMarkers.icon(
+            var icon_b24699cfbb9542ecb49afad2b2cea6c5 = L.AwesomeMarkers.icon(
                 {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
             );
-            marker_ca63f695315f4bb6b671d25118151e99.setIcon(icon_2ad62ef64ac64cf88189dc11eed7cdf5);
+            marker_737a987cae5c44cabf0bdf7666ff2fc8.setIcon(icon_b24699cfbb9542ecb49afad2b2cea6c5);
         
     
-        var popup_65fa70c1d5c044b0846c404db6263d30 = L.popup({"maxWidth": "100%"});
+        var popup_adf511ae8f3e4ed9855b889a4d5ee77f = L.popup({"maxWidth": "100%"});
 
         
-            var html_5ec8c647dc83447b832427368990bda9 = $(`<div id="html_5ec8c647dc83447b832427368990bda9" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
-            popup_65fa70c1d5c044b0846c404db6263d30.setContent(html_5ec8c647dc83447b832427368990bda9);
+            var html_07a34cdeb9c445b7a6c03749a59ef47a = $(`<div id="html_07a34cdeb9c445b7a6c03749a59ef47a" style="width: 100.0%; height: 100.0%;">SPH Zentrum, Zürich</div>`)[0];
+            popup_adf511ae8f3e4ed9855b889a4d5ee77f.setContent(html_07a34cdeb9c445b7a6c03749a59ef47a);
         
 
-        marker_ca63f695315f4bb6b671d25118151e99.bindPopup(popup_65fa70c1d5c044b0846c404db6263d30)
+        marker_737a987cae5c44cabf0bdf7666ff2fc8.bindPopup(popup_adf511ae8f3e4ed9855b889a4d5ee77f)
         ;
 
         
     
     
-            var marker_72f25b8a481b4aecb66a56c1cce6db63 = L.marker(
-                [46.0, 8.0],
+            var marker_e5bec2ab72fe4443a83c1e486fbab293 = L.marker(
+                [46.368, 7.445683],
                 {}
-            ).addTo(map_2b19214dbaf846488f2433d621b9a708);
+            ).addTo(map_4e9204bfe6e84ab1a6db14e599b92092);
         
     
-            var icon_d04bab6dbd2a4f93bcd2229321fecd08 = L.AwesomeMarkers.icon(
+            var icon_165fb55dc95546409819b6e638d42699 = L.AwesomeMarkers.icon(
                 {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
             );
-            marker_72f25b8a481b4aecb66a56c1cce6db63.setIcon(icon_d04bab6dbd2a4f93bcd2229321fecd08);
+            marker_e5bec2ab72fe4443a83c1e486fbab293.setIcon(icon_165fb55dc95546409819b6e638d42699);
         
     
-        var popup_2476bd5ce0394663bd5a68557e6da3f2 = L.popup({"maxWidth": "100%"});
+        var popup_7c7d008287164fbdb731617db001973b = L.popup({"maxWidth": "100%"});
 
         
-            var html_459d0ba54a8a4667bb3f2782a2976e3c = $(`<div id="html_459d0ba54a8a4667bb3f2782a2976e3c" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
-            popup_2476bd5ce0394663bd5a68557e6da3f2.setContent(html_459d0ba54a8a4667bb3f2782a2976e3c);
+            var html_c8a7fd7c00df4a87a70d7a8088b352a4 = $(`<div id="html_c8a7fd7c00df4a87a70d7a8088b352a4" style="width: 100.0%; height: 100.0%;">Zürich</div>`)[0];
+            popup_7c7d008287164fbdb731617db001973b.setContent(html_c8a7fd7c00df4a87a70d7a8088b352a4);
         
 
-        marker_72f25b8a481b4aecb66a56c1cce6db63.bindPopup(popup_2476bd5ce0394663bd5a68557e6da3f2)
+        marker_e5bec2ab72fe4443a83c1e486fbab293.bindPopup(popup_7c7d008287164fbdb731617db001973b)
         ;
 
         
     
     
-            var marker_1e5d760167f845eb8dbc5b1968eddb13 = L.marker(
-                [46.8132, 9.0],
+            var marker_8d56063ffa20478f8d5683398cfd3371 = L.marker(
+                [46.68387, 7.86638],
                 {}
-            ).addTo(map_2b19214dbaf846488f2433d621b9a708);
+            ).addTo(map_4e9204bfe6e84ab1a6db14e599b92092);
         
     
-            var icon_ebad70bed4ff4660a48f2727d711b3fa = L.AwesomeMarkers.icon(
+            var icon_7434ed1f71fe4f68b0569ce741bc4776 = L.AwesomeMarkers.icon(
                 {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
             );
-            marker_1e5d760167f845eb8dbc5b1968eddb13.setIcon(icon_ebad70bed4ff4660a48f2727d711b3fa);
+            marker_8d56063ffa20478f8d5683398cfd3371.setIcon(icon_7434ed1f71fe4f68b0569ce741bc4776);
         
     
-        var popup_63700943084f4c08a9dd512565c9a140 = L.popup({"maxWidth": "100%"});
+        var popup_80b323b338764168a10561b432fdac52 = L.popup({"maxWidth": "100%"});
 
         
-            var html_a3c39fae2c8b46a2b75d947f4c613c9a = $(`<div id="html_a3c39fae2c8b46a2b75d947f4c613c9a" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
-            popup_63700943084f4c08a9dd512565c9a140.setContent(html_a3c39fae2c8b46a2b75d947f4c613c9a);
+            var html_7b3a647ddcfa46659b9d56d344b050cc = $(`<div id="html_7b3a647ddcfa46659b9d56d344b050cc" style="width: 100.0%; height: 100.0%;">Interlaken</div>`)[0];
+            popup_80b323b338764168a10561b432fdac52.setContent(html_7b3a647ddcfa46659b9d56d344b050cc);
         
 
-        marker_1e5d760167f845eb8dbc5b1968eddb13.bindPopup(popup_63700943084f4c08a9dd512565c9a140)
+        marker_8d56063ffa20478f8d5683398cfd3371.bindPopup(popup_80b323b338764168a10561b432fdac52)
         ;
 
         
     
     
-            var marker_ff2f599e863c46f2bc6bd924a13464e9 = L.marker(
-                [47.0, 8.2242],
+            var marker_37b194910df343539682b88349bf8959 = L.marker(
+                [46.01008, 8.96004],
                 {}
-            ).addTo(map_2b19214dbaf846488f2433d621b9a708);
+            ).addTo(map_4e9204bfe6e84ab1a6db14e599b92092);
         
     
-            var icon_766cef5e5b954f739795dc7a0e2a47e0 = L.AwesomeMarkers.icon(
+            var icon_21b157e9a59b4f819e1eb5d853728a85 = L.AwesomeMarkers.icon(
                 {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
             );
-            marker_ff2f599e863c46f2bc6bd924a13464e9.setIcon(icon_766cef5e5b954f739795dc7a0e2a47e0);
+            marker_37b194910df343539682b88349bf8959.setIcon(icon_21b157e9a59b4f819e1eb5d853728a85);
         
     
-        var popup_402264ea1bab4f3fb5fab2f065e8e2df = L.popup({"maxWidth": "100%"});
+        var popup_0520ad9ae11e41ad9ff8335af3b25097 = L.popup({"maxWidth": "100%"});
 
         
-            var html_9131a36e8c3c49e0bfd59ef28d9be5cb = $(`<div id="html_9131a36e8c3c49e0bfd59ef28d9be5cb" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
-            popup_402264ea1bab4f3fb5fab2f065e8e2df.setContent(html_9131a36e8c3c49e0bfd59ef28d9be5cb);
+            var html_5ecdfb12343042b4894a6a0cb76625e7 = $(`<div id="html_5ecdfb12343042b4894a6a0cb76625e7" style="width: 100.0%; height: 100.0%;">Lugano</div>`)[0];
+            popup_0520ad9ae11e41ad9ff8335af3b25097.setContent(html_5ecdfb12343042b4894a6a0cb76625e7);
         
 
-        marker_ff2f599e863c46f2bc6bd924a13464e9.bindPopup(popup_402264ea1bab4f3fb5fab2f065e8e2df)
+        marker_37b194910df343539682b88349bf8959.bindPopup(popup_0520ad9ae11e41ad9ff8335af3b25097)
         ;
 
         
     
     
-            var marker_3f88a80516a94c3583fc411b99719178 = L.marker(
-                [40.8132, 8.2242],
+            var marker_46ae0f248bdd45d1814df060a5d874cb = L.marker(
+                [47.05048, 8.30635],
                 {}
-            ).addTo(map_2b19214dbaf846488f2433d621b9a708);
+            ).addTo(map_4e9204bfe6e84ab1a6db14e599b92092);
         
     
-            var icon_2c84ed4b8f154af4bd365d584ec2a082 = L.AwesomeMarkers.icon(
+            var icon_3a32f3654861418890be7e3db94caaeb = L.AwesomeMarkers.icon(
                 {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
             );
-            marker_3f88a80516a94c3583fc411b99719178.setIcon(icon_2c84ed4b8f154af4bd365d584ec2a082);
+            marker_46ae0f248bdd45d1814df060a5d874cb.setIcon(icon_3a32f3654861418890be7e3db94caaeb);
         
     
-        var popup_846c9cd927fd4d80a9ce464dad2ab2c3 = L.popup({"maxWidth": "100%"});
+        var popup_dc5b1a7f5568402db51de77c237d049d = L.popup({"maxWidth": "100%"});
 
         
-            var html_578e7e7d0d91472d970b4a1cdc32f30e = $(`<div id="html_578e7e7d0d91472d970b4a1cdc32f30e" style="width: 100.0%; height: 100.0%;">Center of Switzerland</div>`)[0];
-            popup_846c9cd927fd4d80a9ce464dad2ab2c3.setContent(html_578e7e7d0d91472d970b4a1cdc32f30e);
+            var html_9204aa6c82924b5691f2f6b895e15fc2 = $(`<div id="html_9204aa6c82924b5691f2f6b895e15fc2" style="width: 100.0%; height: 100.0%;">Lucerne</div>`)[0];
+            popup_dc5b1a7f5568402db51de77c237d049d.setContent(html_9204aa6c82924b5691f2f6b895e15fc2);
         
 
-        marker_3f88a80516a94c3583fc411b99719178.bindPopup(popup_846c9cd927fd4d80a9ce464dad2ab2c3)
-        ;
-
-        
-    
-    
-            var marker_b134bea0a19642428ea1441073f96dfb = L.marker(
-                [46.11654, 10.445683],
-                {}
-            ).addTo(map_2b19214dbaf846488f2433d621b9a708);
-        
-    
-            var icon_2a49b7f0516a4018be4142fc7297dfb0 = L.AwesomeMarkers.icon(
-                {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
-            );
-            marker_b134bea0a19642428ea1441073f96dfb.setIcon(icon_2a49b7f0516a4018be4142fc7297dfb0);
-        
-    
-        var popup_d4d40d6cd05b4956892dc6d70a997b05 = L.popup({"maxWidth": "100%"});
-
-        
-            var html_88e1de9e53184c4285695742f599624f = $(`<div id="html_88e1de9e53184c4285695742f599624f" style="width: 100.0%; height: 100.0%;">Zermatt</div>`)[0];
-            popup_d4d40d6cd05b4956892dc6d70a997b05.setContent(html_88e1de9e53184c4285695742f599624f);
-        
-
-        marker_b134bea0a19642428ea1441073f96dfb.bindPopup(popup_d4d40d6cd05b4956892dc6d70a997b05)
+        marker_46ae0f248bdd45d1814df060a5d874cb.bindPopup(popup_dc5b1a7f5568402db51de77c237d049d)
         ;
 
         

templates/event_booked.html

@@ -0,0 +1,53 @@
+{# emulate a booking overview which shows the connection#}
+{% extends "base.html" %}
+{% block content %}
+<script>
+    $( document ).ready(function() {     
+    $('#booking-info').delay(1500).show(0);
+    $('#loading-animation').delay(1500).hide(0);  
+
+    }); 
+</script>
+
+
+<div class="position-relative" style="height: 100vh;" id="loading-animation">
+    <div class="position-absolute top-50 start-50 translate-middle">
+        <div class="spinner-grow text-danger" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+          
+    </div>
+</div>
+
+<div id="booking-info" style="display:none;">
+<h1 class="display-2">{{ event.name }}</h1>
+
+<div class="card mb-4 shadow">
+    <div class="card-body">
+        <h1 class="card-title">Trip outbound</h1>
+        <img src="/static/trip_to.jpg" width="100%">
+    </div>
+</div>
+
+<div class="card mb-4 shadow">
+    <div class="card-body">
+        <h1 class="card-title">Activity</h1>
+        <img src="/static/bettmeralp_weg.png" width="100%">
+        <ul class="list-group list-group-flush">
+            <li class="list-group-item"><b>Coordinates:</b> 46.386321, 8.057643</li>
+            <li class="list-group-item"><b>Start:</b> Bettmeralp, Bergstation Luftseilbahn</li>
+            <li class="list-group-item"><b>Route:</b> Bergstation Luftseilbahn Bettmeralp – Bettmersee – Blausee – Biel – Hohbalm – Roti Chumma – Märjelensee – Obers Tälli (Tunnel) – Fiescheralp - Bettmeralp</li>
+            <li class="list-group-item"><b>Goal:</b> Bettmeralp, Bergstation Luftseilbahn</li>
+        </ul>
+    </div>
+</div>
+
+<div class="card mb-4 shadow">
+    <div class="card-body">
+        <h1 class="card-title">Trip inbound</h1>
+        <img src="/static/trip_back.jpg" width="100%">
+    </div>
+</div>
+</div>
+
+{% endblock %}

templates/event_card.html

@@ -7,7 +7,7 @@
         <div class="card-body">
         <h5 class="card-title ">{{ event.name }}</h5>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item"><i class="far fa-clock"></i> Total duration: {{event.duration }}</li>
+            <li class="list-group-item"><i class="far fa-clock"></i> Total duration: {{ event.total_duration }}</li>
             <li class="list-group-item"><i class="far fa-map"></i> {{ event.location_name }}</li>
             <ul class="list-group-item d-flex justify-content-between align-items-center">
                 <span>

templates/event_detail.html

@@ -9,11 +9,11 @@
     <div class="sep"></div>
     <div class="card-body">
     <ul class="list-group list-group-flush">
-        <li class="list-group-item"><i class="far fa-clock"></i> Total duration: {{event.duration }}</li>
+        <li class="list-group-item"><i class="far fa-clock"></i> Total duration: {{event.total_duration }}</li>
         <li class="list-group-item"><i class="far fa-map"></i> {{ event.location_name }}</li>
         <li class="list-group-item">{{ event.description }}</li>
     </ul>
-    <span class="d-flex flex-row-reverse"><a href="" class="btn btn-primary">Book now</a></span>
+    <span class="d-flex flex-row-reverse"><a href="{{event.id}}/booked" class="btn btn-primary">Book now</a></span>
     </div>
 </div>
 <h1 class="display-4">Reviews:</h1>

templates/event_overview.html

@@ -20,9 +20,15 @@
                 </div>
               </div>
             <div class="card-body">
-                <h5 class="card-title">The weather today is:</h5>
+              <!-- <div class="d-flex justify-content-between align-items-center"> -->
+                <h5 class="card-title text-center">Today's weather {{ context.weather_string }} <span class="badge bg-light">{{ context.weather_emoji }}</span></h5>
+              </div>
+              <!-- <p class="card-text">We .</p> -->
+
             </div>
+
         </div>
+        <h1 class="display-4">Recommended for you:</h1>
         <div class="list"></div>
     </div>     
 </div>

templates/sidebar.html

@@ -1,13 +1,14 @@
-<nav class="navbar navbar-dark navbar-custom fixed-top">
+<nav class="navbar navbar-dark navbar-custom fixed-top shadow">
     <div class="container-fluid">
         <a class="navbar-brand" href="/">
             <img src="/static/sbb.png" alt="SBB" width="30px">
-            <span class="font-monospace fw-bold">Click & 
+            <span class="font-monospace fw-bold position-relative ml-1">
+                Click & 
                 <span class="ml4">
-                <span class="letters letters-1">Hike</span>
-                <span class="letters letters-2">Bike</span>
-                <span class="letters letters-3">Culture</span>
-                <span class="letters letters-4">Jodel</span>
+                    <span class="letters letters-1">Hike</span>
+                    <span class="letters letters-2">Bike</span>
+                    <span class="letters letters-3">Culture</span>
+                    <span class="letters letters-4">Jodel</span>
                 </span>
             </span>
               
@@ -82,7 +83,7 @@
 
         <form class="d-flex">
             <a href="/profile" style="color: inherit; text-decoration: none;">
-                <i class="fas fa-user"></i>
+                <i class="fas fa-user" style="background-color: transparent; color: white;"></i>
             </a>
         </form>
         

templates/user_detail.html

@@ -7,9 +7,9 @@
     <div class="card-body">
       <h5 class="card-title">{{ user.name }} - Profile 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.number_of_trips }}</li>
-        <li class="list-group-item">total CO2 saved: {{ user.total_co2_savings }}</li>
+        <li class="list-group-item"><b>id</b>: {{user.id }}</li>
+        <li class="list-group-item"><b>total trips:</b> {{ user.number_of_trips }}</li>
+        <li class="list-group-item"><b>Kg of CO2 saved (total):</b> {{ user.total_co2_savings }}</li>
       </ul>
     </div>
 </div>