Aangepaste popup voor online bibs

src/css/map.css

@@ -121,6 +121,7 @@ a.img-and-text-link:hover span {
 }
 
 .holiday-legend {
+    height: 72px;
     width: 145px;
     background-color: #fff;
     box-shadow: 0 1px 5px rgba(0,0,0,0.65);

src/index.html

@@ -36,16 +36,18 @@
       <h3>{{name}} ({{capacity}} pl.)</h3>
       {{#if wheelchair}}<img src="img/Wheelchair_symbol.svg" class="wheelchair" style="width:30px;height:30px;">{{/if}}
       {{#if wifi}}<img src="img/Logo_WiFi.svg" class="wifi" style="width:40px;height:20px;">{{/if}}
+      {{#if online}}<img src="img/Online.png" class="wifi" style="width:50px;height:50px;">{{/if}}
       <img src="img/{{type}}.png" class="type">
-      <div class="location">Locatie: {{address}}</div>
-      <div class="period">{{#if period.start}}
-          Periode: {{date period.start}} tot {{date period.end}}
-        {{else}}
-          Open gedurende het hele jaar.
-        {{/if}}
+      <div class="location">{{#if online}}Link: <a href={{address}}>{{address}}</a>{{else}}Locatie: {{address}}{{/if}}</div>
+      {{#if online}}
+      {{else}}
+        <div class="period">{{#if period.start}}
+        Periode: {{date period.start}} tot {{date period.end}}
+      {{else}}
+        Open gedurende het hele jaar.
+      {{/if}}
       </div>
-      <h4>Openingsuren</h4>
-      <table class="desktop">
+        <table class="desktop">
         <tr>
           <td>Maandag</td>
           <td>Dinsdag</td>
@@ -55,15 +57,18 @@
           <td>Zaterdag</td>
           <td>Zondag</td>
         </tr><tr>
-          <td>{{#if hours.monday}}{{hours.monday}}{{else}}Gesloten{{/if}}</td>
-          <td>{{#if hours.tuesday}}{{hours.tuesday}}{{else}}Gesloten{{/if}}</td>
-          <td>{{#if hours.wednesday}}{{hours.wednesday}}{{else}}Gesloten{{/if}}</td>
-          <td>{{#if hours.thursday}}{{hours.thursday}}{{else}}Gesloten{{/if}}</td>
-          <td>{{#if hours.friday}}{{hours.friday}}{{else}}Gesloten{{/if}}</td>
-          <td>{{#if hours.saturday}}{{hours.saturday}}{{else}}Gesloten{{/if}}</td>
-          <td>{{#if hours.sunday}}{{hours.sunday}}{{else}}Gesloten{{/if}}</td>
-        </tr>
+        <td>{{#if hours.monday}}{{hours.monday}}{{else}}Gesloten{{/if}}</td>
+        <td>{{#if hours.tuesday}}{{hours.tuesday}}{{else}}Gesloten{{/if}}</td>
+        <td>{{#if hours.wednesday}}{{hours.wednesday}}{{else}}Gesloten{{/if}}</td>
+        <td>{{#if hours.thursday}}{{hours.thursday}}{{else}}Gesloten{{/if}}</td>
+        <td>{{#if hours.friday}}{{hours.friday}}{{else}}Gesloten{{/if}}</td>
+        <td>{{#if hours.saturday}}{{hours.saturday}}{{else}}Gesloten{{/if}}</td>
+        <td>{{#if hours.sunday}}{{hours.sunday}}{{else}}Gesloten{{/if}}</td>
+      </tr>
       </table>
+
+      <h4>Openingsuren</h4>
+
       <table class="mobile">
         <tr>
           <td>Maandag</td>
@@ -88,8 +93,10 @@
           <td>{{#if hours.sunday}}{{hours.sunday}}{{else}}Gesloten{{/if}}</td>
         </tr>
       </table>
+      {{/if}}
       {{#if extra}}{{{extra}}}{{/if}}
     </div>
+
   </script>
 
   <script id="info-template" type="text/x-handlebars-template">
@@ -112,15 +119,19 @@
       </div>
       <div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
         <div style="height: 10px; width: 10px; background: rgb(36, 126, 202); margin-top: 1px; margin-left: 5px;"></div>
-        <span style="position: absolute; left: 25px; top: 30px;">Enkel week</span>
+        <span style="position: absolute; left: 25px; top: 29px;">Enkel week</span>
       </div>
       <div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
         <div style="height: 10px; width: 10px; background: rgb(120,120,120); margin-top: 1px; margin-left: 5px;"></div>
-        <span style="position: absolute; left: 25px; top: 52px;">Opent binnenkort</span>
+        <span style="position: absolute; left: 25px; top: 53px;">Opent binnenkort</span>
+      </div>
+      <div style="width: 125px; height: 18px; padding-top: 5px; padding-left: 5px;">
+        <div style="height: 10px; width: 10px; background: rgb(124,252,120); margin-top: 1px; margin-left: 5px;"></div>
+        <span style="position: absolute; left: 25px; top: 77px;">Online</span>
       </div>
       <div style="width: 140px; height: 18px; padding-top: 5px; padding-left: 5px;" class="holiday">
         <div style="height: 10px; width: 10px; background: rgb(121, 230, 121); margin-top: 0px; margin-left: 5px;"></div>
-        <span style="position: absolute; left: 25px; top: 75px;">Tijdens kerstvakantie</span>
+        <span style="position: absolute; left: 25px; top: 80px;">Tijdens kerstvakantie</span>
       </div>
     </div>
   </script>

src/js/map.js

@@ -24,11 +24,17 @@ $(document).ready(function() {
             iconUrl: "img/grey-marker.png"
         }
     });
+    var GreenIcon = L.Icon.Default.extend({
+        options: {
+            iconUrl: "img/green-marker.png"
+        }
+    });
 
     var blueIcon = new BlueIcon();
     var redIcon = new RedIcon();
     var christmasIcon = new ChristmasIcon();
     var greyIcon = new GreyIcon();
+    var greenIcon = new GreenIcon();
 
     var now = new Date();
     var christmasSeason =
@@ -37,6 +43,8 @@ $(document).ready(function() {
 
     function onEachFeature(feature, layer) {
         if (feature.properties) {
+            var prop = feature.properties;
+            prop["online"] = feature.properties.address.substring(0,5)==="https";
             layer.bindPopup(popuptemplate(feature.properties), {
                 showOnMouseOver: true
             });
@@ -56,10 +64,14 @@ $(document).ready(function() {
             } else if (feature.properties.holidays && christmasSeason) {
                 icon = christmasIcon;
                 iconDescription = "christmas";
-            } else if ((!feature.properties.hours.saturday && !feature.properties.hours.sunday)||(feature.properties.hours.saturday.toLowerCase()==="gesloten"&&feature.properties.hours.sunday.toLowerCase()==="gesloten")) {
+            } else if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) {
                 icon = blueIcon;
                 iconDescription = "blue";
             }
+            if (feature.properties.address.substring(0,5)==="https") {
+                icon = greenIcon;
+                iconDescription = "green";
+            }
         }
         return new HoverMarker(latlng, { icon: icon, riseOnHover: true});
     }
@@ -72,7 +84,7 @@ $(document).ready(function() {
         // account name = zeuswpi, details are in password manager
         // token has a restriction to only work with our domains and localhost
         accessToken: 'pk.eyJ1IjoiemV1c3dwaSIsImEiOiJja2QzMDZ1NmcwMjBtMnlxbXV2bXVpaXhuIn0.-ViXZUT9SqRI3IvB8209LQ',
-        attribution: '<span>Achtergrondkaart © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-bijdragers </span>, <span lang="en">Imagery © <a href="https://www.mapbox.com/">Mapbox</a></span>. | <span lang="en">Made with ❤ by <a href="https://zeus.gent/">Zeus WPI</a></span> | <a href="https://zeus.gent/about/privacy/">Privacybeleid</a>',
+        attribution: 'Achtergrondkaart © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-bijdragers, <span lang="en">Imagery © <a href="https://www.mapbox.com/">Mapbox</a></span>. | <span lang="en">Made with ❤ by <a href="https://zeus.gent/">Zeus WPI</a></span> | <a href="https://zeus.gent/about/privacy/">Privacybeleid</a>',
         maxZoom: 18
     }).addTo(map);
 
@@ -182,5 +194,9 @@ $(document).ready(function() {
         position: "bottomright"
     }).addTo(map);
 
+    var notice = new SimpleControl("#notice-template", "notice", {
+        position: "bottomleft"
+    }).addTo(map);
+
     L.control.zoom().addTo(map);
 });