added a table

tursics · Mar 13, 2017 · f8fc1d4 · f8fc1d4
1 parent 7a6c37d
commit f8fc1d4
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 7 deletions.
diff --git a/karte-2016-2017.css b/karte-2016-2017.css
@@ -487,4 +487,7 @@
 	background: #a3a3a3;
 }
 
+.ui-dialog-contain {
+	max-width: initial;
+}
 /* */
diff --git a/karte-2016-2017.html b/karte-2016-2017.html
@@ -61,6 +61,18 @@
 <body>
 	<div data-role="page" id="pageMap">
 		<div role="main" class="ui-content" id="mapContainer"></div>
+		<div id="headerBox" class="big">
+			<div class="author">
+				<a href="http://codefor.berlin/" target="_blank" title="Code for Berlin"><img src="/assets/logocfb.png"></a><span> +</span>
+				<a href="http://www.tursics.de/" target="_blank" title="Thomas Tursics"><img src="/assets/logotursics.png"><span> Thomas Tursics</span></a>
+			</div>
+			<div class="social">
+				<a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fschulsanierung.tursics.de%2F" rel="popup" title="Bei Facebook teilen">teilen<span></span></a>
+				<a class="twitter" href="https://twitter.com/intent/tweet?text=Wie%20kaputt%20ist%20deine%20Schule?%20Finde%20es%20hier%20heraus&amp;url=http://schulsanierung.tursics.de/" rel="popup" title="Bei Twitter teilen">tweeten<span></span></a>
+			</div>
+			<h1>Wo unsere Kinder lernen</h1>
+			<div>Viele Schulen in Berlin sind marode. Wie teuer die Sanierung<br>wirklich wird, können Sie auf dieser Karte erkunden.</div>
+		</div>
 		<div id="searchBox">
 			<h3>Wie kaputt ist Ihre Schule?</h3>
 			<div class="sample">
@@ -70,6 +82,7 @@ <h3>Wie kaputt ist Ihre Schule?</h3>
 				<input type="text" name="schools" id="autocomplete" placeholder="Geben Sie einen Schulnamen ein" />
 				<div><i class="fa fa-search" aria-hidden="true"></i></div>
 			</div>
+			<a href="#pageTable">Test-Tabelle</a>
 		</div>
 		<div id="receiptBox">
 			<div id="receiptClose"><i class="fa fa-close" aria-hidden="true"></i></div>
@@ -146,5 +159,25 @@ <h3>Wie kaputt ist Ihre Schule?</h3>
 			<div id="receiptInfo"><i class="fa fa-info-circle" aria-hidden="true"></i> Noch mehr Informationen erscheinen, wenn sie auf die einzelnen Zeilen klicken.</div>
 		</div>
 	</div>
+	<div data-role="page" data-dialog="true" id="pageTable">
+		<div data-role="main" class="ui-content">
+			<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="dataTable">
+				<thead>
+					<tr>
+						<th data-priority="5">Schulnummer</th>
+						<th>Schule</th>
+						<th data-priority="3">Gebäude</th>
+						<th>Preis 2016</th>
+						<th data-priority="3">Prio 2016</th>
+						<th>Preis 2017</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr></tr>
+				</tbody>
+			</table>
+			<a href="#pageMap" class="ui-btn ui-btn-inline ui-btn-b carat-l ui-btn-icon-left  ui-nodisc-icon" data-rel="back">Zurück zur Karte</a>
+		</div>
+	</div>
 </body>
 </html>
diff --git a/karte-2016-2017.js b/karte-2016-2017.js
@@ -358,8 +358,8 @@ function updateMapSelectItem(data) {
 	strThisYear = '';
 	for (id in data2017) {
 		item = data2017[id];
-		if (item.bsn === data.Schulnummer) {
-			kosten = parseFloat(String(item.gesamtkosten).replace('.', '').replace('.', '').replace(',', '.'));
+		if (item.Schulnummer === data.Schulnummer) {
+			kosten = parseFloat(String(item.Kosten).replace('.', '').replace('.', '').replace(',', '.'));
 			if (isNaN(kosten)) {
 				kosten = 0;
 			}
@@ -465,7 +465,12 @@ function createMarker(data) {
 				icon: 'fa-building-o',
 				prefix: 'fa',
 				markerColor: 'red'
-			});
+			}),
+			bg = true,
+			number = '',
+			id,
+			item,
+			kosten;
 
 		layerGroup = L.featureGroup([]);
 		layerGroup.addTo(map);
@@ -500,6 +505,18 @@ function createMarker(data) {
 						clickable: isDistrict ? 0 : 1
 					});
 				layerGroup.addLayer(marker);
+				kosten = '';
+				if (number !== val.Schulnummer) {
+					number = val.Schulnummer;
+					bg = !bg;
+					for (id in data2017) {
+						item = data2017[id];
+						if (item.Schulnummer === number) {
+							kosten = formatNumber(item.Kosten);
+						}
+					}
+				}
+				$('#dataTable tr:last').after('<tr' + (bg ? ' style="background:#cdf;"' : '') + '><td>' + val.Schulnummer + '</td><td>' + val.Schulname + '</td><td>' + val.Bauwerk + '</td><td style="text-align:right;">' + formatNumber(val.GebaeudeGesamt) + '</td><td>' + val.PrioritaetGesamt + '</td><td style="text-align:right;">' + kosten + '</td></tr>');
 			}
 		});
 	} catch (e) {
@@ -666,18 +683,19 @@ function initMap(elementName, lat, lng, zoom) {
 
 		$.getJSON(dataUrl, function (data) {
 			data = enrichMissingData(data);
-			createStatistics(data);
-			createMarker(data);
+//			createStatistics(data);
+//			createMarker(data);
 			initSearchBox(data);
 			initSocialMedia();
 
 			var budgetUrl = 'data/gebaeudesanierungen.json';
 			$.getJSON(budgetUrl, function (budgetData) {
 				budget = budgetData;
 
-				var data2017Url = 'data/gebaeudescan2017.json';
+				var data2017Url = 'data/gebaeudescan2017-03.json';
 				$.getJSON(data2017Url, function (data2017Data) {
 					data2017 = data2017Data;
+					createMarker(data);
 				});
 			});
 		});
@@ -723,7 +741,7 @@ $(document).on("pageshow", "#pageMap", function () {
 $(function () {
 	'use strict';
 
-	$('a[href*="#"]:not([href="#"])').click(printerLabelClick);
+//	$('a[href*="#"]:not([href="#"])').click(printerLabelClick);
 });
 
 // -----------------------------------------------------------------------------