use blue theme, optimizations
[iot-control-center.git] / index.html
blob:a/index.html -> blob:b/index.html
--- a/index.html
+++ b/index.html
@@ -1,237 +1,417 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>IoT Control Center</title>
-  <!-- Tell the browser to be responsive to screen width -->
-  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
-
-  <link rel="stylesheet" href="bower_components/AdminLTE/dist/css/AdminLTE.min.css">
-  <link rel="stylesheet" href="bower_components/AdminLTE/dist/css/skins/_all-skins.min.css">
-  <link rel="stylesheet" href="assets/css/iotcc.css">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>IoT Control Center</title>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
+    <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
+
+    <link rel="stylesheet" href="bower_components/AdminLTE/dist/css/AdminLTE.min.css">
+    <link rel="stylesheet" href="bower_components/AdminLTE/dist/css/skins/_all-skins.min.css">
+    <link rel="stylesheet" href="assets/css/iotcc.css">
 </head>
 
 <body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
 <div class="wrapper">
     <header class="main-header">
-    <!-- Logo -->
-    <a href="#dashboard" class="logo">
-      <!-- mini logo for sidebar mini 50x50 pixels -->
-      <span class="logo-mini"><b>IoT</b></span>
-      <!-- logo for regular state and mobile devices -->
-      <span class="logo-lg"><b>IoT</b> Control Center</span>
-    </a>
-
-    <!-- Header Navbar: style can be found in header.less -->
-    <nav class="navbar navbar-static-top">
-      <!-- Sidebar toggle button-->
-      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
-        <span class="sr-only">Toggle navigation</span>
-      </a>
-      <!-- Navbar Right Menu -->
-      <div class="navbar-custom-menu">
-        <ul class="nav navbar-nav">
-          <!-- Control Sidebar Toggle Button -->
-          <li>
-            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gear"></i></a>
-          </li>
+        <a href="#dashboard" class="logo">
+            <span class="logo-mini"><b>IoT</b></span>
+            <span class="logo-lg"><b>IoT</b> Control Center</span>
+        </a>
+
+        <nav class="navbar navbar-static-top">
+            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+                <span class="sr-only">Toggle navigation</span>
+            </a>
+            <div class="navbar-custom-menu">
+                <ul class="nav navbar-nav">
+                    <li>
+                        <a href="#" data-toggle="control-refresh" title="Refresh devices"><i class="fa fa-refresh"></i></a>
+                    </li>
+                    <li>
+                        <a href="#" data-toggle="control-console" title="Show/hide MQTT console"><i class="fa fa-paper-plane"></i></a>
+                    </li>
+                    <li>
+                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gear"></i></a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    <aside class="main-sidebar">
+        <section class="sidebar">
+            <ul class="sidebar-menu">
+                <li class="active">
+                    <a href="#" class="navigation" data-section="dashboard">
+                        <i class="fa fa-dashboard"></i> <span>Dashboard</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="navigation" data-section="custom-subscriptions">
+                        <i class="fa fa-list"></i> <span>Custom subscriptions</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="navigation" data-section="settings">
+                        <i class="fa fa-gears"></i> <span>Settings</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" class="navigation" data-section="log">
+                        <i class="fa fa-align-justify"></i> <span>Log</span>
+                    </a>
+                </li>
+            </ul>
+        </section>
+    </aside>
+
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <section class="content-header" data-section="dashboard">
+            <h1>Dashboard</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-dashboard"></i> Dashboard</li>
+            </ol>
+        </section>
+
+        <section class="content-header hide" data-section="custom-subscriptions">
+            <h1>Custom subscriptions</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-list"></i> Custom subscriptions</li>
+            </ol>
+        </section>
+
+        <section class="content-header hide" data-section="settings">
+            <h1>Settings</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-gears"></i> Settings</li>
+            </ol>
+        </section>
+
+        <section class="content-header hide" data-section="log">
+            <h1>Log</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-gears"></i> Logs</li>
+            </ol>
+        </section>
+
+        <!-- Dashboard content -->
+        <section class="content" data-section="dashboard">
+
+            <div class="box box-primary hide" id="mqttConsole">
+                <div class="box-header with-border">
+                    <h3 class="box-title">MQTT Console</h3>
+                </div>
+                <form role="form">
+                    <div class="box-body">
+                        <div class="form-group">
+                            <label for="mqttConsoleTopic">Topic</label>
+                            <input type="text" class="form-control" id="mqttConsoleTopic" placeholder="Enter topic">
+                        </div>
+                        <div class="form-group">
+                            <label for="mqttConsoleMessage">Message</label>
+                            <input type="text" class="form-control" id="mqttConsoleMessage" placeholder="Enter message">
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        <button type="submit" class="btn btn-primary" id="mqttConsoleSend">Send</button>
+                    </div>
+                </form>
+            </div>
+
+            <div class="row dashboard-notification">
+                <div class="col-md-12">
+                    <div class="tab-bar tab-bar--top tab-bar--material pagination hide">
+                        <label class="tab-bar__item tab-bar--material__item" data-pagination="0" data-order="0">
+                            <input type="radio" name="tab-bar-material-a" checked="checked">
+                            <button class="tab-bar__button tab-bar--material__button">
+                                <i class="tab-bar__icon tab-bar--material__icon ion-drag"></i>
+                                <div class="tab-bar__label tab-bar--material__label">All</div>
+                            </button>
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+        </section>
+
+        <!-- Custom subscriptions content -->
+        <section class="content hide" data-section="custom-subscriptions">
+
+            <div class="row subscriptions-notification">
+                <div class="col-md-9">
+                    <div class="box box-primary">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">Add new subscription</h3>
+                        </div>
+                        <form id="customSubscriptions">
+                            <div class="box-body">
+                                <div class="form-group">
+                                    <label for="topic">Subscription topic</label>
+                                    <input type="text" class="form-control" id="topic" name="topic" placeholder="Topic" />
+                                </div>
+                                <div class="form-group">
+                                    <label for="widget">Widget</label>
+                                    <select class="form-control" name="widget" id="widget">
+                                        <option>-- select widget --</option>
+                                        <option value="toggle" data-action="on">Toggle (on/off toggle)</option>
+                                        <option value="radios" data-action="on">Radios (multiple choice action)</option>
+                                        <option value="data" data-action="off">Data (show sensor data)</option>
+                                        <option value="data-control" data-action="on">Data control (show sensor data/control value/heater)</option>
+                                        <option value="pie" data-action="on">Pie chart</option>
+                                        <option value="doughnut" data-action="on">Doughnut chart</option>
+                                    </select>
+                                </div>
+                                <div class="form-group subscriptionWidgetJson">
+                                    <label for="widgetJson">IoTCC Config</label>
+                                    <textarea class="form-control" id="widgetJson" name="widgetJson" placeholder="Widget JSON" rows="10"></textarea>
+                                    <button type="button" class="btn btn-primary beautify">Beautify JSON</button>
+                                    <span class="help-block widgetJson"></span>
+                                </div>
+                                <div class="form-group subscriptionAction hide">
+                                    <label for="publishTopic">Widget publish topic</label>
+                                    <input type="text" class="form-control" id="publishTopic" name="publishTopic" placeholder="Widget publish topic" />
+                                </div>
+                                <div class="checkbox">
+                                    <label for="active">
+                                    <input type="checkbox" id="active" name="active" /> Activate
+                                </label>
+                                </div>
+                            </div>
+                            <div class="box-footer">
+                                <button type="submit" class="btn btn-primary" id="saveSubscription">Save</button>
+                            </div>
+                            <input type="hidden" name="index" />
+                        </form>
+                    </div>
+                </div>
+
+                <div class="col-md-3">
+                    <div class="box box-primary">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">Widget Preview</h3>
+                        </div>
+                        <div class="box-body widget-preview">
+
+                        </div>
+                        <div class="box-body">
+                            <textarea class="form-control" id="widgetCodePreview" rows="10"></textarea>
+                            Available icons
+                            <ul>
+                                <li>
+                                    <a href="http://ionicons.com/" target="_blank">Ionicons</a>
+                                </li>
+                                <li>
+                                    <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome</a>
+                                </li>
+                            </ul>
+                            Available templates
+                            <ul>
+                                <li>template-1</li>
+                                <li>template-2</li>
+                                <li>template-3</li>
+                                <li>template-4</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-12">
+                    <div class="box">
+                        <div class="box-header">
+                            <h3 class="box-title">Subscriptions</h3>
+                        </div>
+                        <div class="box-body table-responsive no-padding">
+                            <table class="table table-hover">
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                        <th>ID</th>
+                                        <th>Topic</th>
+                                        <th>Widget</th>
+                                        <th>Widget JSON</th>
+                                        <th>Publish topic</th>
+                                        <th>Active</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="subscriptions-table">
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </section>
+
+        <!-- Settings content -->
+        <section class="content hide" data-section="settings">
+
+            <div class="row settings-notification1">
+                <div class="col-md-12">
+                    <div class="box box-primary">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">MQTT connection data</h3>
+                        </div>
+                        <form id="mqttConfig">
+                            <div class="box-body">
+                                <div class="form-group">
+                                    <label for="clientId">Client ID</label>
+                                    <input type="text" class="form-control" id="clientId" name="clientId" placeholder="Client ID" />
+                                </div>
+                                <div class="form-group">
+                                    <label for="host">Host</label>
+                                    <input type="text" class="form-control" id="host" name="host" placeholder="Host" />
+                                </div>
+                                <div class="form-group">
+                                    <label for="port">Port</label>
+                                    <input type="text" class="form-control" id="port" name="port" placeholder="Port" />
+                                </div>
+                                <div class="form-group">
+                                    <label for="username">Username</label>
+                                    <input type="text" class="form-control" id="username" name="username" placeholder="Username" />
+                                </div>
+                                <div class="form-group">
+                                    <label for="password">Password</label>
+                                    <input type="text" class="form-control" id="password" name="password" placeholder="Password" />
+                                </div>
+                                <div class="checkbox">
+                                    <label for="secure">
+                                    <input type="checkbox" id="secure" name="secure" /> Secure
+                                </label>
+                                </div>
+                                <div class="checkbox">
+                                    <label for="debug">
+                                    <input type="checkbox" id="debug" name="debug" /> Debug
+                                </label>
+                                </div>
+                                <div class="checkbox">
+                                    <label for="simulateDevices">
+                                    <input type="checkbox" id="simulateDevices" name="simulateDevices" /> Simulate devices
+                                </label>
+                                </div>
+                            </div>
+                            <div class="box-footer">
+                                <button type="submit" class="btn btn-primary" id="saveMqttConfig">Save</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row settings-notification2">
+                <div class="col-md-12">
+                    <div class="box box-primary">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">Options</h3>
+                        </div>
+                        <form id="appConfig">
+                            <div class="box-body">
+                                <div class="checkbox">
+                                    <label for="pageContainer">
+                                        <input type="checkbox" id="pageContainer" name="pageContainer" /> Add page container
+                                    </label>
+                                </div>
+                                <div class="checkbox">
+                                    <label for="templateDebug">
+                                        <input type="checkbox" id="templateDebug" name="templateDebug" /> Template debug
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="box-footer">
+                                <button type="submit" class="btn btn-primary" id="saveAppConfig">Save</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row settings-notification3">
+                <div class="col-md-12">
+                    <div class="box box-primary">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">Backup/Restore</h3>
+                        </div>
+                        <form id="iotCCConfig">
+                            <div class="box-body">
+                                <div class="form-group">
+                                    <label for="iotccconfig">IoTCC Config</label>
+                                    <textarea class="form-control" id="iotccconfig" name="iotccconfig" placeholder="IoTCC Config" rows="10"></textarea>
+                                </div>
+                            </div>
+                            <div class="box-footer">
+                                <button type="submit" class="btn btn-primary" id="saveIoTCCConfig">Save</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+        </section>
+
+        <!-- Log content -->
+        <section class="content hide" data-section="log">
+
+            <div class="box box-primary">
+                <div class="box-header with-border">
+                    <h3 class="box-title">MQTT Log</h3>
+                </div>
+                <div class="box-body">
+                    <pre class="console"></pre>
+                </div>
+            </div>
+
+        </section>
+    </div>
+
+    <footer class="main-footer">
+        <div class="pull-right hidden-xs">
+            <b>Version</b> 0.3
+        </div>
+        <strong>Copyright &copy; 2017 <a href="http://www.razvi.ro">Razvan Stanga</a>.</strong> All rights reserved.
+    </footer>
+
+    <aside class="control-sidebar control-sidebar-dark">
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+            <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
         </ul>
