From: Philipp Spitzer <philipp@spitzer.priv.at>
Date: Sat, 2 Jan 2021 14:54:50 +0000 (+0100)
Subject: Popup now has sledrun info.
X-Git-Url: https://git.toastfreeware.priv.at/philipp/winterrodeln/mediawiki_extensions/wrmap.git/commitdiff_plain/1bf563e2c3bb62152d4d431321dec11afea6233b

Popup now has sledrun info.
---

diff --git a/wrmap.js b/wrmap.js
index 878b709..d1c47b9 100644
--- 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);
 		}
 	});