feature: add popup to display the change log at first launch (#201)

.gitignore

@@ -5,4 +5,6 @@ node_modules/*
 !node_modules/app
 **/*.swp
 npm-debug.log
-public/help/*.html
+public/help/*.html
+public/CHANGELOG.html
+

changelog-nolink-template.hbs

@@ -0,0 +1,26 @@
+{{#each releases}}
+  {{#if href}}
+    ###{{#unless major}}#{{/unless}} {{title}} {{#if tag}}: {{niceDate}}{{/if}}
+  {{else}}
+    #### {{title}}
+  {{/if}}
+
+  {{#if summary}}
+    {{summary}}
+  {{/if}}
+
+  {{#each merges}}
+    - {{#if commit.breaking}}**Breaking change:** {{/if}}{{message}}{{#if href}} ({{author}}) `#{{id}}`{{/if}}
+  {{/each}}
+  {{#each fixes}}
+    - {{#if commit.breaking}}**Breaking change:** {{/if}}{{commit.subject}}{{#each fixes}}{{#if href}} ({{author}}) `#{{id}}`{{/if}}{{/each}}
+  {{/each}}
+  {{#each commits}}
+    - {{#if breaking}}**Breaking change:** {{/if}}{{subject}}{{#if href}} ({{author}}) `{{shorthash}}`{{/if}}
+  {{/each}}
+
+{{/each}}
+
+{{#unless options.hideCredit}}
+  Change Log generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+{{/unless}}

changelog-template.hbs

@@ -0,0 +1,26 @@
+{{#each releases}}
+  {{#if href}}
+    ###{{#unless major}}#{{/unless}} [{{title}}]({{href}}) {{#if tag}}: {{niceDate}}{{/if}}
+  {{else}}
+    #### {{title}}
+  {{/if}}
+
+  {{#if summary}}
+    {{summary}}
+  {{/if}}
+
+  {{#each merges}}
+    - {{#if commit.breaking}}**Breaking change:** {{/if}}{{message}}{{#if href}} ({{author}}) [`#{{id}}`]({{href}}){{/if}}
+  {{/each}}
+  {{#each fixes}}
+    - {{#if commit.breaking}}**Breaking change:** {{/if}}{{commit.subject}}{{#each fixes}}{{#if href}} ({{author}}) [`#{{id}}`]({{href}}){{/if}}{{/each}}
+  {{/each}}
+  {{#each commits}}
+    - {{#if breaking}}**Breaking change:** {{/if}}{{subject}}{{#if href}} ({{author}}) [`{{shorthash}}`]({{href}}){{/if}}
+  {{/each}}
+
+{{/each}}
+
+{{#unless options.hideCredit}}
+  Change Log generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+{{/unless}}

lib/help/help.md

@@ -29,7 +29,7 @@
     padding-left: 0;
   }
 </style>
-#### Help and Instructions
+#### Help, Instructions and Change Log
 ___
 + [0. Introduction](#0)  
 + [1. Connect to your Signal K Server](#1)  
@@ -72,6 +72,7 @@ ___
         - [4.2.2. On Android](#4_2_2)  
 + [5. Advanced options](#5)  
 + [6. Trouble?](#6)  
++ [7. Change Log](#7)  
 
 <a id="0"></a>
 **0. Introduction** [Back to main menu](#content)  
@@ -698,4 +699,7 @@ Maybe you discovered a bug.
 
 If you see **NaN** inside a widget, it means that the value returned by your Signal K server is incorrect
  and that InstrumentPanel cannot interpret it
-
+
+<a id="7"></a>
+**7. Change Log** [Back to main menu](#content)  
+___

lib/ui/instrumentpanel.js

@@ -142,6 +142,7 @@ export default function InstrumentPanel(streamBundle) {
   this.connectionInfo = null;
   this.applicationData = false;
   this.metaUpdateInWS =false;
+  this.version = '';
   var isUnkownKey = function(key) {
     return typeof this.getCurrentPage().knownKeys[key.key] === 'undefined';
   }.bind(this)

lib/ui/main.js

@@ -11,6 +11,7 @@ import IpNavBar from './navbar';
 import SettingsPanel from './settings/settingspanel';
 import StreamBundle from '../streambundle';
 import HelpComponent from '../util/help';
+import ChangelogComponent from '../util/changelog';
 import {getUrlParameter, reloadWithParams} from '../util/browser';
 import {ResetComponent} from './settings/resetsettings';
 import {TouchAppComponent} from '../svg/SvgTouchApp24px';
@@ -19,7 +20,9 @@ import {
   checkIfBackupSettings,
   restoreBackupSettings,
   storeStartConnected,
-  removeKeysByName
+  removeKeysByName,
+  retrieveVersion,
+  storeVersion
 } from '../util/localstorage';
 import {
   CS_BY_OS,
@@ -38,6 +41,7 @@ var model = BaconModel.Model.combine({
   settingsVisible: BaconModel.Model(false),
   gridSettings: instrumentPanel.gridSettingsModel,
   helpVisible: BaconModel.Model(window.location.hash === '#help'),
+  changelogVisible: BaconModel.Model(false),
   connected: BaconModel.Model(false),
   reloadRequired: instrumentPanel.reloadRequired,
   widgetFullScreen: BaconModel.Model(false)
@@ -61,6 +65,12 @@ class App extends React.Component {
       }
     instrumentPanel.colorSchemeTool.scheme = initialColorScheme.colorSchemeCurrent;
     instrumentPanel.colorScheme = initialColorScheme;
+    instrumentPanel.version = this.props.version;
+    this.lastUsedVersion = retrieveVersion();
+    if (this.lastUsedVersion !== instrumentPanel.version) {
+      this.props.model.lens("changelogVisible").set(true);
+      storeVersion(instrumentPanel.version);
+    }
   }
 
   onGridLayoutChange(layout) {
@@ -114,7 +124,6 @@ class App extends React.Component {
       if (widgetFullScreenStyle.width === width) widgetFullScreenStyle.width -= 10;
       if (widgetFullScreenStyle.height === height) widgetFullScreenStyle.height -= 10;
     }
-
     return (
       <div>
         <ImportedSettingsAlert instrumentPanel={instrumentPanel}></ImportedSettingsAlert>
@@ -123,6 +132,7 @@ class App extends React.Component {
         {(!this.state.helpVisible && this.state.settingsVisible) ?
           <SettingsPanel instrumentPanel={instrumentPanel}></SettingsPanel> : null
         }
+        {this.state.changelogVisible ? <ChangelogComponent model={this.props.model} lastUsedVersion={this.lastUsedVersion} /> : null}
         {(!this.state.helpVisible && !this.state.settingsVisible && this.state.connected && this.state.widgetFullScreen === false) ?
           <ReactGridLayout
             reduceWidth={(this.state.isLocked) ? 0 : 20}
@@ -353,5 +363,5 @@ IPversion.textContent = `${VERSION}`;
 if (getUrlParameter('reset')) {
   var resetSettings = ReactDOM.render(<ResetComponent/>, document.getElementById('content'));
 } else {
-    var app = ReactDOM.render(<App model={model}/>, document.getElementById('content'));
+    var app = ReactDOM.render(<App model={model} version={IPversion.textContent}/>, document.getElementById('content'));
   }

lib/ui/settings/constants.js

@@ -4,6 +4,7 @@ export const preferredUnitsKeyName = 'instrumentpanelPreferredUnits';
 export const colorSchemeKeyName = 'instrumentpanelColorScheme';
 export const widgetActiveModeKeyName = 'instrumentpanelWidgetActiveMode';
 export const backupSettingsKeyName = 'instrumentpanelBackupSettings';
+export const versionKeyName = 'instrumentpanelVersion';
 export const tokenKeyName = 'instrumentpanelToken';
 export const defaultLayoutName = 'default';
 export const CS_BY_MAINBAR = "mainbar";

lib/ui/settings/resetsettings.js

@@ -19,15 +19,17 @@ import {
   layoutsKeyName,
   preferredUnitsKeyName,
   colorSchemeKeyName,
-  backupSettingsKeyName
+  backupSettingsKeyName,
+  versionKeyName,
 } from './constants';
 
 var menuSettings = {
   [layoutsKeyName]: {title: 'Layouts', help: 'Delete all layouts'},
   [old_layoutKeyName]: {title: 'Previous layout', help: 'Clean previous layouts, if a layout existed in version 0.12.0 and earlier, it is used as a template to build the default layout.'},
   [preferredUnitsKeyName]: {title: 'Preferred units', help: 'Delete all preferred units'},
   [colorSchemeKeyName]: {title: 'Dark Mode', help: 'Delete dark mode settings'},
-  [backupSettingsKeyName]: {title: 'Backup settings', help: 'Delete the settings backup and remove top message about imported configuration'}
+  [backupSettingsKeyName]: {title: 'Backup settings', help: 'Delete the settings backup and remove top message about imported configuration'},
+  [versionKeyName]: {title: 'Display changelog', help: 'Reactivates the display of the changelog at the first launch'},
 };
 
 export default class ResetSettings extends React.Component {

lib/util/changelog.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import {Modal, Button} from 'react-bootstrap';
+
+export default class ChangelogComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state =  {
+      htmlContent: '',
+      show: true
+    };
+    this.handleClose = this.handleClose.bind(this);
+    this.popupTitle = "What's new ";
+    if (this.props.lastUsedVersion === '') {
+      this.popupTitle += 'in Instrument Panel'
+    } else {
+      this.popupTitle += 'since version ' + this.props.lastUsedVersion;
+    }
+  }
+
+  handleClose() {
+    this.setState(
+      { show: false }
+    );
+    this.props.model.lens("changelogVisible").set(false)
+  }
+
+  render() {
+    return (
+      <div className="help">
+        <Modal show={this.state.show} backdrop="static" onHide={this.handleClose}>
+          <Modal.Header closeButton>
+            <Modal.Title>{this.popupTitle}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <div>You can find this changelog later in the help</div>
+            <div className="" dangerouslySetInnerHTML={ {__html: this.state.htmlContent} } />
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={this.handleClose}>Close</Button>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+
+  componentDidMount() {
+    let that = this;
+    let errorMessage = 'Error when loading the changelog content. <BR/>Please close popup...'
+    fetch('./CHANGELOG.html')
+    .then(response => {
+      if (response.status === 200) {
+        return response.text();
+      } else {
+        return '[' + response.status + '] ' + errorMessage;
+      }
+    }).catch(err => {
+      return '[' + err + '] ' + errorMessage;
+    }).then( content => {
+      that.setState({htmlContent: content})
+    });
+    this.setState({htmlContent: 'Loading the changelog content...'})
+  }
+};
+

lib/util/help.js

@@ -4,7 +4,7 @@ export default class HelpComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state =  {
-      htmlContent: 'Retrieving the help content...'
+      htmlContent: ''
     };
   }
 

lib/util/localstorage.js

@@ -41,6 +41,7 @@ import {
   colorSchemeKeyName,
   widgetActiveModeKeyName,
   backupSettingsKeyName,
+  versionKeyName,
   tokenKeyName,
   CS_BY_MAINBAR,
   CS_BY_OS,
@@ -165,6 +166,24 @@ export function storeWidgetActiveMode(value) {
     }
 }
 
+export function retrieveVersion() {
+  try {
+    var lastUsedVersion = window.localStorage.getItem(versionKeyName);
+    return (lastUsedVersion !== null) ? lastUsedVersion : '';
+  } catch (ex) {
+      console.error(ex);
+      return '0.0.0';
+    }
+}
+
+export function storeVersion(value) {
+  try {
+    window.localStorage.setItem(versionKeyName, value);
+  } catch (ex) {
+      console.error(ex);
+    }
+}
+
 export function removeKeysByName(arrayKeys) {
   if (Array.isArray(arrayKeys)) {
     arrayKeys.forEach(function(keyToDelete) {