Merge branch 'updated-console' into storageareas

2026-05-09 15:18:50 -04:00 · 2016-05-03 13:38:57 -04:00
parent 2ba18e14fc a1b4869ee6
commit 516bacdfd3
9 changed files with 194 additions and 114 deletions
--- a/web/skins/classic/css/classic/skin.css
+++ b/web/skins/classic/css/classic/skin.css
@@ -26,6 +26,7 @@ body {
    font-size: 18px;
    color: #333333;
    font-weight: normal;
+	padding-top: 70px;
 }

 h1 {
@@ -433,16 +434,12 @@ th.table-th-sort-rev span.table-th-sort-span {
 }

 .nav.nav-pills.nav-stacked.col-md-2 {
-	padding-right: 0;
 }

 .nav.nav-pills.nav-stacked.col-md-2 > li > a {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
 }

 #options {
-	border-left: 1px solid #337ab7;
 }

 #options .form-group {
@@ -450,3 +447,46 @@ th.table-th-sort-rev span.table-th-sort-span {
 	border-bottom: 1px solid #e7e7e7;

 }
+
+.navbar{
+	margin-bottom: 0 !important;
+	border-radius: 0;
+}
+
+.navbar-brand {
+	color: #03A9F4 !important;
+	font-weight: bold;
+	font-size: 20px;
+}
+
+.sidebar {
+    position: fixed;
+    top: 51px;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    display: block;
+    padding: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #f5f5f5;
+    border-right: 1px solid #eeeeee;
+}
+
+.sidebar ul {
+margin-right: -21px;
+margin-bottom: 20px;
+margin-left: -20px;
+}
+
+.nav-pills > li > a {
+	border-radius: 0;
+}
+
+#options .help-block {
+	margin-top: 0;
+}
+
+#options {
+	font-size:90%;
+}
--- a/web/skins/classic/includes/functions.php
+++ b/web/skins/classic/includes/functions.php
@@ -18,6 +18,10 @@
 // Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 // 

+
+// Don't load in additional JS to these views
+$bad_views = array('monitor', 'log');
+
 function xhtmlHeaders( $file, $title )
 {
    global  $css;
@@ -36,9 +40,12 @@ function xhtmlHeaders( $file, $title )

    extract( $GLOBALS, EXTR_OVERWRITE );
 ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html lang="en">
 <head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maxiumum-scale=1.0, user-scalable=no">
  <title><?php echo ZM_WEB_TITLE_PREFIX ?> - <?php echo validHtmlStr($title) ?></title>
  <link rel="icon" type="image/ico" href="graphics/favicon.ico"/>
  <link rel="shortcut icon" href="graphics/favicon.ico"/>
@@ -69,12 +76,17 @@ function xhtmlHeaders( $file, $title )
  <script type="text/javascript" src="tools/mootools/mootools-core.js"></script>
  <script type="text/javascript" src="tools/mootools/mootools-more.js"></script>
  <script type="text/javascript" src="js/mootools.ext.js"></script>
+<?php if ( !in_array($basename, $bad_views) ) { ?>
  <script type="text/javascript" src="js/logger.js"></script>
  <script type="text/javascript" src="js/overlay.js"></script>
+  <script type="text/javascript" src="/skins/<?php echo $css; ?>/js/jquery-1.11.3.js"></script>
+  <script type="text/javascript" src="/skins/<?php echo $css; ?>/js/bootstrap.min.js"></script>
+  <script type="text/javascript" src="/skins/<?php echo $css; ?>/views/js/state.js.php"></script>
+  <script type="text/javascript" src="/skins/<?php echo $css; ?>/views/js/state.js"></script>
+<?php } ?>
 <?php if ( $title == 'Login' && (defined('ZM_OPT_USE_GOOG_RECAPTCHA') && ZM_OPT_USE_GOOG_RECAPTCHA) ) { ?>
  <script src='https://www.google.com/recaptcha/api.js'></script>
-<?php
-}
+<?php }
    if ( $skinJsPhpFile )
    {
 ?>
--- a/web/skins/classic/js/bootstrap.min.js
+++ b/web/skins/classic/js/bootstrap.min.js
--- a/web/skins/classic/views/console.php
+++ b/web/skins/classic/views/console.php
@@ -15,7 +15,7 @@ xhtmlHeaders( __FILE__, translate('Console') );
    <?php include("skins/$skin/views/header.php") ?>

    <div class="container-fluid">
-      <table id="consoleTable" cellspacing="0">
+      <table class="table table-striped table-hover table-condensed">
        <thead>
          <tr>
            <th class="colName"><?php echo translate('Name') ?></th>
@@ -54,7 +54,7 @@ if ( canEdit('Monitors') )
 if ( $show_storage_areas ) { $columns += 1; }
 echo $columns;
 ?>">
-              <input type="button" name="addBtn" value="<?php echo translate('AddNewMonitor') ?>" onclick="addMonitor( this )"/>
+              <input type="button" class="btn btn-primary" name="addBtn" value="<?php echo translate('AddNewMonitor') ?>" onclick="addMonitor( this )"/>
              <!-- <?php echo makePopupButton( '?view=monitor', 'zmMonitor0', 'monitor', translate('AddNewMonitor'), (canEdit( 'Monitors' ) && !$user['MonitorIds']) ) ?> -->

            </td>
@@ -68,7 +68,8 @@ for ( $i = 0; $i < count($eventCounts); $i++ )
 }
 ?>
            <td class="colZones"><?php echo $zoneCount ?></td>
