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

@@ -154,5 +154,6 @@ echo $Server->Name();
 </div> <!-- End .footer -->
 
     </form>
+<?php include("skins/$skin/views/state.php") ?>
 </body>
 </html>

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>

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;
+	// Enable or disable the Save button when entering a new state
-    if ( form.runState.selectedIndex < minIndex )
+	$("#newState").keyup(function() {
-    {
+		length = $(this).val().length;
-        form.saveBtn.disabled = true;
+		console.log(length);
-        form.deleteBtn.disabled = true;
+		if (length < 1) {
-    }
+			$("#btnSave").prop( "disabled", true );
-    else
+		} else {
-    {
+			$("#btnSave").prop( "disabled", false );
-        form.saveBtn.disabled = false;
+		}
-        form.deleteBtn.disabled = false;
+	});
-    }
+	
 
-    if ( form.newState.value != '' )
+	// Delete a state
-        form.saveBtn.disabled = false;
+	$("#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 )
+	// Change state
-{
+	$("#btnApply").click(function() {
-    var form = element.form;
+		StateStuff( 'state', $("#runState").val() );
+	});
 
-    form.view.value = currentView;
+	function StateStuff( action, runState, newState ){
-    form.action.value = 'save';
+		var formData = {
-    form.submit();
+			'view' : 'console',
-}
+			'action' : action,
+			'apply' : 1,
+			'runState' : runState,
+			'newState' : newState
+		};
+		console.log(formData);
 
-function deleteState( element )
+		$("#pleasewait").toggleClass("hidden");
-{
-    var form = element.form;
-    form.view.value = currentView;
-    form.action.value = 'delete';
-    form.submit();
-}
 
-if ( applying )
+		$.ajax({
-{
+			type: 'POST',
-    function submitForm()
+			url: '/index.php',
-    {
+			data: formData,
-        $('contentForm').submit();
+			dataType: 'html',
-    }
+			enocde: true
-    window.addEvent( 'domready', function() { submitForm.delay( 1000 ); } );
+		}).done(function(data) {
-}
+			location.reload();
+		});
+
+
+	}
+
+
+
+});

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') );
+        <div class="modal-header">
-?>
+	  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-<body>
+          <h2 class="modal-title"><?php echo translate('RunState') ?></h2>
-  <div id="page">
+        </div>
-    <div id="header">
+
-      <h2><?php echo translate('RunState') ?></h2>
+    <div class="modal-body">
-    </div>
-    <div id="content">
-      <form name="contentForm" id="contentForm" method="get" action="<?php echo $_SERVER['PHP_SELF'] ?>">
-<?php
-if ( empty($_REQUEST['apply']) )
-{
-?>
         <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>
+	</div>
-        <table id="contentTable" class="minor" cellspacing="0">
+	</div>
-          <tbody>
+
-            <tr>
+	<div class="form-group">
-              <th scope="row"><?php echo translate('NewState') ?></th>
+              <label for="newState" class="col-sm-3 control-label"><?php echo translate('NewState') ?></label>
-		<!-- PP - added oninput so that changes are detected immediately -->
+		<div class="col-sm-9">
-		<!-- PP - retained onchange for older browsers -->
+              <input class="form-control" type="text" id="newState"/>
-              <td><input type="text" name="newState" value="" size="16" oninput="checkState( this );" onchange="checkState(this);"/></td>
+		</div>
-            </tr>
+	</div>
-          </tbody>
+
-        </table>
+    </div> <!-- body -->
-        <div id="contentButtons">
+        <div class="modal-footer">
-          <input type="submit" value="<?php echo translate('Apply') ?>"/>
+          <button class="btn btn-primary" type="button" id="btnApply"><?php echo translate('Apply') ?></button>
-          <input type="button" name="saveBtn" value="<?php echo translate('Save') ?>" disabled="disabled" onclick="saveState( this );"/>
+          <button class="btn btn-primary" type="button" id="btnSave" disabled><?php echo translate('Save') ?></button>
-          <input type="button" name="deleteBtn" value="<?php echo translate('Delete') ?>" disabled="disabled" onclick="deleteState( this );"/> 
+          <button class="btn btn-danger" type="button" id="btnDelete" disabled><?php echo translate('Delete') ?></button>
-          <input type="button" value="<?php echo translate('Cancel') ?>" onclick="closeWindow()"/>
+
-        </div>
-<?php
-}
-else
-{
-?>
         <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 class="pull-left hidden" id="pleasewait"><?php echo translate('PleaseWait') ?></p>
-        <p><?php echo translate('PleaseWait') ?></p>
+	</div><!-- footer -->
-<?php
+
-}
+  </div> <!-- content -->
-?>
+</div> <!-- dialog -->
-      </form>
+</form>
-    </div>
+</div> <!-- state -->
-  </div>
-</body>
-</html>