Basic interactive functions for login and power ops
Change-Id: Iff6a4eb7a72322a0e6c4d431f43e6f7413279ecb
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
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>
- $('#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 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).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 @@
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>