-            <td class="colRightButtons" colspan="<?php echo canEdit('Monitors')?2:1 ?>"><input class="btn btn-default" type="button" name="editBtn" value="<?php echo translate('Edit') ?>" onclick="editMonitor( this )" disabled="disabled"/><input class="btn btn-default" type="button" name="deleteBtn" value="<?php echo translate('Delete') ?>" onclick="deleteMonitor( this )" disabled="disabled"/></td>
+            <td><input class="btn btn-primary" type="button" name="editBtn" value="<?php echo translate('Edit') ?>" onclick="editMonitor( this )" disabled="disabled"/></td>
+            <td><input class="btn btn-danger" type="button" name="deleteBtn" value="<?php echo translate('Delete') ?>" onclick="deleteMonitor( this )" disabled="disabled"/></td>
          </tr>
        </tfoot>
        <tbody>
@@ -174,5 +175,6 @@ echo $Storage->Name();
 </div> <!-- End .footer -->

    </form>
+<?php include("skins/$skin/views/state.php") ?>
 </body>
 </html>
--- 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' );

@@ -184,12 +185,19 @@ $versionClass = (ZM_DYN_DB_VERSION&&(ZM_DYN_DB_VERSION!=ZM_VERSION))?'errorText'


 ?>
-<div class="navbar navbar-default">
-	<div class="container">
+<div class="navbar navbar-inverse navbar-fixed-top">
+	<div class="container-fluid">
 		<div class="navbar-header">
+			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-header-nav" aria-expanded="false">
+				<span class="sr-only">Toggle navigation</span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+			</button>
 			<a class="navbar-brand" href="http://www.zoneminder.com" target="ZoneMinder">ZoneMinder</a>
 		</div>

+		<div class="collapse navbar-collapse" id="main-header-nav">
 		<ul class="nav navbar-nav">
 			<li><a href="?view=console"><?php echo translate('Console') ?></a></li>
 <?php if ( canView( 'System' ) ) { ?>
@@ -217,12 +225,13 @@ $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>
 <?php } ?>
 </div>

+		</div><!-- End .navbar-collapse -->
 	</div> <!-- End .container-fluid -->
 </div> <!-- End .navbar .navbar-default -->
--- a/web/skins/classic/views/js/console.js
+++ b/web/skins/classic/views/js/console.js
@@ -16,7 +16,7 @@ function setButtonStates( element )
            }
        }
    }
-    $(element).getParent( 'tr' ).toggleClass( 'highlight' );
+    $(element).closest("tr").toggleClass("danger");
    form.editBtn.disabled = (checked!=1);
    form.addBtn.value = (checked==1) ? jsTranslatedCloneText:jsTranslatedAddText;

--- 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();
+		});
+
+
+	}
+
+
+
+});
--- a/web/skins/classic/views/options.php
+++ b/web/skins/classic/views/options.php
@@ -82,7 +82,9 @@ Error("setting css $current_css to " .  $_GET['css-choice']);
    <?php include("skins/$skin/views/header.php") ?>

    <div class="container-fluid">
-      <ul class="nav nav-pills nav-stacked col-md-2">
+<div class="row">
+	<div class="col-sm-2 sidebar">
+      <ul class="nav nav-pills nav-stacked">
 <?php
 foreach ( $tabs as $name=>$value )
 {
@@ -92,8 +94,10 @@ foreach ( $tabs as $name=>$value )
 }
 ?>
      </ul>
+	</div>

-      <div id="options" class="col-md-10">
+	<div class="col-sm-10 col-sm-offset-2">
+      <div id="options">
 <?php 
 if($tab == 'skins') {
 ?>
@@ -391,6 +395,9 @@ elseif ( $tab == "users" )
 ?>

    </div><!-- end #options -->
+	</div>
+</div> <!-- end row -->
    </div>
+<?php include("skins/$skin/views/state.php") ?>
 </body>
 </html>
--- 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 -->