Revamped settings
Added an explicit save button. Simplified settings save service. Now saving and loading all settings at once.
This commit is contained in:
Nils Norman Haukås
parent
da6334f8a8
commit
66a16ea0f9
3 changed files with 82 additions and 73 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue