feat: enable new script and delete script buttons

src/renderer/components/ConsolePage/CodeEditorModal.vue

@@ -2,12 +2,10 @@
   <b-modal :id="modalID"
            :ref="modalID"
            centered
-           title="编辑脚本"
+           :title="title"
            size="lg"
-           @ok.prevent="onCommOk"
-           @shown="onShown">
-	<div id="editor">
-import {print, exit, sleep, listen, command2term, command2local} from '../test-helper'
+           @ok="onOk" >
+    <div id="editor">import {print, exit, sleep, listen, command2term, command2local} from '../test-helper'
 
 // it's recommended to define a function and then execute it at the end
 async function start () {
@@ -16,6 +14,11 @@ async function start () {
 }
 
 start()</div>
+    <br/>
+    <b-form-input v-model="scriptName"
+                  type="text"
+                  v-show="newFile"
+                  placeholder="请输入要保存的文件名"></b-form-input>
   </b-modal>
 </template>
 
@@ -35,25 +38,65 @@ start()</div>
     ],
     data () {
       return {
-        editor: null
+        editor: null,
+        script: null,
+        title: null,
+        codeTemplate: null,
+        newFile: false,
+        scriptName: null
       }
     },
     mounted () {
       this.editor = ace.edit('editor')
       this.editor.setTheme('ace/theme/twilight')
       this.editor.session.setMode('ace/mode/javascript')
+      this.codeTemplate = this.editor.getValue()
+      this.eventHub.$on(constant.EVENT_UPDATE_SCRIPT, value => {
+        this.script = path.join(__static, 'scripts', value)
+      })
       this.eventHub.$on(constant.EVENT_EDIT_SCRIPT, value => {
-        let filePath = path.join(__static, 'scripts', value)
-        let content = fs.readFileSync(filePath).toString()
+        if (!this.script) {
+          this.title = 'New Script'
+          this.scriptName = ''
+          this.newFile = true
+          return
+        }
+        this.newFile = false
+        this.title = path.basename(this.script)
+        let content = fs.readFileSync(this.script).toString()
         this.editor.setValue(content)
+        this.editor.moveCursorTo(0, 0)
+      })
+      this.eventHub.$on(constant.EVENT_NEW_SCRIPT, value => {
+        this.newFile = true
+        this.title = 'New Script'
+        this.scriptName = ''
+        this.editor.setValue(this.codeTemplate)
+        this.editor.moveCursorTo(0, 0)
       })
     },
     computed: {
     },
     methods: {
-      onShown (evt) {
-      },
-      onCommOk (evt) {
+      onOk (evt) {
+        if (this.newFile) {
+          if (this.scriptName) {
+            this.script = path.join(__static, 'scripts', this.scriptName)
+            if (path.extname(this.scriptName) === '') {
+              this.script += '.js'
+            } else if (path.extname(this.scriptName) !== '.js') {
+              alert('请保存为js文件')
+              evt.preventDefault()
+              return
+            }
+          } else {
+            alert('请输入要保存的文件名')
+            evt.preventDefault()
+            return
+          }
+        }
+        fs.writeFileSync(this.script, this.editor.getValue())
+        this.eventHub.$emit(constant.EVENT_REFRESH_SCRIPT, this.script)
       }
     }
   }

src/renderer/components/ConsolePage/Console.vue

@@ -32,8 +32,8 @@
                   <b-button-group size="sm">
                     <b-btn class="flex-grow-1" variant="primary" @click="onRunScript">运行</b-btn>
                     <b-btn class="flex-grow-1" variant="warning" @click="onStopScript">停止</b-btn>
-                    <b-btn class="" @click="onEditScript" v-b-modal.code-editor-modal>编辑</b-btn>
-                    <b-btn class="" @click="onAddScript" v-b-modal.code-editor-modal>添加</b-btn>
+                    <b-btn class="" @click="onEditScript" v-b-modal.codeEditorModal>编辑</b-btn>
+                    <b-btn class="" @click="onAddScript" v-b-modal.codeEditorModal>添加</b-btn>
                     <b-btn variant="danger" @click="onDeleteScript">删除</b-btn>
                   </b-button-group>
                 </div>
@@ -53,11 +53,11 @@
         </b-btn>
       </div>
     </b-tab>
-    <b-nav-item slot="tabs" v-b-modal.comm-config-modal href="#">
+    <b-nav-item slot="tabs" v-b-modal.commConfigModal href="#">
       +
     </b-nav-item>
