added waiting indicators in web interface buttons

5 files changed, 199 insertions, 11 deletions

diff --git a/src/GNUmakefile b/src/GNUmakefile
index eacc405..9ae594c 100644
--- a/src/GNUmakefile
+++ b/src/GNUmakefile
@@ -34,7 +34,7 @@ master.o: master.c master.h port.h
 coordinator.o: coordinator.c coordinator.h port.h system.h
 worker.o: worker.c worker.h port.h
 system.o: system.c system.h
-webserver.o: webserver.c webserver.h index.h jquery-ui-css.h jquery-js.h jquery-ui-js.h ui-bg_flat_0_aaaaaa_40x100-png.h ui-bg_flat_75_ffffff_40x100-png.h ui-bg_glass_55_fbf9ee_1x400-png.h ui-bg_glass_65_ffffff_1x400-png.h ui-bg_glass_75_dadada_1x400-png.h ui-bg_glass_75_e6e6e6_1x400-png.h ui-bg_glass_95_fef1ec_1x400-png.h ui-bg_highlight-soft_75_cccccc_1x100-png.h ui-icons_222222_256x240-png.h ui-icons_2e83ff_256x240-png.h ui-icons_454545_256x240-png.h ui-icons_888888_256x240-png.h ui-icons_cd0a0a_256x240-png.h
+webserver.o: webserver.c webserver.h index.h jquery-ui-css.h jquery-js.h jquery-ui-js.h ui-bg_flat_0_aaaaaa_40x100-png.h ui-bg_flat_75_ffffff_40x100-png.h ui-bg_glass_55_fbf9ee_1x400-png.h ui-bg_glass_65_ffffff_1x400-png.h ui-bg_glass_75_dadada_1x400-png.h ui-bg_glass_75_e6e6e6_1x400-png.h ui-bg_glass_95_fef1ec_1x400-png.h ui-bg_highlight-soft_75_cccccc_1x100-png.h ui-icons_222222_256x240-png.h ui-icons_2e83ff_256x240-png.h ui-icons_454545_256x240-png.h ui-icons_888888_256x240-png.h ui-icons_cd0a0a_256x240-png.h loading-gif.h jquery.ui.waitbutton.js.h
 3rdParty/linenoise/linenoise.o: 3rdParty/linenoise/linenoise.c 3rdParty/linenoise/linenoise.h
 3rdParty/http_tiny/http_lib.o: 3rdParty/http_tiny/http_lib.c 3rdParty/http_tiny/http_lib.h 
 cli.o: cli.c cli.h
@@ -104,6 +104,12 @@ ui-icons_888888_256x240-png.h: images/ui-icons_888888_256x240.png 3rdParty/xxd/x
 
 ui-icons_cd0a0a_256x240-png.h: images/ui-icons_cd0a0a_256x240.png 3rdParty/xxd/xxd
 	3rdParty/xxd/xxd -i images/ui-icons_cd0a0a_256x240.png > ui-icons_cd0a0a_256x240-png.h
+
+loading-gif.h: images/loading.gif 3rdParty/xxd/xxd
+	3rdParty/xxd/xxd -i images/loading.gif > loading-gif.h
+
+jquery.ui.waitbutton.js.h: jquery.ui.waitbutton.js 3rdParty/xxd/xxd
+	3rdParty/xxd/xxd -i jquery.ui.waitbutton.js > jquery.ui.waitbutton.js.h
 	
 clean:
 	@-rm *.o
