index.html

<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>OpenIIoT 0.5.0</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="node_modules/ionicons/dist/css/ionicons.min.css">
  <link rel="stylesheet" href="assets/css/AdminLTE.css">
  <link rel="stylesheet" href="assets/css/skins/skin-blue.min.css">
  <link rel="stylesheet" href="assets/css/fonts.css">
  <link rel="stylesheet" href="assets/plugins/bootstrap-slider/slider.css">

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini">
  <div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">

      <!-- Logo -->
      <a href="index.html" class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><img src="assets/img/openiiot-logo.png" height="30"></span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><img src="assets/img/openiiot-logo.png" height="30"> Open<b>IIoT</b></span>
      </a>

      <!-- Header Navbar -->
      <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>
        <!-- Navbar Right Menu -->
        <div class="navbar-custom-menu">
          <ul class="nav navbar-nav">
            <!-- Notifications Menu -->
            <li class="dropdown notifications-menu">
              <!-- Menu toggle button -->
              <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-bell-o"></i>
              <span class="label label-warning">10</span>
            </a>-->
              <ul class="dropdown-menu">
                <li class="header">You have 10 notifications</li>
                <li>
                  <!-- Inner Menu: contains the notifications -->
                  <ul class="menu">
                    <li>
                      <!-- start notification -->
                      <a href="#">
                      <i class="fa fa-users text-aqua"></i> 5 new members joined today
                    </a>
                    </li>
                    <!-- end notification -->
                  </ul>
                </li>
                <li class="footer"><a href="#">View all</a></li>
              </ul>
            </li>
            <!-- User Account Menu -->
            <li class="dropdown user user-menu">
              <!-- Menu Toggle Button -->
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-user"></i>
              <span id="session-display-name" class="hidden-xs"></span>
            </a>
              <ul class="dropdown-menu">
                <!-- The user image in the menu -->
                <li class="user-header">
                  <i style="color: #fff; font-size:75px;" class="fa fa-user"></i>
                  <p>
                    <span id="session-display-name-both"></span>
                    <small id="session-email"></small>
                  </p>
                  <p>
                    <small><i class="fa fa-users"></i> <span id="session-role"></span></small>
                  </p>
                </li>
                <!-- Menu Body -->
                <!-- Menu Footer-->
                <li class="user-footer">
                  <div class="pull-left">
                    <a href="#" class="btn btn-default btn-flat" onclick="showProfile()"><i class="fa fa-pencil"></i> Profile</a>
                  </div>
                  <div class="pull-right">
                    <a href="#" class="btn btn-default btn-flat" onclick="logout()"><i class="fa fa-sign-out"></i> Log out</a>
                  </div>
                </li>
              </ul>
            </li>
            <!-- Control Sidebar Toggle Button 
            <li>
              <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></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">
        <!-- Sidebar Menu -->
        <ul class="sidebar-menu" data-widget="tree">
          <!--<li class="header">STATUS</li>-->
          <div class="user-panel">
            <div class="pull-left image">
              <!--<img src="assets/img/ok.png" class="img-circle" alt="User Image">-->
              <i id="state" class="server-status fa fa-cog" aria-hidden="true"></i>
            </div>
            <div class="pull-left info">
              <p id="instancename"></p>
              <p id="version"></p>
            </div>
          </div>
          <li class="header">ADMINISTRATION</li>
          <li id="dashboard"><a href="#"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
          <li id="security"><a href="#"><i class="fa fa-lock"></i> <span>Security</span></a></li>
          <li id="packages"><a href="#"><i class="fa fa-archive"></i> <span>Packages</span></a></li>
          <!--
          <li id="configuration"><a href="#"><i class="fa fa-wrench"></i> <span>Configuration</span></a></li>
          -->

          <li class="header">HELP</li>
          <li id="help"><a href="help" target="_blank"><i class="fa fa-puzzle-piece"></i> <span>API</span><i style="margin-top: 4px" class="fa fa-external-link pull-right"></i></a></li>

          <li class="header">DEMOS</li>
          <li id="demo-clock"><a href="#"><i class="fa fa-clock-o"></i> <span>Clock</span></a></li>
          <li id="demo-sinewave"><a href="#"><i class="fa fa-line-chart"></i> <span>Sine Wave</span></a></li>
          <li id="demo-random"><a href="#"><i class="fa fa-line-chart"></i> <span>Random</span></a></li>
          <li id="demo-readwrite"><a href="#"><i class="fa fa-exchange"></i> <span>Read/Write</span></a></li>
          <li id="demo-mouse"><a href="#"><i class="fa fa-mouse-pointer"></i> <span>Mouse Cursor</span></a></li>
          <li id="demo-database"><a href="#"><i class="fa fa-database"></i> <span>Database</span></a></li>
          <li id="demo-image"><a href="#"><i class="fa fa-image"></i> <span>Image</span></a></li>

          <li class="header">APPS</li>
          <li id="demo-polled">
            <a href="pages/demo-polled.html" target="_blank">
              <i class="fa fa-clock-o"></i> 
              <span>Polled</span>
              <i style="margin-top: 4px" class="fa fa-external-link pull-right"></i>
            </a>
          </li>
          <li id="demo-live"><a href="pages/demo-live.html" target="_blank"><i class="fa fa-flash"></i> <span>Live</span>
                          <i style="margin-top: 4px" class="fa fa-external-link pull-right"></i></a></li>
          <li id="demo-google"><a href="pages/google/" target="_blank"><i class="fa fa-google"></i> <span>Google</span>
                          <i style="margin-top: 4px" class="fa fa-external-link pull-right"></i></a></li>
        </ul>
        <!-- /.sidebar-menu -->
      </section>
      <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div id="content" class="content-wrapper">
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer  id="footer" class="main-footer">
      &nbsp;
      <span class="pull-right"><a href="https://github.com/OpenIIoT/"><i class="fa fa-github" aria-hidden="true"></i></a> <a href="http://openiiot.org"><i class="fa fa-globe" aria-hidden="true"></i></a></span>
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
      <!-- Create the tabs -->
      <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
        <li class="active"><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-gears"></i></a></li>
      </ul>
      <!-- Tab panes -->
      <div class="tab-content">
        <!-- Home tab content -->
        <div class="tab-pane active" id="control-sidebar-home-tab">
          <h3 class="control-sidebar-heading">Recent Activity</h3>
          <ul class="control-sidebar-menu">
            <li>
              <a href="javascript:;">
              <i class="menu-icon fa fa-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                <p>Will be 23 on April 24th</p>
              </div>
            </a>
            </li>
          </ul>
          <!-- /.control-sidebar-menu -->

          <h3 class="control-sidebar-heading">Tasks Progress</h3>
          <ul class="control-sidebar-menu">
            <li>
              <a href="javascript:;">
                <h4 class="control-sidebar-subheading">
                  Custom Template Design
                  <span class="pull-right-container">
                    <span class="label label-danger pull-right">70%</span>
                  </span>
                </h4>

                <div class="progress progress-xxs">
                  <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                </div>
              </a>
            </li>
          </ul>
          <!-- /.control-sidebar-menu -->

        </div>
        <!-- /.tab-pane -->
        <!-- Stats tab content -->
        <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</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 -->
          </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>


    <div class="modal fade" id="profile-modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Edit Profile</h4>
          </div>
          <div class="modal-body">
            <form role="form">
              <div class="box-body">
                <div id="profile-displayname-group" class="form-group">
                  <label for="profile-displayname">Display Name</label>
                  <input type="user" class="form-control" id="profile-displayname" placeholder="Display Name">
                </div>
                <div id="profile-email-group" class="form-group">
                  <label for="profile-email">Email Address</label>
                  <input type="email" class="form-control" id="profile-email" placeholder="Email Address">
                </div>
                <!-- /.box-body -->
                <div class="form-group">
                  <div class="checkbox">
                    <label>
                      <input id="password-box-toggle" type="checkbox">
                      Change Password
                    </label>
                  </div>
                </div>
                <div id="profile-password-boxes" style="display: none;">
                  <div id="profile-new-password-group" class="form-group">
                    <label for="profile-new-password">New Password</label>
                    <input type="password" class="form-control" id="profile-new-password" placeholder="New Password">
                  </div>
                  <div id="profile-confirm-new-password-group" class="form-group">
                    <label for="profile-confirm-new-password">Confirm New Password</label>
                    <input type="password" class="form-control" id="profile-confirm-new-password" placeholder="Confirm New Password">
                  </div>
                </div>
              </div>
            </form>

            <div id="profile-error-text" class="alert alert-danger" style="display: none;">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
            <button type="button" class="btn btn-primary" onclick="saveProfile()"><i class="fa fa-check"></i> Save</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div id="snackbar"></div>
  </div>
  <!-- ./wrapper -->

  <!-- REQUIRED JS SCRIPTS -->

  <!-- jQuery 3 -->
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap 3.3.7 -->
  <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- AdminLTE App -->
  <script src="assets/js/adminlte.min.js"></script>
  <script src="assets/js/demo.js"></script>
  <script src="node_modules/react/umd/react.development.js"></script>
  <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="node_modules/babel-standalone/babel.min.js" charset="utf-8"></script>
  <script src="node_modules/jquery.cookie/jquery.cookie.js"></script>
  <script src="node_modules/fastclick/lib/fastclick.js"></script>
  <script src="node_modules/jquery-slimscroll/jquery.slimscroll.js"></script>
  <script src="node_modules/signalr/jquery.signalR.js"></script>
  <script src="live/hubs"></script>
  <script src="node_modules/flot/jquery.flot.js"></script>
  <script src="node_modules/flot/jquery.flot.resize.js"></script>
  <script src="node_modules/flot/jquery.flot.pie.js"></script>
  <script src="node_modules/flot/jquery.flot.categories.js"></script>
  <script src="node_modules/flot/jquery.flot.time.js"></script>
  <script src="assets/plugins/bootstrap-slider/bootstrap-slider.js"></script>

  <script type="text/javascript">
    var active;
    var hub;
    var updating = false;
    var session;

    function snackbar(msg) {
      var x = document.getElementById("snackbar")

      x.className = "show";
      x.textContent = msg;

      setTimeout(function () {
        x.className = x.className.replace("show", "");
      }, 3000);
    }

    $(document).ready(function () {
      fetchAppState();
      fetchAppInfo();
      fetchSession();

      $('#password-box-toggle').click(function () {
        $("#profile-password-boxes").toggle(this.checked);
        validateProfile();
      });

      $("#profile-displayname").bind("propertychange change input paste", function (event) {
        validateProfile();
      });

      $("#profile-email").bind("propertychange change input paste", function (event) {
        validateProfile();
      });

      $("#profile-new-password").bind("propertychange change input paste", function (event) {
        validateProfile();
      });

      $("#profile-confirm-new-password").bind("propertychange change input paste", function (event) {
        validateProfile();
      });

      $('#dashboard').click(function () {
        navigate('dashboard', 'pages/dashboard.html');
      });
      $('#configuration').click(function () {
        navigate('configuration', 'pages/configuration.html');
      });
      $('#security').click(function () {
        navigate('security', 'pages/security.html');
      });
      $('#packages').click(function () {
        navigate('packages', 'pages/packages.html');
      });
      $('#demo-clock').click(function () {
        navigate('demo-clock', 'pages/demo-clock.html');
      });
      $('#demo-image').click(function () {
        navigate('demo-image', 'pages/demo-image.html');
      });
      $('#demo-sinewave').click(function () {
        navigate('demo-sinewave', 'pages/demo-sinewave.html');
      });
      $('#demo-random').click(function () {
        navigate('demo-random', 'pages/demo-random.html');
      });
      $('#demo-readwrite').click(function () {
        navigate('demo-readwrite', 'pages/demo-readwrite.html');
      });
      $('#demo-mouse').click(function () {
        navigate('demo-mouse', 'pages/demo-mouse.html');
      });
      $('#demo-database').click(function () {
        navigate('demo-database', 'pages/demo-database.html');
      });

      active = $.cookie("Active-Page");

      if (active) {
        $("#" + active).click();
      } else {
        $("#dashboard").click();
      }
    });

    function fetchSession() {
      $.get("api/v1/security/sessions/current").done(function (data) {
        session = data;

        updateSessionDisplay();
      })
      // todo: handle failure (force log out?)
    }

    function updateSessionDisplay() {
      $("#session-display-name").text(session.User.DisplayName);
      $("#session-display-name-both").text(session.User.DisplayName + " (" + session.User.Name + ")");
      $("#session-email").text(session.User.Email);
      $("#session-role").text(session.User.Role);
    }

    function fetchAppInfo() {
      $.get("api/v1/item/read/OpenIIoT.System.InstanceName,OpenIIoT.System.ProductName,OpenIIoT.System.ProductVersion/true").done(function (data) {
        $("#instancename").text(data[0].Value.toUpperCase());
        $("#version").text(data[1].Value + " " + data[2].Value);
      })
    }

    function fetchAppState() {
      $.get("api/v1/item/read/OpenIIoT.System.State/true").done(function (data) {
        if (data.Value == "Running") {
          $("#state").removeClass("server-status-down").addClass("server-status-up");
        }
        else {
          $("#state").removeClass("server-status-up").addClass("server-status-warn");
        }

      }).fail(function (xhr, status, error) {
        console.log(status, error);
        if (error == 'Unauthorized') {
          var root = location.href.replace(/[^/]*$/, '');
          var loginurl = root + 'login/?' + window.location.pathname;
          console.log(loginurl);
          window.location.replace(loginurl);
        }

        $("#state").removeClass("server-status-up").addClass("server-status-down");
      });

      setTimeout(fetchAppState, 5000);
    }

    function navigate(id, url) {
      $("#" + active).removeClass("active");
      $("#" + id).addClass("active");
      active = id;
      $.cookie("Active-Page", active);

      if (active != 'dashboard') {
        updating = false;
      }

      // unsubscribe from any subscribed item prior to navigating.
      // this is only necessary because of the fake-SPA functionality of this page
      try {
        if ($("#fqn").text()) hub.invoke('unsubscribe', $("#fqn").text());
      } catch (e) {}

      try {
        if ($("#readfqn").text()) hub.invoke('unsubscribe', $("#readfqn").text());
      } catch (e) {}

      try {
        if ($("#writefqn").text()) hub.invoke('unsubscribe', $("#writefqn").text());
      } catch (e) {}

      try {
        logHub.invoke('unsubscribe', '');
      } catch (e) {}

      $.get(url, function (response, status, jqXHR) {
        if (response.substring(0, 14) == "<!-- login -->") {
          location.reload();
        } else {
          $("#content").html(response);
        }
      });
    }

    function logout() {
      $.ajax({
        type: "DELETE",
        url: 'api/v1/security/sessions/current',
        success: function (data, textStatus) {
          window.location.replace('');
        }
      });
    }

    function showProfile() {
      $("#profile-displayname").val(session.User.DisplayName);
      $("#profile-email").val(session.User.Email);
      $("#profile-modal").modal();
    }

    function hideProfile() {
      $("#profile-modal").modal('hide');
    }

    function validateProfile() {
      var displayname = $("#profile-displayname").val();
      var email = $("#profile-email").val();
      var valid = true;

      $("#profile-error-text").text('').toggle(false);

      if (displayname.length == 0) {
        $("#profile-displayname-group").addClass("has-error");
        valid = false;
      } else {
        $("#profile-displayname-group").removeClass("has-error");
      }

      if (!validateEmail(email)) {
        $("#profile-email-group").addClass("has-error");
        valid = false;
      } else {
        $("#profile-email-group").removeClass("has-error");
      }

      if ($("#password-box-toggle").is(':checked')) {
        var newpassword = $("#profile-new-password").val();
        var confirm = $("#profile-confirm-new-password").val();

        if (newpassword.length == 0) {
          $("#profile-new-password-group").addClass("has-error");
          valid = false;
        } else {
          $("#profile-new-password-group").removeClass("has-error");
        }

        if (confirm.length == 0 || confirm != newpassword) {
          $("#profile-confirm-new-password-group").addClass("has-error");
          valid = false;
        } else {
          $("#profile-confirm-new-password-group").removeClass("has-error");
        }
      }

      return valid;
    }

    function saveProfile() {
      if (validateProfile()) {
        var patchdata = {
          DisplayName: $("#profile-displayname").val(),
          Email: $("#profile-email").val()
        };

        if ($("#password-box-toggle").is(':checked')) {
          patchdata["Password"] = $("#profile-new-password").val();
        }

        $.ajax({
          type: "PATCH",
          url: 'api/v1/security/users/' + session.User.Name,
          data: patchdata,
          success: function (data, textStatus) {
            session.User.DisplayName = data.DisplayName;
            session.User.Email = data.Email;
            updateSessionDisplay();
            hideProfile();
            snackbar('Profile saved successfully.');
          },
          error: function (xhr, ajaxOptions, thrownError) {
            shake('profile-modal');
            $("#profile-error-text").text(JSON.parse(xhr.responseText)).toggle(true);
          }
        });
      } else {
        shake('profile-modal');
      }
    }

    function validateEmail(email) {
      var re =
        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }

    function shake(id) {
      var div = document.getElementById(id);
      var interval = 25;
      var distance = 10;
      var times = 3;

      //$(div).css('position', 'relative');

      for (var iter = 0; iter < (times + 1); iter++) {
        $(div).animate({
          left: ((iter % 2 == 0 ? distance : distance * -1))
        }, interval);
      }
      $(div).animate({
        left: 0
      }, interval);
    }
  </script>
</body>

</html>