add settings page (frontend currently broken!)

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
+        "child_process": "^1.0.2",
         "core-js": "^3.8.3",
         "electron": "^24.3.1",
         "vue": "^3.2.13",
@@ -5099,6 +5100,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/child_process": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
+      "integrity": "sha512-Wmza/JzL0SiWz7kl6MhIKT5ceIlnFPJX+lwUGj7Clhy5MMldsSoJR0+uvRzOS5Kv45Mq7t1PoE8TsOA9bzvb6g=="
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
@@ -19596,6 +19602,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "child_process": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
+      "integrity": "sha512-Wmza/JzL0SiWz7kl6MhIKT5ceIlnFPJX+lwUGj7Clhy5MMldsSoJR0+uvRzOS5Kv45Mq7t1PoE8TsOA9bzvb6g=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",

frontend/package.json

@@ -13,6 +13,7 @@
   },
   "main": "background.js",
   "dependencies": {
+    "child_process": "^1.0.2",
     "core-js": "^3.8.3",
     "electron": "^24.3.1",
     "vue": "^3.2.13",

frontend/src/App.vue

@@ -1,7 +1,8 @@
 <template>
     <nav>
         <router-link to="/">Home</router-link> |
-        <router-link to="/about">About</router-link>
+        <router-link to="/about">About</router-link> | 
+        <router-link to="/settings">Settings</router-link>
     </nav>
     <router-view v-slot="{ Component, route }">
         <transition :name="route.meta.transition || 'scale'" mode="out-in">

frontend/src/background.js

@@ -1,9 +1,65 @@
 'use strict'
 
-import { app, protocol, BrowserWindow } from 'electron'
+import { app, protocol, BrowserWindow } from 'electron';
-import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
-import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
+import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer';
-const isDevelopment = process.env.NODE_ENV !== 'production'
+const electron = require( 'electron' );
+const child_process = require( 'child_process' );
+const dialog = electron.dialog;
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+
+// Src for run_script function: https://stackoverflow.com/a/57058495
+
+// This function will output the lines from the script 
+// and will return the full combined output
+// as well as exit code when it's done (using the callback).
+function run_script(command, args, callback) {
+  var child = child_process.spawn(command, args, {
+      encoding: 'utf8',
+      shell: true
+  });
+  // You can also use a variable to save the output for when the script closes later
+  child.on('error', (error) => {
+      dialog.showMessageBox({
+          title: 'Title',
+          type: 'warning',
+          message: 'Error occured.\r\n' + error
+      });
+  });
+
+  child.stdout.setEncoding('utf8');
+  child.stdout.on('data', (data) => {
+      //Here is the output
+      data=data.toString();   
+      console.log(data);      
+  });
+
+  child.stderr.setEncoding('utf8');
+  child.stderr.on('data', (data) => {
+      // Return some data to the renderer process with the mainprocess-response ID
+      mainWindow.webContents.send('mainprocess-response', data);
+      //Here is the output from the command
+      console.log(data);  
+  });
+
+  child.on('close', (code) => {
+      //Here you can get the exit code of the script  
+      switch (code) {
+          case 0:
+              dialog.showMessageBox({
+                  title: 'Title',
+                  type: 'info',
+                  message: 'End process.\r\n'
+              });
+              break;
+      }
+
+  });
+  if (typeof callback === 'function')
+      callback();
+}
+
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([

frontend/src/router/index.js

@@ -10,10 +10,12 @@ const routes = [
   {
     path: '/about',
     name: 'about',
-    // route level code-splitting
+    component: () => import( '../views/AboutView.vue' )
-    // this generates a separate chunk (about.[hash].js) for this route
+  },
-    // which is lazy-loaded when the route is visited.
+  {
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    path: '/settings',
+    name: 'settings',
+    component: () => import( '../views/SettingsView.vue' )
   }
 ]
 

frontend/src/views/AboutView.vue

@@ -23,7 +23,6 @@ export default {
             appVersion: 'V1.1.0',
             latestVersion: '',
             isUpToDate: true,
-            releaseInfos: '',
         }
     },
     mounted () {

frontend/src/views/SettingsView.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="about">
+        <h1>Settings</h1>
+        <h3>Engines</h3>
+    </div>
+</template>
+
+<script>
+import run_script from '@/background.js'
+
+export default {
+    methods: {
+        run() {
+            run_script( 'ls' )
+        }
+    }
+}
+</script>