use localStorage instead of JSON file -> fix config reload

MAKIO135 · Feb 18, 2019 · d187572 · d187572
1 parent 88a5de5
commit d187572
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 38 deletions.
diff --git a/desktop/index.html b/desktop/index.html
@@ -28,5 +28,10 @@
         <script>
             require('./src/scripts/main.js')
         </script>
+        <!-- <script>
+            document.addEventListener("keydown", function (e) {
+                require('electron').remote.getCurrentWindow().toggleDevTools();
+            });
+        </script> -->
     </body>
 </html>
diff --git a/desktop/index.js b/desktop/index.js
@@ -1,12 +1,11 @@
 const {app, BrowserWindow} = require('electron')
 
 app.win = null
-app.config = require('./src/config.json')
 
 app.on('ready', () => {
 	app.win = new BrowserWindow({
-		width: app.config.width,
-		height: app.config.height,
+		width: 300,
+		height: 330,
 		minWidth: 250,
 		minHeight: 160,
 		resizable: true,
@@ -22,7 +21,7 @@ app.on('ready', () => {
 		win = null
 		app.quit()
 	})
-    
+
 	app.on('window-all-closed', () => {
 		app.quit()
 	})

diff --git a/desktop/src/config.json b/desktop/src/config.json
diff --git a/desktop/src/scripts/helpers.js b/desktop/src/scripts/helpers.js
@@ -2,12 +2,12 @@ const fs = require('fs')
 const osc = require('node-osc')
 
 
-const formatHost = (host) => {
+const formatHost = host => {
     host = host.match(/\b(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9]):[0-9]+\b/)
     return host ? host[0] : false
 }
 
-const parseInputMsg = (data) => {
+const parseInputMsg = data => {
     const parseInputArg = arg => {
         // Float
         if (/\b\d+\.d?\b/.test(arg) || /\b\d?\.d+\b/.test(arg)) {
@@ -32,7 +32,7 @@ const parseInputMsg = (data) => {
     return oscMsg
 }
 
-const parseOrcaMsg = (data) => {
+const parseOrcaMsg = data => {
     const parseOrcaArg = arg => {
         // Float
         if (/\b\d+f\b/.test(arg)) {
@@ -104,7 +104,7 @@ const focusContentEditable = (el, startOffset, endOffset) => {
     selection.addRange(range)
 }
 
-const unfocus = (el) => {
+const unfocus = el => {
     // Unfocus input
     el.blur()
 
@@ -129,7 +129,7 @@ const hideTooltip = () => {
     tooltip.classList.remove('visible')
 }
 
-const bangHost = (el) => {
+const bangHost = el => {
     // Timeout needed for transition
     el.parentElement.classList.add('active')
     if(el.timeout) clearTimeout(el.timeout)
@@ -138,15 +138,25 @@ const bangHost = (el) => {
     }, 0)
 }
 
-const updateConfig = (data) => {
-    fs.writeFile('./src/config.json', JSON.stringify(data,null,4), 'utf8', error => {
-        if(error) {
-            console.log({ error })
-            return
+const loadConfig = () => {
+    if(!localStorage.getItem('config')) {
+        const initialConfig = {
+            ORCA_PORT: 49160,
+            width: 300,
+            height: 330,
+            hosts: [
+                '127.0.0.1:8000',
+                '127.0.0.1:12000'
+            ],
+            displayShortcuts: true
         }
+        localStorage.setItem('config', JSON.stringify(initialConfig))
+    }
+    return JSON.parse(localStorage.getItem('config'))
+}
 
-        console.log('config.json updated.')
-    })
+const updateConfig = data => {
+    localStorage.setItem('config', JSON.stringify(data))
 }
 
 const debounce = (fn, ms = 0) => {
@@ -175,6 +185,7 @@ module.exports = {
     displayTooltip,
     hideTooltip,
     bangHost,
+    loadConfig,
     updateConfig,
     debounce
 }
diff --git a/desktop/src/scripts/main.js b/desktop/src/scripts/main.js
@@ -3,6 +3,8 @@ const udp = require('./udp')
 const osc = require('./osc')
 const helpers = require('./helpers')
 
+const config = helpers.loadConfig()
+
 const theme = new Theme({background: '#000000', f_high: '#ffffff', f_med: '#777777', f_low: '#444444', f_inv: '#000000', b_high: '#eeeeee', b_med: '#72dec2', b_low: '#444444', b_inv: '#ffb545'})
 theme.install(document.body)
 theme.start()
@@ -11,13 +13,14 @@ const hostsList = document.getElementById('hosts')
 const addButton = document.querySelector('[data-action="add"]')
 const shortcuts = document.getElementById('shortcuts')
 addEventListener('load', e => {
-    if(app.config.displayShortcuts) shortcuts.classList.toggle('open')
+    app.win.setSize(config.width, config.height)
+    if(config.displayShortcuts) shortcuts.classList.toggle('open')
 })
 
 // Used to prevent checking blur event after 'Enter'
 let lastKey = undefined
 
-let hosts = [... new Set(app.config.hosts.map(helpers.formatHost).filter(d => d))]
+let hosts = [... new Set(config.hosts.map(helpers.formatHost).filter(d => d))]
 
 hosts.forEach(host => {
     addHostLi(host, false)
@@ -34,8 +37,8 @@ function validateHost(el) {
         if(index < hosts.length) {
             hosts.splice(index, 1)
             osc.removeClient(index)
-            app.config.hosts = hosts
-            helpers.updateConfig(app.config)
+            config.hosts = hosts
+            // helpers.updateConfig(config)
             app.win.setSize(app.win.getSize()[0], shortcuts.getBoundingClientRect().bottom)
         }
 
@@ -97,8 +100,8 @@ function validateHost(el) {
             hosts.push(host)
             osc.createClient(ip, port)
         }
-        app.config.hosts = hosts
-        helpers.updateConfig(app.config)
+        config.hosts = hosts
+        helpers.updateConfig(config)
         el.dataset.host = host
     }
 }
@@ -163,10 +166,10 @@ function addHostLi(host, selected = true) {
 // Events
 addEventListener('resize', helpers.debounce(e => {
     // update config.json
-    app.config.width = innerWidth
-    app.config.height = innerHeight
-    app.config.displayShortcuts = shortcuts.classList.contains('open')
-    helpers.updateConfig(app.config)
+    config.width = innerWidth
+    config.height = innerHeight
+    config.displayShortcuts = shortcuts.classList.contains('open')
+    helpers.updateConfig(config)
 }, 1000))
 
 addButton.addEventListener('click', e => {
@@ -177,7 +180,10 @@ addButton.addEventListener('click', e => {
 shortcuts.querySelector('p').addEventListener('click', () => {
     shortcuts.classList.toggle('open')
     app.win.setSize(app.win.getSize()[0], shortcuts.getBoundingClientRect().bottom)
-    helpers.updateConfig(app.config)
+    config.width = innerWidth
+    config.height = innerHeight
+    config.displayShortcuts = shortcuts.classList.contains('open')
+    helpers.updateConfig(config)
 })
 
 udp.on('message', msg => {
@@ -191,4 +197,4 @@ udp.on('message', msg => {
     })
 })
 
-udp.bind(app.config.ORCA_PORT)
+udp.bind(config.ORCA_PORT)