-      </div>
-    </nav>
-  </header>
-  <!-- Left side column. contains the logo and sidebar -->
-  <aside class="main-sidebar">
-    <!-- sidebar: style can be found in sidebar.less -->
-    <section class="sidebar">
-      <!-- /.search form -->
-      <!-- sidebar menu: : style can be found in sidebar.less -->
-      <ul class="sidebar-menu">
-        <!--li class="header">Options</li-->
-        <li class="active">
-            <a href="#" class="navigation" data-section="dashboard">
-                <i class="fa fa-dashboard"></i> <span>Dashboard</span>
-            </a>
-        </li>
-        <li>
-            <a href="#" class="navigation" data-section="settings">
-                <i class="fa fa-gears"></i> <span>Settings</span>
-            </a>
-        </li>
-        <li>
-            <a href="#" class="navigation" data-section="log">
-                <i class="fa fa-align-justify"></i> <span>Log</span>
-            </a>
-        </li>
-      </ul>
-    </section>
-    <!-- /.sidebar -->
-  </aside>
-
-<!-- Content Wrapper. Contains page content -->
-<div class="content-wrapper">
-    <section class="content-header" data-section="dashboard">
-        <h1>Dashboard</h1>
-        <ol class="breadcrumb">
-            <li class="active"><i class="fa fa-dashboard"></i> Dashboard</li>
-        </ol>
-        <div class="">
-          <div class="tab-bar tab-bar--top tab-bar--material pagination">
-            <label class="tab-bar__item tab-bar--material__item" data-pagination="0">
-              <input type="radio" name="tab-bar-material-a" checked="checked">
-              <button class="tab-bar__button tab-bar--material__button">
-                <i class="tab-bar__icon tab-bar--material__icon ion-drag"></i>
-                <div class="tab-bar__label tab-bar--material__label">All</div>
-              </button>
-            </label>
-          </div>
+        <div class="tab-content">
+            <div class="tab-pane" id="control-sidebar-home-tab">
+            </div>
+
+            <div class="tab-pane" id="control-sidebar-settings-tab">
+                <form method="post">
+                    <h3 class="control-sidebar-heading">General Settings</h3>
+
+                    <div class="form-group">
+                        <label class="control-sidebar-subheading">
+                            Debug templates
+                            <input type="checkbox" class="pull-right" name="debugTemplates" />
+                        </label>
+
+                        <p>
+                            Allow the user to show his name in blog posts
+                        </p>
+                    </div>
+                </form>
+            </div>
         </div>