@@ -114,7 +120,7 @@ clean:
 	@-rm 3rdParty/linenoise/*.o
 	@-rm 3rdParty/xxd/xxd
 	@-rm biruda_conf.c
-	@-rm index.h jquery-ui-css.h jquery-js.h jquery-ui-js.h ui-bg_flat_0_aaaaaa_40x100-png.h ui-bg_flat_75_ffffff_40x100-png.h ui-bg_glass_55_fbf9ee_1x400-png.h ui-bg_glass_65_ffffff_1x400-png.h ui-bg_glass_75_dadada_1x400-png.h ui-bg_glass_75_e6e6e6_1x400-png.h ui-bg_glass_95_fef1ec_1x400-png.h ui-bg_highlight-soft_75_cccccc_1x100-png.h ui-icons_222222_256x240-png.h ui-icons_2e83ff_256x240-png.h ui-icons_454545_256x240-png.h ui-icons_888888_256x240-png.h ui-icons_cd0a0a_256x240-png.h
+	@-rm index.h jquery-ui-css.h jquery-js.h jquery-ui-js.h ui-bg_flat_0_aaaaaa_40x100-png.h ui-bg_flat_75_ffffff_40x100-png.h ui-bg_glass_55_fbf9ee_1x400-png.h ui-bg_glass_65_ffffff_1x400-png.h ui-bg_glass_75_dadada_1x400-png.h ui-bg_glass_75_e6e6e6_1x400-png.h ui-bg_glass_95_fef1ec_1x400-png.h ui-bg_highlight-soft_75_cccccc_1x100-png.h ui-icons_222222_256x240-png.h ui-icons_2e83ff_256x240-png.h ui-icons_454545_256x240-png.h ui-icons_888888_256x240-png.h ui-icons_cd0a0a_256x240-png.h loading-gif.h
 	
 # default values
 DESTDIR ?=
diff --git a/src/images/loading.gif b/src/images/loading.gif
new file mode 100644
index 0000000..99041af
--- /dev/null
+++ b/src/images/loading.gif
diff --git a/src/index.html b/src/index.html
index b25d1db..02246db 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="/web/jquery-ui.css"/>
 		<script src="/web/jquery.js"></script>
 		<script src="/web/jquery-ui.js"></script>
+		<script src="/web/jquery.ui.waitbutton.js"></script>
 				
 		<script>
 			$( function( ) {
@@ -57,28 +58,42 @@
 									var status = fields[2];
 									var workertype = fields[3];
 									
-									var start_button = "<button id=\"start_" + name + "\">Start</button><script>$( \"#start_" + name + "\" ).button( );<\/script>";
-									var stop_button = "<button id=\"stop_" + name + "\">Stop</button><script>$( \"#stop_" + name + "\" ).button( );<\/script>";
+									var start_button =
+										"<button id=\"start_" + name + "\">Start</button><script>$( \"#start_" + name + "\" )" +
+										".waitbutton( { waitLabel: 'Starting ...' })" +
+										".on( 'buttonwaiting', function ( e, ui ) {" +
+										"    setTimeout( function () { ui.done(); }, 5000 );" +
+										"    startWorker( '" + name + "' );" +
+										"});" +
+										"<\/script>";
+
+									var stop_button =
+										"<button id=\"stop_" + name + "\">Stop</button><script>$( \"#stop_" + name + "\" )" +
+										".waitbutton( { waitLabel: 'Stopping ...' })" +
+										".on( 'buttonwaiting', function ( e, ui ) {" +
+										"    setTimeout( function () { ui.done(); }, 5000 );" +
+										"    stopWorker( '" + name + "' );" +
+										"});" +
+										"<\/script>";
+
 									var details_button = "<button id=\"details_" + name + "\">Details</button><script>$( \"#details_" + name + "\" ).button( );<\/script>";
 									var buttons = start_button + stop_button + details_button;
 									
                                                                         html += "<tr><td>" + name + "</td><td>" + status + "</td><td>" + buttons + "</td></tr>\n";
                                                                         
                                                                         if( status == "running" ) {
-										html += '<script>$( "#start_' + name + '" ).button( "option", "disabled", true );<\/script>\n';
+										html += '<script>$( "#start_' + name + '" ).waitbutton( "option", "disabled", true );<\/script>\n';
 									}
 									if( status == "stopped" ) {
-										html += '<script>$( "#stop_' + name + '" ).button( "option", "disabled", true );<\/script>\n';
+										html += '<script>$( "#stop_' + name + '" ).waitbutton( "option", "disabled", true );<\/script>\n';
 									}
 									
 									if( workertype == "disabled" ) {
-										html += '<script>$( "#start_' + name + '" ).button( "option", "disabled", true );<\/script>\n';
-										html += '<script>$( "#stop_' + name + '" ).button( "option", "disabled", true );<\/script>\n';
+										html += '<script>$( "#start_' + name + '" ).waitbutton( "option", "disabled", true );<\/script>\n';
+										html += '<script>$( "#stop_' + name + '" ).waitbutton( "option", "disabled", true );<\/script>\n';
 										html += '<script>$( "#details_' + name + '" ).button( "option", "disabled", true );<\/script>\n';
 									}
 									
-									html += '<script>$( "#start_' + name + '" ).click( function( ) { startWorker( "' + name + '" ); } );<\/script>\n';
-									html += '<script>$( "#stop_' + name + '" ).click( function( ) { stopWorker( "' + name + '" ); } );<\/script>\n';
 									html += '<script>$( "#details_' + name + '" ).click( function( ) { showWorkerTab( "' + name + '" ); } );<\/script>\n';
                                                                 }
                                                         });
@@ -112,7 +127,7 @@
 				tabs.tabs( "option", "active", $( "#" + id ).index( ) - 1 );
 			}
 			
-			function startWorker( worker ) {
+			function startWorker( worker ) {            
 				$.post( "/worker?op=start&name=" + worker, { } )
 					.done( function( data ) {
 				}).fail( function( ) {
@@ -138,7 +153,14 @@
 				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
 				font-size: 62.5%;
 			}
+
 			#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
+			
+			.ui-wait-button .ui-icon-waiting {
+				background-image: url( "/web/images/loading.gif" );
+				background-position: 0 center;
+			}
+
   		</style>
   
 	</head>
diff --git a/src/jquery.ui.waitbutton.js b/src/jquery.ui.waitbutton.js
new file mode 100644
index 0000000..0225378
--- /dev/null
+++ b/src/jquery.ui.waitbutton.js
@@ -0,0 +1,149 @@
+/*!
+ * Copyright (c) 2013 Ben Olson (https://github.com/bseth99/jquery-ui-extensions)
+ * jQuery UI WaitButton @VERSION
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without
+ * restriction, including without limitation the rights to use,
+ * copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following
+ * conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * Depends:
+ *  jquery.ui.core.js
+ *  jquery.ui.widget.js
+ *  jquery.ui.button.js
+ */
+ (function ( $, undefined ) {
+    $.widget( "ui.waitbutton", $.ui.button, {
+
+       version: "@VERSION",
+
+       // Keep button prefix instead of waitbutton
+       // otherwise waiting event is waitbuttonwaiting
+       // which is weird.
+       widgetEventPrefix: "button",
+
+       options: {
+          waitLabel: null,
+          waitIcon: 'ui-icon-waiting'
+       },
+
+       _saved: null,
+
+       _create: function() {
+
+          this._super();
+
+          this.element.addClass('ui-wait-button');
+          this._saved = {};
+
+          this._saveOptions();
+
+       },
+
+       _init: function() {
+
+          this._super();
+
+          this.disable();
+          this._toggleWaitState();
+          this._initWaitClick();
+
+       },
+
+       _initWaitClick: function() {
+
+          /**
+          *   channel clicks through waiting event instead
+          *   base button does not listen to click -
+          *   it listens to mousedown/up.  This prevents any external
+          *   listeners from firing when we want to use the callback
+          *   provided by the waiting event.
+          */
+          this.element.off( 'click' );
+
+          this.element.one( 'click', $.proxy( this, '_toggleWaitState' ) );
+       },
+
+       _toggleWaitState: function() {
+
+          var event;
+
+          if ( this.options.disabled ) {
+
+             this._setOptions({
+                disabled: false,
+                label: this._saved.label,
+                icons: { primary: this._saved.icon }
+             });
+
+          } else {
+
+             this._saveOptions();
+
+             this._setOptions({
+                disabled: true,
+                label: this.options.waitLabel || this.options.label,
+                icons: { primary: this.options.waitIcon }
+             });
+
+             event = arguments[0] || (new jQuery.Event( 'click', { target: this.element } ) );
+
+             /* channel clicks through waiting event instead */
+             event.preventDefault();
+             event.stopPropagation();
+             event.stopImmediatePropagation();
+
+             this._trigger( 'waiting', event, { done: $.proxy( this, '_waitComplete' ) } );
+          }
+
+       },
+
+       _waitComplete: function() {
+
+          // Juggle arguments
+          var label = (arguments[0] && typeof( arguments[0] ) == 'string' ? arguments[0] : null),
+              enable = (label ? arguments[1] : arguments[0]);
+
+          // Determine next state - either return to start or
+          // use a different label and/or leave in disabled state
+
+          if ( typeof( enable ) == 'undefined' ) enable = true;
+
+          this._toggleWaitState();
+          if ( enable ) {
+             this._initWaitClick();
+          } else {
+             this.disable();
+          }
+
+          if ( label ) {
+             this._setOption( 'label', label );
+          }
+       },
+
+       _saveOptions: function() {
+
+          this._saved.icon = this.options.icons.primary;
+          this._saved.label = this.options.label;
+
+       }
+
+    });
+
+})(jQuery);
diff --git a/src/webserver.c b/src/webserver.c
index 331dfd9..68c23e6 100644
--- a/src/webserver.c
+++ b/src/webserver.c
@@ -30,6 +30,8 @@
 #include "ui-icons_454545_256x240-png.h"
 #include "ui-icons_888888_256x240-png.h"
 #include "ui-icons_cd0a0a_256x240-png.h"
