From 08fb74c992acfe19f42aab124766c53d00bacef7 Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kjohnson@gnulnx.net>
Date: Sun, 24 Apr 2016 00:47:07 -0400
Subject: [PATCH] Major rewrite of states view.  Now a modal on every page.
 Read: No longer an HTML popup window.

 * State html is now included toward the bottom of every page
 * The states.js has been rewritten in jquery
 * Applying, deleting or saving a state reloads the page after the POST is done
---
 web/skins/classic/views/console.php |   1 +
 web/skins/classic/views/header.php  |   3 +-
 web/skins/classic/views/js/state.js | 106 ++++++++++++++++------------
 web/skins/classic/views/state.php   |  91 +++++++++++-------------
 4 files changed, 103 insertions(+), 98 deletions(-)

diff --git a/web/skins/classic/views/console.php b/web/skins/classic/views/console.php
index 9376bf839..ce6662c17 100644
--- a/web/skins/classic/views/console.php
+++ b/web/skins/classic/views/console.php
@@ -154,5 +154,6 @@ echo $Server->Name();
 </div> <!-- End .footer -->
 
     </form>
+<?php include("skins/$skin/views/state.php") ?>
 </body>
 </html>
diff --git a/web/skins/classic/views/header.php b/web/skins/classic/views/header.php
index 365b04276..75d24d500 100644
--- a/web/skins/classic/views/header.php
+++ b/web/skins/classic/views/header.php
@@ -72,6 +72,7 @@ $eventCounts = array(
 );
 
 $running = daemonCheck();
+$states = dbFetchAll( "select * from States" );
 $status = $running?translate('Running'):translate('Stopped');
 $run_state = dbFetchOne('select Name from States where  IsActive = 1', 'Name' );
 
@@ -229,7 +230,7 @@ $versionClass = (ZM_DYN_DB_VERSION&&(ZM_DYN_DB_VERSION!=ZM_VERSION))?'errorText'
 <?php } ?>
 
 <?php if ( canEdit( 'System' ) ) { ?>
-		<a class="btn btn-default navbar-btn" href="/?view=state" onclick="createPopup( '?view=state', 'zmState', 'state' ); return( false );"> <?php echo $status ?> </a>
+		<button type="button" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#modalState"><?php echo $status ?></button>
 
 <?php } else if ( canView( 'System' ) ) { ?>
 		<p class="navbar-text"> <?php echo $status ?> </p>
diff --git a/web/skins/classic/views/js/state.js b/web/skins/classic/views/js/state.js
index 9935eb0db..2081597c2 100644
--- a/web/skins/classic/views/js/state.js
+++ b/web/skins/classic/views/js/state.js
@@ -1,55 +1,69 @@
-function checkState( element )
-{
+$(document).ready(function() {
+	// Enable or disable the Delete button depending on the selected run state
+	$("#runState").change(function() {
+		runstate = $(this).val();
 
-    var form = element.form;
+		if ( (runstate == 'stop') || (runstate == 'restart') || (runstate == 'start') || (runstate == 'default') ) {
+			$("#btnDelete").prop( "disabled", true );
+		} else {
+			$("#btnDelete").prop( "disabled", false );
+		}
+	});
 
-    var minIndex = running?2:1;
-    if ( form.runState.selectedIndex < minIndex )
-    {
-        form.saveBtn.disabled = true;
-        form.deleteBtn.disabled = true;
-    }
-    else
-    {
-        form.saveBtn.disabled = false;
-        form.deleteBtn.disabled = false;
-    }
+	// Enable or disable the Save button when entering a new state
+	$("#newState").keyup(function() {
+		length = $(this).val().length;
+		console.log(length);
+		if (length < 1) {
+			$("#btnSave").prop( "disabled", true );
+		} else {
+			$("#btnSave").prop( "disabled", false );
+		}
+	});
+	
 
-    if ( form.newState.value != '' )
-        form.saveBtn.disabled = false;
+	// Delete a state
+	$("#btnDelete").click(function() {
+    		StateStuff( 'delete', $("#runState").val( ));
+	});
 
-    // PP if we are in 'default' state, disable delete
-    // you can still save
-    if (element.value.toLowerCase() == 'default' )
-    {
-	form.saveBtn.disabled = false;
- 	form.deleteBtn.disabled = true;
-    }
 
-}
+	// Save a new state
+	$("#btnSave").click(function() {
+		StateStuff( 'save', undefined, $("#newState").val() );
+		
+	});
 
-function saveState( element )
-{
-    var form = element.form;
+	// Change state
+	$("#btnApply").click(function() {
+		StateStuff( 'state', $("#runState").val() );
+	});
 
-    form.view.value = currentView;
-    form.action.value = 'save';
-    form.submit();
-}
+	function StateStuff( action, runState, newState ){
+		var formData = {
+			'view' : 'console',
+			'action' : action,
+			'apply' : 1,
+			'runState' : runState,
+			'newState' : newState
+		};
+		console.log(formData);
 
-function deleteState( element )
-{
-    var form = element.form;
-    form.view.value = currentView;
-    form.action.value = 'delete';
-    form.submit();
-}
+		$("#pleasewait").toggleClass("hidden");
 
-if ( applying )
-{
-    function submitForm()
-    {
-        $('contentForm').submit();
-    }
-    window.addEvent( 'domready', function() { submitForm.delay( 1000 ); } );
-}
+		$.ajax({
+			type: 'POST',
+			url: '/index.php',
+			data: formData,
+			dataType: 'html',
+			enocde: true
+		}).done(function(data) {
+			location.reload();
+		});
+
+
+	}
+
+
+
+});
diff --git a/web/skins/classic/views/state.php b/web/skins/classic/views/state.php
index e55e4e234..855270770 100644
--- a/web/skins/classic/views/state.php
+++ b/web/skins/classic/views/state.php
@@ -23,29 +23,27 @@ if ( !canEdit( 'System' ) )
     $view = "error";
     return;
 }