-    <iot-comm-config modalID="comm-config-modal"></iot-comm-config>
-    <iot-code-editor modalID="code-editor-modal"
+    <iot-comm-config modalID="commConfigModal"></iot-comm-config>
+    <iot-code-editor modalID="codeEditorModal"
       :eventHub="editScriptEventHub" />
     <!-- Render this if no tabs -->
     <div slot="empty" style="margin: auto" class="h-100 text-center text-muted">
@@ -100,29 +100,15 @@
     },
     watch: {
       scriptSelected (value) {
-        this.editScriptEventHub.$emit(constant.EVENT_EDIT_SCRIPT, value + '.js')
+        this.editScriptEventHub.$emit(constant.EVENT_UPDATE_SCRIPT, value + '.js')
       }
     },
     mounted () {
-      let scriptPath = path.join(__static, 'scripts')
-      fs.readdir(scriptPath, (err, files) => {
-        if (err) {
-          alert(err)
-          return
-        }
-        files.forEach(file => {
-          fs.stat(path.join(scriptPath, file), (err, stats) => {
-            if (err) {
-              alert(err)
-              return
-            }
-            if (stats.isFile()) {
-              if (file.endsWith('.js')) file = file.slice(0, -3)
-              this.scripts.push(file)
-            }
-          })
-        })
+      this.editScriptEventHub.$on(constant.EVENT_REFRESH_SCRIPT, value => {
+        this.scriptSelected = path.basename(value, '.js')
+        this.updateScriptList()
       })
+      this.updateScriptList()
 
       ipcRenderer.on(constant.EVENT_ASYNC_REPLY, (event, value) => {
         if (value.event) {
@@ -152,6 +138,28 @@
       })
     },
     methods: {
+      updateScriptList () {
+        this.scripts = []
+        let scriptPath = path.join(__static, 'scripts')
+        fs.readdir(scriptPath, (err, files) => {
+          if (err) {
+            alert(err)
+            return
+          }
+          files.forEach(file => {
+            fs.stat(path.join(scriptPath, file), (err, stats) => {
+              if (err) {
+                alert(err)
+                return
+              }
+              if (stats.isFile()) {
+                if (file.endsWith('.js')) file = file.slice(0, -3)
+                this.scripts.push(file)
+              }
+            })
+          })
+        })
+      },
       closeTab (i) {
         this.$store.commit('DEL_TAB', i)
         this.$store.commit('DEL_TERMINAL', i)
@@ -180,10 +188,19 @@
         })
       },
       onEditScript (e) {
+        this.editScriptEventHub.$emit(constant.EVENT_EDIT_SCRIPT)
       },
       onAddScript (e) {
+        this.editScriptEventHub.$emit(constant.EVENT_NEW_SCRIPT)
       },
       onDeleteScript (e) {
+        let scriptPath = path.join(__static, 'scripts', this.scriptSelected + '.js')
+        if (fs.existsSync(scriptPath)) {
+          fs.unlink(scriptPath, err => {
+            if (err) throw err
+            this.updateScriptList()
+          })
+        }
       }
     },
     components: {

src/utils/Constant.js

@@ -11,7 +11,10 @@ const EVENT_TERMINAL_INPUT = 'TERMINAL_INPUT'
 const EVENT_TERMINAL_OUTPUT = 'TERMINAL_OUTPUT'
 const EVENT_UPDATE = 'IS_UPDATE_NOW'
 const EVENT_CHECK_FOR_UPDATE = 'CHECK_FOR_UPDATE'
+const EVENT_UPDATE_SCRIPT = 'UPDATE_SCRIPT'
 const EVENT_EDIT_SCRIPT = 'EDIT_SCRIPT'
+const EVENT_NEW_SCRIPT = 'NEW_SCRIPT'
+const EVENT_REFRESH_SCRIPT = 'REFRESH_SCRIPT'
 
 const MSG_UPDATE_NOW = 0
 const MSG_UPDATE_ON_QUIT = 1
@@ -32,6 +35,9 @@ export {
   EVENT_UPDATE,
   EVENT_CHECK_FOR_UPDATE,
   EVENT_EDIT_SCRIPT,
+  EVENT_NEW_SCRIPT,
+  EVENT_UPDATE_SCRIPT,
+  EVENT_REFRESH_SCRIPT,
   MSG_UPDATE_NOW,
   MSG_UPDATE_ON_QUIT,
   MSG_NO_UPDATE