events, bugs
[iot-control-center.git] / index.html
blob:a/index.html -> blob:b/index.html
--- a/index.html
+++ b/index.html
@@ -1,48 +1,431 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>IoT Control Center</title>
-    <script type="text/javascript" src="assets/js/mqtt.min.js"></script>
-    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.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="bower_components/onsenui/js/onsenui.min.js"></script>
-    <script>
-      //ons.bootstrap();
-    </script>
-
-    <link rel="stylesheet" href="bower_components/onsenui/css/onsenui.css"/>
-    <link rel="stylesheet" href="bower_components/onsenui/css/onsen-css-components-blue-theme.css"/>
+    <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>
-<div class="navigation-bar">
-  <div class="navigation-bar__left">
-    <span class="toolbar-button--quiet">
-      <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
-    </span>
-  </div>
-
-  <div class="navigation-bar__center">
-    IoT Control Center
-  </div>
-
-  <div class="navigation-bar__right">
-  </div>
+
+<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
+<div class="wrapper">
+    <header class="main-header">
+        <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 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>
+    </aside>
+    <div class="control-sidebar-bg"></div>
 </div>
 
-<div class="tab-bar pages">
-  <label class="tab-bar__item pagall">
-    <input type="radio" name="tab-bar-a" checked="checked">
-    <button class="tab-bar__button">
-      <i class="tab-bar__icon ion-stop"></i>
-      <div class="tab-bar__label">All devices</div>
-    </button>
-  </label>
-</div>
-
-<div class="content"></div>
-<ul class="list container"></ul>
+<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
+    };
+</script>
+<script type="text/javascript" src="bower_components/AdminLTE/dist/js/app.min.js"></script>
+<!-- AdminLTE for demo purposes -->
+<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="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