Show a dialog to decide where to create new file

Author: murilopolese

ui/arduino/app.js

@@ -7,6 +7,7 @@ function App(state, emit) {
         ${Editor(state, emit)}
         ${Panel(state, emit)}
       </div>
+      ${NewFileDialog(state, emit)}
       ${PortDialog(state, emit)}
       ${Message(state, emit)}
     </div>

ui/arduino/components/newfiledialog.js

@@ -0,0 +1,24 @@
+function NewFileDialog(state, emit) {
+  if (!state.isNewFileDialogOpen) return null
+  function PortItem(port) {
+    return html`<li onclick=${() => emit('connect', port.path)}>${port.path}</li>`
+  }
+  function closeBackdrop(e) {
+    if (e.target.id == 'backdrop') {
+      emit('close-new-file-dialog')
+    }
+  }
+  let serialOption = html`
+    <li onclick=${() => emit('new-file', 'serial')}>MicroPython Board</li>
+  `
+  return html`
+    <div id="backdrop" onclick=${closeBackdrop}>
+      <div id="dialog">
+        <ul>
+          ${state.isConnected ? serialOption : null}
+          <li onclick=${() => emit('new-file', 'disk')}>Computer Storage</li>
+        </ul>
+      </div>
+    </div>
+  `
+}

ui/arduino/components/toolbar.js

@@ -33,7 +33,7 @@ function Toolbar(state, emit) {
     icon: 'icons/New.svg',
     label: 'New',
     disabled: false,
-    onclick: () => emit('new-file')
+    onclick: () => emit('open-new-file-dialog')
   })
   const openFolder = Button({
     icon: 'icons/Open.svg',

ui/arduino/index.html

@@ -25,6 +25,7 @@
     <script type="text/javascript" src="components/panel_files.js" charset="utf-8"></script>
     <script type="text/javascript" src="components/panel.js" charset="utf-8"></script>
     <script type="text/javascript" src="components/portdialog.js" charset="utf-8"></script>
+    <script type="text/javascript" src="components/newfiledialog.js" charset="utf-8"></script>
     <script type="text/javascript" src="components/message.js" charset="utf-8"></script>
 
     <!-- Application source code -->

ui/arduino/store.js

@@ -25,6 +25,7 @@ function store(state, emitter) {
 
   state.isConnected = false
   state.isPortDialogOpen = false
+  state.isNewFileDialogOpen = false
   state.isTerminalOpen = false
   state.isFilesOpen = false
 
@@ -114,11 +115,23 @@ function store(state, emitter) {
   })
 
   // FILE MANAGEMENT
-  emitter.on('new-file', () => {
-    log('new-file')
+  emitter.on('open-new-file-dialog', () => {
+    log('open-new-file-dialog')
+    state.isNewFileDialogOpen = true
+    emitter.emit('render')
+  })
+  emitter.on('close-new-file-dialog', () => {
+    log('close-new-file-dialog')
+    state.isNewFileDialogOpen = false
+    emitter.emit('render')
+  })
+  emitter.on('new-file', (dev) => {
+    log('select-device', dev)
+    state.selectedDevice = dev
     let editor = state.cache(AceEditor, 'editor').editor
     state.selectedFile = 'undefined'
     editor.setValue('')
+    emitter.emit('close-new-file-dialog')
     emitter.emit('render')
   })
   emitter.on('save', async () => {