skyquake/framework/widgets/header/header.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18
  19 import React from 'react';
  20 import './header.scss';
  21 import Crouton from 'react-crouton';
  22 import HeaderStore from './headerStore.js';
  23 import ScreenLoader from '../screen-loader/screenLoader.jsx';
  24 export default class AppHeader extends React.Component {
  25     constructor(props) {
  26         super(props);
  27         this.state = {};
  28         this.state.validateErrorEvent = 0;
  29         this.state.validateErrorMsg = '';
  30     }
  31     componentDidMount() {
  32         HeaderStore.listen(this.storeListener);
  33     }
  34     componentWillUnmount(){
  35         HeaderStore.unlisten(this.storeListener);
  36     }
  37     closeError() {
  38         LaunchpadFleetActions.validateReset()
  39     }
  40     storeListener = (state) => {
  41         this.setState(state);
  42     }
  43     render() {
  44         let html;
  45         let navItems = this.props.nav.map(function(nav, i) {
  46             if (nav.href || nav.onClick) {
  47                 return <li key={i}><a {...nav}>{nav.name}</a></li>
  48             } else {
  49                 return <li key={i}><span className="current"> {nav.name} </span></li>
  50             }
  51         });
  52         let errorMessage = <Crouton
  53                 id={Date.now()}
  54                 message={this.state.validateErrorMsg}
  55                 type={"error"}
  56                 hidden={!(this.state.validateErrorEvent && this.state.validateErrorMsg)}
  57                 onDismiss={HeaderStore.validateReset}
  58                 timeout= {5000}
  59             />
  60
  61         // html = (
  62         //     <header className="header-app-component">
  63         //     {errorMessage}
  64         //     <ScreenLoader show={this.props.isLoading}/>
  65         //     <div className="header-app-main">
  66         //         <h1>{this.props.title}</h1>
  67         //         <CommonLinks></CommonLinks>
  68         //     </div>
  69         //     <div className="header-app-nav">
  70         //         <ul>
  71         //             {navItems}
  72         //         </ul>
  73         //     </div>
  74         //     </header>
  75         // );
  76
  77         html = (
  78             <header className="header-app-component">
  79             {errorMessage}
  80             <ScreenLoader show={this.props.isLoading}/>
  81             <div className="header-app-nav">
  82                 <ul>
  83                     {navItems}
  84                 </ul>
  85             </div>
  86             </header>
  87         );
  88
  89         return html;
  90     }
  91 }
  92 export class CommonLinks extends React.Component {
  93     constructor(props) {
  94         super(props);
  95     }
  96     openAbout() {
  97         generateRefPage();
  98         navigateTo('about')
  99     }
 100     openDebug() {
 101         generateRefPage();
 102         navigateTo('debug');
 103     }
 104     render() {
 105         let links = [];
 106         setContext();
 107         links.push(<li key={'about'} onClick={this.openAbout}><a>About</a></li>);
 108         links.push(<li  key={'debug'} onClick={this.openDebug}><a>Debug</a></li>);
 109         let html;
 110         html = (
 111             <nav>
 112                 <ul>
 113                     {links}
 114                 </ul>
 115             </nav>
 116         );
 117         return html;
 118     }
 119 }
 120 AppHeader.defaultProps = {
 121     nav: [],
 122     isLoading: false
 123 }
 124 function generateRefPage() {
 125     let applicationContext = window.sessionStorage.getItem('applicationContext') || 'launchpad';
 126     let hash = window.location.hash.split('/');
 127     let pageTitle = 'Dashboard';
 128     if (applicationContext === 'launchpad') {
 129         hash = '#/launchpad/' + hash[2];
 130     } else {
 131         hash = "#/"
 132     }
 133     let refPage = {
 134         'hash': hash,
 135         'title': pageTitle
 136     };
 137     window.sessionStorage.setItem('refPage', JSON.stringify(refPage));
 138     return refPage;
 139 }
 140 function navigateTo(loc) {
 141     window.location.hash = '#/' + loc;
 142 }
 143 function setContext() {
 144      let applicationContext;
 145      let hashOne = window.location.hash.split('/')[1];
 146     if(hashOne == "launchpad") {
 147       applicationContext = "launchpad";
 148     } else {
 149       applicationContext = "missioncontrol";
 150     }
 151     if(hashOne != 'about' && hashOne != 'debug'){
 152         window.sessionStorage.setItem('applicationContext', applicationContext);}
 153 }