feature: auto reload page when unit changed (#101)

Author: cmotelet

dist/help/help.md

@@ -29,7 +29,6 @@
     padding-left: 0;
   }
 </style>
-<a id="menu"></a>
 #### Help and Instructions
 ___
 + [0. Introduction](#0)  
@@ -90,7 +89,7 @@ The button's text changes to _Connecting_ indicate the connection status
  and once connected disappears. In most cases you won't see the _Connecting_ text at all.  
 
 If the _Connecting_ button reappears, it means that the connection
- to the Signal K server is broken and that instrumentpanel
+ to the Signal K server is broken and that InstrumentPanel
  is trying to reconnect automatically.  
 
 For advanced users, you can manually specify the address and
@@ -249,7 +248,8 @@ Select your preferred unit from the listbox.
 >
 >![unit](./dist/help/widget-settingUnit.png#maxwidth)  
 >
-To make the unit change active, please disconnect and reconnect or reload the page.  
+To make the unit change active, InstrumentPanel must be reloaded. This will be done automatically when you leave settings tab.  
+You will be informed by a message at the top of the screen.  
 
 <a id="2_3_4"></a>
 **2.3.4. Widget Specific Settings** [Back to menu](#menu)  

lib/ui/instrumentpanel.js

@@ -64,6 +64,7 @@ export default function InstrumentPanel(streamBundle) {
   this.gridSettingsModel = new BaconModel.Model("");
   this.pushGridChanges();
   this.handleSaveLayoutDelay = null;
+  this.reloadRequired = false;
   var isUnkownKey = function(key) {
     return typeof this.getCurrentPage().knownKeys[key.key] === 'undefined';
   }.bind(this)
@@ -96,6 +97,14 @@ export default function InstrumentPanel(streamBundle) {
 
 }
 
+InstrumentPanel.prototype.setReloadRequired = function() {
+  this.reloadRequired = true;
+}
+
+InstrumentPanel.prototype.isReloadRequired = function() {
+  return this.reloadRequired;
+}
+
 InstrumentPanel.prototype.setPage = function(page) {
   if (page > this.pages.length || page < notificationPageId) {
     console.error("No such page:" + page);

lib/ui/navbar.js

@@ -61,6 +61,7 @@ export default class IpNavBar extends React.Component {
 
     return (
       <nav className="navbar navbar-default" style={{marginBottom: '0px'}}>
+        <a id="menu"></a>
         <form className="navbar-form navbar-left" style={navBarStyles}>
           {buttons}
           <div className="btn-group btn navbar-btn pull-right" style={Object.assign({}, buttonStyle, {cursor: 'default'})}>
@@ -193,9 +194,14 @@ export default class IpNavBar extends React.Component {
   }
 
   toggleSettingsVisible() {
-    this.props.model.lens("settingsVisible")
-      .set(!this.props.model.get().settingsVisible);
-    this.props.instrumentPanel.sortNotificationLayout();
+    if ((this.props.model.get().settingsVisible) &&
+      (this.props.instrumentPanel.isReloadRequired())) {
+      location.reload();
+    } else {
+        this.props.model.lens("settingsVisible")
+          .set(!this.props.model.get().settingsVisible);
+        this.props.instrumentPanel.sortNotificationLayout();
+      }
   }
 
   setPage(page) {

lib/ui/settings/settingspanel.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup, Button, TabPane, Tabs, Tab } from 'react-bootstrap';
+import { ButtonGroup, Button, TabPane, Tabs, Tab, Alert } from 'react-bootstrap';
 
 import GridJson from './gridjson';
 import InstrumentPanel from '../instrumentpanel';
@@ -26,6 +26,9 @@ export default class SettingsPanel extends React.Component {
       marginTop: '4px'
     };
 
+    var reloadMessage =
+      (<Alert bsStyle="warning"><strong>Reload is required</strong> This will be done when you leave settings tab.</Alert>);
+
     return (
       <div>
         <ButtonGroup className="pull-right" style={buttonStyle}>
@@ -38,6 +41,7 @@ export default class SettingsPanel extends React.Component {
         <Tabs id={1} activeKey={this.state.activeKey}
           onSelect={this.handleSelect}>
           <Tab eventKey={1} title="By Display Widget">
+            {(this.props.instrumentPanel.isReloadRequired())? reloadMessage : undefined}
             <WidgetList instrumentPanel={this.props.instrumentPanel}/>
           </Tab>
           <Tab eventKey={3} title="Grid as JSON">

lib/ui/widgets/digitaldatetime.js

@@ -177,6 +177,7 @@ DigitalDateTime.prototype.getSettingsElement = function() {
       that.options.convertTo = event.target.value === that.options.unit ? undefined : event.target.value;
       that.instrumentPanel.persist();
       that.instrumentPanel.pushGridChanges();
+      that.instrumentPanel.setReloadRequired();
     }
   });
 }

lib/ui/widgets/specifictext.js

@@ -104,6 +104,7 @@ SpecificText.prototype.getSettingsElement = function() {
       that.options.convertTo = event.target.value === that.options.unit ? undefined : event.target.value;
       that.instrumentPanel.persist();
       that.instrumentPanel.pushGridChanges();
+      that.instrumentPanel.setReloadRequired();
     }
   });
 }

lib/ui/widgets/universal.js

@@ -137,6 +137,7 @@ Widget.prototype.getSettingsElement = function() {
       that.options.convertTo = event.target.value === that.options.unit ? undefined : event.target.value;
       that.instrumentPanel.persist();
       that.instrumentPanel.pushGridChanges();
+      that.instrumentPanel.setReloadRequired();
     }
   });
 }

lib/ui/widgets/windmeter.js

@@ -391,6 +391,7 @@ WindMeter.prototype.getSettingsElement = function() {
       that.options.convertTo = event.target.value ==='m/s' ? undefined : event.target.value;
       that.instrumentPanel.persist();
       that.instrumentPanel.pushGridChanges();
+      that.instrumentPanel.setReloadRequired();
     }
   });
 }