Add icons for search, loading screen

author: Christian Franke <nobody@nowhere.ws> 2013-12-12 16:42:24 +0100
committer: Christian Franke <nobody@nowhere.ws> 2013-12-12 16:42:24 +0100
commit: 58135d49bfd435ea08713adee5f8179913bbae10 (patch)
tree: 2c0eeb6f1bc1bb596e9cf2204a15fbb804b50b79
parent: fb2bde41ac04ee93c4dd238dcb3e812ac2d15356 (diff)
8 files changed, 50 insertions, 9 deletions
diff --git a/run_server.py b/run_server.py
index 4607f7a..a215320 100644
--- a/run_server.py
+++ b/run_server.py
@@ -92,6 +92,8 @@ class EventMapMarkerApi(object):
             if self.marker_doc.cur['sync-id'] != doc['sync-id']:
                 raise cherrypy.HTTPError(503, "Sorry, but the server database changed in between.")
             self.marker_doc.set_data(data)
+        cherrypy.response.headers['Content-Type']= 'application/json'
+        return '{}'
 
 class EventMapApi(object):
     def __init__(self, path):
diff --git a/web/css/eventmap.css b/web/css/eventmap.css
index e2d1d24..603e90f 100644
--- a/web/css/eventmap.css
+++ b/web/css/eventmap.css
@@ -5,6 +5,30 @@ html, body {
   overflow: hidden;
 }
 
+#overlay {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 1000000;
+  background-color: rgba(0,0,0,0.85);
+  text-align: center;
+  font-family: sans-serif;
+}
+
+#overlay p {
+  color: #ffffee;
+}
+
+p.huge {
+  font-size: 300%;
+}
+
+#progress {
+  font-size: 120%;
+}
+
 #main, #map {
   height: 100%;
   z-index: 0;
diff --git a/web/css/leaflet.search.css b/web/css/leaflet.search.css
index 186e4cc..2ed417f 100644
--- a/web/css/leaflet.search.css
+++ b/web/css/leaflet.search.css
@@ -41,7 +41,7 @@
 	margin:3px 0 3px 3px;
 }
 .leaflet-control-search.search-load .search-input {
-	background: url('images/loader.gif') no-repeat center right #fff;
+	background: url('../images/loader.gif') no-repeat center right #fff;
 }
 .leaflet-control-search.search-load .search-cancel {
 	visibility:hidden;
@@ -53,7 +53,7 @@
 	position:absolute;
 	right:22px;
 	margin:3px 0;
-	background: url('images/search-icon.png') no-repeat 0 -46px;
+	background: url('../images/search-icon.png') no-repeat 0 -46px;
 	text-decoration:none;
 	filter: alpha(opacity=80);
 	opacity: 0.8;		
@@ -77,11 +77,11 @@
 	float:left;
 	width:26px;
 	height:26px;	
-	background: url('images/search-icon.png') no-repeat 2px 2px;
+	background: url('../images/search-icon.png') no-repeat 2px 2px;
 	border-radius:4px;
 }
 .leaflet-control-search .search-button:hover {
-	background: url('images/search-icon.png') no-repeat 2px -22px;
+	background: url('../images/search-icon.png') no-repeat 2px -22px;
 }
 .leaflet-control-search .search-tooltip {
 	position:absolute;
diff --git a/web/images/loader.gif b/web/images/loader.gif
new file mode 100644
index 0000000..d3ef195
--- /dev/null
+++ b/web/images/loader.gif
diff --git a/web/images/search-icon-mobile.png b/web/images/search-icon-mobile.png
new file mode 100644
index 0000000..920fa27
--- /dev/null
+++ b/web/images/search-icon-mobile.png
diff --git a/web/images/search-icon.png b/web/images/search-icon.png
new file mode 100644
index 0000000..231df74
--- /dev/null
+++ b/web/images/search-icon.png
diff --git a/web/index.html b/web/index.html
index fbe52c0..56fa051 100644
--- a/web/index.html
+++ b/web/index.html
@@ -10,12 +10,13 @@
     <link rel="stylesheet" href="css/eventmap.css" />
   </head>
   <body>
+    <div id="overlay">
+      <p class="huge">Loading, please wait...</p>
+      <p id="progress">If this message persists, you don't seem to have javascript active.</p>
+    </div>
     <div id="main">
       <div id="map"></div>
     </div>
-    <div id="sidebar">
-      <p>Sidebar</p>
-    </div>
     <script src="js/jquery.min.js"></script>
     <script src="js/leaflet.js"></script>
     <script src="js/leaflet.contextmenu.js"></script>
diff --git a/web/js/eventmap.js b/web/js/eventmap.js
index 376cba5..ac83f74 100644
--- a/web/js/eventmap.js
+++ b/web/js/eventmap.js
@@ -28,6 +28,8 @@ function eventmap_send_update() {
 		data: JSON.stringify(update_doc),
 		processData: false,
 		dataType: 'json'
+	}).fail(function(){
+		alert("Couldn't send update to server. It is not saved.");
 	});
 }
 
@@ -235,6 +237,7 @@ function marker_labels_calc_nohide(e) {
 }
 
 $(function() {
+	$("#progress").html("Initializing map...");
 	map = L.map('map', {
 		center: new L.LatLng(70,-50),
 		contextmenu: true,
@@ -318,7 +321,9 @@ $(function() {
 		/* update will be sent by "rename_marker" */
 	});
 
+	$("#progress").html("Retrieving layer info...");
 	$.getJSON('js/layers.json', function(data) {
+		$("#progress").html("Creating layers...");
 		var first_layer = true;
 		$.each(data, function(layer_index, layer_info) {
 			var layer_path;
@@ -352,10 +357,19 @@ $(function() {
 		});
 		layer_control.addTo(map);
 
+		$("#progress").html("Loading marker info...");
 		$.ajax({
 			url: 'api/markers/get'
-		}).done(eventmap_process_update).fail(function() {
-			alert("Couldn't load marker info from server!");
+		}).done(function(data) {
+			$("#progress").html("Processing marker info...");
+			eventmap_process_update(data);
+			$("#progress").html("Loading complete.");
+			setTimeout(function() {
+				$("#overlay").hide();
+			}, 300);
+		}).fail(function() {
+			$("#progress").html("Error loading marker info," +
+				            " please retry.");
 		});
 	});
 });
author	Christian Franke <nobody@nowhere.ws>	2013-12-12 16:42:24 +0100
committer	Christian Franke <nobody@nowhere.ws>	2013-12-12 16:42:24 +0100
commit	58135d49bfd435ea08713adee5f8179913bbae10 (patch)
tree	2c0eeb6f1bc1bb596e9cf2204a15fbb804b50b79
parent	fb2bde41ac04ee93c4dd238dcb3e812ac2d15356 (diff)