Prompt on code change

murilopolese · murilopolese · commit 71c7c41bcd00 · 2023-05-31T16:37:42.000+02:00
diff --git a/ui/arduino/components/editor.js b/ui/arduino/components/editor.js
@@ -1,6 +1,8 @@
 function Editor(state, emit) {
+  const el = state.cache(AceEditor, 'editor')
+  el.codeChange = () => emit('code-change')
   return html`
-    ${state.cache(AceEditor, 'editor').render()}
+    ${el.render()}
   `
 }
 
@@ -23,6 +25,7 @@ for i in range(0, 10):
     sleep(0.1)
 
 `)
+    this.editor.session.on('change', () => this.codeChange())
   }
 
   createElement(content) {
@@ -31,9 +34,12 @@ for i in range(0, 10):
 
   update(newContent) {
     if (newContent) {
+      console.log('newContent', newContent)
       this.editor.setValue(newContent)
     }
     setTimeout(() => this.editor.resize(), 10)
     return false
   }
+
+  codeChange() { return }
 }
diff --git a/ui/arduino/store.js b/ui/arduino/store.js
@@ -35,6 +35,7 @@ function store(state, emitter) {
   state.panelHeight = null
 
   state.blocking = false
+  state.unsavedChanges = false
 
   // SERIAL CONNECTION
   emitter.on('load-ports', async () => {
@@ -145,6 +146,7 @@ function store(state, emitter) {
     state.selectedDevice = dev
     let editor = state.cache(AceEditor, 'editor').editor
     state.selectedFile = null
+    state.unsavedChanges = false
     editor.setValue('')
     emitter.emit('close-new-file-dialog')
     emitter.emit('render')
@@ -157,7 +159,6 @@ function store(state, emitter) {
     let filename = state.selectedFile || 'undefined'
     let deviceName = state.selectedDevice === 'serial' ? 'board' : 'disk'
 
-
     state.blocking = true
     emitter.emit('message', `Saving ${filename} on ${deviceName}`)
 
@@ -167,6 +168,7 @@ function store(state, emitter) {
         contents
       )
       setTimeout(() => emitter.emit('update-files'), 1000)
+      state.unsavedChanges = false
       emitter.emit('message', `Saved`, 1000)
     }
 
@@ -177,6 +179,7 @@ function store(state, emitter) {
         contents
       )
       setTimeout(() => emitter.emit('update-files'), 100)
+      state.unsavedChanges = false
       emitter.emit('message', `Saved`, 500)
     }
 
@@ -210,7 +213,10 @@ function store(state, emitter) {
   })
   emitter.on('select-file', async (device, filename) => {
     log('select-file')
-
+    if (state.unsavedChanges) {
+      let response = confirm(`Loading a new file will discard any unsaved changes.\nPress OK to accept or Cancel to abort.`)
+      if (!response) return
+    }
     state.selectedDevice = device
 
     /*
@@ -237,10 +243,11 @@ function store(state, emitter) {
       )
     }
 
-    state.selectedFile = filename
     let editor = state.cache(AceEditor, 'editor').editor
     editor.setValue(cleanCharacters(content))
 
+    state.selectedFile = filename
+    state.unsavedChanges = false
     state.blocking = false
     emitter.emit('render')
   })
@@ -381,6 +388,11 @@ function store(state, emitter) {
     }
   })
 
+  emitter.on('code-change', () => {
+    log('code-changed')
+    state.unsavedChanges = true
+  })
+
   // PANEL MANAGEMENT
   emitter.on('show-terminal', () => {
     log('show-terminal')
@@ -481,6 +493,7 @@ function store(state, emitter) {
         state.selectedFile = oldFilename
         state.isEditingFilename = false
         state.blocking = false
+        state.unsavedChanges = false
         emitter.emit('render')
       }
     }
@@ -530,6 +543,7 @@ function store(state, emitter) {
     }
     if (state.selectedDevice === device) {
       state.selectedFile = null
+      state.unsavedChanges = false
     }
     emitter.emit('update-files')
   })
@@ -553,6 +567,7 @@ function store(state, emitter) {
     }
     if (state.selectedDevice === device) {
       state.selectedFile = null
+      state.unsavedChanges = false
     }
     emitter.emit('update-files')
   })

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,8 @@`
`1`	`1`	`function Editor(state, emit) {`
	`2`	`+ const el = state.cache(AceEditor, 'editor')`
	`3`	`+ el.codeChange = () => emit('code-change')`
`2`	`4`	return html`
`3`		`- ${state.cache(AceEditor, 'editor').render()}`
	`5`	`+ ${el.render()}`
`4`	`6`	`
`5`	`7`	`}`
`6`	`8`
`@@ -23,6 +25,7 @@ for i in range(0, 10):`
`23`	`25`	`sleep(0.1)`
`24`	`26`
`25`	`27`	`)
	`28`	`+ this.editor.session.on('change', () => this.codeChange())`
`26`	`29`	`}`
`27`	`30`
`28`	`31`	`createElement(content) {`
`@@ -31,9 +34,12 @@ for i in range(0, 10):`
`31`	`34`
`32`	`35`	`update(newContent) {`
`33`	`36`	`if (newContent) {`
	`37`	`+ console.log('newContent', newContent)`
`34`	`38`	`this.editor.setValue(newContent)`
`35`	`39`	`}`
`36`	`40`	`setTimeout(() => this.editor.resize(), 10)`
`37`	`41`	`return false`
`38`	`42`	`}`
	`43`	`+`
	`44`	`+ codeChange() { return }`
`39`	`45`	`}`