Zhiqing bugfix (#26)

* Fix Bug #1059554:[Firefox][1366*768][Ja]the layout of link area is out of boarder on wizard page * Point to different language docs page when set to different languages * Fix Bug #1037246:[Chrome][1280*1024][ProdSide]Reset button is enable after click run button * When language menu is unfold, click any place will close the menu * Add react router to have different url when select languages * Track pageview after language is set * Use react route V3 for handling query string * Fix language name to automatically match languages

Author: michaeljqzq

package.json

@@ -16,6 +16,7 @@
  "react-dom": "^15.5.4",
  "react-ga": "^2.2.0",
  "react-localization": "^0.1.0",
+ "react-router": "3.0.5",
  "sass-loader": "^6.0.6",
  "uuid": "^3.0.1"
  },

src/component/controlBar/controlBar.css

@@ -21,4 +21,8 @@
 .rightBtn {
  float: right;
  height: 24px;
+}
+
+.reset-disable {
+ color: grey !important;
 }

src/component/controlBar/controlBar.js

@@ -8,7 +8,7 @@ class ControlBar extends Component {
  return (
  <div className='controlBar'>
  <span onClick={this.props.isRunning ? this.props.onStop : this.props.onStart}>{this.props.isRunning ? Localization.getLocalizedString().buttonStop : Localization.getLocalizedString().buttonRun}</span>
- <span onClick={this.props.onReset}>{Localization.getLocalizedString().buttonReset}</span>
+ <span className={`${this.props.isRunning && 'reset-disable'}`} onClick={!this.props.isRunning && this.props.onReset}>{Localization.getLocalizedString().buttonReset}</span>
  <span className='rightBtn' onClick={this.props.toggleConsole}><Glyphicon glyph={this.props.consoleHide ? 'chevron-up' : 'chevron-down'} /></span>
  </div>
  );

src/component/helpOverlay/helpOverlay.js

@@ -241,7 +241,7 @@ class HelpOverlay extends Component {
  </div>
  </div>
  <div className="link-container">
- <a target="_blank" href="https://docs.microsoft.com/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started">{Localization.getLocalizedString().helpLinkSeeDoc}</a>
+ <a target="_blank" href={Localization.getLocalizedString().helpDocsLink}>{Localization.getLocalizedString().helpLinkSeeDoc}</a>
  <a target="_blank" href="https://github.com/Azure-Samples/raspberry-pi-web-simulator">{Localization.getLocalizedString().helpLinkViewSource}</a>
  </div>
  </div>

src/component/helpOverlay/helpOverlay.scss

@@ -21,7 +21,7 @@ $break-small: 768px;
  .instruction {
  width: 50%;
  height: 60%;
- min-height: 450px;
+ min-height: 500px;
  @media screen and (max-width : 768px) {
  width: 90%;
  height: 90%;

src/component/language/language.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { traceEvent } from '../../lib/telemetry.js';
 import './language.scss';
 import Localization from '../../localization/localization';
+import { browserHistory } from 'react-router';
 
 class Language extends Component {
  constructor(props) {
@@ -12,6 +13,23 @@ class Language extends Component {
  }
 
  onButtonClick = (e) => {
+ e.stopPropagation();
+ if(this.state.showList === false) {
+ this.toggleShowList();
+ document.body.addEventListener('mousedown',this.onBodyClick);
+ this.listener = true;
+ }
+ }
+
+ onBodyClick = () => {
+ setTimeout(this.toggleShowList,100);
+ }
+
+ toggleShowList = () => {
+ if(this.listener) {
+ document.body.removeEventListener('mousedown',this.onBodyClick);
+ this.listener = false;
+ }
  this.setState((prev) => {
  return {
  showList: !prev.showList
@@ -21,13 +39,15 @@ class Language extends Component {
 
  onLanguageClick = (key, e) => {
  Localization.getLocalizedString().setLanguage(key);
- this.setState((prev) => {
- return {
- showList: !prev.showList
- }
- });
  e.stopPropagation();
  this.props.reloadMain();
+ let location = Object.assign({},
+ browserHistory.getCurrentLocation());
+ Object.assign(location.query, {
+ lang: key,
+ });
+ browserHistory.push(location);
+ window.localStorage.setItem('lang', key);
  }
 
  render() {

src/index.js

@@ -8,16 +8,15 @@ import Localization from './localization/localization';
 import { traceEvent } from './lib/telemetry.js';
 import 'bootstrap/dist/css/bootstrap.css';
 import './index.css';
-import ErrorMap from './data/errorMap'
+import ErrorMap from './data/errorMap';
+import { Router, Route, Link, browserHistory } from 'react-router';
 
 import Sample from './lib/sample.js';
 import { tracePageView,tracePageViewAI } from './lib/telemetry.js';
 
 class Index extends Component {
  constructor(props) {
  super(props);
- tracePageView();
- tracePageViewAI();
  this.state = {
  console: {
  consoleMsg: '',
@@ -44,6 +43,40 @@ class Index extends Component {
  this.onFinish = this.onFinish.bind(this);
  }
 
+ componentDidMount() {
+ let needUpdateUrl = false;
+ let useDefault = true;
+ let lang;
+ if (this.props.location && this.props.location.query && this.props.location.query.lang) {
+ useDefault = false;
+ lang = this.props.location.query.lang;
+ } else if (window.localStorage.getItem('lang')) {
+ needUpdateUrl = true;
+ useDefault = false;
+ lang = window.localStorage.getItem('lang')
+ }
+
+ if (!useDefault) {
+ for (let key of Object.keys(Localization.localizedStringList)) {
+ if (lang === key) {
+ Localization.getLocalizedString().setLanguage(key);
+ this.forceUpdate();
+ }
+ }
+ if (needUpdateUrl) {
+ let location = Object.assign({},
+ browserHistory.getCurrentLocation());
+ Object.assign(location.query, {
+ lang
+ });
+ browserHistory.push(location);
+ }
+ }
+ tracePageView();
+ tracePageViewAI();
+ }
+
+
  runApp() {
  if (this.state.isRunning) { return; }
 
@@ -148,6 +181,7 @@ class Index extends Component {
 }
 
 ReactDOM.render(
- <Index />,
- document.getElementById('root')
+ <Router history={browserHistory} >
+ <Route path="/*" component={Index} />
+ </Router>, document.getElementById('root')
 );

src/localization/localization.js

@@ -63,6 +63,7 @@ Localization.localizedStringList = {
  helpContent9: "with the Azure IoT hub",
  helpContent10: "device connection string",
  helpContent11: "button or type \"npm start\" in the console window to run the application",
+ helpDocsLink: "https://docs.microsoft.com/en-us/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started",
  altRaspberryPiLogo: "Raspberry Pi logo"
  },
  "ja": {
@@ -108,9 +109,10 @@ Localization.localizedStringList = {
  helpContent9: "のプレースホルダをAzure IoTハブデバイスの",
  helpContent10: "接続文字列に置き換えます。",
  helpContent11: "[Run] をクリックまたは npm start と入力してアプリケーションを実行します。",
+ helpDocsLink: "https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started",
  altRaspberryPiLogo: "Raspberry Pi logo"
  },
- "zh-cn": {
+ "zh-CN": {
  _displayName: "简体中文",
  pageTitle: "Raspberry Pi Azure IoT Online Simulator",
  pageTitleMobile: "Raspberry Pi Simulator",
@@ -153,9 +155,10 @@ Localization.localizedStringList = {
  helpContent9: "替换的内容是Azure IoT中心内",
  helpContent10: "设备连接字符串",
  helpContent11: "按钮或者输入 \"npm start\" 以运行应用程序",
+ helpDocsLink: "https://docs.microsoft.com/zh-cn/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started",
  altRaspberryPiLogo: "Raspberry Pi logo"
  },
- "zh-tw": {
+ "zh-HK": {
  _displayName: "繁体中文",
  pageTitle: "Raspberry Pi Azure IoT Online Simulator",
  pageTitleMobile: "Raspberry Pi Simulator",
@@ -198,6 +201,7 @@ Localization.localizedStringList = {
  helpContent9: "替換為",
  helpContent10: "連接字串的主索引鍵",
  helpContent11: "按鈕或在控制台窗口中鍵入“npm start”來運行應用程序",
+ helpDocsLink: "https://docs.microsoft.com/zh-hk/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started",
  altRaspberryPiLogo: "Raspberry Pi logo"
  },
  "es": {
@@ -243,6 +247,7 @@ Localization.localizedStringList = {
  helpContent9: "con la cadena de conexión del dispositivo de Azure IoT Hub.",
  helpContent10: "cadena de la cadena de conexión",
  helpContent11: "Haga clic en Ejecutar o escriba \"npm start\" para ejecutar la aplicación",
+ helpDocsLink: "https://docs.microsoft.com/es-es/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started",
  altRaspberryPiLogo: "Raspberry Pi logo"
  }
 };