From 66a16ea0f9533bc2813022cc9f0ab8d28df50b20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nils=20Norman=20Hauk=C3=A5s?= <nils@thunki.com>
Date: Thu, 11 Aug 2016 19:49:20 +0200
Subject: [PATCH] Revamped settings

Added an explicit save button. Simplified
settings save service. Now saving and loading all
settings at once.
---
 src/app/menu/menu.tpl.html           |  16 ++--
 src/app/menu/settings.controller.ts  |  34 +++++++--
 src/app/services/settings.service.ts | 105 ++++++++++++---------------
 3 files changed, 82 insertions(+), 73 deletions(-)

diff --git a/src/app/menu/menu.tpl.html b/src/app/menu/menu.tpl.html
index 03f983b..b97b5de 100644
--- a/src/app/menu/menu.tpl.html
+++ b/src/app/menu/menu.tpl.html
@@ -12,8 +12,8 @@
     Will only work when deployed as a chrome plugin
     more info: https://developer.chrome.com/extensions/overview#relative-urls
   -->
-  <link href="chrome-extension://lpjhabnmodhcjhfdlfahkncecambemoi/material.css" rel="stylesheet">
-  <script src="chrome-extension://lpjhabnmodhcjhfdlfahkncecambemoi/material.js"></script>
+  <link href="chrome-extension://lofaefnmemfjgcamajbjdoahbpoappik/material.css" rel="stylesheet">
+  <script src="chrome-extension://lofaefnmemfjgcamajbjdoahbpoappik/material.js"></script>
 
   <style>
     /*
@@ -54,14 +54,14 @@
 
     <header class="mdl-layout__header">
       <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
-        <a href="#main-panel" class="mdl-layout__tab is-active">Tag you're it</a>
-        <a href="#settings-panel" class="mdl-layout__tab">Settings</a>
+        <a href="#main-panel" class="mdl-layout__tab">Tag you're it</a>
+        <a href="#settings-panel" class="mdl-layout__tab is-active">Settings</a>
       </div>
     </header>
 
     <div class="mdl-layout__content">
 
-      <div ng-controller="MenuCtrl" class="mdl-layout__tab-panel mdl-grid is-active" id="main-panel">
+      <div ng-controller="MenuCtrl" class="mdl-layout__tab-panel mdl-grid" id="main-panel">
 
         <br>
 
@@ -101,13 +101,13 @@
 
       </div>
 
-      <div ng-controller="SettingsCtrl" class="mdl-layout__tab-panel mdl-grid" id="settings-panel">
+      <div ng-controller="SettingsCtrl" class="mdl-layout__tab-panel mdl-grid is-active" id="settings-panel">
 
         <br>
 
         <p>Changes will be automatically saved.</p>
 
-        <form action="">
+        <form action="" novalidate>
 
           <p>
             <strong><label for="backend-url">Tag destination url:</label></strong>
@@ -125,6 +125,8 @@
 
         </form>
 
+        <p><a href ng-click="vm.saveSettings()">Save settings</a> <span ng-if="vm.savedSetting">saved!</span></p>
+
         <p><a href ng-click="vm.resetDefaults()">Reset to default settings</a></p>
 
       </div>
diff --git a/src/app/menu/settings.controller.ts b/src/app/menu/settings.controller.ts
index 459d852..02c25e7 100644
--- a/src/app/menu/settings.controller.ts
+++ b/src/app/menu/settings.controller.ts
@@ -4,7 +4,7 @@ import {
   BackendService,
   WebPageService,
   TagStorageService,
-  FileService, 
+  FileService,
   SettingsService} from '../services/index'
 import {IVMScope, ISense} from '../index.interfaces'
 
@@ -17,10 +17,13 @@ export class SettingsCtrl {
 
   serverToSendTo
   senseQueryUrl
+  emailToTagWith
+  savedSetting = false
 
   constructor(
-    private $scope: IVMScope, 
-    $log: angular.ILogService,
+    private $scope: IVMScope,
+    private $log: angular.ILogService,
+    private $timeout: angular.ITimeoutService,
     BackendService: BackendService,
     WebPageService: WebPageService,
     TagStorageService: TagStorageService,
@@ -29,14 +32,29 @@ export class SettingsCtrl {
     $scope.vm = this;
     this.loadSettings()
 
-    $scope.$watch('vm.serverToSendTo', (newValue: string, oldValue) => {
-      SettingsService.setSenseDestinationUrl(newValue)
-    })
   }
 
   loadSettings() {
-    this.SettingsService.getSenseDestinationUrl().then(url => this.serverToSendTo = url)
-    this.SettingsService.getSenseQueryUrl().then(url => this.senseQueryUrl = url)
+    this.SettingsService.loadSettings().then((settings) => {
+      this.senseQueryUrl = settings.tagitSenseQueryUrl
+      this.serverToSendTo = settings.tagitSenseDestinationUrl
+      this.emailToTagWith = settings.emailToTagWith
+    })
+  }
+
+  saveSettings() {
+    this.$log.debug('saving!')
+    this.SettingsService.saveSettings({
+      'tagitSenseDestinationUrl': this.serverToSendTo,
+      'tagitSenseQueryUrl': this.senseQueryUrl,
+      'emailToTagWith': this.emailToTagWith
+    }).then(() => {
+      // display 'saved!' for a short time before hiding it
+      this.savedSetting = true
+      this.$timeout(()=> {
+        this.savedSetting = false
+      }, 3000)
+    })
   }
 
   resetDefaults() {
diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts
index e4d3d1c..78a1ef1 100644
--- a/src/app/services/settings.service.ts
+++ b/src/app/services/settings.service.ts
@@ -1,12 +1,9 @@
 
-/**
- * Enumerate the things we can store.
- * 
- * More info: https://basarat.gitbooks.io/typescript/content/docs/types/stringLiteralType.html
- */
-type StorableSetting =
-  'tagitSenseQueryUrl' |
-  'tagitSenseDestinationUrl'
+interface saveableSettings {
+  tagitSenseQueryUrl: string
+  tagitSenseDestinationUrl: string
+  emailToTagWith: string
+}
 
 /**
  * Responsible for handling persisting and retrieving
@@ -21,67 +18,60 @@ export class SettingsService {
   // where to send the senses
   private _defaultSenseDestinationUrl = 'https://www.example.org/somewhere'
 
-  private _emailToTagWith = ''
-
   constructor(private $log: ng.ILogService, private $q: ng.IQService) {
   }
 
-  getSenseQueryUrl() {
-    return this.loadSetting('tagitSenseQueryUrl')
-      .then((value) => this.returnDefaultValueIfMissing(value, this._defaultSenseQueryUrl))
-  }
+  saveSettings(thingsToSave: saveableSettings) {
 
-  setSenseQueryUrl(newUrl: string) {
-    return this.saveSetting('tagitSenseQueryUrl', newUrl)
-  }
-
-  getSenseDestinationUrl() {
-    return this.loadSetting('tagitSenseDestinationUrl')
-      .then((value) => this.returnDefaultValueIfMissing(value, this._defaultSenseDestinationUrl))
-  }
-
-  setSenseDestinationUrl(newUrl: string) {
-    return this.saveSetting('tagitSenseDestinationUrl', newUrl)
-  }
-
-  private returnDefaultValueIfMissing(thingToCheck, defaultToUseIfMissingValue) {
-    if (thingToCheck) return thingToCheck
-    else return defaultToUseIfMissingValue
-  }
-
-  private loadSetting(whatToFind: StorableSetting) {
     // support for dev mode (when not loaded as a proper chrome plugin).
     if (typeof chrome.storage === 'undefined') {
-      return this.$q.when(localStorage.getItem(whatToFind))
+      angular.forEach(thingsToSave, (value, key) => {
+        localStorage.setItem(key, value)
+      })
+      return this.$q.when(thingsToSave)
     }
 
-    const syncStorage = chrome.storage.sync
-
     return this.$q((resolve, reject) => {
-      syncStorage.get(whatToFind, (loadedObject) => {
-
-        this.$log.debug('loadedSetting()')
-        this.$log.debug(loadedObject)
-
-        resolve(loadedObject[whatToFind])
-      })
+      chrome.storage.sync.set(thingsToSave, resolve)
+    }).then(() => {
+      this.$log.debug('saved setting')
+      this.$log.debug(thingsToSave)
+      return thingsToSave
     })
   }
 
-  private saveSetting(nameOfThingToSave: StorableSetting, valueToSave) {
-    // support for dev mode (when not loaded as a proper chrome plugin).
-    if (typeof chrome.storage === 'undefined') {
-      localStorage.setItem(nameOfThingToSave, valueToSave)
-      return this.$q.when(valueToSave)
-    }
+  loadSettings(): PromiseLike<saveableSettings> {
 
-    const syncStorage = chrome.storage.sync
     return this.$q((resolve, reject) => {
-      syncStorage.set({ nameOfThingToSave: valueToSave }, resolve)
-    }).then(() => {
-      this.$log.debug('saved setting')
-      this.$log.debug(valueToSave)
-      return valueToSave
+
+      //when backed by localStorage (dev)
+      if (typeof chrome.storage === 'undefined') {
+        resolve({
+          'tagitSenseDestinationUrl': localStorage.getItem('tagitSenseDestinationUrl'),
+          'tagitSenseQueryUrl': localStorage.getItem('tagitSenseQueryUrl'),
+          'emailToTagWith': localStorage.getItem('emailToTagWith')
+        })
+      } 
+      //when backed by chrome.storage.sync (production)      
+      else {
+        chrome.storage.sync.get(null, resolve)
+      }
+
+    })
+    //use default value if no setting specified.
+    .then((loadedSettings: saveableSettings) => {
+
+      if (!loadedSettings.tagitSenseDestinationUrl) {
+        loadedSettings.tagitSenseDestinationUrl = this._defaultSenseDestinationUrl
+      }
+      if (!loadedSettings.tagitSenseQueryUrl) {
+        loadedSettings.tagitSenseQueryUrl = this._defaultSenseQueryUrl
+      }
+      if (!loadedSettings.emailToTagWith) {
+        loadedSettings.emailToTagWith = ''
+      }
+
+      return loadedSettings
     })
   }
 
@@ -91,14 +81,13 @@ export class SettingsService {
 
       // delete from chrome storage
       if (typeof chrome.storage !== 'undefined') {
-        const done = _.after(2, resolve);
-        chrome.storage.sync.remove('tagitSenseDestinationUrl', done)
-        chrome.storage.sync.remove('tagitSenseQueryUrl', done)
+        chrome.storage.sync.clear(resolve)
       }
       // delete from localstorage (dev mode) 
       else {
         localStorage.removeItem('tagitSenseQueryUrl')
         localStorage.removeItem('tagitSenseDestinationUrl')
+        localStorage.removeItem('emailToTagWith')
         resolve()
       }
     })