From d259b712314319868d94a57a5b66fac813433949 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arne=20Schl=C3=BCter?= <aesthaddicts@gmail.com>
Date: Mon, 9 Feb 2015 09:49:01 +0100
Subject: [PATCH] Add more information to popup windows

---
 static/js/popup.js         | 27 +++++++++++++++++++++++++++
 static/js/visualization.js |  7 ++++---
 2 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 static/js/popup.js

diff --git a/static/js/popup.js b/static/js/popup.js
new file mode 100644
index 0000000..2b7b9f4
--- /dev/null
+++ b/static/js/popup.js
@@ -0,0 +1,27 @@
+export default function template(incident) {
+  var html = ''
+  var monthMap = {
+    '01': 'Januar',
+    '02': 'Februar',
+    '03': 'März',
+    '04': 'April',
+    '05': 'Mai',
+    '06': 'Juni',
+    '07': 'Juli',
+    '08': 'August',
+    '09': 'September',
+    '10': 'Oktober',
+    '11': 'November',
+    '12': 'Dezember',
+  }
+
+  var dateComponents = incident.date.split('-')
+  var date = dateComponents[2] + '. ' + monthMap[dateComponents[1]] + ' ' + dateComponents[0]
+
+  html += '<div data-id="' + incident.id + '">'
+  html += '<h3 class="date">' + date + '</h3>'
+  html += '<p>' + incident.description.replace(/\n/g, '<br>') + '</p>'
+  html += '</div>'
+
+  return html
+}
diff --git a/static/js/visualization.js b/static/js/visualization.js
index cdef415..11e7ec4 100644
--- a/static/js/visualization.js
+++ b/static/js/visualization.js
@@ -5,6 +5,7 @@ import './lib/oms.min'
 
 import filter from './filter'
 import colorUtils from './colors'
+import template from './popup'
 
 class Visualization {
 
@@ -28,7 +29,7 @@ class Visualization {
 
     this.oms.legColors = {
       usual: 'rgba(0,0,0,.2)',
-      highlighted: 'rgba(0,0,0,.5)'
+      highlighted: 'rgba(0,0,0,.6)'
     }
 
     var popup = new L.Popup({
@@ -40,7 +41,7 @@ class Visualization {
       if (map.getZoom() < 10)
         map.setZoom(9)
 
-      popup.setContent(marker.description.replace(/\n/g, '<br>'))
+      popup.setContent(template(marker.incident))
       popup.setLatLng(marker.getLatLng())
       map.openPopup(popup)
     })
@@ -165,7 +166,7 @@ class Visualization {
       var marker = L.marker([incident.lat, incident.lng], options)
         .addTo(this.map)
 
-      marker.description = incident.description
+      marker.incident = incident
 
       var color = colorUtils.hexToRGB(this._pickColor(incident))
       $(marker._icon).css({