-$running = daemonCheck();
 
-$states = dbFetchAll( "select * from States" );
-$focusWindow = true;
+?>
+  <div id="modalState" class="modal fade">
+<form class="form-horizontal" name="contentForm" id="contentForm" method="get" action="<?php echo $_SERVER['PHP_SELF'] ?>">
+    <div class="modal-dialog">
+      <div class="modal-content">
 
-xhtmlHeaders(__FILE__, translate('RunState') );
-?>
-<body>
-  <div id="page">
-    <div id="header">
-      <h2><?php echo translate('RunState') ?></h2>
-    </div>
-    <div id="content">
-      <form name="contentForm" id="contentForm" method="get" action="<?php echo $_SERVER['PHP_SELF'] ?>">
-<?php
-if ( empty($_REQUEST['apply']) )
-{
-?>
+        <div class="modal-header">
+	  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h2 class="modal-title"><?php echo translate('RunState') ?></h2>
+        </div>
+
+    <div class="modal-body">
         <input type="hidden" name="view" value="<?php echo $view ?>"/>
-        <input type="hidden" name="action" value=""/>
+        <input type="hidden" name="action" value="state"/>
         <input type="hidden" name="apply" value="1"/>
-        <p>
-          <select name="runState" onchange="checkState( this );">
+
+	<div class="form-group">
+	<label for="runState" class="col-sm-3 control-label">Change State</label>
+	<div class="col-sm-9">
+          <select id="runState" name="runState" class="form-control">
 <?php
     if ( $running )
     {
@@ -70,38 +68,29 @@ if ( empty($_REQUEST['apply']) )
     }
 ?>
           </select>
-        </p>
-        <table id="contentTable" class="minor" cellspacing="0">
-          <tbody>
-            <tr>
-              <th scope="row"><?php echo translate('NewState') ?></th>
-		<!-- PP - added oninput so that changes are detected immediately -->
-		<!-- PP - retained onchange for older browsers -->
-              <td><input type="text" name="newState" value="" size="16" oninput="checkState( this );" onchange="checkState(this);"/></td>
-            </tr>
-          </tbody>
-        </table>
-        <div id="contentButtons">
-          <input type="submit" value="<?php echo translate('Apply') ?>"/>
-          <input type="button" name="saveBtn" value="<?php echo translate('Save') ?>" disabled="disabled" onclick="saveState( this );"/>
-          <input type="button" name="deleteBtn" value="<?php echo translate('Delete') ?>" disabled="disabled" onclick="deleteState( this );"/> 
-          <input type="button" value="<?php echo translate('Cancel') ?>" onclick="closeWindow()"/>
-        </div>
-<?php
-}
-else
-{
-?>
+	</div>
+	</div>
+
+	<div class="form-group">
+              <label for="newState" class="col-sm-3 control-label"><?php echo translate('NewState') ?></label>
+		<div class="col-sm-9">
+              <input class="form-control" type="text" id="newState"/>
+		</div>
+	</div>
+
+    </div> <!-- body -->
+        <div class="modal-footer">
+          <button class="btn btn-primary" type="button" id="btnApply"><?php echo translate('Apply') ?></button>
+          <button class="btn btn-primary" type="button" id="btnSave" disabled><?php echo translate('Save') ?></button>
+          <button class="btn btn-danger" type="button" id="btnDelete" disabled><?php echo translate('Delete') ?></button>
+
         <input type="hidden" name="view" value="none"/>
         <input type="hidden" name="action" value="state"/>
         <input type="hidden" name="runState" value="<?php echo validHtmlStr($_REQUEST['runState']) ?>"/>
-        <p><?php echo translate('ApplyingStateChange') ?></p>
-        <p><?php echo translate('PleaseWait') ?></p>
-<?php
-}
-?>
-      </form>
-    </div>
-  </div>
-</body>
-</html>
+        <p class="pull-left hidden" id="pleasewait"><?php echo translate('PleaseWait') ?></p>
+	</div><!-- footer -->
+
+  </div> <!-- content -->
+</div> <!-- dialog -->
+</form>
+</div> <!-- state -->