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             />
  59
  60         // html = (
  61         //     <header className="header-app-component">
  62         //     {errorMessage}
  63         //     <ScreenLoader show={this.props.isLoading}/>
  64         //     <div className="header-app-main">
  65         //         <h1>{this.props.title}</h1>
  66         //         <CommonLinks></CommonLinks>
  67         //     </div>
  68         //     <div className="header-app-nav">
  69         //         <ul>
  70         //             {navItems}
  71         //         </ul>
  72         //     </div>
  73         //     </header>
  74         // );
  75
  76         html = (
  77             <header className="header-app-component">
  78             {errorMessage}
  79             <ScreenLoader show={this.props.isLoading}/>
  80             <div className="header-app-nav">
  81                 <ul>
  82                     {navItems}
  83                 </ul>
  84             </div>
  85             </header>
  86         );
  87
  88         return html;
  89     }
  90 }
  91 export class CommonLinks extends React.Component {
  92     constructor(props) {
  93         super(props);
  94     }
  95     openAbout() {
  96         generateRefPage();
  97         navigateTo('about')
  98     }
  99     openDebug() {
 100         generateRefPage();
 101         navigateTo('debug');
 102     }
 103     render() {
 104         let links = [];
 105         setContext();
 106         links.push(<li key={'about'} onClick={this.openAbout}><a>About</a></li>);
 107         links.push(<li  key={'debug'} onClick={this.openDebug}><a>Debug</a></li>);
 108         let html;
 109         html = (
 110             <nav>
 111                 <ul>
 112                     {links}
 113                 </ul>
 114             </nav>
 115         );
 116         return html;
 117     }
 118 }
 119 AppHeader.defaultProps = {
 120     nav: [],
 121     isLoading: false
 122 }
 123 function generateRefPage() {
 124     let applicationContext = window.sessionStorage.getItem('applicationContext') || 'launchpad';
 125     let hash = window.location.hash.split('/');
 126     let pageTitle = 'Dashboard';
 127     if (applicationContext === 'launchpad') {
 128         hash = '#/launchpad/' + hash[2];
 129     } else {
 130         hash = "#/"
 131     }
 132     let refPage = {
 133         'hash': hash,
 134         'title': pageTitle
 135     };
 136     window.sessionStorage.setItem('refPage', JSON.stringify(refPage));
 137     return refPage;
 138 }
 139 function navigateTo(loc) {
 140     window.location.hash = '#/' + loc;
 141 }
 142 function setContext() {
 143      let applicationContext;
 144      let hashOne = window.location.hash.split('/')[1];
 145     if(hashOne == "launchpad") {
 146       applicationContext = "launchpad";
 147     } else {
 148       applicationContext = "missioncontrol";
 149     }
 150     if(hashOne != 'about' && hashOne != 'debug'){
 151         window.sessionStorage.setItem('applicationContext', applicationContext);}
 152 }