From 74132213418d87e29c27b90b81fb407ed0641920 Mon Sep 17 00:00:00 2001
From: Raimund Renkert <raimund.renkert@intevation.de>
Date: Wed, 4 Mar 2015 10:36:59 +0100
Subject: [PATCH] Replaced checkbox with toggle button to start automatic
 updates.

---
 cmd/mtwebmapper/web/index.html        |  4 ++--
 cmd/mtwebmapper/web/js/auto-update.js | 20 ++++++++++++++------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/cmd/mtwebmapper/web/index.html b/cmd/mtwebmapper/web/index.html
index 5142445..debdfc1 100644
--- a/cmd/mtwebmapper/web/index.html
+++ b/cmd/mtwebmapper/web/index.html
@@ -95,8 +95,8 @@ L.control.coordinates({
 }).addTo(map);
 
 var manualUpdateControl;
-L.autoUpdate('autoUpdate', function(e) {
-    if (e.target.checked) {
+L.autoUpdate('autoUpdate', function(pressed) {
+    if (pressed) {
         manualUpdateControl.getContainer().style = 'visibility: hidden';
     }
     else {
diff --git a/cmd/mtwebmapper/web/js/auto-update.js b/cmd/mtwebmapper/web/js/auto-update.js
index 69ac090..a689bc2 100644
--- a/cmd/mtwebmapper/web/js/auto-update.js
+++ b/cmd/mtwebmapper/web/js/auto-update.js
@@ -3,23 +3,31 @@ L.Control.AutoUpdate = L.Control.extend({
         position: 'topleft',
         label: 'Automatic update'
     },
+    pressed: true,
 
     onAdd: function() {
         var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
-        container.innerHTML = '<form><input id="autoUpdateCb" type="checkbox"/>'
-            + this.options.label + '</form>';
-        L.DomEvent.on(container, 'click', this.cbClick, this);
+        this.link = L.DomUtil.create('a', 'leaflet-bar-part', container);
+        this.iconStart = L.DomUtil.create('i', 'fa fa-play', this.link);
+        this.link.href = '#';
+        L.DomEvent.on(this.link, 'click', this.cbClick, this);
         return container;
     },
 
     cbClick: function (e) {
         L.DomEvent.stopPropagation(e);
-        this.intendedFunction(e);
-        if (e.target.checked) {
+        this.intendedFunction(this.pressed);
+        if (this.pressed) {
+            this.pressed = false;
+            this.iconStart.setAttribute('class', 'fa fa-pause');
             this.autoUpdate();
+            return;
         }
-        if (!e.target.checked) {
+        if (!this.pressed) {
+            this.pressed = true;
+            this.iconStart.setAttribute('class', 'fa fa-play');
             this.stopUpdate();
+            return;
         }
     },