Basic interactive functions for login and power ops

Change-Id: Iff6a4eb7a72322a0e6c4d431f43e6f7413279ecb
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

7 files changed, 206 insertions, 26 deletions

diff --git a/src/index.html b/src/index.html
index ae797bf..c18a53c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,111 @@
     <link rel="icon" href="favicon.ico?v=2"/>
     <link rel="stylesheet" href="css/main.css">
     <script src="js/vendor/vendor.min.js"></script>
+    <script>
+
+//        var user = 'root';
+//        var password = '0penBmc';
+//        var ip = 'https://9.3.164.147';
+
+        function getList(){
+
+            $.ajax({
+                type: "GET",
+                url: ip + "/xyz/openbmc_project/list",
+                dataType: "json",
+                async: true,
+                xhrFields: {
+                    withCredentials: true
+                },
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                success: function(response){
+                    var json = JSON.stringify(response);
+                    var content = JSON.parse(json);
+                    //console.log(content.data);
+
+                    for (var i = 0; i < content.data.length; i++) {
+                        var item = content.data[i];
+                        console.log(item);
+                        $('.container').append('<p>' + item + '</p>');
+                    }
+                },
+                error: function(xhr, textStatus, errorThrown){
+                    console.log("not a successful request!");
+                    console.log(xhr, textStatus, errorThrown)
+                }
+            });
+        }
+
+        function getPowerStatus(){
+
+            $.ajax({
+                type: "GET",
+                url: ip + "/xyz/openbmc_project/state/host0",
+                dataType: "json",
+                async: true,
+                xhrFields: {
+                    withCredentials: true
+                },
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                success: function(response){
+                    var json = JSON.stringify(response);
+                    var content = JSON.parse(json);
+                    //console.log(content.data);
+                    var currentHostState = content.data.CurrentHostState;
+                    if(currentHostState == "xyz.openbmc_project.State.Host.HostState.Off"){
+                        $('#power-indicator-bar').removeClass('power__state-off power__state-on').addClass('power__state-off');
+                    }else{
+                        $('#power-indicator-bar').removeClass('power__state-off power__state-on').addClass('power__state-on');
+                    }
+                },
+                error: function(xhr, textStatus, errorThrown){
+                    console.log("not a successful request!");
+                    console.log(xhr, textStatus, errorThrown)
+                }
+            });
+        }
+
+        function login() {
+            console.log('login!');
+
+            var user = 'root';
+            var password = '0penBmc';
+            var ip = 'https://9.3.164.147';
+
+            $.ajax({
+                "type": "POST",
+                "url": ip + "/login",
+                "dataType": "json",
+                "async": true,
+                "headers": {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                "xhrFields": {
+                    withCredentials: true
+                },
+                "data": JSON.stringify({"data": [user, password]}),
+                "success": function (response) {
+                    console.log(response);
+                    //getList();
+                    //getPowerStatus();
+                    alert(JSON.stringify(response));
+                    window.location.replace("system-overview.html");
+
+                },
+                "error": function (xhr, textStatus, errorThrown) {
+                    console.log("not a successful request!");
+                    console.log(xhr, textStatus, errorThrown)
+                }
+            });
+        }
+    </script>
 </head>
 <body id="login">
 <div class="login__wrapper">
@@ -24,19 +129,19 @@
                 <li><p class="login__info-label">Server ID</p><p>29000000166668</p></li>
                 <li><p class="login__info-label">Server model</p><p>Power SL-22LC</p></li>
                 <!-- ping server to see if powered on. Change status-light and txt accordingly. Status message is planned to be hardcoded message were display via local JS.  -->
-                <li><p class="login__info-label">Server power</p><p class="status-light__disabled">Off</p></li>
-                <li><p class="login__info-label">Status message</p><p>BMC was reset by user</p></li>
+                <li><p class="login__info-label">Server power</p><p class="status-light__good">On</p></li>
+                <li><p class="login__info-label">Status message</p><!--<p>BMC was reset by user</p>--></li>
             </ul>
         </div>
         <div class="columns large-6">
-            <form id="login__form" role="form">
+            <form id="login__form" role="form" action="" >
                 <label for="username">Username</label>
                 <input type="text" id="username" name="username" required>
 
                 <label for="password">Password</label>
-                <input type="password" id="password" name="password" class="input__error" required>
+                <input type="password" id="password" name="password" class="" required>
 
-                <input id="login__submit" class="btn-primary" type="submit" value="Log in" role="button">
+                <input id="login__submit" class="btn-primary" type="submit" value="Log in" role="button" onclick="login();">
 
                 <p class="login__error-msg" role="alert">Incorrect username or password</p>
             </form>
diff --git a/src/js/main.js b/src/js/main.js
index b321e0d..cc96a73 100755
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -4,7 +4,6 @@
     header();
     nav();
 
-
     // Load logo
     function loadLogo() {
         $('.logo__wrapper').load('logo.html', function () {
@@ -59,35 +58,45 @@
             var subnav = document.getElementsByClassName("nav__second-level");
             var navBtn = document.querySelectorAll('#nav__top-level button');
 
-
             // Bump down nav to compensate for fixed header
             nav.style.top = height + 'px';
 
             // Bump second level nav down for fixed header
             for (var i = 0; i < subnav.length; i++) {
                 subnav[i].style.top = height + 'px';
+
             }
 
+            // Set link that matches page url to active
+            var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
+            $('.nav__second-level li a').each(function() {
+                if (this.href === path) {
+                    $(this).parent().addClass('active');
+                }
+            });
+
             //Loop over nav buttons
             for (var i = 0, len = navBtn.length; i < len; i++) {
 
                 // Click event for each nav button
                 navBtn[i].addEventListener('click', function () {
+
                     var parent = $(this).parents("#navigation");
                     var btnId = $(this).attr("class").match(/btn[\w-]*\b/);
                     var subnavClass = $('.nav__second-level.' + btnId);
 
+                    if(this && this.classList.contains("opened")){
+                        parent.find(subnavClass).removeClass("opened");
+                    }
+
                     //Remove opened class from buttons
                     parent.find('.opened').removeClass('opened');
 
                     // Add opened class to clicked button
                     this.classList.add("opened");
 
-                    //Close all sub panels and remove opened class
-                    parent.find('.nav__second-level').css("display", "none").removeClass('opened');
-
                     // add opened class
-                    parent.find(subnavClass).css("display", "block").addClass('opened');
+                    parent.find(subnavClass).toggleClass('opened');
 
                 });
             }
diff --git a/src/navigation.html b/src/navigation.html
index 88b6169..e15f82a 100644
--- a/src/navigation.html
+++ b/src/navigation.html
@@ -1,3 +1,4 @@
+
 <nav role="navigation">
     <ul id="nav__top-level">
         <li>
@@ -44,10 +45,10 @@
         </li>
     </ul>
     <ul class="nav__second-level btn-overview">
-        <li tabindex="2"><a href="">System Overview</a></li>
-        <li tabindex="3"class="active"><a href="power-operations.html">Server power operations </a></li>
-        <li tabindex="4"><a href="">Power consumption</a></li>
-        <li tabindex="5"><a href="">Remote console</a></li>
+        <li tabindex="2"><a href="system-overview.html">System Overview</a></li>
+        <li tabindex="3"><a href="power-operations.html">Server power operations </a></li>
+        <li tabindex="4"><a href="power-consumption.html">Power consumption</a></li>
+        <li tabindex="5"><a href="remote-console.html">Remote console</a></li>
     </ul>
     <ul class="nav__second-level btn-settings">
         <li><a href="">2nd level 4</a></li>
diff --git a/src/power-operations.html b/src/power-operations.html
index b1913ea..d793678 100644
--- a/src/power-operations.html
+++ b/src/power-operations.html
@@ -68,7 +68,7 @@
 
             <div class="power__confirm">
                 <div class="power__confirm-message">
-                    <p class="h3"><i></i>Are you sure you want to <strong>warm reboot?</strong></p>
+                    <p class="h3"><i></i>Are you sure you want to <strong>immediate shutdown?</strong></p>
                     <p>Removes power from the server without waiting for software to stop</p>
                 </div>
                 <div class="power__confirm-buttons">
@@ -85,21 +85,58 @@
 
 <!-- FOR DEMO ONLY __ DO NOT COPY BELOW -->
 <script>
+
+    var pwrOn = $("#power__power-on"),
+        endTransition = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
+        pwrOps = '#power-operations';
+
+    pwrOn.parent().hide();
+
     $('#power__hard-shutdown').on('click', function () {
-        var msgheight = $(this).parent().find('.power__confirm').height();
 
-        $(this).parents('#power-operations').find('.power__confirm').addClass('active');
-        $(this).parents('#power-operations').find('.power-option').addClass('disabled');
+        var msgheight = $(this).parent().find('.power__confirm').height();
+        $(this).addClass('disabled');
+        $(this).parents(pwrOps).find('.power__confirm').addClass('active');
+        $(this).parents(pwrOps).find('.power-option, .btn-secondary').addClass('disabled');
         $(this).parent().addClass('transitionAll').css("minHeight", msgheight).removeClass('disabled');
-        $(this).parents('#power-operations').find('.power-option.disabled button').attr("disabled", true).addClass('disabled');
+        $(this).parents(pwrOps).find('.power-option.disabled button').attr("disabled", true).addClass('disabled');
+    });
+
+    pwrOn.on('click', function () {
+        var srvrPwr = $(".header__server-power");
+
+        $(this).parents(pwrOps).find('.power__indicator-bar').toggleClass('power__state-off');
+        $(this).parents(pwrOps).find('.power-option').show();
+        $(this).parents(".power-option").hide();
+        $(".power__state span").one(endTransition,
+            function() {
+                $(this).parents(pwrOps).find('.power__state span').html('On');
+                $(this).parents(pwrOps).find('.power-option.disabled').show();
+                $(this).parents(pwrOps).find('.power-option.disabled button').removeAttr("disabled", true).removeClass('disabled');
+                $(".power-option, .power__confirm-buttons").removeClass("disabled");
+                srvrPwr.find(".status-light__disabled").removeClass("status-light__disabled").addClass("status-light__good");
+                srvrPwr.find("span").text('On');
+            });
     });
 
     $('.btn-primary').on('click', function(){
-        $(this).parents('#power-operations').find('.power__indicator-bar').toggleClass('power__state-off');
-        $(this).parents('#power-operations').find('.power__confirm').removeClass('active');
+
+        var srvrPwr = $(".header__server-power"),
+            pwrOnDisabl = $("#power__power-on.disabled");
+
+        $(this).parents(pwrOps).find('.power__indicator-bar').toggleClass('power__state-off');
+        $(this).parents(pwrOps).find('.power__confirm').removeClass('active');
         $(this).parent().addClass('disabled');
         $(this).parents('.power-option').addClass('disabled');
-        $(this).parents('#power-operations').find('.power__state span').html('Off');
+        $(".power__state span").one(endTransition,
+            function(e) {
+                $(this).parents(pwrOps).find('.power__state span').html('Off');
+                $(this).parents(pwrOps).find('.power-option.disabled').hide();
+                pwrOnDisabl.parent().show().removeClass('disabled');
+                pwrOnDisabl.removeAttr("disabled").removeClass('disabled');
+                srvrPwr.find(".status-light__good").removeClass("status-light__good").addClass("status-light__disabled");
+                srvrPwr.find("span").text('Off');
+            });
     });
 </script>
 </html>
diff --git a/src/scss/components/_status.scss b/src/scss/components/_status.scss
index 30cb2db..0cba22f 100644
--- a/src/scss/components/_status.scss
+++ b/src/scss/components/_status.scss
@@ -6,6 +6,7 @@
   color: $status-ok;
   margin-right: .1em;
   transform: translateY(2px);
+  @include slowTransition-all;
 }
 
 @mixin status-light__good {
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
index bb08579..d914b7b 100644
--- a/src/scss/layout/_navigation.scss
+++ b/src/scss/layout/_navigation.scss
@@ -96,15 +96,16 @@ $nav__seclvlWidth: 240px;
   transition: left .5s ease;
   @include mediaQuery(medium) {
     left: $nav__toplvlWidth;
-  }
-  &.btn-overview {
-    display: block;
+    &.btn-overview {
+      display: block;
+    }
   }
   &.opened {
     left: $nav__toplvlWidth;
     display: block;
     @include fastTransition-all;
   }
+
   a {
     padding: 1.2em 1em 1.2em 1em;
     display: block;
diff --git a/src/system-overview.html b/src/system-overview.html
new file mode 100644
index 0000000..ae2368d
--- /dev/null
+++ b/src/system-overview.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>openBMC</title>
+    <link rel="icon" href="favicon.ico?v=2"/>
+    <link rel="stylesheet" href="css/main.css">
+    <script src="js/vendor/vendor.min.js"></script>
+</head>
+<body>
+
+<!-- Header & Navigation includes -->
+<div id="header__wrapper"></div>
+<div id="navigation"></div>
+
+<!-- Power Operations Content -->
+<main id="power-operations" class="content__container" role="main">
+    <div class="row column">
+        <h1>System Overview</h1>
+        <p>System overview will be here.</p>
+    </div>
+</main>
+
+</body>
+<script src="js/app.min.js"></script>
+</html>