Popup now has sledrun info.

diff --git a/wrmap.js b/wrmap.js
index 878b70982faa1cec46f186d855b6d901e2ca8a63..d1c47b98f4960242ef7998dad985510277b8bf00 100644 (file)
--- a/wrmap.js
+++ b/wrmap.js
@@ -19,7 +19,6 @@ function init_wrmap(i, jq_map) {
        var EPSG4326 = ol.proj.get("EPSG:4326"); // lon/lat
        var EPSG3857 = ol.proj.get("EPSG:3857"); // google
 
-       /*
        // tool functions
        function createElement(tagName, attributes) {
                var element = $(document.createElement(tagName));
@@ -36,7 +35,6 @@ function init_wrmap(i, jq_map) {
                parentElement.append(element);
                return element;
        }
-       */
 
 
        // extract geojson from map element and clear map element's content
@@ -182,6 +180,44 @@ function init_wrmap(i, jq_map) {
        var popup_overlay = new ol.Overlay({element: popup_container, autoPan: true, autoPanAnimation: {duration: 250}});
        popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
 
+       function create_popup_dom(feature) {
+               var popup_div = createElement('div');
+
+               // name
+               if (feature.get('name') !== undefined && (feature.get('wiki') !== undefined || feature.get('thumb_url') !== undefined)) {
+                       var h2 = appendElement(popup_div, 'h2');
+                       if (feature.get('wiki') === undefined) h2.text(feature.get('name'));
+                       else appendElement(h2, 'a', {href: feature.get('wiki')}).text(feature.get('name'));
+               }
+
+               // sledrun information
+               if (feature.get('type') == 'sledrun') {
+                       var p = appendElement(popup_div, 'p').text('Rodelbahnzustand').append(createElement('br'));
+                       if (feature.get('condition') !== undefined) {
+                               var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
+                               var year_month_day = feature.get('date_report').split('-');
+                               p.append(createElement('a', {href: feature.get('wiki') + '#Eintr.C3.A4ge'}).text(condition_text[feature.get('condition')]), ' ');
+                               p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
+                               p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Neu')));
+                       } else {
+                               p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Bitte eintragen')));
+                       }
+               }
+
+               // wiki link
+               if (feature.get('wiki') !== undefined) {
+                       var a = appendElement(appendElement(popup_div, 'p'), 'a', {href: feature.get('wiki')});
+                       var detail_text = 'Details';
+                       if (feature.get('type') == 'sledrun') detail_text += ' zur Rodelbahn';
+                       if (feature.get('type') == 'gasthaus') detail_text += ' zum Gasthaus';
+                       if (feature.get('thumb_url') === undefined) a.text(detail_text);
+                       else a.append(createElement('img', {src: feature.get('thumb_url'), alt: detail_text, title: detail_text}));
+               }
+
+               return popup_div;
+       }
+
+
        /*
        var layer_path = new OpenLayers.Layer.Vector("Path", {
                styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
@@ -387,7 +423,8 @@ function init_wrmap(i, jq_map) {
                if (event.selected.length > 0) {
                        let feature = event.selected[0];
                        let coordinates = feature.getGeometry().getCoordinates();
-                       popup_content.innerHTML = '<p>You clicked</p>';
+                       let popup_dom = create_popup_dom(feature);
+                       popup_content.innerHTML = popup_dom.html(); // TODO: There should be a way without converting it to string...
                        popup_overlay.setPosition(coordinates);
                }
        });