-    </section>
-
-    <section class="content-header hide" data-section="settings">
-        <h1>Settings</h1>
-        <ol class="breadcrumb">
-            <li class="active"><i class="fa fa-gears"></i> Settings</li>
-        </ol>
-    </section>
-
-    <section class="content-header hide" data-section="log">
-        <h1>Log</h1>
-        <ol class="breadcrumb">
-            <li class="active"><i class="fa fa-gears"></i> Logs</li>
-        </ol>
-    </section>
-
-    <!-- Dashboard content -->
-    <section class="content" data-section="dashboard">
-
-    </section>
-
-    <!-- Settings content -->
-    <section class="content hide" data-section="settings">
-
-    </section>
-    <!-- /.content -->
-
-    <!-- Log content -->
-    <section class="content hide" data-section="log">
-      <pre class="console"></pre>
-    </section>
-    <!-- /.content -->
-
-  </div>
-  <!-- /.content-wrapper -->
-
-  <footer class="main-footer">
-    <div class="pull-right hidden-xs">
-      <b>Version</b> 0.1
-    </div>
-    <strong>Copyright &copy; 2017 <a href="http://www.razvi.ro">Razvan Stanga</a>.</strong> All rights reserved.
-  </footer>
-
-  <!-- Control Sidebar -->
-  <aside class="control-sidebar control-sidebar-dark">
-    <!-- Create the tabs -->
-    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
-      <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
-      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
-    </ul>
-    <!-- Tab panes -->
-    <div class="tab-content">
-      <!-- Home tab content -->
-      <div class="tab-pane" id="control-sidebar-home-tab">
-
-      </div>
-      <!-- /.tab-pane -->
-
-      <!-- Settings tab content -->
-      <div class="tab-pane" id="control-sidebar-settings-tab">
-        <form method="post">
-          <h3 class="control-sidebar-heading">General Settings</h3>
-
-          <div class="form-group">
-            <label class="control-sidebar-subheading">
-              Report panel usage
-              <input type="checkbox" class="pull-right" checked>
-            </label>
-
-            <p>
-              Some information about this general settings option
-            </p>
-          </div>
-          <!-- /.form-group -->
-
-          <div class="form-group">
-            <label class="control-sidebar-subheading">
-              Allow mail redirect
-              <input type="checkbox" class="pull-right" checked>
-            </label>
-
-            <p>
-              Other sets of options are available
-            </p>
-          </div>
-          <!-- /.form-group -->
-
-          <div class="form-group">
-            <label class="control-sidebar-subheading">
-              Expose author name in posts
-              <input type="checkbox" class="pull-right" checked>
-            </label>
-
-            <p>
-              Allow the user to show his name in blog posts
-            </p>
-          </div>
-          <!-- /.form-group -->
-
-          <h3 class="control-sidebar-heading">Chat Settings</h3>
-
-          <div class="form-group">
-            <label class="control-sidebar-subheading">
-              Show me as online
-              <input type="checkbox" class="pull-right" checked>
-            </label>
-          </div>
-          <!-- /.form-group -->
-
-          <div class="form-group">
-            <label class="control-sidebar-subheading">
-              Turn off notifications
-              <input type="checkbox" class="pull-right">
-            </label>
-          </div>
-          <!-- /.form-group -->
-
-          <div class="form-group">
-            <label class="control-sidebar-subheading">
-              Delete chat history
-              <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
-            </label>
-          </div>
-          <!-- /.form-group -->
-        </form>
-      </div>
-      <!-- /.tab-pane -->
-    </div>
-  </aside>
-  <!-- /.control-sidebar -->
-  <!-- Add the sidebar's background. This div must be placed
-       immediately after the control sidebar -->
-  <div class="control-sidebar-bg"></div>
-
+    </aside>
+    <div class="control-sidebar-bg"></div>
 </div>
-<!-- ./wrapper -->
 
 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="bower_components/jquery-serialize-object/dist/jquery.serialize-object.min.js"></script>
 <!-- AdminLTE App -->
 <script type="text/javascript">
     var AdminLTEOptions = {
-        sidebarExpandOnHover: true
+        //sidebarExpandOnHover: true
     };
 </script>
 <script type="text/javascript" src="bower_components/AdminLTE/dist/js/app.min.js"></script>
@@ -239,9 +419,13 @@
 <script type="text/javascript" src="bower_components/AdminLTE/dist/js/demo.js"></script>
 
 <script type="text/javascript" src="assets/js/mqtt.min.js"></script>
-<script type="text/javascript" src="config.js"></script>
 <script type="text/javascript" src="assets/js/iotcc.js"></script>
+<script type="text/javascript" src="assets/js/simulateDevices.js"></script>
+
+<!-- widgets -->
+<script src="bower_components/chart.js/dist/Chart.min.js"></script>
+<script src="bower_components/justgage-toorshia/justgage.js"></script>
+<script src="bower_components/raphael/raphael-min.js"></script>
 
 </body>
 </html>
-

comments