created remote console page
TODO: Remove HTERM.
Change-Id: I72026e5ea64c9fba3089b68dfd2b8198255dabb8
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..bf4b133
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,46 @@
+<!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>
+<div class="login__wrapper">
+ <div class="row">
+ <div class="columns large-6">
+ <img src="img/logo.svg" class="login__logo" alt="IBM"/>
+ </div>
+ <div class="columns large-6">
+ </div>
+ </div>
+ <div class="row">
+ <div class="columns large-6 login__desc">
+ <h1>BMC Advanced System Management</h1>
+ <p>Build Version: 1.00.102</p>
+ <div class="login__server-info">
+ <h3>Server ID: 29000000166668</h3>
+ <p>Power SL-22LC</p>
+ <p>Server status: <span class="login__status">Operational</span></p>
+ <!-- if status is not operational add "error" class and change text -->
+ </div>
+ </div>
+ <div class="columns large-6">
+ <form id="login__form">
+ <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" required>
+
+ <input id="login__submit" type="submit" value="Log in" role="button">
+
+ </div>
+ </div>
+</div>
+<script src="js/app.min.js"></script>
+</body>
+</html>
diff --git a/src/js/main.js b/src/js/main.js
new file mode 100755
index 0000000..beea081
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,132 @@
+(function() {
+ // var user = 'root';
+ // var password = '0penBmc';
+ // var ip = 'https://9.3.164.177';
+ //
+ // var login = {
+ // "type": "POST",
+ // "url": ip + "/login",
+ // "dataType": "json",
+ // "async": false,
+ // "headers": {
+ // 'Accept': 'application/json',
+ // 'Content-Type': 'application/json'
+ // },
+ // "xhrFields": {
+ // withCredentials: true
+ // },
+ // "data": JSON.stringify({"data": [user, password]}),
+ // "success": function(response){
+ // console.log(response);
+ // },
+ // "error": function(xhr, textStatus, errorThrown){
+ // console.log("not a successful request!")
+ // console.log(xhr, textStatus, errorThrown)
+ // }
+ // };
+ //
+ // $.ajax(login);
+
+ // Init functions
+ header();
+ nav();
+
+ // Load logo
+ function loadLogo(){
+ $('.logo__wrapper').load('logo.html', function(){
+
+ // Grab logo if has ID or not
+ var logoID = document.getElementById("header__logo");
+ var logo = document.querySelectorAll("img, svg");
+
+ // Has ID - call header height
+ if(logoID && logoID !== null) {
+ getHeaderHeight();
+
+ // If logo exists but no ID - call header height
+ } else if (logo !== null && logo.length == 1){
+ $('img, svg').on('load', function(){
+ getHeaderHeight();
+ })
+
+ // If no logo at all - call header height
+ } else { getHeaderHeight(); }
+ });
+ }
+
+ // Get header height
+ function getHeaderHeight() {
+ // Get header height after logo is loaded
+ var header = document.getElementById("header__wrapper");
+ var headerHeight = header.offsetHeight;
+
+ // Add body padding to compensate for fixed header
+ document.body.style.paddingTop = headerHeight + 'px';
+
+ nav(headerHeight);
+ }
+ // Include header
+ function header() {
+ $('#header__wrapper').load('header.html', function () {
+
+ // include logo into header
+ loadLogo();
+ })
+ }
+
+ // load navigation - pass in header height
+ function nav(height) {
+ $('#navigation').load('navigation.html', function (headerHeight) {
+
+ var nav = document.getElementById("nav__top-level");
+ var navWidth = nav.offsetWidth; // Get navigation width
+ var subnav = document.getElementsByClassName("nav__second-level");
+ var navBtn = document.querySelectorAll('#nav__top-level button');
+
+ // Add body padding to compensate for fixed nav
+ document.body.style.paddingLeft = navWidth + 'px';
+
+ // 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';
+ }
+
+ // 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);
+
+ // 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("left", '-' + navWidth + "px").removeClass('opened');
+
+ // Open sub panels that matches clicked button and add opened class
+ parent.find(subnavClass).addClass('opened').css("left", navWidth);
+ })
+
+ }
+
+ // Temp solution to close subnav - TODO: better way to close
+ for (var i = 0, len = subnav.length; i < len; i++) {
+ subnav[i].addEventListener('click', function(){
+ this.classList.remove("opened");
+ this.style.left = "-" + navWidth + "px";
+ })
+ }
+
+ });
+ }
+
+}());
diff --git a/src/logo.html b/src/logo.html
new file mode 100644
index 0000000..a938e89
--- /dev/null
+++ b/src/logo.html
@@ -0,0 +1 @@
+<img src="img/logo.svg" id="header__logo" />
\ No newline at end of file
diff --git a/src/scss/components/_alerts.scss b/src/scss/components/_alerts.scss
new file mode 100644
index 0000000..a6d66b0
--- /dev/null
+++ b/src/scss/components/_alerts.scss
@@ -0,0 +1,46 @@
+//Fixed alerts
+
+.alert__error,
+.alert__warning,
+.alert__message {
+ color: $darkbg__primary;
+ padding: 1em;
+ margin: .5em 0;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ .close {
+ color: $lightbg__primary;
+ position: absolute;
+ right: 0%;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 1.5em;
+ padding: 1em;
+ box-sizing: border-box;
+ line-height: 0;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ background: transparent;
+ border: 0px;
+ margin: 0;
+ &:hover {
+ color: $lightbg__accent;
+ }
+ }
+}
+
+.alert__error {
+ background: $alert__error;
+
+}
+
+.alert__warning {
+ background: $alert__warning;
+
+}
+.alert__message {
+ background: $alert__message;
+}
\ No newline at end of file
diff --git a/src/scss/components/_all.scss b/src/scss/components/_all.scss
new file mode 100644
index 0000000..98ede4a
--- /dev/null
+++ b/src/scss/components/_all.scss
@@ -0,0 +1,3 @@
+@import "systemUser";
+@import "login";
+@import "alerts";
\ No newline at end of file
diff --git a/src/scss/components/_systemUser.scss b/src/scss/components/_systemUser.scss
new file mode 100644
index 0000000..8ab1535
--- /dev/null
+++ b/src/scss/components/_systemUser.scss
@@ -0,0 +1,23 @@
+#app-user {
+ position: absolute;
+ top: 50%;
+ right: .8em;
+ transform: translateY(-50%);
+ .app-user__name {
+ display: inline-block;
+ position: relative;
+
+ }
+ &::before {
+ content: "";
+ display: inline-block;
+ background: $white;
+ height:20px;
+ width: 20px;
+ border-radius: 10px;
+ vertical-align: middle;
+ //position: relative;
+ //top: 50%;
+ //transform: translateY(-50%);
+ }
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
new file mode 100755
index 0000000..e0bd509
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,7 @@
+//Import SCSS files
+@import 'base/all';
+@import 'utils/all';
+@import 'layout/all';
+@import 'components/all';
+@import 'vendor/all';
+