+#include "loading-gif.h"
+#include "jquery.ui.waitbutton.js.h"
 
 static struct MHD_Daemon *d;
 
@@ -203,6 +205,15 @@ static int handle_request( void *cls, struct MHD_Connection *connection,
 			memcpy( biruda_msg, images_ui_icons_cd0a0a_256x240_png, images_ui_icons_cd0a0a_256x240_png_len );
 			content_type = CONTENT_TYPE_IMAGE_PNG;
 			biruda_msg_len = images_ui_icons_cd0a0a_256x240_png_len;
+		} else if( strcmp( url, "/web/images/loading.gif" ) == 0 ) {
+			memcpy( biruda_msg, images_loading_gif, images_loading_gif_len );
+			content_type = CONTENT_TYPE_IMAGE_PNG;
+			biruda_msg_len = images_loading_gif_len;
+		} else if( strcmp( url, "/web/jquery.ui.waitbutton.js" ) == 0 ) {
+			strncpy( biruda_msg, (char *)jquery_ui_waitbutton_js, jquery_ui_waitbutton_js_len );
+			biruda_msg[jquery_ui_waitbutton_js_len] = '\0';
+			content_type = CONTENT_TYPE_TEXT_JS;
+			biruda_msg_len = strlen( biruda_msg );
 		} else {
 			strcat( biruda_msg, "<html><body><p>This is biruda, the REST api. You can access the web interface <a href=\"/web\">here</a>.</p></body></html>" );
 			biruda_msg_len = strlen( biruda_msg );