Merge pull request #14 from hovancik/feature/settings

Create settings for stretchly

Author: hovancik

CHANGELOG.md

@@ -8,6 +8,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - rename strechly to stretchly (grammar, yay!)
 - allows only one instance of app
+- settings for microbreak (duration, interval)
+- 5 color scheme
 
 ## 0.0.1 - 2016-09-06
 ### Added

README.md

@@ -34,10 +34,11 @@ Feel free to join development of this app via Issues and Pull Requests.
 - [x] PR tools
 - [x] make installers/executables
 - [x] create about page
+- [x] only one instance
 - [ ] notification on 2nd instance
 - [ ] create longer breaks (5min every 30 minutes)
-- [ ] create settings for breaks
-- [ ] remember settings after restart
+- [x] create settings for breaks
+- [x] remember settings after restart
 - [ ] autostart app
 - [ ] start break anytime from menu
 - [ ] create keyboard shortcuts
@@ -46,7 +47,7 @@ Feel free to join development of this app via Issues and Pull Requests.
 *(by date of the first contribution)*
 
 - Jan Hovancik, @hovancik, [hovancik.net](https://hovancik.net)
-- Martina Mocinecova, (*stretchly* logo)
+- Martina Mocinecova, (*stretchly* logo), color schemes
 
 ### Humans and Tools
  - https://github.com/typefoo/node-icns

app/css/app.css

@@ -10,7 +10,6 @@
 
 body {
   color: #fff;
-  background-color: #478484;
   text-align: center;
   font-size: 28px;
   font-family: 'Lato Hairline'
@@ -23,6 +22,32 @@ body {
   margin: 0 auto;
 }
 
+.color-scheme {
+  padding-top: 60px;
+}
+
+.settings {
+  padding-top: 10px;
+}
+
+.scheme {
+  display: inline-block;
+  text-align: center;
+  width: 130px;
+  font-size: 20px;
+}
+
+.color {
+  width: 20px;
+  height: 20px;
+  margin: 5px auto;
+  box-shadow: 1px 1px 10px 0 rgba(50, 50, 50, 0.6);
+}
+
+.pointer {
+  cursor: pointer;
+}
+
 .microbreak-idea,
 .about-name,
 .start-name {
@@ -31,7 +56,7 @@ body {
 
 #close,
 #about-footer {
-  color: white;
+  color: #fff;
   position: absolute;
   bottom: 20px;
   left: 50%;

app/main.js

@@ -2,7 +2,9 @@
 const {app, BrowserWindow, Tray, Menu, ipcMain} = require('electron')
 const path = require('path')
 
-const Shuffled = require('./shuffled')
+const Shuffled = require('./utils/shuffled')
+const AppSettings = require('./utils/settings')
+
 let microbreakIdeas = new Shuffled([
   'Go grab a glass of water.',
   'Slowly look all the way left, then right.',
@@ -23,9 +25,11 @@ let appIcon = null
 let microbreakWin = null
 let appStartupWin = null
 let aboutWin = null
+let settingsWin = null
 let finishMicrobreakTimer
 let startMicrobreakTimer
 let planMicrobreakTimer
+let settings
 
 function createTrayIcon () {
   if (process.platform === 'darwin') {
@@ -43,7 +47,7 @@ function showStartUpWindow () {
     frame: false,
     alwaysOnTop: true,
     title: 'stretchly',
-    backgroundColor: '#478484',
+    backgroundColor: settings.get('mainColor'),
     width: 600,
     height: 170
   })
@@ -58,7 +62,7 @@ function startMicrobreak () {
   microbreakWin = new BrowserWindow({
     frame: false,
     alwaysOnTop: true,
-    backgroundColor: '#478484',
+    backgroundColor: settings.get('mainColor'),
     title: 'stretchly'
   })
   microbreakWin.on('close', function () { microbreakWin = null })
@@ -67,7 +71,7 @@ function startMicrobreak () {
   microbreakWin.webContents.on('did-finish-load', () => {
     microbreakWin.webContents.send('breakIdea', microbreakIdeas.randomElement)
   })
-  finishMicrobreakTimer = setTimeout(finishMicrobreak, 20000)
+  finishMicrobreakTimer = setTimeout(finishMicrobreak, settings.get('microbreakDuration'))
 }
 
 function finishMicrobreak () {
@@ -77,14 +81,19 @@ function finishMicrobreak () {
 }
 
 function planMicrobreak () {
-  startMicrobreakTimer = setTimeout(startMicrobreak, 600000)
+  startMicrobreakTimer = setTimeout(startMicrobreak, settings.get('microbreakInterval'))
 }
 
 ipcMain.on('finish-microbreak', function () {
   clearTimeout(finishMicrobreakTimer)
   finishMicrobreak()
 })
 
+ipcMain.on('save-setting', function (event, key, value) {
+  settings.set(key, value)
+  settingsWin.webContents.send('renderSettings', settings.data)
+})
+
 let shouldQuit = app.makeSingleInstance(function (commandLine, workingDirectory) {
   if (appIcon) {
     // Someone tried to run a second instance
@@ -96,6 +105,7 @@ if (shouldQuit) {
   app.quit()
 }
 
+app.on('ready', loadSettings)
 app.on('ready', createTrayIcon)
 app.on('ready', planMicrobreak)
 app.on('ready', showStartUpWindow)
@@ -104,6 +114,12 @@ app.on('window-all-closed', () => {
   // do nothing, so app wont get closed
 })
 
+function loadSettings () {
+  const dir = app.getPath('userData')
+  const settingsFile = `${dir}/config.json`
+  settings = new AppSettings(settingsFile)
+}
+
 function pauseMicrobreaks () {
   if (microbreakWin) {
     clearTimeout(finishMicrobreakTimer)
@@ -123,12 +139,25 @@ function showAboutWindow () {
   const modalPath = path.join('file://', __dirname, 'about.html')
   aboutWin = new BrowserWindow({
     alwaysOnTop: true,
-    backgroundColor: '#478484',
+    backgroundColor: settings.get('mainColor'),
     title: 'About stretchly'
   })
   aboutWin.loadURL(modalPath)
 }
 
+function showSettingsWindow () {
+  const modalPath = path.join('file://', __dirname, 'settings.html')
+  settingsWin = new BrowserWindow({
+    alwaysOnTop: true,
+    backgroundColor: settings.get('mainColor'),
+    title: 'Settings'
+  })
+  settingsWin.loadURL(modalPath)
+  settingsWin.webContents.on('did-finish-load', () => {
+    settingsWin.webContents.send('renderSettings', settings.data)
+  })
+}
+
 function getTrayMenu (MicrobreaksPaused) {
   let trayMenu = []
 
@@ -138,6 +167,12 @@ function getTrayMenu (MicrobreaksPaused) {
       showAboutWindow()
     }
   }, {
+    label: 'Settings',
+    click: function () {
+      showSettingsWindow()
+    }
+  }
+  , {
     type: 'separator'
   })
 

app/settings.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Settings</title>
+    <link rel="stylesheet" type="text/css" href="css/app.css">
+  </head>
+  <body>
+    <div class="settings">
+      <div>
+        <h2>microbreaks</h2>
+        <p>
+          <span id="microbreakDurationMinus" class="pointer">-</span>
+          <span id="microbreakDuration"></span>
+          <span id="microbreakDurationPlus" class="pointer">+</span>
+          seconds break every
+          <span id="microbreakIntervalMinus" class="pointer">-</span>
+          <span id="microbreakInterval"></span>
+          <span id="microbreakIntervalPlus" class="pointer">+</span>
+          minutes
+        </p>
+      </div>
+      <div class="color-scheme">
+        <h2>color scheme</h2>
+        <div class="scheme">
+          <div class="color pointer" data-color="#478484"></div>
+          green <br/> clouds
+        </div>
+        <div class="scheme">
+          <div class="color pointer" data-color="#633738"></div>
+          autumn be blessed
+        </div>
+        <div class="scheme">
+          <div class="color pointer" data-color="#CCB6A1"></div>
+          splash of cappuccino
+        </div>
+        <div class="scheme">
+          <div class="color pointer" data-color="#A49898"></div>
+          coffee <br/> kisses
+        </div>
+        <div class="scheme">
+          <div class="color pointer" data-color="#567890"></div>
+          morning <br/> swim
+        </div>
+      </div>
+    </div>
+    <script>
+      require('./settings.js')
+    </script>
+  </body>
+</html>

app/settings.js

@@ -0,0 +1,48 @@
+const {ipcRenderer} = require('electron')
+
+let microbreakIntervalPlus = document.getElementById('microbreakIntervalPlus')
+let microbreakIntervalMinus = document.getElementById('microbreakIntervalMinus')
+let microbreakInterval = document.getElementById('microbreakInterval')
+
+let microbreakDurationPlus = document.getElementById('microbreakDurationPlus')
+let microbreakDurationMinus = document.getElementById('microbreakDurationMinus')
+let microbreakDuration = document.getElementById('microbreakDuration')
+
+microbreakIntervalPlus.addEventListener('click', function (e) {
+  if (microbreakInterval.innerHTML !== '30') {
+    ipcRenderer.send('save-setting', 'microbreakInterval', (parseInt(microbreakInterval.innerHTML, 10) + 5) * 1000 * 60)
+  }
+})
+
+microbreakIntervalMinus.addEventListener('click', function (e) {
+  if (microbreakInterval.innerHTML !== '5') {
+    ipcRenderer.send('save-setting', 'microbreakInterval', (parseInt(microbreakInterval.innerHTML, 10) - 5) * 1000 * 60)
+  }
+})
+
+microbreakDurationPlus.addEventListener('click', function (e) {
+  if (microbreakDuration.innerHTML !== '30') {
+    ipcRenderer.send('save-setting', 'microbreakDuration', (parseInt(microbreakDuration.innerHTML, 10) + 5) * 1000)
+  }
+})
+
+microbreakDurationMinus.addEventListener('click', function (e) {
+  if (microbreakDuration.innerHTML !== '5') {
+    ipcRenderer.send('save-setting', 'microbreakDuration', (parseInt(microbreakDuration.innerHTML, 10) - 5) * 1000)
+  }
+})
+
+ipcRenderer.on('renderSettings', (event, data) => {
+  let colorElements = document.getElementsByClassName('color')
+  for (var i = 0; i < colorElements.length; i++) {
+    let element = colorElements[i]
+    let color = element.dataset.color
+    element.style.background = color
+    element.addEventListener('click', function (e) {
+      ipcRenderer.send('save-setting', 'mainColor', color)
+      document.body.style.background = color
+    })
+  }
+  microbreakInterval.innerHTML = data['microbreakInterval'] / 1000 / 60
+  microbreakDuration.innerHTML = data['microbreakDuration'] / 1000
+})

app/utils/defaultSettings.js

@@ -0,0 +1,5 @@
+module.exports = {
+  microbreakDuration: 20000,
+  microbreakInterval: 600000,
+  mainColor: '#478484'
+}

app/utils/settings.js

@@ -0,0 +1,71 @@
+const fs = require('fs')
+const defaultSettings = require('./defaultSettings')
+
+class Settings {
+
+  constructor (configLocation) {
+    this.settingsFile = configLocation
+    this.data = null
+    this.lastSync = 0
+
+    if (fs.existsSync(this.settingsFile)) {
+      this._load()
+    } else {
+      this.data = defaultSettings
+      this._save(true)
+    }
+  }
+
+  get (key) {
+    if (!this.data[key]) {
+      this.set(key, defaultSettings[key])
+    }
+    return this.data[key]
+  }
+
+  set (key, value) {
+    this.data[key] = value
+    this._save()
+  }
+
+  _load (retryCount = 5) {
+    try {
+      this.data = JSON.parse(fs.readFileSync(this.settingsFile, 'utf8'))
+    } catch (e) {
+      if (retryCount > 0) {
+        setTimeout(this._load.bind(this, retryCount - 1), 10)
+        console.log('Failed to load settings JSON file, retyring in 10 milliseconds')
+        return
+      }
+      this.data = defaultSettings
+      console.log('Failed to load settings JSON file, giving up and resetting')
+    }
+  }
+
+  _save (force) {
+    const now = (new Date()).getTime()
+    // don't blast the disk
+    if ((now - this.lastSync > 250 || force)) {
+      if (this.data) {
+        try {
+          fs.writeFileSync(this.settingsFile, JSON.stringify(this.data, null, 4))
+        } catch (e) {
+          if (this.saving) clearTimeout(this.saving)
+          this.saving = setTimeout(this._save.bind(this), 275)
+        }
+      }
+      if (this.saving) clearTimeout(this.saving)
+    } else {
+      if (this.saving) clearTimeout(this.saving)
+      this.saving = setTimeout(this._save.bind(this), 275)
+    }
+    this.lastSync = now
+  }
+
+  destroy () {
+    this.data = null
+    fs.unlinkSync(this.settingsFile)
+  }
+}
+
+module.exports = Settings