Connection messages

- Binds function to `close` event emitted by `serialport`
- Creates states and event listeners for message component
- Simplest message component

Author: murilopolese

preload.js

@@ -84,6 +84,9 @@ const Serial = {
   },
   renameFile: async (oldName, newName) => {
     return board.fs_rename(oldName, newName)
+  },
+  onDisconnect: async (fn) => {
+    board.serial.on('close', fn)
   }
 }
 

ui/arduino/app.js

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

ui/arduino/components/message.js

@@ -0,0 +1,6 @@
+function Message(state, emit) {
+  let className = state.isShowingMessage ? 'show' : ''
+  return html`
+    <div id="message" class="${className}">${state.messageText}</div>
+  `
+}

ui/arduino/index.html

@@ -24,6 +24,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/message.js" charset="utf-8"></script>
 
     <!-- Application source code -->
 		<script type="text/javascript" src="store.js" charset="utf-8"></script>

ui/arduino/store.js

@@ -17,7 +17,12 @@ function store(state, emitter) {
   state.isPortDialogOpen = false
   state.isTerminalOpen = false
   state.isFilesOpen = false
-  state.isTerminalBound = false
+
+  state.messageText = ''
+  state.isShowingMessage = false
+  state.messageTimeout = 0
+
+  state.isTerminalBound = false // XXX
 
   // SERIAL CONNECTION
   emitter.on('load-ports', async () => {
@@ -40,17 +45,22 @@ function store(state, emitter) {
 
   emitter.on('disconnect', () => {
     log('disconnect')
-    state.serialPath = null
+    if (state.isConnected) {
+      emitter.emit('message', 'Disconnected')
+    }
     state.isConnected = false
+    state.serialPath = null
     state.isTerminalOpen = false
-    state.isFilesOpen = false
+    state.serialFiles = []
     emitter.emit('render')
   })
   emitter.on('connect', async (path) => {
     log('connect')
     state.serialPath = path
     await serial.connect(path)
+    emitter.emit('message', 'Connected!')
     await serial.stop()
+
     let term = state.cache(XTerm, 'terminal').term
     if (!state.isTerminalBound) {
       state.isTerminalBound = true
@@ -63,6 +73,7 @@ function store(state, emitter) {
       term.write(data)
       term.scrollToBottom()
     })
+    serial.onDisconnect(() => emitter.emit('disconnect'))
     state.isConnected = true
     emitter.emit('update-files')
     emitter.emit('close-port-dialog')
@@ -198,6 +209,11 @@ function store(state, emitter) {
     emitter.emit('update-files')
     emitter.emit('render')
   })
+  emitter.on('close-panel', () => {
+    state.isTerminalOpen = false
+    state.isFilesOpen = false
+    emitter.emit('render')
+  })
 
   // NAMING/RENAMING FILE
   emitter.on('save-filename', async (filename) => {
@@ -233,8 +249,21 @@ function store(state, emitter) {
     emitter.emit('render')
   })
 
+  emitter.on('message', (text) => {
+    log('message', text)
+    clearInterval(state.messageTimeout)
+    state.messageText = text
+    state.isShowingMessage = true
+    state.messageTimeout = setTimeout(() => {
+      state.isShowingMessage = false
+      emitter.emit('render')
+    }, 2000)
+    emitter.emit('render')
+  })
+
   window.addEventListener('resize', () => {
     console.log('resize window')
     state.cache(AceEditor, 'editor').render()
   })
+
 }

ui/arduino/theme.css

@@ -5,6 +5,7 @@
   --white: rgb(255, 255, 255);
   --white-faded: rgba(255, 255, 255, 0.8);
   --black: #000;
+  --yellow: #f9c400;
   font-size: 2.25vh;
 }
 
@@ -237,3 +238,22 @@ img {
   justify-content: center;
   width: 10%;
 }
+
+#message {
+  position: fixed;
+  bottom: 1rem;
+  width: 100%;
+  max-width: 80%;
+  padding: 1rem;
+  background: var(--yellow);
+  z-index: 9999;
+  text-align: center;
+  left: 50%;
+  transform: translate(-50%, 100%);
+  opacity: 0;
+  transition: all 0.25s;
+}
+#message.show {
+  opacity: 0.9;
+  transform: translate(-50%, 0%);
+}