Add Options page for setting notification sound

Settings are saved to the browser sync storage.
samueljun · Sep 18, 2017 · 8059f3d · 8059f3d · murarisumit · Sep 18, 2017
1 parent 4feaff0
commit 8059f3d
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 10 deletions.
diff --git a/src/css/options.css b/src/css/options.css
@@ -0,0 +1,3 @@
+body {
+	background-color: transparent;
+}
diff --git a/src/html/options.html b/src/html/options.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Options - Tomato Clock</title>
+
+	<link href="/lib/bootstrap-3.3.5-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
+	<link href="/css/options.css" type="text/css" rel="stylesheet">
+</head>
+<body>
+	<form id="options-form">
+		<div class="checkbox">
+			<label>
+				<input type="checkbox" id="notification-sound-checkbox"> Notification sound
+			</label>
+		</div>
+
+		<button type="submit" class="btn btn-primary">Save</button>
+	</form>
+
+	<hr />
+
+	<div>
+		<button class="btn btn-xs btn-warning" id="reset-options">Reset to default</button>
+	</div>
+
+	<script src="/lib/browser-polyfill.js"></script>
+	<script src="/js/constants.js"></script>
+	<script src="/js/utils.js"></script>
+	<script src="/js/settings.js"></script>
+	<script src="/js/options.js"></script>
+</body>
+</html>
diff --git a/src/js/constants.js b/src/js/constants.js
@@ -1,7 +1,13 @@
-const ALARM_NAMESPACE = 'tomatoClockAlarm';
 const NOTIFICATION_ID = 'tomatoClockNotification';
 
-const STORAGE_KEY_TIMELINE = 'timeline';
+const STORAGE_KEY = {
+	TIMELINE: 'timeline',
+	SETTINGS: 'settings'
+};
+
+const SETTINGS_KEY = {
+	IS_NOTIFICATION_SOUND_ENABLED: 'isNotificationSoundEnabled'
+}
 
 const MINUTES_IN_TOMATO = 25;
 const MINUTES_IN_SHORT_BREAK = 5;
@@ -11,4 +17,8 @@ const RUNTIME_ACTION = {
 	SET_TIMER: 'setTimer',
 	RESET_TIMER: 'resetTimer',
 	GET_TIMER_SCHEDULED_TIME: 'getTimerScheduledTime'
+};
+
+const DEFAULT_SETTINGS = {
+	[SETTINGS_KEY.IS_NOTIFICATION_SOUND_ENABLED]: true
 }
