save visualisation settings to localstorage

app/services/visualisation-settings.js

 import Ember from 'ember';
 import Themes from '../utils/visualisation-themes';
 
-const { Service, computed, assign } = Ember;
+const { Service, computed, assign, observer } = Ember;
 
 /**
- * Stores the settings for visualisations for a user.
+ * Stores the settings for visualisations for a user. Synchronizes with `localStorage` if possible
  *
  * @class VisualisationSettingsService
  * @extends Ember.Service
  */
 export default Service.extend({ // TODO: load and save to localstorage
 
+    /**
+     * Initializes the service by loading the settings from `localStorage` (if possible)
+     * @method init
+     */
+    init() {
+        // load from local storage
+        if(window.localStorage) {
+            const settingsString = window.localStorage.getItem('visualisationSettings');
+            // user might visit the first time
+            if(settingsString) {
+                const settings = JSON.parse(settingsString);
+                // themes/layouts may be deleted
+                if(Themes[settings.theme]) {
+                    this.set('theme', settings.theme);
+                }
+                if(this.get('layoutAlgorithms').indexOf(settings.layoutAlgorithm) >= 0) {
+                    this.set('layoutAlgorithm', settings.layoutAlgorithm);
+                }
+            }
+        }
+
+        this._super(...arguments);
+    },
+
+    /**
+     * Observer of theme and layoutAlgorithm that stores the current settings to `localStorage`  (if possible)
+     * @method saveToStorage
+     * @private
+     */
+    saveToStorage: observer('theme', 'layoutAlgorithm', function() {
+        if(window.localStorage) {
+            const toSave = JSON.stringify({
+                theme: this.get('theme'),
+                layoutAlgorithm: this.get('layoutAlgorithm')
+            });
+            this.debug('saving settings to localStorage', toSave);
+            window.localStorage.setItem('visualisationSettings', toSave);
+        } else {
+            this.debug('could not save to localStorage as it is not accessible');
+        }
+    }),
+
     /**
      * the layout to use for the visualisation
      *

app/templates/deployments/index.hbs

@@ -8,7 +8,7 @@
                         {{system.name}}
                     </div>
                     <div class="panel-body">
-                        <div class="btn-group" role="group" aria-label="...">
+                        <div class="btn-group" role="group">
                             {{#link-to 'deployments.single' system.id class='btn btn-default'}}
                                 Deployments
                             {{/link-to}}