diff --git a/src/js/notifications.js b/src/js/notifications.js
@@ -1,5 +1,7 @@
 class Notifications {
-	constructor() {
+	constructor(settings) {
+		this.settings = settings;
+
 		this.notificationSound = new Audio('/assets/sounds/Portal2_sfx_button_positive.m4a');
 
 		this.setListeners();
@@ -19,7 +21,11 @@ class Notifications {
 		});
 		// };
 
-		this.notificationSound.play();
+		this.settings.getSettings().then(settings => {
+			if (settings.isNotificationSoundEnabled) {
+				this.notificationSound.play();
+			}
+		});
 	}
 
 	setListeners() {

diff --git a/src/js/options.js b/src/js/options.js
@@ -0,0 +1,45 @@
+class Options {
+	constructor() {
+		this.settings = new Settings();
+
+		this.domNotificationSoundCheckbox = document.getElementById('notification-sound-checkbox');
+
+		this.setOptionsOnPage();
+		this.setEventListeners();
+	}
+
+	setOptionsOnPage() {
+		this.settings.getSettings().then(settings => {
+			const {isNotificationSoundEnabled} = settings;
+
+			this.domNotificationSoundCheckbox.checked = isNotificationSoundEnabled;
+		});
+	}
+
+	saveOptions(e) {
+		const isNotificationSoundEnabled = this.domNotificationSoundCheckbox.checked;
+
+		this.settings.saveSettings({
+			[SETTINGS_KEY.IS_NOTIFICATION_SOUND_ENABLED]: isNotificationSoundEnabled
+		});
+	}
+
+	setEventListeners() {
+		document.getElementById('options-form').addEventListener('submit', e => {
+			e.preventDefault();
+			this.saveOptions();
+		});
+
+		document.getElementById('reset-options').addEventListener('click', () => {
+			this.settings.resetSettings().then(() => {
+				this.setOptionsOnPage();
+			});
+		});
+	}
+}
+
+
+
+document.addEventListener('DOMContentLoaded', () => {
+	const options = new Options();
+});
diff --git a/src/js/settings.js b/src/js/settings.js
@@ -0,0 +1,33 @@
+class Settings {
+	constructor() {
+		this.storage = browser.storage.sync || browser.storage.local;
+	}
+
+	getSettings() {
+		return new Promise((resolve, reject) => {
+			const onSuccess = (storageResults) => {
+				const settings = storageResults[STORAGE_KEY.SETTINGS] || DEFAULT_SETTINGS;
+
+				resolve(settings);
+			};
+
+			const onError = () => {
+				resolve(DEFAULT_SETTINGS);
+			}
+
+			this.storage.get(STORAGE_KEY.SETTINGS).then(onSuccess, onError);
+		});
+	}
+
+	saveSettings(settings) {
+		return this.storage.set({
+			[STORAGE_KEY.SETTINGS]: settings
+		});
+	}
+
+	resetSettings() {
+		return this.storage.set({
+			[STORAGE_KEY.SETTINGS]: DEFAULT_SETTINGS
+		});
+	}
+}
diff --git a/src/js/timeline.js b/src/js/timeline.js
@@ -7,8 +7,8 @@ class Timeline {
 
 	_getTimelinePromise() {
 		return new Promise((resolve, reject) => {
-			this.storage.get(STORAGE_KEY_TIMELINE).then(storageResults => {
-				const timeline = storageResults[STORAGE_KEY_TIMELINE] || [];
+			this.storage.get(STORAGE_KEY.TIMELINE).then(storageResults => {
+				const timeline = storageResults[STORAGE_KEY.TIMELINE] || [];
 
 				this.timeline = timeline.map(timelineAlarm => {
 					timelineAlarm.date = new Date(timelineAlarm.date);
@@ -43,11 +43,11 @@ class Timeline {
 			date: new Date().toString() // should be initialized to Date whenever interacted with
 		});
 
-		this.storage.set({[STORAGE_KEY_TIMELINE]: timeline});
+		this.storage.set({[STORAGE_KEY.TIMELINE]: timeline});
 	}
 
 	resetTimeline() {
 		this.timeline = [];
-		this.storage.remove(STORAGE_KEY_TIMELINE);
+		this.storage.remove(STORAGE_KEY.TIMELINE);
 	}
 };
diff --git a/src/js/timer.js b/src/js/timer.js
@@ -1,10 +1,12 @@
 class Timer {
 	constructor() {
-		this.timer = {};
+		this.settings = new Settings();
 		this.badge = new Badge();
-		this.notifications = new Notifications();
+		this.notifications = new Notifications(this.settings);
 		this.timeline = new Timeline();
 
+		this.timer = {};
+
 		this.resetTimer();
 		this.setListeners();
 	}

diff --git a/src/manifest.json b/src/manifest.json
@@ -38,6 +38,7 @@
       "/lib/browser-polyfill.min.js",
       "/js/constants.js",
       "/js/utils.js",
+      "/js/settings.js",
       "/js/badge.js",
       "/js/notifications.js",
       "/js/timeline.js",
@@ -77,5 +78,10 @@
       },
       "description": "Reset the current timer."
     }
+  },
+
+  "options_ui": {
+    "page": "/html/options.html",
+    "browser_style": false
   }
 }