refactor: conversion to vue3 composition api

package-lock.json

@@ -11,14 +11,12 @@
       "license": "MIT",
       "dependencies": {
         "@electron/remote": "~2.0.1",
-        "@mdi/font": "~7.1.96",
         "@vueuse/core": "~8.7.5",
         "electron-log": "~4.4.1",
         "electron-store": "~8.1.0",
         "electron-updater": "~4.6.5",
         "electron-window-state": "~5.0.3",
         "encoding": "~0.1.13",
-        "floating-vue": "~2.0.0-beta.20",
         "moment": "~2.29.4",
         "pinia": "~2.0.28",
         "source-map-support": "~0.5.20",
@@ -1960,17 +1958,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "0.3.1",
-      "license": "MIT"
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "0.1.10",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^0.3.0"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "dev": true,
@@ -2119,11 +2106,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@mdi/font": {
-      "version": "7.1.96",
-      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.1.96.tgz",
-      "integrity": "sha512-Imag6npmfkBDi2Ze2jiZVAPTDIKLxhz2Sx82xJ2zctyAU5LYJejLI5ChnDwiD9bMkQfVuzEsI98Q8toHyC+HCg=="
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "dev": true,
@@ -6858,17 +6840,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/floating-vue": {
-      "version": "2.0.0-beta.20",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^0.1.10",
-        "vue-resize": "^2.0.0-alpha.1"
-      },
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "dev": true,
@@ -12984,13 +12955,6 @@
         "webpack": "^4.1.0 || ^5.0.0-0"
       }
     },
-    "node_modules/vue-resize": {
-      "version": "2.0.0-alpha.1",
-      "license": "MIT",
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "dev": true,
@@ -14869,15 +14833,6 @@
         }
       }
     },
-    "@floating-ui/core": {
-      "version": "0.3.1"
-    },
-    "@floating-ui/dom": {
-      "version": "0.1.10",
-      "requires": {
-        "@floating-ui/core": "^0.3.0"
-      }
-    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "dev": true,
@@ -14979,11 +14934,6 @@
       "version": "2.0.4",
       "dev": true
     },
-    "@mdi/font": {
-      "version": "7.1.96",
-      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.1.96.tgz",
-      "integrity": "sha512-Imag6npmfkBDi2Ze2jiZVAPTDIKLxhz2Sx82xJ2zctyAU5LYJejLI5ChnDwiD9bMkQfVuzEsI98Q8toHyC+HCg=="
-    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "dev": true,
@@ -18116,13 +18066,6 @@
       "version": "3.2.7",
       "dev": true
     },
-    "floating-vue": {
-      "version": "2.0.0-beta.20",
-      "requires": {
-        "@floating-ui/dom": "^0.1.10",
-        "vue-resize": "^2.0.0-alpha.1"
-      }
-    },
     "follow-redirects": {
       "version": "1.15.2",
       "dev": true
@@ -21916,10 +21859,6 @@
         "loader-utils": "^2.0.0"
       }
     },
-    "vue-resize": {
-      "version": "2.0.0-alpha.1",
-      "requires": {}
-    },
     "watchpack": {
       "version": "2.4.0",
       "dev": true,

package.json

@@ -1,8 +1,8 @@
 {
   "name": "mizar",
-  "productName": "Mizar TCP Debugger",
+  "productName": "Mizar TCP Tester",
   "version": "1.0.0",
-  "description": "A TCP client/server debug tool",
+  "description": "A TCP client/server test/debug tool",
   "license": "MIT",
   "scripts": {
     "debug": "npm run rebuild:electron && npm run debug-runner",
@@ -111,14 +111,12 @@
   },
   "dependencies": {
     "@electron/remote": "~2.0.1",
-    "@mdi/font": "~7.1.96",
     "@vueuse/core": "~8.7.5",
     "electron-log": "~4.4.1",
     "electron-store": "~8.1.0",
     "electron-updater": "~4.6.5",
     "electron-window-state": "~5.0.3",
     "encoding": "~0.1.13",
-    "floating-vue": "~2.0.0-beta.20",
     "moment": "~2.29.4",
     "pinia": "~2.0.28",
     "source-map-support": "~0.5.20",

src/main/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, nativeImage, ipcMain } from 'electron';
+import { app, BrowserWindow, nativeImage, ipcMain, Menu } from 'electron';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as Store from 'electron-store';
@@ -10,10 +10,10 @@ import * as remoteMain from '@electron/remote/main';
 
 Store.initRenderer();
 const settingsStore = new Store({ name: 'settings' });
-const appTheme = settingsStore.get('application_theme');
+// const appTheme = settingsStore.get('application_theme');
 const isDevelopment = process.env.NODE_ENV !== 'production';
 const isMacOS = process.platform === 'darwin';
-const isLinux = process.platform === 'linux';
+// const isLinux = process.platform === 'linux';
 const isWindows = process.platform === 'win32';
 const gotTheLock = app.requestSingleInstanceLock();
 
@@ -33,7 +33,7 @@ async function createMainWindow () {
       minWidth: 900,
       minHeight: 500,
       show: !isWindows,
-      title: 'Mizar',
+      title: 'Mizar TCP Tester',
       icon: nativeImage.createFromDataURL(icon.default),
       webPreferences: {
          nodeIntegration: true,
@@ -42,19 +42,20 @@ async function createMainWindow () {
          spellcheck: false
       },
       autoHideMenuBar: true,
-      titleBarStyle: isLinux ? 'default' :'hidden',
+      // titleBarStyle: isLinux ? 'default' :'hidden',
-      titleBarOverlay: isWindows
+      // titleBarOverlay: isWindows
-         ? {
+      //    ? {
-            color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
+      //       color: appTheme === 'dark' ? '#383e42' : '#fff',
-            symbolColor: appTheme === 'dark' ? '#fff' : '#000',
+      //       symbolColor: appTheme === 'dark' ? '#fff' : '#000',
-            height: 30
+      //       height: 30
-         }
+      //    }
-         : false,
+      //    : false,
       trafficLightPosition: isMacOS ? { x: 10, y: 8 } : undefined,
       backgroundColor: '#1d1d1d'
    });
 
    mainWindowState.manage(window);
+   Menu.setApplicationMenu(null);
    window.on('moved', saveWindowState);
 
    remoteMain.enable(window.webContents);
@@ -199,7 +200,7 @@ ipcMain.on('resetReports', () => {
 
 ipcMain.on('getPorts', (event) => {
    try {
-      let ports = fs.readFileSync(`${storagePath}/storage/serverPorts.json`);
+      let ports = '';// fs.readFileSync(`${storagePath}/storage/serverPorts.json`);
       ports = JSON.parse(ports);
       event.sender.send('portList', ports);
    }
@@ -213,16 +214,16 @@ ipcMain.on('getPorts', (event) => {
 });
 
 ipcMain.on('updatePorts', (event, messageList) => {
-   try {
+   // try {
-      fs.writeFileSync(`${storagePath}/storage/serverPorts.json`, JSON.stringify(messageList, null, '   '));
+   //    fs.writeFileSync(`${storagePath}/storage/serverPorts.json`, JSON.stringify(messageList, null, '   '));
-   }
+   // }
-   catch (error) {
+   // catch (error) {
-      const data = {
+   //    const data = {
-         message: error.stack,
+   //       message: error.stack,
-         color: 'red'
+   //       color: 'red'
-      };
+   //    };
-      event.sender.send('serverLog', data);
+   //    event.sender.send('serverLog', data);
-   }
+   // }
 });
 
 function saveWindowState () {

src/renderer/App.vue

@@ -8,12 +8,12 @@
          @select-tab="selectTab"
       />
       <div id="main">
-         <Client
+         <ClientTab
             v-show="selTab === 0"
             ref="client"
             @client-status="clientUpdateStatus"
          />
-         <Server
+         <ServerTab
             v-show="selTab === 1"
             ref="server"
             @server-status="serverUpdateStatus"
@@ -24,12 +24,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+// import { useI18n } from 'vue-i18n';
-import AppHeader from '@/components/app-header.vue';
+import AppHeader from '@/components/AppHeader.vue';
-import Client from '@/components/client.vue';
+import ClientTab from '@/components/ClientTab.vue';
-import Server from '@/components/server.vue';
+import ServerTab from '@/components/ServerTab.vue';
 
-const { t } = useI18n();
+// const { t } = useI18n();
 
 const selTab = ref(0);
 const clientStatus = ref(0);

src/renderer/components/AppHeader.vue

@@ -1,8 +1,5 @@
 <template>
    <header id="header">
-      <!-- <div id="appTitle">
-         <h2>Mizar TCP Tester</h2>
-      </div> -->
       <nav id="appTabs">
          <div
             class="navTab"
@@ -36,18 +33,16 @@
    </header>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+defineProps({
-   name: 'AppHeader',
-   props: {
    selTab: Number,
    clientStatus: Number,
    serverStatus: Number
-   },
+});
-   methods: {
+
-      selectTab (value) {
+const emit = defineEmits(['selectTab']);
-         this.$emit('selectTab', value);
+
-      }
+const selectTab = (value: number) => {
-   }
+   emit('selectTab', value);
 };
 </script>

src/renderer/components/BaseConsole.vue

@@ -0,0 +1,27 @@
+<template>
+   <div ref="root" class="console box-50">
+      <div
+         v-for="(log, index) in logs"
+         :key="index"
+         class="log"
+         :class="log.color"
+      >
+         {{ log.time }} - <span v-html="log.message" />
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, onUpdated } from 'vue';
+
+defineProps({
+   logs: Array as PropType<{color: string; time: string; message: string}[]>
+});
+
+const root = ref(null);
+
+onUpdated(() => {
+   const elem = root.value;
+   elem.scrollTop = elem.scrollHeight;
+});
+</script>

src/renderer/components/ClientTab.vue

@@ -204,7 +204,7 @@
             </div>
          </form>
          <transition name="fade">
-            <client-reports
+            <ClientTabReports
                v-if="reportList.length > 0"
                ref="reports"
                :reports="reportList"
@@ -218,35 +218,23 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import Console from './console.vue';
+import { ref, computed } from 'vue';
-import Hosts from './hosts.vue';
+import Console from './BaseConsole.vue';
-import Messages from './messages.vue';
+import Hosts from './ClientTabHosts.vue';
-import NewHost from './new-host.vue';
+import Messages from './ModalMessages.vue';
-import NewMessage from './new-message.vue';
+import NewHost from './ModalNewHost.vue';
-import EditMessage from './edit-message.vue';
+import NewMessage from './ModalNewMessage.vue';
-import SaveConfig from './save-config.vue';
+import EditMessage from './ModalEditMessage.vue';
-import LoadConfig from './load-config.vue';
+import SaveConfig from './ModalSaveConfig.vue';
-import ClientReports from './client-reports.vue';
+import LoadConfig from './ModalLoadConfig.vue';
+import ClientTabReports from './ClientTabReports.vue';
 import { ipcRenderer } from 'electron';
 
-export default {
+const emit = defineEmits(['clientStatus']);
-   name: 'Client',
+
-   components: {
+const running = ref(0);
-      Console,
+const params = ref({
-      Hosts,
-      Messages,
-      NewHost,
-      NewMessage,
-      EditMessage,
-      SaveConfig,
-      LoadConfig,
-      ClientReports
-   },
-   data () {
-      return {
-         running: 0,
-         params: {
    nMsgs: 1,
    nClients: 1,
    tMin: 0,
@@ -257,204 +245,217 @@ export default {
    persistentConnection: false,
    stepTest: false,
    loop: false
-         },
+});
-         logs: [],
+const logs = ref([]);
-         hostList: [],
+const hostList = ref([]);
-         messageList: [],
+const messageList = ref([]);
-         reportList: [],
+const reportList = ref([]);
-         popNewHost: false,
+const popNewHost = ref(false);
-         popNewMessage: false,
+const popNewMessage = ref(false);
-         popEditMessage: false,
+const popEditMessage = ref(false);
-         popSaveConfig: false,
+const popSaveConfig = ref(false);
-         popLoadConfig: false,
+const popLoadConfig = ref(false);
-         idEditedMsg: null
+const idEditedMsg = ref(null);
-      };
-   },
-   computed: {
-      slicedLogs () {
-         if (this.logs.length > 500)
-            this.logs = this.logs.slice(-500);
 
-         return this.logs;
+const slicedLogs = computed(() => {
-      }
+   if (logs.value.length > 500)
-   },
+      logs.value = logs.value.slice(-500);
-   created () {
-      ipcRenderer.on('clientLog', (event, data) => {
-         let time = new Date().toLocaleString();
-         let { message, color } = data;
-         let log = {
-            time: time,
-            message,
-            color
-         };
 
-         this.logs.push(log);
+   return logs.value;
 });
 
-      ipcRenderer.on('testFinish', (event, message) => {
+const startTest = () => {
-         this.running = 0;
+   if (params.value.tMin < 100 && params.value.trace === true) {
-         this.$emit('clientStatus', this.running);
+      params.value.trace = false;
-         let time = new Date().toLocaleString();
+      const time = new Date().toLocaleString();
-         let log = {
+      const log = {
-            time: time,
-            message,
-            color: ''
-         };
-
-         this.logs.push(log);
-      });
-
-      ipcRenderer.send('getHosts');
-      ipcRenderer.on('hostList', (event, hosts) => {
-         this.hostList = hosts;
-      });
-
-      ipcRenderer.send('getMessages');
-      ipcRenderer.on('messageList', (event, messages) => {
-         this.messageList = messages;
-      });
-
-      ipcRenderer.on('reportClientList', (event, reports) => {
-         this.reportList = reports;
-      });
-   },
-   methods: {
-      startTest () {
-         if (this.params.tMin < 100 && this.params.trace === true) {
-            this.params.trace = false;
-            let time = new Date().toLocaleString();
-            let log = {
          time: time,
          message: 'Trace disabilitato: Intervalli troppo brevi',
          color: 'yellow'
       };
 
-            this.logs.push(log);
+      logs.value.push(log);
    }
 
-         this.running = 1;
+   running.value = 1;
-         this.$emit('clientStatus', this.running);
+   emit('clientStatus', running.value);
 
-         if (this.params.stepTest) {
+   if (params.value.stepTest) {
-            this.params.closeOnEcho = false;
+      params.value.closeOnEcho = false;
-            this.params.persistentConnection = false;
+      params.value.persistentConnection = false;
-            this.params.loop = false;
+      params.value.loop = false;
    }
 
-         let obj = {
+   const obj = {
-            params: this.params,
+      params: params.value,
-            hosts: this.hostList.filter((host) => {
+      hosts: hostList.value.filter((host) => {
          return host.enabled === true;
       })
    };
    ipcRenderer.send('startTest', obj);
-      },
+};
-      sendMessages () {
+
+const sendMessages = () => {
    ipcRenderer.send('sendMessages');
-      },
+};
-      stopTest () {
+
+const stopTest = () => {
    ipcRenderer.send('stopTest');
-      },
+};
 
 // Host
-      createHost (host) {
+const createHost = (host: string) => {
-         this.hostList.push(host);
+   hostList.value.push(host);
-         this.popNewHost = false;
+   popNewHost.value = false;
-         ipcRenderer.send('updateHosts', this.hostList);
+   ipcRenderer.send('updateHosts', hostList.value);
-      },
+};
-      showAddHost () {
+
-         this.popNewHost = true;
+const showAddHost = () => {
-      },
+   popNewHost.value = true;
-      hideAddHost () {
+};
-         this.popNewHost = false;
+
-      },
+const hideAddHost = () => {
-      updateHosts () {
+   popNewHost.value = false;
-         ipcRenderer.send('updateHosts', this.hostList);
+};
-      },
+
-      deleteHost (hostId) {
+const updateHosts = () => {
-         this.hostList.splice(hostId, 1);
+   ipcRenderer.send('updateHosts', hostList.value);
-         ipcRenderer.send('updateHosts', this.hostList);
+};
-      },
+
-      toggleHostCheck (status) {
+const deleteHost = (hostId: number) => {
-         if (this.running !== 0) return;
+   hostList.value.splice(hostId, 1);
-         let enable = status === 0;
+   ipcRenderer.send('updateHosts', hostList.value);
-         this.hostList.forEach((host) => {
+};
+
+const toggleHostCheck = (status: number) => {
+   if (running.value !== 0) return;
+   const enable = status === 0;
+   hostList.value.forEach((host) => {
       host.enabled = enable;
    });
-         ipcRenderer.send('updateHosts', this.hostList);
+   ipcRenderer.send('updateHosts', hostList.value);
-      },
+};
 
 // Messaggi
-      createMessage (message) {
+const createMessage = (message: any) => {
-         this.messageList.push(message);
+   messageList.value.push(message);
-         this.popNewMessage = false;
+   popNewMessage.value = false;
-         ipcRenderer.send('updateMessages', this.messageList);
+   ipcRenderer.send('updateMessages', messageList.value);
-      },
+};
-      editMessage (message, index) {
+
-         this.popEditMessage = false;
+const editMessage = (message: any, index: number) => {
-         this.$set(this.messageList, index, message);
+   popEditMessage.value = false;
-         ipcRenderer.send('updateMessages', this.messageList);
+   messageList.value[index] = message;
-      },
+   ipcRenderer.send('updateMessages', messageList.value);
-      updateMessages () {
+};
-         ipcRenderer.send('updateMessages', this.messageList);
+
-      },
+const updateMessages = () => {
-      showAddMessage () {
+   ipcRenderer.send('updateMessages', messageList.value);
-         this.popNewMessage = true;
+};
-      },
+
-      hideAddMessage () {
+const showAddMessage = () => {
-         this.popNewMessage = false;
+   popNewMessage.value = true;
-      },
+};
-      showEditMessage (index) {
+
-         this.idEditedMsg = index;
+const hideAddMessage = () => {
-         this.popEditMessage = true;
+   popNewMessage.value = false;
-      },
+};
-      hideEditMessage () {
+
-         this.popEditMessage = false;
+const showEditMessage = (index: number) => {
-      },
+   idEditedMsg.value = index;
-      deleteMessage (messageId) {
+   popEditMessage.value = true;
-         this.messageList.splice(messageId, 1);
+};
-         ipcRenderer.send('updateMessages', this.messageList);
+
-      },
+const hideEditMessage = () => {
-      toggleMessageCheck (status) {
+   popEditMessage.value = false;
-         if (this.running !== 0) return;
+};
-         let enable = status === 0;
+
-         this.messageList.forEach((message) => {
+const deleteMessage = (messageId: number) => {
+   messageList.value.splice(messageId, 1);
+   ipcRenderer.send('updateMessages', messageList.value);
+};
+
+const toggleMessageCheck = (status: number) => {
+   if (running.value !== 0) return;
+   const enable = status === 0;
+   messageList.value.forEach((message) => {
       message.enabled = enable;
    });
-         ipcRenderer.send('updateMessages', this.messageList);
+   ipcRenderer.send('updateMessages', messageList.value);
-      },
+};
 
 // Convigurazioni
-      showSaveConfig () {
+const showSaveConfig = () => {
-         this.popSaveConfig = true;
+   popSaveConfig.value = true;
-      },
+};
-      hideSaveConfig () {
+
-         this.popSaveConfig = false;
+const hideSaveConfig = () => {
-      },
+   popSaveConfig.value = false;
-      saveConfig (config) {
+};
-         this.popSaveConfig = false;
+
+const saveConfig = (config: any) => {
+   popSaveConfig.value = false;
    ipcRenderer.send('saveClientConfig', config);
-      },
+};
 
-      showLoadConfig () {
+const showLoadConfig = () => {
-         this.popLoadConfig = true;
+   popLoadConfig.value = true;
-      },
+};
-      hideLoadConfig () {
-         this.popLoadConfig = false;
-      },
-      loadConfig (config) {
-         this.popLoadConfig = false;
-         this.params = config.params;
 
-         let time = new Date().toLocaleString();
+const hideLoadConfig = () => {
-         let log = {
+   popLoadConfig.value = false;
+};
+
+const loadConfig = (config: any) => {
+   popLoadConfig.value = false;
+   params.value = config.params;
+
+   const time = new Date().toLocaleString();
+   const log = {
       time: time,
       message: `Configurazione "${config.name}" ripristinata`,
       color: 'green'
    };
 
-         this.logs.push(log);
+   logs.value.push(log);
-      }
-   }
 };
+
+ipcRenderer.on('clientLog', (event, data) => {
+   const time = new Date().toLocaleString();
+   const { message, color } = data;
+   const log = {
+      time: time,
+      message,
+      color
+   };
+
+   logs.value.push(log);
+});
+
+ipcRenderer.on('testFinish', (event, message) => {
+   running.value = 0;
+   emit('clientStatus', running.value);
+   const time = new Date().toLocaleString();
+   const log = {
+      time: time,
+      message,
+      color: ''
+   };
+
+   logs.value.push(log);
+});
+
+ipcRenderer.send('getHosts');
+ipcRenderer.on('hostList', (event, hosts) => {
+   hostList.value = hosts;
+});
+
+ipcRenderer.send('getMessages');
+ipcRenderer.on('messageList', (event, messages) => {
+   messageList.value = messages;
+});
+
+ipcRenderer.on('reportClientList', (event, reports) => {
+   reportList.value = reports;
+});
 </script>

src/renderer/components/ClientTabHosts.vue

@@ -0,0 +1,97 @@
+<template>
+   <div
+      id="hostBox"
+      ref="root"
+      class="box-100"
+   >
+      <h3>
+         <span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus)
+         }}</i></span><span>Hosts</span>
+      </h3>
+      <div class="tools-box">
+         <div class="round-button green-bg" @click="showAdd">
+            <span>Aggiungi Host</span>
+            <i class="material-icons">add</i>
+         </div>
+      </div>
+      <ul id="hostList">
+         <li v-for="(host, index) in sortedHosts" :key="index">
+            <label class="checkbox">
+               <input
+                  v-model="host.enabled"
+                  type="checkbox"
+                  @change="updateHosts"
+               >
+               <div class="checkbox-block" />
+               <span>{{ host.host }}:{{ host.port }}</span>
+            </label>
+            <i
+               class="material-icons deleteHost"
+               :title="`Elimina host ${host.host}:${host.port}`"
+               @click="deleteHost(index)"
+            >clear</i>
+         </li>
+      </ul>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUpdated, PropType } from 'vue';
+
+const root = ref(null);
+
+const props = defineProps({
+   hostList: Array as PropType<any[]>
+});
+
+const emit = defineEmits(['updateHosts', 'showAddHost', 'deleteHost', 'toggleHostCheck']);
+
+const checkStatus = computed(() => {
+   const checked = props.hostList.filter((host: any) => {
+      return host.enabled;
+   });
+   if (props.hostList.length === checked.length)
+      return 2;
+   else if (checked.length > 0)
+      return 1;
+   else
+      return 0;
+});
+
+const sortedHosts = computed(() => {
+   const localHostList = props.hostList;
+   return localHostList.sort((a: any, b: any) => (a.host < b.host ? -1 : (a.host > b.host ? 1 : 0)) || a.port - b.port);
+});
+
+const updateHosts = () => {
+   emit('updateHosts');
+};
+
+const showAdd = () => {
+   emit('showAddHost');
+};
+
+const deleteHost = (value: any) => {
+   emit('deleteHost', value);
+};
+
+const checkIcon = (status: number) => {
+   switch (status) {
+      case 0:
+         return 'check_box_outline_blank';
+      case 1:
+         return 'indeterminate_check_box';
+      case 2:
+         return 'check_box';
+   }
+};
+
+const toggleCheck = (status: any) => {
+   emit('toggleHostCheck', status);
+};
+
+onUpdated(() => {
+   const elem = root.value;
+   elem.scrollTop = elem.scrollHeight;
+});
+</script>

src/renderer/components/ClientTabReports.vue

@@ -30,25 +30,26 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { PropType, computed } from 'vue';
-   name: 'ClientReports',
+
-   props: {
+const props = defineProps({
-      reports: Array
+   reports: Array as PropType<any[]>
-   },
+});
-   computed: {
+
-      totSockets () {
+const totSockets = computed(() => {
-         return this.$props.reports.reduce((prev, cur) => prev + cur.sockets, 0);
+   return props.reports.reduce((prev, cur) => prev + cur.sockets, 0);
-      },
+});
-      totMessages () {
+
-         return this.$props.reports.reduce((prev, cur) => prev + cur.messages, 0);
+const totMessages = computed(() => {
-      },
+   return props.reports.reduce((prev, cur) => prev + cur.messages, 0);
-      totReceived () {
+});
-         return this.$props.reports.reduce((prev, cur) => prev + cur.received, 0);
+
-      },
+const totReceived = computed(() => {
-      totData () {
+   return props.reports.reduce((prev, cur) => prev + cur.received, 0);
-         return this.$props.reports.reduce((prev, cur) => prev + cur.data, 0);
+});
-      }
+
-   }
+const totData = computed(() => {
-};
+   return props.reports.reduce((prev, cur) => prev + cur.data, 0);
+});
 </script>

src/renderer/components/ModalEditMessage.vue

@@ -50,30 +50,27 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref, computed } from 'vue';
-   name: 'EditMessage',
+
-   props: {
+const props = defineProps({
    message: Object,
    index: Number
-   },
+});
-   data () {
+
-      return {
+const staticMsg = ref(Object.assign({}, props.message));
-         staticMsg: Object.assign({}, this.$props.message)
+
+const emit = defineEmits(['hideEditMessage', 'editMessage']);
+
+const validation = computed(() => {
+   return staticMsg.value.message === '' || staticMsg.value.name === '' || staticMsg.value.format === '';
+});
+
+const close = () => {
+   emit('hideEditMessage');
 };
-   },
+
-   computed: {
+const confirm = () => {
-      validation () {
+   emit('editMessage', staticMsg.value, props.index);
-         return this.staticMsg.message === '' || this.staticMsg.name === '' || this.staticMsg.format === '';
-      }
-   },
-   methods: {
-      close () {
-         this.$emit('hideEditMessage');
-      },
-      confirm () {
-         this.$emit('editMessage', this.staticMsg, this.index);
-      }
-   }
 };
 </script>

src/renderer/components/ModalLoadConfig.vue

@@ -41,38 +41,33 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { ipcRenderer } from 'electron';
+import { ref } from 'vue';
 
-export default {
+const configList = ref([]);
-   name: 'LoadConfig',
+const selected = ref(null);
-   data () {
-      return {
-         configList: [],
-         selected: null
 
+const emit = defineEmits(['loadConfig', 'hideLoadConfig']);
+
+const close = () => {
+   emit('hideLoadConfig');
+   selected.value = null;
 };
-   },
+
-   created () {
+const deleteConfig = (index: number) => {
+   configList.value.splice(index, 1);
+   ipcRenderer.send('updateClientConfig', configList.value);
+};
+
+const loadConfig = (index: number) => {
+   selected.value = index;
+   emit('loadConfig', configList.value[index]);
+   close();
+};
+
 ipcRenderer.send('getClientConfigs');
 ipcRenderer.on('configList', (event, configs) => {
-         this.configList = configs;
+   configList.value = configs;
 });
-   },
-   methods: {
-      close () {
-         this.$emit('hideLoadConfig');
-         this.selected = null;
-      },
-      deleteConfig: function (index) {
-         this.configList.splice(index, 1);
-         ipcRenderer.send('updateClientConfig', this.configList);
-      },
-      loadConfig (index) {
-         this.selected = index;
-         this.$emit('loadConfig', this.configList[index]);
-         this.close();
-      }
-   }
-};
 </script>

src/renderer/components/ModalMessages.vue

@@ -0,0 +1,114 @@
+<template>
+   <div
+      id="messageBox"
+      ref="root"
+      class="box-100"
+   >
+      <h3><span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus) }}</i></span><span>Messaggi</span></h3>
+      <div class="tools-box">
+         <div class="round-button green-bg" @click="showAdd">
+            <span>Aggiungi Messaggio</span>
+            <i class="material-icons">add</i>
+         </div>
+      </div>
+      <ul id="messageList">
+         <li v-for="(message, index) in sortedMessages" :key="index">
+            <label class="checkbox">
+               <input
+                  v-model="message.enabled"
+                  type="checkbox"
+                  @change="updateMessages"
+               >
+               <div class="checkbox-block" />
+               <span class="format">({{ message.format }})</span>
+               <span>{{ truncate(message.name, 25, '...') }}</span>
+            </label>
+            <i
+               class="material-icons editMessage"
+               :title="`Modifica messaggio ${message.name}`"
+               @click="showEdit(index)"
+            >edit</i>
+            <i
+               class="material-icons deleteMessage"
+               :title="`Elimina messaggio ${message.name}`"
+               @click="deleteMessage(index)"
+            >clear</i>
+         </li>
+      </ul>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUpdated, PropType } from 'vue';
+
+const props = defineProps({
+   messageList: Array as PropType<any[]>
+});
+
+const root = ref(null);
+
+const emit = defineEmits([
+   'updateMessages',
+   'showAddMessage',
+   'showEditMessage',
+   'deleteMessage',
+   'toggleMessageCheck'
+]);
+
+const checkStatus = computed(() => {
+   const checked = props.messageList.filter((message) => {
+      return message.enabled;
+   });
+   if (props.messageList.length === checked.length)
+      return 2;
+   else if (checked.length > 0)
+      return 1;
+   else
+      return 0;
+});
+
+const sortedMessages = computed(() => {
+   const localMessagesList = props.messageList;
+   return localMessagesList.sort((a, b) => (a.name < b.name ? -1 : (a.name > b.name ? 1 : 0)));
+});
+
+const truncate = (text: string, length: number, suffix: string) => {
+   if (text.length <= length) suffix = '';
+   return text.substring(0, length) + suffix;
+};
+
+const updateMessages = () => {
+   emit('updateMessages');
+};
+
+const showAdd = () => {
+   emit('showAddMessage');
+};
+
+const showEdit = (index: number) => {
+   emit('showEditMessage', index);
+};
+const deleteMessage = (index: number) => {
+   emit('deleteMessage', index);
+};
+
+const checkIcon = (status: number) => {
+   switch (status) {
+      case 0:
+         return 'check_box_outline_blank';
+      case 1:
+         return 'indeterminate_check_box';
+      case 2:
+         return 'check_box';
+   }
+};
+
+const toggleCheck = (status: number) => {
+   emit('toggleMessageCheck', status);
+};
+
+onUpdated(() => {
+   const elem = root.value;
+   elem.scrollTop = elem.scrollHeight;
+});
+</script>

src/renderer/components/ModalNewHost.vue

@@ -39,35 +39,31 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref, computed } from 'vue';
-   name: 'NewHost',
+
-   data () {
+const emit = defineEmits(['hideAddHost', 'createHost']);
-      return {
+
-         host: {
+const host = ref({
    host: '',
    port: '',
    enabled: true
-         }
+});
+
+const validation = computed(() => {
+   return host.value.host === '' || host.value.port === '';
+});
+
+const close = () => {
+   emit('hideAddHost');
 };
-   },
+
-   computed: {
+const confirm = () => {
-      validation () {
+   emit('createHost', host.value);
-         return this.host.host === '' || this.host.port === '';
+   host.value = {
-      }
-   },
-   methods: {
-      close () {
-         this.$emit('hideAddHost');
-      },
-      confirm () {
-         this.$emit('createHost', this.host);
-         this.host = {
       host: '',
       port: '',
       enabled: true
    };
-      }
-   }
 };
 </script>

src/renderer/components/ModalNewMessage.vue

@@ -50,37 +50,33 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref, computed } from 'vue';
-   name: 'NewMessage',
+
-   data () {
+const emit = defineEmits(['hideAddMessage', 'createMessage']);
-      return {
+
-         message: {
+const message = ref({
    message: '',
    name: '',
    enabled: true,
    format: ''
-         }
+});
+
+const validation = computed(() => {
+   return message.value.message === '' || message.value.name === '' || message.value.format === '';
+});
+
+const close = () => {
+   emit('hideAddMessage');
 };
-   },
+
-   computed: {
+const confirm = () => {
-      validation () {
+   emit('createMessage', message.value);
-         return this.message.message === '' || this.message.name === '' || this.message.format === '';
+   message.value = {
-      }
-   },
-   methods: {
-      close () {
-         this.$emit('hideAddMessage');
-      },
-      confirm () {
-         this.$emit('createMessage', this.message);
-         this.message = {
       message: '',
       name: '',
       format: '',
       enabled: true
    };
-      }
-   }
 };
 </script>

src/renderer/components/ModalNewPort.vue

@@ -33,44 +33,41 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref, computed, getCurrentInstance } from 'vue';
-   name: 'NewPort',
+
-   data () {
+const emit = defineEmits(['hideAddPort', 'createPort']);
-      return {
+
-         port: {
+const port = ref({
-            port: '',
+   port: null,
    enabled: true
-         },
+});
-         errMsg: ''
+const errMsg = ref('');
-      };
+
-   },
+const validation = computed(() => {
-   computed: {
+   return port.value.port === null || port.value.port > 65535 || port.value.port < 1;
-      validation () {
+});
-         return this.port.port === '' || this.port.port > 65535 || this.port.port < 1;
+
-      }
+const close = () => {
-   },
+   emit('hideAddPort');
-   methods: {
+   port.value = {
-      close () {
-         this.$emit('hideAddPort');
-         this.port = {
       port: '',
       enabled: true
    };
-         this.errMsg = '';
+   errMsg.value = '';
-      },
+};
-      confirm () {
+
-         let portList = this.$parent.portList;
+const confirm = () => {
-         if (portList.findIndex((port) => port.port === this.port.port) < 0) {
+   const instance = getCurrentInstance();// TODO: use props
-            this.$emit('createPort', this.port);
+   const portList = (instance.parent as any).portList;
-            this.port = {
+   if (portList.findIndex((p: any) => p.port === port.value.port) < 0) {
+      emit('createPort', port.value);
+      port.value = {
          port: '',
          enabled: true
       };
-            this.errMsg = '';
+      errMsg.value = '';
-         }
-         else this.errMsg = 'Porta già esistente!';
-      }
    }
+   else errMsg.value = 'Porta già esistente!';
 };
 </script>

src/renderer/components/ModalSaveConfig.vue

@@ -29,34 +29,31 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref, computed } from 'vue';
-   name: 'SaveCongif',
+
-   props: {
+const emit = defineEmits(['hideSaveConfig', 'saveConfig']);
+
+const props = defineProps({
    params: Object
-   },
+});
-   data () {
+
-      return {
+const name = ref('');
-         name: ''
+
+const validation = computed(() => {
+   return name.value === '';
+});
+
+const close = () => {
+   emit('hideSaveConfig');
 };
-   },
+
-   computed: {
+const confirm = () => {
-      validation () {
+   const config = {
-         return this.name === '';
+      name: name.value,
-      }
-   },
-   methods: {
-      close () {
-         this.$emit('hideSaveConfig');
-      },
-      confirm () {
-         let config = {
-            name: this.name,
       time: new Date().toLocaleString(),
-            params: this.$props.params
+      params: props.params
    };
-         this.$emit('saveConfig', config);
+   emit('saveConfig', config);
-      }
-   }
 };
 </script>

src/renderer/components/SerterTabReports.vue

@@ -42,27 +42,28 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { computed, PropType } from 'vue';
-   name: 'ServerReports',
+
-   props: {
+const emit = defineEmits(['resetReports']);
-      reports: Array
+
-   },
+const props = defineProps({
-   computed: {
+   reports: Array as PropType<any[]>
-      totSockets () {
+});
-         return this.$props.reports.reduce((prev, cur) => prev + cur.sockets, 0);
+
-      },
+const totSockets = computed(() => {
-      totMessages () {
+   return props.reports.reduce((prev, cur: any) => prev + cur.sockets, 0);
-         return this.$props.reports.reduce((prev, cur) => prev + cur.messages, 0);
+});
-      },
+
-      totData () {
+const totMessages = computed(() => {
-         return this.$props.reports.reduce((prev, cur) => prev + cur.data, 0);
+   return props.reports.reduce((prev, cur: any) => prev + cur.messages, 0);
-      }
+});
-   },
+
-   methods: {
+const totData = computed(() => {
-      reset () {
+   return props.reports.reduce((prev, cur: any) => prev + cur.data, 0);
-         this.$emit('resetReports');
+});
-      }
+
-   }
+const reset = () => {
+   emit('resetReports');
 };
 </script>

src/renderer/components/ServerTab.vue

@@ -0,0 +1,204 @@
+<template>
+   <div class="flex box-100">
+      <div id="server" class="box-50">
+         <transition name="fade">
+            <NewPort
+               v-show="popNewPort"
+               @hideAddPort="hideAddPort"
+               @createPort="createPort"
+            />
+         </transition>
+         <form autocomplete="off" @submit.prevent="startServer">
+            <fieldset :disabled="running !== 0">
+               <Ports
+                  ref="ports"
+                  :port-list="portList"
+                  @updatePorts="updatePorts"
+                  @showAddPort="showAddPort"
+                  @deletePort="deletePort"
+                  @togglePortCheck="togglePortCheck"
+               />
+               <div class="flex box-100">
+                  <div class="box-50">
+                     <label class="checkbox">
+                        <input
+                           v-model="params.echo"
+                           type="checkbox"
+                        >
+                        <div class="checkbox-block" />
+                        <span>Echo Server</span>
+                     </label>
+                     <label class="checkbox">
+                        <input
+                           v-model="params.trace"
+                           type="checkbox"
+                        >
+                        <div class="checkbox-block" />
+                        <span>Abilita Trace</span>
+                     </label>
+                  </div>
+                  <div class="box-50">
+                     <label class="checkbox">
+                        <input
+                           v-model="params.alertReset"
+                           type="checkbox"
+                        >
+                        <div class="checkbox-block" />
+                        <span>Allerta ECONNRESET</span>
+                     </label>
+                  </div>
+               </div>
+            </fieldset>
+            <div class="buttons">
+               <div v-if="running === 0" class="button-wrap">
+                  <i class="material-icons white">play_arrow</i>
+                  <button class="confirm" type="submit">
+                     Start
+                  </button>
+               </div>
+               <div v-if="running === 1" class="button-wrap">
+                  <i class="material-icons white">stop</i>
+                  <button class="stop" @click="stopServer">
+                     Stop
+                  </button>
+               </div>
+            </div>
+         </form>
+         <transition name="fade">
+            <SerterTabReports
+               v-if="reportList.length > 0"
+               ref="reports"
+               :reports="reportList"
+               @resetReports="resetReports"
+            />
+         </transition>
+      </div><!-- /server -->
+      <Console
+         ref="console"
+         :logs="slicedLogs"
+      />
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import Console from './BaseConsole.vue';
+import Ports from './ServerTabPorts.vue';
+import NewPort from './ModalNewPort.vue';
+import SerterTabReports from './SerterTabReports.vue';
+import { ipcRenderer } from 'electron';
+
+const emit = defineEmits(['serverStatus']);
+
+const running = ref(0);
+const params = ref({
+   trace: false,
+   echo: true,
+   alertReset: false
+});
+const logs = ref([]);
+const portList = ref([]);
+const reportList = ref([]);
+const popNewPort = ref(false);
+
+const slicedLogs = computed(() => {
+   if (logs.value.length > 500)
+      logs.value = logs.value.slice(-500);
+
+   return logs.value;
+});
+
+// const saveTest = (e: MouseEvent) => {
+//    e.preventDefault();
+// };
+
+const startServer = (e: MouseEvent) => {
+   e.preventDefault();
+   running.value = 1;
+   emit('serverStatus', running.value);
+   const obj = {
+      params: params.value,
+      ports: portList.value.filter((port) => {
+         return port.enabled === true;
+      })
+   };
+   ipcRenderer.send('startServer', obj);
+};
+
+const stopServer = (e: MouseEvent) => {
+   e.preventDefault();
+   ipcRenderer.send('stopServer');
+};
+
+const updatePorts = () => {
+   ipcRenderer.send('updatePorts', portList.value);
+};
+
+const showAddPort = () => {
+   popNewPort.value = true;
+};
+
+const hideAddPort = () => {
+   popNewPort.value = false;
+};
+
+const createPort = (port: number) => {
+   portList.value.push(port);
+   popNewPort.value = false;
+   ipcRenderer.send('updatePorts', portList.value);
+};
+
+const deletePort = (portId: number) => {
+   portList.value.splice(portId, 1);
+   ipcRenderer.send('updatePorts', portList.value);
+};
+
+const resetReports = () => {
+   ipcRenderer.send('resetReports');
+};
+
+const togglePortCheck = (status: number) => {
+   if (running.value !== 0) return;
+   const enable = status === 0;
+   portList.value.forEach((host) => {
+      host.enabled = enable;
+   });
+
+   ipcRenderer.send('updatePorts', portList.value);
+};
+
+ipcRenderer.on('serverLog', (event, data) => {
+   const time = new Date().toLocaleString();
+   const { message, color } = data;
+   const log = {
+      time: time,
+      message,
+      color
+   };
+
+   logs.value.push(log);
+});
+
+ipcRenderer.on('serverFinish', (event, message) => {
+   running.value = 0;
+   reportList.value = [];
+   emit('serverStatus', running.value);
+   const time = new Date().toLocaleString();
+   const log = {
+      time: time,
+      message,
+      color: ''
+   };
+
+   logs.value.push(log);
+});
+
+ipcRenderer.send('getPorts');
+ipcRenderer.on('portList', (event, ports) => {
+   portList.value = ports;
+});
+
+ipcRenderer.on('reportServerList', (event, reports) => {
+   reportList.value = reports;
+});
+</script>

src/renderer/components/ServerTabPorts.vue

@@ -0,0 +1,94 @@
+<template>
+   <div
+      id="portBox"
+      ref="root"
+      class="box-100"
+   >
+      <h3><span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus) }}</i></span><span>Porte</span></h3>
+      <div class="tools-box">
+         <div class="round-button green-bg" @click="showAdd">
+            <span>Aggiungi Porta</span>
+            <i class="material-icons">add</i>
+         </div>
+      </div>
+      <ul id="portList">
+         <li v-for="(port, index) in sortedPorts" :key="index">
+            <label class="checkbox">
+               <input
+                  v-model="port.enabled"
+                  type="checkbox"
+                  @change="updatePorts"
+               >
+               <div class="checkbox-block" />
+               <span>{{ port.port }}</span>
+            </label>
+            <i
+               class="material-icons deletePort"
+               :title="`Elimina porta ${port.port}`"
+               @click="deletePort(index)"
+            >clear</i>
+         </li>
+      </ul>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUpdated, PropType } from 'vue';
+
+const emit = defineEmits(['updatePorts', 'showAddPort', 'deletePort', 'togglePortCheck']);
+
+const props = defineProps({
+   portList: Array as PropType<any[]>
+});
+
+const root = ref(null);
+
+const checkStatus = computed(() => {
+   const checked = props.portList.filter((port) => {
+      return port.enabled;
+   });
+   if (props.portList.length === checked.length)
+      return 2;
+   else if (checked.length > 0)
+      return 1;
+   else
+      return 0;
+});
+
+const sortedPorts = computed(() => {
+   const localPortList = props.portList;
+   return localPortList.sort((a, b) => a.port - b.port);
+});
+
+const updatePorts = () => {
+   emit('updatePorts');
+};
+
+const showAdd = () => {
+   emit('showAddPort');
+};
+
+const deletePort = (value: number) => {
+   emit('deletePort', value);
+};
+
+const checkIcon = (status: number) => {
+   switch (status) {
+      case 0:
+         return 'check_box_outline_blank';
+      case 1:
+         return 'indeterminate_check_box';
+      case 2:
+         return 'check_box';
+   }
+};
+
+const toggleCheck = (status: number) => {
+   emit('togglePortCheck', status);
+};
+
+onUpdated(() => {
+   const elem = root.value;
+   elem.scrollTop = elem.scrollHeight;
+});
+</script>

src/renderer/components/console.vue

@@ -1,25 +0,0 @@
-<template>
-   <div class="console box-50">
-      <div
-         v-for="(log, index) in logs"
-         :key="index"
-         class="log"
-         :class="log.color"
-      >
-         {{ log.time }} - <span v-html="log.message" />
-      </div>
-   </div>
-</template>
-
-<script>
-export default {
-   name: 'Console',
-   props: {
-      logs: Array
-   },
-   updated () {
-      var elem = this.$el;
-      elem.scrollTop = elem.scrollHeight;
-   }
-};
-</script>

src/renderer/components/hosts.vue

@@ -1,82 +0,0 @@
-<template>
-   <div id="hostBox" class="box-100">
-      <h3><span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus) }}</i></span><span>Hosts</span></h3>
-      <div class="tools-box">
-         <div class="round-button green-bg" @click="showAdd">
-            <span>Aggiungi Host</span>
-            <i class="material-icons">add</i>
-         </div>
-      </div>
-      <ul id="hostList">
-         <li v-for="(host, index) in sortedHosts" :key="index">
-            <label class="checkbox">
-               <input
-                  v-model="host.enabled"
-                  type="checkbox"
-                  @change="updateHosts"
-               >
-               <div class="checkbox-block" />
-               <span>{{ host.host }}:{{ host.port }}</span>
-            </label>
-            <i
-               class="material-icons deleteHost"
-               :title="`Elimina host ${host.host}:${host.port}`"
-               @click="deleteHost(index)"
-            >clear</i>
-         </li>
-      </ul>
-   </div>
-</template>
-
-<script>
-export default {
-   name: 'Hosts',
-   props: {
-      hostList: Array
-   },
-   computed: {
-      checkStatus () {
-         let checked = this.hostList.filter((host) => {
-            return host.enabled;
-         });
-         if (this.hostList.length === checked.length)
-            return 2;
-         else if (checked.length > 0)
-            return 1;
-         else
-            return 0;
-      },
-      sortedHosts () {
-         return this.$props.hostList.sort((a, b) => (a.host < b.host ? -1 : (a.host > b.host ? 1 : 0)) || a.port - b.port);
-      }
-   },
-   updated () {
-      var elem = this.$el;
-      elem.scrollTop = elem.scrollHeight;
-   },
-   methods: {
-      updateHosts () {
-         this.$emit('updateHosts');
-      },
-      showAdd () {
-         this.$emit('showAddHost');
-      },
-      deleteHost (value) {
-         this.$emit('deleteHost', value);
-      },
-      checkIcon (status) {
-         switch (status) {
-            case 0:
-               return 'check_box_outline_blank';
-            case 1:
-               return 'indeterminate_check_box';
-            case 2:
-               return 'check_box';
-         }
-      },
-      toggleCheck (status) {
-         this.$emit('toggleHostCheck', status);
-      }
-   }
-};
-</script>

src/renderer/components/messages.vue

@@ -1,97 +0,0 @@
-<template>
-   <div id="messageBox" class="box-100">
-      <h3><span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus) }}</i></span><span>Messaggi</span></h3>
-      <div class="tools-box">
-         <div class="round-button green-bg" @click="showAdd">
-            <span>Aggiungi Messaggio</span>
-            <i class="material-icons">add</i>
-         </div>
-      </div>
-      <ul id="messageList">
-         <li v-for="(message, index) in sortedMessages" :key="index">
-            <label class="checkbox">
-               <input
-                  v-model="message.enabled"
-                  type="checkbox"
-                  @change="updateMessages"
-               >
-               <div class="checkbox-block" />
-               <span class="format">({{ message.format }})</span>
-               <span>{{ message.name | truncate(25, '...') }}</span>
-            </label>
-            <i
-               class="material-icons editMessage"
-               :title="`Modifica messaggio ${message.name}`"
-               @click="showEdit(index)"
-            >edit</i>
-            <i
-               class="material-icons deleteMessage"
-               :title="`Elimina messaggio ${message.name}`"
-               @click="deleteMessage(index)"
-            >clear</i>
-         </li>
-      </ul>
-   </div>
-</template>
-
-<script>
-export default {
-   name: 'Messages',
-   filters: {
-      truncate (text, length, suffix) {
-         if (text.length <= length) suffix = '';
-         return text.substring(0, length) + suffix;
-      }
-   },
-   props: {
-      messageList: Array
-   },
-   computed: {
-      checkStatus () {
-         let checked = this.messageList.filter((message) => {
-            return message.enabled;
-         });
-         if (this.messageList.length === checked.length)
-            return 2;
-         else if (checked.length > 0)
-            return 1;
-         else
-            return 0;
-      },
-      sortedMessages () {
-         return this.$props.messageList.sort((a, b) => (a.name < b.name ? -1 : (a.name > b.name ? 1 : 0)));
-      }
-   },
-   updated () {
-      var elem = this.$el;
-      elem.scrollTop = elem.scrollHeight;
-   },
-   methods: {
-      updateMessages () {
-         this.$emit('updateMessages');
-      },
-      showAdd () {
-         this.$emit('showAddMessage');
-      },
-      showEdit (message, index) {
-         this.$emit('showEditMessage', message, index);
-      },
-      deleteMessage (value) {
-         this.$emit('deleteMessage', value);
-      },
-      checkIcon (status) {
-         switch (status) {
-            case 0:
-               return 'check_box_outline_blank';
-            case 1:
-               return 'indeterminate_check_box';
-            case 2:
-               return 'check_box';
-         }
-      },
-      toggleCheck (status) {
-         this.$emit('toggleMessageCheck', status);
-      }
-   }
-};
-</script>

src/renderer/components/ports.vue

@@ -1,82 +0,0 @@
-<template>
-   <div id="portBox" class="box-100">
-      <h3><span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus) }}</i></span><span>Porte</span></h3>
-      <div class="tools-box">
-         <div class="round-button green-bg" @click="showAdd">
-            <span>Aggiungi Porta</span>
-            <i class="material-icons">add</i>
-         </div>
-      </div>
-      <ul id="portList">
-         <li v-for="(port, index) in sortedPorts" :key="index">
-            <label class="checkbox">
-               <input
-                  v-model="port.enabled"
-                  type="checkbox"
-                  @change="updatePorts"
-               >
-               <div class="checkbox-block" />
-               <span>{{ port.port }}</span>
-            </label>
-            <i
-               class="material-icons deletePort"
-               :title="`Elimina porta ${port.port}`"
-               @click="deletePort(index)"
-            >clear</i>
-         </li>
-      </ul>
-   </div>
-</template>
-
-<script>
-export default {
-   name: 'Ports',
-   props: {
-      portList: Array
-   },
-   computed: {
-      checkStatus () {
-         let checked = this.portList.filter((port) => {
-            return port.enabled;
-         });
-         if (this.portList.length === checked.length)
-            return 2;
-         else if (checked.length > 0)
-            return 1;
-         else
-            return 0;
-      },
-      sortedPorts () {
-         return this.$props.portList.sort((a, b) => a.port - b.port);
-      }
-   },
-   updated () {
-      var elem = this.$el;
-      elem.scrollTop = elem.scrollHeight;
-   },
-   methods: {
-      updatePorts () {
-         this.$emit('updatePorts');
-      },
-      showAdd () {
-         this.$emit('showAddPort');
-      },
-      deletePort (value) {
-         this.$emit('deletePort', value);
-      },
-      checkIcon (status) {
-         switch (status) {
-            case 0:
-               return 'check_box_outline_blank';
-            case 1:
-               return 'indeterminate_check_box';
-            case 2:
-               return 'check_box';
-         }
-      },
-      toggleCheck (status) {
-         this.$emit('togglePortCheck', status);
-      }
-   }
-};
-</script>

src/renderer/components/server.vue

@@ -1,208 +0,0 @@
-<template>
-   <div class="flex box-100">
-      <div id="server" class="box-50">
-         <transition name="fade">
-            <NewPort
-               v-show="popNewPort"
-               @hideAddPort="hideAddPort"
-               @createPort="createPort"
-            />
-         </transition>
-         <form autocomplete="off" @submit.prevent="startServer">
-            <fieldset :disabled="running !== 0">
-               <Ports
-                  ref="ports"
-                  :port-list="portList"
-                  @updatePorts="updatePorts"
-                  @showAddPort="showAddPort"
-                  @deletePort="deletePort"
-                  @togglePortCheck="togglePortCheck"
-               />
-               <div class="flex box-100">
-                  <div class="box-50">
-                     <label class="checkbox">
-                        <input
-                           v-model="params.echo"
-                           type="checkbox"
-                        >
-                        <div class="checkbox-block" />
-                        <span>Echo Server</span>
-                     </label>
-                     <label class="checkbox">
-                        <input
-                           v-model="params.trace"
-                           type="checkbox"
-                        >
-                        <div class="checkbox-block" />
-                        <span>Abilita Trace</span>
-                     </label>
-                  </div>
-                  <div class="box-50">
-                     <label class="checkbox">
-                        <input
-                           v-model="params.alertReset"
-                           type="checkbox"
-                        >
-                        <div class="checkbox-block" />
-                        <span>Allerta ECONNRESET</span>
-                     </label>
-                  </div>
-               </div>
-            </fieldset>
-            <div class="buttons">
-               <div v-if="running === 0" class="button-wrap">
-                  <i class="material-icons white">play_arrow</i>
-                  <button class="confirm" type="submit">
-                     Start
-                  </button>
-               </div>
-               <div v-if="running === 1" class="button-wrap">
-                  <i class="material-icons white">stop</i>
-                  <button class="stop" @click="stopServer">
-                     Stop
-                  </button>
-               </div>
-            </div>
-         </form>
-         <transition name="fade">
-            <server-reports
-               v-if="reportList.length > 0"
-               ref="reports"
-               :reports="reportList"
-               @resetReports="resetReports"
-            />
-         </transition>
-      </div><!-- /server -->
-      <Console
-         ref="console"
-         :logs="slicedLogs"
-      />
-   </div>
-</template>
-
-<script>
-import Console from './console.vue';
-import Ports from './ports.vue';
-import NewPort from './new-port.vue';
-import ServerReports from './server-reports.vue';
-import { ipcRenderer } from 'electron';
-
-export default {
-   name: 'Server',
-   components: {
-      Console,
-      Ports,
-      NewPort,
-      ServerReports
-   },
-   data () {
-      return {
-         running: 0,
-         params: {
-            trace: false,
-            echo: true,
-            alertReset: false
-         },
-         logs: [],
-         portList: [],
-         reportList: [],
-         popNewPort: false
-      };
-   },
-   computed: {
-      slicedLogs () {
-         if (this.logs.length > 500)
-            this.logs = this.logs.slice(-500);
-
-         return this.logs;
-      }
-   },
-   created () {
-      ipcRenderer.on('serverLog', (event, data) => {
-         let time = new Date().toLocaleString();
-         let { message, color } = data;
-         let log = {
-            time: time,
-            message,
-            color
-         };
-
-         this.logs.push(log);
-      });
-
-      ipcRenderer.on('serverFinish', (event, message) => {
-         this.running = 0;
-         this.reportList = [];
-         this.$emit('serverStatus', this.running);
-         let time = new Date().toLocaleString();
-         let log = {
-            time: time,
-            message,
-            color: ''
-         };
-
-         this.logs.push(log);
-      });
-
-      ipcRenderer.send('getPorts');
-      ipcRenderer.on('portList', (event, ports) => {
-         this.portList = ports;
-      });
-
-      ipcRenderer.on('reportServerList', (event, reports) => {
-         this.reportList = reports;
-      });
-   },
-   methods: {
-      saveTest (e) {
-         e.preventDefault();
-      },
-      startServer (e) {
-         e.preventDefault();
-         this.running = 1;
-         this.$emit('serverStatus', this.running);
-         let obj = {
-            params: this.params,
-            ports: this.portList.filter((port) => {
-               return port.enabled === true;
-            })
-         };
-         ipcRenderer.send('startServer', obj);
-      },
-      stopServer (e) {
-         e.preventDefault();
-         ipcRenderer.send('stopServer');
-      },
-      updatePorts () {
-         ipcRenderer.send('updatePorts', this.portList);
-      },
-      showAddPort () {
-         this.popNewPort = true;
-      },
-      hideAddPort () {
-         this.popNewPort = false;
-      },
-      createPort (port) {
-         this.portList.push(port);
-         this.popNewPort = false;
-         ipcRenderer.send('updatePorts', this.portList);
-      },
-      deletePort (portId) {
-         this.portList.splice(portId, 1);
-         ipcRenderer.send('updatePorts', this.portList);
-      },
-      resetReports () {
-         ipcRenderer.send('resetReports');
-      },
-      togglePortCheck (status) {
-         if (this.running !== 0) return;
-         let enable = status === 0;
-         this.portList.forEach((host) => {
-            host.enabled = enable;
-         });
-
-         ipcRenderer.send('updatePorts', this.portList);
-      }
-   }
-};
-</script>

src/renderer/css/main.css

@@ -1,849 +0,0 @@
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
-  src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
-       url(../assets/fonts/MaterialIcons-Regular.woff2) format('woff2'),
-       url(../assets/fonts/MaterialIcons-Regular.woff) format('woff'),
-       url(../assets/fonts/MaterialIcons-Regular.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto Regular';
-  font-style: normal;
-  font-weight: 400;
-  src: url(../assets/fonts/Roboto-Regular.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
-  font-weight: 400;
-  src: url(../assets/fonts/RobotoMono-Regular.ttf) format('truetype');
-}
-
-.material-icons {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
-    display: inline-flex;
-    vertical-align: middle;
-    text-decoration: inherit;
-    margin-right: 2px;
-    text-align: center;
-    line-height: 1;
-    text-transform: initial;
-
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
-
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
-
-    /* Support for IE. */
-    font-feature-settings: 'liga';
-}
-
-
-/*Generale*/
-
-*{
-	box-sizing:border-box;
-}
-
-html{
-	font-family: 'Roboto Regular', Helvetica, sans-serif;
-	font-size:100%;
-	color:#222;
-    height: 100%;
-}
-
-body{
-    height: 100%;
-    background: #EAEAEA;
-    color: #222;
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none;
-}
-
-a, a:link, a:visited{
-	color:#006799;
-	transition:color 0.2s;
-}
-
-a:hover{
-	color:#000;
-}
-
-p{
-	font-size:1.0em;
-	margin-bottom: 1em;
-}
-
-li{
-	list-style:none;
-}
-
-img{
-	max-width:100%;
-}
-
-input,
-textarea,
-select{
-    font-size: 14px;
-    font-family: "Trebuchet MS", Helvetica, sans-serif;
-    border: 1px solid #B7B7B7;
-    border-radius: 5px;
-    box-sizing: border-box;
-    margin: 1px;
-    padding: 10px;
-    display: block;
-    background: transparent;
-    color: #777;
-    max-width: 100%;
-    width: 100%;
-    outline: none;
-    letter-spacing: 0px;
-}
-
-select{
-    padding: 6px 3px;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="password"],
-select{
-    width: 100%;
-}
-
-input[type="text"]:disabled,
-input[type="number"]:disabled,
-input[type="submit"]:disabled{
-    opacity: 0.5;
-}
-
-input:focus, select:focus, textarea:focus {
-    border-color: #0153B0;
-    border-width: 2px;
-    color: #777;
-    margin: 0;
-}
-
-label {
-    margin: 5px 0;
-    display: block;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 1px;
-    color: #0153B0;
-    background: #eaeaea;
-}
-
-/*HEADER*/
-
-
-/*MAIN*/
-
-#wrapper{
-    height: 100%;
-}
-
-#header {
-    padding: 10px 15px 0;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-    background: #383e42;
-    color: #fcfcfc;
-    margin-bottom: 10px;
-}
-
-#header .material-icons{
-    font-size: 24px;
-    margin-top: -2px;
-}
-
-#appTitle{
-    font-size: 18px;
-}
-
-#appTabs{
-    display: flex;
-    /* margin-top: 15px; */
-}
-
-#appTabs .navTab{
-    padding: 10px 30px 15px;
-    cursor: pointer;
-    font-size: 14px;
-    opacity: 0.6;
-    border-bottom: 2px solid transparent;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    transition: all 0.2s;
-    position: relative;
-}
-
-#appTabs .navTab.selected{
-    border-bottom: 2px solid #fff;
-    opacity: 1;
-}
-
-#appTabs .navTab .running{
-    position: absolute;
-    right: 5px;
-    top: 7px;
-    color: #33ce33;
-    font-size: 22px;
-}
-
-#main{
-    padding: 5px 5px;
-    position: relative;
-}
-
-#client{
-    max-width: 400px;
-    min-width: 400px;
-    height: calc(100vh - 90px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-top: 10px;
-}
-
-#server{
-    max-width: 400px;
-    min-width: 400px;
-    height: calc(100vh - 90px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-top: 10px;
-}
-
-.input-element{
-    padding: 15px 10px;
-    position: relative;
-}
-
-.input-element label{
-    position: absolute;
-    top: 5px;
-    left: 20px;
-    padding: 0 5px;
-    z-index: 1;
-}
-
-.input-msg{
-    font-size: 12px;
-    color: #ff2f2f;
-}
-
-.box-50{
-    width: 50%;
-    margin: 5px;
-}
-
-.box-100{
-    width: 100%;
-}
-
-.console{
-    background: #2f323a;
-    border-radius: 5px;
-    color: #FCFCFC;
-    padding: 15px;
-    font-size: 12px;
-    line-height: 1.3;
-    font-family: monospace;
-    margin-right: 10px;
-    height: calc(100vh - 90px);
-    overflow: auto;
-    width: 100%;
-    user-select: text;
-}
-
-.console ::selection{
-    background-color: #33ce33;
-    color: #FCFCFC;
-}
-
-#hostBox,
-#portBox,
-#messageBox{
-    padding: 5px 5px 15px 10px;
-    position: relative;
-}
-
-#hostBox h3,
-#portBox h3,
-#messageBox h3{
-    margin: 5px 0;
-    display: flex;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 1px;
-    color: #0153B0;
-    position: absolute;
-    align-items: center;
-    top: -9px;
-    left: 19px;
-    padding: 0 5px;
-    z-index: 1;
-    text-shadow: -1px 0 #eaeaea, 0 1px #eaeaea, 1px 0 #eaeaea, 0 -1px #eaeaea
-}
-
-
-#hostBox h3 span,
-#portBox h3 span,
-#messageBox h3 span{
-    z-index: 1;
-}
-
-#hostBox h3::after,
-#portBox h3::after,
-#messageBox h3::after{
-    content: '';
-    height: 1px;
-    width: 100%;
-    background: #eaeaea;
-    display: block;
-    position: absolute;
-    z-index: 0;
-    left: 0;
-}
-
-.tools-box{
-    position: absolute;
-    top: -8px;
-    right: 15px;
-    display: flex;
-}
-
-#hostBox .round-button,
-#portBox .round-button,
-#messageBox .round-button{
-    position: relative;
-    border-radius: 50px;
-    color: #fff;
-    padding: 5px;
-    height: 26px;
-    max-width: 26px;
-    overflow: hidden;
-    cursor: pointer;
-    align-items: center;
-    transition: max-width 0.3s;
-    z-index: 2;
-    margin-left: 10px; 
-}
-
-#hostBox .round-button span,
-#portBox .round-button span,
-#messageBox .round-button span{
-    white-space: nowrap;
-    opacity: 0;
-    margin-right: 20px;
-    font-size: 14px;
-    padding: 1px 0 0 5px;
-    transition: opacity 0.2s;
-}
-
-#hostBox .round-button .material-icons,
-#portBox .round-button .material-icons,
-#messageBox .round-button .material-icons{
-    font-size: 16px;
-    height: 16px;
-    margin: 0;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-
-#hostBox .round-button:hover,
-#portBox .round-button:hover,
-#messageBox .round-button:hover{
-    max-width: 180px;
-}
-
-#hostBox .round-button:hover span,
-#portBox .round-button:hover span,
-#messageBox .round-button:hover span{
-    opacity: 1;
-}
-
-#messageBox .format{
-    font-family: "Roboto Mono";
-    font-size: 10px;
-}
-
-#hostList,
-#portList,
-#messageList{
-    max-height: 120px;
-    border: 1px solid #B7B7B7;
-    border-radius: 5px;
-    box-sizing: border-box;
-    padding: 8px 10px;
-    overflow: auto;
-}
-
-#portList{
-    max-height: 300px;
-}
-
-#configList{
-    padding: 0 5px 0;
-    max-height: 40vh;
-    overflow: auto;
-    margin-bottom: 20px;
-}
-
-#configList li{
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-#configList li .radio-btn{
-    font-size: 24px;
-    cursor: pointer;
-    color: #1565C0;
-}
-
-#hostList li,
-#portList li,
-#configList li,
-#messageList li{
-    position: relative;
-    padding-right: 25px;
-}
-
-#hostList li .deleteHost,
-#portList li .deletePort,
-#configList li .deleteConfig,
-#messageList li .deleteMessage{
-    position: absolute;
-    top: -2px;
-    right: 0;
-    cursor: pointer;
-    font-size: 18px;
-    height: 18px;
-    width: 18px;
-    background: #e22424;
-    border-radius: 50px;
-    color: #EAEAEA;
-    opacity: 0;
-    transition: opacity 0.2s;
-}
-
-#hostList li .editHost,
-#portList li .editPort,
-#configList li .editConfig,
-#messageList li .editMessage{
-    position: absolute;
-    top: -2px;
-    right: 24px;
-    cursor: pointer;
-    font-size: 16px;
-    height: 18px;
-    width: 18px;
-    background: #1565c0;
-    border-radius: 50px;
-    color: #EAEAEA;
-    opacity: 0;
-    transition: opacity 0.2s;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-
-#configList li .deleteConfig{
-    top: 3px;
-    margin: 0;
-}
-
-fieldset:not(:disabled) #hostList li:hover .deleteHost,
-fieldset:not(:disabled) #portList li:hover .deletePort,
-#configList li:hover .deleteConfig,
-fieldset:not(:disabled) #messageList li:hover .deleteMessage,
-fieldset:not(:disabled) #hostList li:hover .editHost,
-fieldset:not(:disabled) #portList li:hover .editPort,
-#configList li:hover .editConfig,
-fieldset:not(:disabled) #messageList li:hover .editMessage{
-    opacity: 1;
-}
-
-#hostList li .checkbox,
-#portList li .checkbox,
-#messageList li .checkbox{
-    font-size: 13px;
-    color: #777;
-    margin-left: 5px;
-    width: fit-content;
-}
-
-#serverReports{
-    padding: 5px 5px 15px 10px;
-}
-
-#serverReports h3{
-    margin: 15px 0 20px;
-}
-
-#serverReports table{
-    width: 100%;
-}
-
-#serverReports th{
-    padding: 5px;
-    vertical-align: middle;
-    border-bottom: 2px solid #B7B7B7;
-    font-size: 14px;
-    font-weight: 700;
-    text-align: left;
-}
-
-#serverReports td{
-    border-bottom: 1px solid #B7B7B7;
-    padding: 5px 5px 4px;
-    font-size: 12px;
-    line-height: 1.2;
-}
-
-#serverReports tfoot{
-    background: #d0d0d0;
-    font-weight: 700;
-}
-
-.help{
-    cursor: help;
-}
-
-.bold{
-    font-weight: 700;
-}
-
-.green {
-    color: #33ce33;
-}
-
-.green-bg {
-    background: #2aa72a;
-}
-
-.blue-bg {
-    background: #0153B0;
-}
-
-.yellow {
-    color: yellow;
-}
-
-.red {
-    color: #ff2f2f;
-}
-
-#popcontainer{
-    position: fixed;
-    height: 100vh;
-    width: 100vw;
-    background: rgba(0,0,0,0.3);
-    z-index: 11;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: 0;
-    left: 0;
-}
-
-.popup{
-    padding: 15px;
-    border-radius: 3px;
-    background: #EAEAEA;
-    color: #000;
-    box-shadow: 0 0 10px -2px #000;
-    max-width: 70vw;
-    max-height: 90vh;
-}
-
-.popup h4 {
-    font-size: 18px;
-    margin-bottom: 15px;
-}
-
-.popup p{
-    line-height: 1.4;
-}
-
-.buttons {
-    display: flex;
-    justify-content: space-evenly;
-}
-
-.buttons button{
-    transition: filter 0.2s;
-    letter-spacing: 1px;
-}
-
-.buttons button:hover {
-    filter: brightness(110%);
-}
-
-.buttons button:active {
-    filter: brightness(85%);
-}
-
-.button-wrap{
-    position: relative;
-    margin: 20px 5px;
-}
-
-.button-wrap .material-icons{
-    position: absolute;
-    top: 11px;
-    left: 8px;
-    font-size: 16px;
-    z-index: 1;
-    pointer-events: none;
-}
-
-button.cancel {
-    background: transparent;
-    display: inline-block;
-    padding: 10px 14px 9px;
-    color: #0153B0 !important;
-    text-transform: uppercase;
-    border-radius: 5px;
-    border: none;
-    font-family: "Trebuchet MS", Helvetica, sans-serif;
-    cursor: pointer;
-    outline: none;
-}
-
-button.save {
-    display: inline-block;
-    padding: 10px 14px 9px;
-    text-transform: uppercase;
-    border-radius: 5px;
-    border: 1px solid #B7B7B7;
-    font-family: "Trebuchet MS", Helvetica, sans-serif;
-    cursor: pointer;
-    outline: none;
-    width: max-content;
-}
-
-button.confirm,
-input[type="submit"]{
-    background: #0153B0;
-    display: inline-block;
-    padding: 10px 14px 9px;
-    color: #fff !important;
-    text-transform: uppercase;
-    border-radius: 5px;
-    border: none;
-    border-bottom: 1px solid #0153B0;
-    font-family: "Trebuchet MS", Helvetica, sans-serif;
-    cursor: pointer;
-    outline: none;
-    width: max-content;
-}
-
-button:disabled.confirm,
-input[type="submit"]:disabled{
-    background: #777;
-    border-bottom: 1px solid #777;
-    cursor: not-allowed;
-}
-
-button.stop,
-input[type="submit"]{
-    background: #e22424;
-    display: inline-block;
-    padding: 10px 14px 9px;
-    color: #fff !important;
-    text-transform: uppercase;
-    border-radius: 5px;
-    border: none;
-    border-bottom: 1px solid #e22424;
-    font-family: "Trebuchet MS", Helvetica, sans-serif;
-    cursor: pointer;
-    outline: none;
-    width: max-content;
-}
-
-.button-wrap .material-icons.white{
-    color: #fff;
-}    
-
-.button-wrap button{
-    padding-left: 30px;
-}
-
-#error404{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    text-align: center;
-}
-
-/*SIDEBAR*/
-
-
-/*FOOTER*/
-
-
-/*VARI*/
-.txtright{
-    text-align: right;
-}
-
-.txtleft{
-    text-align: left;
-}
-
-.txtcenter{
-    text-align: center;
-}
-
-.alignright {
-    float: right;
-    margin: 0.5em;
-	margin-right:0;
-}
-
-.alignleft {
-    float: left;
-    margin: 0.5em;
-	margin-left:0;
-}
-
-.flex{
-    display: flex;
-}
-
-.checkbox{
-    display: flex;
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-    margin: 7px 10px;
-    transition: opacity 0.2s;
-}
-
-fieldset:disabled .checkbox{
-    opacity: 0.5;
-    cursor: default;
-}
-
-.toggle-select{
-    position: relative;
-}
-
-.toggle-select .material-icons{
-    font-size: 18px;
-    color: #1565C0;
-    z-index: 1;
-    position: relative;
-    cursor: pointer;
-}
-
-.toggle-select::after{
-    content: '';
-    height: 10px;
-    width: 10px;
-    background: #eaeaea;
-    display: block;
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    border-radius: 1px;
-    z-index: 0;
-}
-
-.checkbox-block{
-    display: flex;
-    height: 14px;
-    width: 14px;
-    min-width: 14px;
-    background: #EBEBEB;
-    margin-right: 5px;
-    border: 2px solid #1565C0;
-    border-radius: 2px;
-    justify-content: center;
-    align-items: center;
-    transition: background 0.2s;
-}
-
-.checkbox input[type="checkbox"]{
-    display: none;
-}
-
-.checkbox input:checked + .checkbox-block{
-    background:#1565C0;
-}
-
-.checkbox input:checked + .checkbox-block::before{
-    content: 'done';
-    display: block;
-    font-family: 'Material Icons';
-    color: #fcfcfc;
-    font-size: 14px;
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
-    /* Support for IE. */
-    font-feature-settings: 'liga';
-}
-
-/*TABLET PORTRAIT*/
-
-@media only screen and (min-width: 768px) {
-
-/*768px-HEADER*/
-
-
-/*768px-MAIN*/
-
-
-/*768px-FOOTER*/
-
-
-}/**/
-
-/*TABLET LANDSCAPE & NETBOOK*/
-@media only screen and (min-width: 1024px){
-
-
-/*1024px-HEADER*/
-
-
-/*1024px-MAIN*/
-
-
-/*SIDEBAR*/
-
-
-/*1024px-FOOTER*/
-
-
-}/**/
-
-/*DESKTOP*/
-@media only screen and (min-width: 1200px){
-
-
-}/**/

src/renderer/css/reset.css

@@ -1,15 +1,72 @@
-html, body, div, span, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-abbr, address, cite, code,
+div,
-del, dfn, em, img, ins, kbd, q, samp,
+span,
-small, strong, sub, sup, var,
+object,
-b, i,
+iframe,
-dl, dt, dd, ol, ul, li,
+h1,
-fieldset, form, label, legend,
+h2,
-table, caption, tbody, tfoot, thead, tr, th, td,
+h3,
-article, aside, canvas, details, figcaption, figure,
+h4,
-footer, header, hgroup, menu, nav, section, summary,
+h5,
-time, mark, audio, video {
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -23,8 +80,17 @@ body {
   line-height: 1;
 }
 
-article,aside,details,figcaption,figure,
+article,
-footer,header,hgroup,menu,nav,section {
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 
@@ -32,13 +98,16 @@ nav ul {
   list-style: none;
 }
 
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
 
-blockquote:before, blockquote:after,
+blockquote::before,
-q:before, q:after {
+blockquote::after,
-    content:'';
+q::before,
+q::after {
+  content: "";
   content: none;
 }
 
@@ -70,7 +139,8 @@ del {
   text-decoration: line-through;
 }
 
-abbr[title], dfn[title] {
+abbr[title],
+dfn[title] {
   border-bottom: 1px dotted;
   cursor: help;
 }
@@ -85,11 +155,12 @@ hr {
   display: block;
   height: 1px;
   border: 0;
-    border-top:1px solid #cccccc;
+  border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;
 }
 
-input, select {
+input,
+select {
   vertical-align: middle;
 }

src/renderer/i18n/en-US.ts

@@ -1,507 +1,6 @@
 export const enUS = {
    word: {
-      edit: 'Edit',
-      save: 'Save',
-      close: 'Close',
-      delete: 'Delete',
-      confirm: 'Confirm',
-      cancel: 'Cancel',
-      send: 'Send',
-      connectionName: 'Connection name',
-      client: 'Client',
-      hostName: 'Host name',
-      port: 'Port',
-      user: 'User',
-      password: 'Password',
-      credentials: 'Credentials',
-      connect: 'Connect',
-      connected: 'Connected',
-      disconnect: 'Disconnect',
-      disconnected: 'Disconnected',
-      refresh: 'Refresh',
-      settings: 'Settings',
-      general: 'General',
-      themes: 'Themes',
-      update: 'Update',
-      about: 'About',
-      language: 'Language',
-      version: 'Version',
-      donate: 'Donate',
-      run: 'Run',
-      schema: 'Schema',
-      results: 'Results',
-      size: 'Size',
-      seconds: 'Seconds',
-      type: 'Type',
-      mimeType: 'Mime-Type',
-      download: 'Download',
-      add: 'Add',
-      data: 'Data',
-      properties: 'Properties',
-      insert: 'Insert',
-      connecting: 'Connecting',
-      name: 'Name',
-      collation: 'Collation',
-      clear: 'Clear',
-      options: 'Options',
-      autoRefresh: 'Auto-refresh',
-      indexes: 'Indexes',
-      foreignKeys: 'Foreign keys',
-      length: 'Length',
-      unsigned: 'Unsigned',
-      default: 'Default',
-      comment: 'Comment',
-      key: 'Key | Keys',
-      order: 'Order',
-      expression: 'Expression',
-      autoIncrement: 'Auto Increment',
-      engine: 'Engine',
-      field: 'Field | Fields',
-      approximately: 'Approximately',
-      total: 'Total',
-      table: 'Table',
-      discard: 'Discard',
-      stay: 'Stay',
-      author: 'Author',
-      light: 'Light',
-      dark: 'Dark',
-      autoCompletion: 'Auto Completion',
-      application: 'Application',
-      editor: 'Editor',
-      view: 'View',
-      definer: 'Definer',
-      algorithm: 'Algorithm',
-      trigger: 'Trigger | Triggers',
-      storedRoutine: 'Stored routine | Stored routines',
-      scheduler: 'Scheduler | Schedulers',
-      event: 'Event',
-      parameters: 'Parameters',
-      function: 'Function | Functions',
-      deterministic: 'Deterministic',
-      context: 'Context',
-      export: 'Export',
-      import: 'Import',
-      returns: 'Returns',
-      timing: 'Timing',
-      state: 'State',
-      execution: 'Execution',
-      starts: 'Starts',
-      ends: 'Ends',
-      ssl: 'SSL',
-      privateKey: 'Private key',
-      certificate: 'Certificate',
-      caCertificate: 'CA certificate',
-      ciphers: 'Ciphers',
-      upload: 'Upload',
-      browse: 'Browse',
-      faker: 'Faker',
-      content: 'Content',
-      cut: 'Cut',
-      copy: 'Copy',
-      paste: 'Paste',
-      tools: 'Tools',
-      variables: 'Variables',
-      processes: 'Processes',
-      database: 'Database',
-      scratchpad: 'Scratchpad',
-      array: 'Array',
-      changelog: 'Changelog',
-      format: 'Format',
-      sshTunnel: 'SSH tunnel',
-      structure: 'Structure',
-      small: 'Small',
-      medium: 'Medium',
-      large: 'Large',
-      row: 'Row | Rows',
-      cell: 'Cell | Cells',
-      triggerFunction: 'Trigger function | Trigger functions',
-      all: 'All',
-      duplicate: 'Duplicate',
-      routine: 'Routine',
-      new: 'New',
-      history: 'History',
-      select: 'Select',
-      passphrase: 'Passphrase',
-      filter: 'Filter',
-      change: 'Change',
-      views: 'Views',
-      triggers: 'Triggers',
-      routines: 'Routines',
-      functions: 'Functions',
-      schedulers: 'Schedulers',
-      includes: 'Includes',
-      drop: 'Drop',
-      completed: 'Completed',
-      aborted: 'Aborted',
-      disabled: 'Disabled',
-      enable: 'Enable',
-      disable: 'Disable',
-      commit: 'Commit',
-      rollback: 'Rollback',
-      connectionString: 'Connection string',
-      contributors: 'Contributors',
-      pin: 'Pin',
-      unpin: 'Unpin',
-      console: 'Console',
-      shortcuts: 'Shortcuts',
-      folder: 'Folder | Folders',
-      appearence: 'Appearence',
-      color: 'Color',
-      label: 'Label',
-      icon: 'Icon',
-      resultsTable: 'Results table'
    },
    message: {
-      appWelcome: 'Welcome to Antares SQL Client!',
-      appFirstStep: 'Your first step: create a new database connection.',
-      addConnection: 'Add connection',
-      createConnection: 'Create connection',
-      createNewConnection: 'Create new connection',
-      askCredentials: 'Ask for credentials',
-      testConnection: 'Test connection',
-      editConnection: 'Edit connection',
-      deleteConnection: 'Delete connection',
-      deleteCorfirm: 'Do you confirm the cancellation of',
-      connectionSuccessfullyMade: 'Connection successfully made!',
-      madeWithJS: 'Made with 💛 and JavaScript!',
-      checkForUpdates: 'Check for updates',
-      noUpdatesAvailable: 'No updates available',
-      checkingForUpdate: 'Checking for updates',
-      checkFailure: 'Check failed, please try later',
-      updateAvailable: 'Update available',
-      downloadingUpdate: 'Downloading update',
-      updateDownloaded: 'Update downloaded',
-      restartToInstall: 'Restart Antares to install',
-      unableEditFieldWithoutPrimary: 'Unable to edit a field without a primary key in resultset',
-      editCell: 'Edit cell',
-      deleteRows: 'Delete row | Delete {count} rows',
-      confirmToDeleteRows: 'Do you confirm to delete one row? | Do you confirm to delete {count} rows?',
-      notificationsTimeout: 'Notifications timeout',
-      uploadFile: 'Upload file',
-      addNewRow: 'Add new row',
-      numberOfInserts: 'Number of inserts',
-      openNewTab: 'Open a new tab',
-      affectedRows: 'Affected rows',
-      createNewDatabase: 'Create new Database',
-      databaseName: 'Database name',
-      serverDefault: 'Server default',
-      deleteDatabase: 'Delete database',
-      editDatabase: 'Edit database',
-      clearChanges: 'Clear changes',
-      addNewField: 'Add new field',
-      manageIndexes: 'Manage indexes',
-      manageForeignKeys: 'Manage foreign keys',
-      allowNull: 'Allow NULL',
-      zeroFill: 'Zero fill',
-      customValue: 'Custom value',
-      onUpdate: 'On update',
-      deleteField: 'Delete field',
-      createNewIndex: 'Create new index',
-      addToIndex: 'Add to index',
-      createNewTable: 'Create new table',
-      emptyTable: 'Empty table',
-      deleteTable: 'Delete table',
-      emptyCorfirm: 'Do you confirm to empty',
-      unsavedChanges: 'Unsaved changes',
-      discardUnsavedChanges: 'You have some unsaved changes. Closing this tab these changes will be discarded.',
-      thereAreNoIndexes: 'There are no indexes',
-      thereAreNoForeign: 'There are no foreign keys',
-      createNewForeign: 'Create new foreign key',
-      referenceTable: 'Ref. table',
-      referenceField: 'Ref. field',
-      foreignFields: 'Foreign fields',
-      invalidDefault: 'Invalid default',
-      onDelete: 'On delete',
-      applicationTheme: 'Application Theme',
-      editorTheme: 'Editor Theme',
-      wrapLongLines: 'Wrap long lines',
-      selectStatement: 'Select statement',
-      triggerStatement: 'Trigger statement',
-      sqlSecurity: 'SQL security',
-      updateOption: 'Update option',
-      deleteView: 'Delete view',
-      createNewView: 'Create new view',
-      deleteTrigger: 'Delete trigger',
-      createNewTrigger: 'Create new trigger',
-      currentUser: 'Current user',
-      routineBody: 'Routine body',
-      dataAccess: 'Data access',
-      thereAreNoParameters: 'There are no parameters',
-      createNewParameter: 'Create new parameter',
-      createNewRoutine: 'Create new stored routine',
-      deleteRoutine: 'Delete stored routine',
-      functionBody: 'Function body',
-      createNewFunction: 'Create new function',
-      deleteFunction: 'Delete function',
-      schedulerBody: 'Scheduler body',
-      createNewScheduler: 'Create new scheduler',
-      deleteScheduler: 'Delete scheduler',
-      preserveOnCompletion: 'Preserve on completion',
-      enableSsl: 'Enable SSL',
-      manualValue: 'Manual value',
-      tableFiller: 'Table Filler',
-      fakeDataLanguage: 'Fake data language',
-      searchForElements: 'Search for elements',
-      selectAll: 'Select all',
-      queryDuration: 'Query duration',
-      includeBetaUpdates: 'Include beta updates',
-      setNull: 'Set NULL',
-      processesList: 'Processes list',
-      processInfo: 'Process info',
-      manageUsers: 'Manage users',
-      createNewSchema: 'Create new schema',
-      schemaName: 'Schema name',
-      editSchema: 'Edit schema',
-      deleteSchema: 'Delete schema',
-      markdownSupported: 'Markdown supported',
-      plantATree: 'Plant a Tree',
-      dataTabPageSize: 'DATA tab page size',
-      enableSsh: 'Enable SSH',
-      pageNumber: 'Page number',
-      duplicateTable: 'Duplicate table',
-      noOpenTabs: 'There are no open tabs, navigate on the left bar or:',
-      noSchema: 'No schema',
-      restorePreviourSession: 'Restore previous session',
-      runQuery: 'Run query',
-      thereAreNoTableFields: 'There are no table fields',
-      newTable: 'New table',
-      newView: 'New view',
-      newTrigger: 'New trigger',
-      newRoutine: 'New routine',
-      newFunction: 'New function',
-      newScheduler: 'New scheduler',
-      newTriggerFunction: 'New trigger function',
-      thereIsNoQueriesYet: 'There is no queries yet',
-      searchForQueries: 'Search for queries',
-      killProcess: 'Kill process',
-      closeTab: 'Close tab',
-      exportSchema: 'Export schema',
-      importSchema: 'Import schema',
-      directoryPath: 'Directory path',
-      newInserStmtEvery: 'New INSERT statement every',
-      processingTableExport: 'Processing {table}',
-      fechingTableExport: 'Fetching {table} data',
-      writingTableExport: 'Writing {table} data',
-      checkAllTables: 'Check all tables',
-      uncheckAllTables: 'Uncheck all tables',
-      goToDownloadPage: 'Go to download page',
-      readOnlyMode: 'Read-only mode',
-      killQuery: 'Kill query',
-      insertRow: 'Insert row | Insert rows',
-      commitMode: 'Commit mode',
-      autoCommit: 'Auto commit',
-      manualCommit: 'Manual commit',
-      actionSuccessful: '{action} successful',
-      importQueryErrors: 'Warning: {n} error has occurrend | Warning: {n} errors occurred',
-      executedQueries: '{n} query executed | {n} queries executed',
-      ourputFormat: 'Output format',
-      singleFile: 'Single {ext} file',
-      zipCompressedFile: 'ZIP compressed {ext} file',
-      disableBlur: 'Disable blur',
-      untrustedConnection: 'Untrusted connection',
-      missingOrIncompleteTranslation: 'Missing or incomplete translation?',
-      findOutHowToContribute: 'Find out how to contribute',
-      disableFKChecks: 'Disable foreigh key checks',
-      allConnections: 'All connections',
-      searchForConnections: 'Search for connections',
-      disableScratchpad: 'Disable scratchpad',
-      reportABug: 'Report a bug',
-      nextTab: 'Next tab',
-      previousTab: 'Previous tab',
-      selectTabNumber: 'Select tab number {param}',
-      toggleConsole: 'Toggle console',
-      addShortcut: 'Add shortcut',
-      editShortcut: 'Edit shortcut',
-      deleteShortcut: 'Delete shortcut',
-      restoreDefaults: 'Restore defaults',
-      restoreDefaultsQuestion: 'Do you confirm to restore default values?',
-      registerAShortcut: 'Register a shortcut',
-      invalidShortcutMessage: 'Invalid combination, continue to type',
-      shortcutAlreadyExists: 'Shortcut already exists',
-      saveContent: 'Save content',
-      openAllConnections: 'Open all connections',
-      openSettings: 'Open settings',
-      openScratchpad: 'Open scratchpad',
-      runOrReload: 'Run or reload',
-      formatQuery: 'Format query',
-      queryHistory: 'Query history',
-      clearQuery: 'Clear query',
-      openFilter: 'Open filter',
-      nextResultsPage: 'Next results page',
-      previousResultsPage: 'Previous results page',
-      fillCell: 'Fill cell',
-      editFolder: 'Edit folder',
-      folderName: 'Folder name',
-      deleteFolder: 'Delete folder',
-      editConnectionAppearence: 'Edit connection appearence',
-      executeSelectedQuery: 'Execute selected query',
-      defaultCopyType: 'Default copy type',
-      showTableSize: 'Show table size in sidebar',
-      showTableSizeDescription: 'MySQL/MariaDB only. Enable this option may affects performance on schema with many tables.'
-   },
-   faker: {
-      address: 'Address',
-      commerce: 'Commerce',
-      company: 'Company',
-      database: 'Database',
-      date: 'Date',
-      finance: 'Finance',
-      git: 'Git',
-      hacker: 'Hacker',
-      internet: 'Internet',
-      lorem: 'Lorem',
-      name: 'Name',
-      music: 'Music',
-      phone: 'Phone',
-      random: 'Random',
-      system: 'System',
-      time: 'Time',
-      vehicle: 'Vehicle',
-      zipCode: 'Zip code',
-      zipCodeByState: 'Zip code by state',
-      city: 'City',
-      cityPrefix: 'City prefix',
-      citySuffix: 'City suffix',
-      streetName: 'Street name',
-      streetAddress: 'Street address',
-      streetSuffix: 'Street suffix',
-      streetPrefix: 'Street prefix',
-      secondaryAddress: 'Secondary address',
-      county: 'County',
-      country: 'Country',
-      countryCode: 'Country code',
-      state: 'State',
-      stateAbbr: 'State abbreviation',
-      latitude: 'Latitude',
-      longitude: 'Longitude',
-      direction: 'Direction',
-      cardinalDirection: 'Cardinal direction',
-      ordinalDirection: 'Ordinal direction',
-      nearbyGPSCoordinate: 'Nearby GPS coordinate',
-      timeZone: 'Time zone',
-      color: 'Color',
-      department: 'Department',
-      productName: 'Product name',
-      price: 'Price',
-      productAdjective: 'Product adjective',
-      productMaterial: 'Product material',
-      product: 'Product',
-      productDescription: 'Product description',
-      suffixes: 'Suffixes',
-      companyName: 'Company name',
-      companySuffix: 'Company suffix',
-      catchPhrase: 'Catch phrase',
-      bs: 'BS',
-      catchPhraseAdjective: 'Catch phrase adjective',
-      catchPhraseDescriptor: 'Catch phrase descriptor',
-      catchPhraseNoun: 'Catch phrase noun',
-      bsAdjective: 'BS adjective',
-      bsBuzz: 'BS buzz',
-      bsNoun: 'BS noun',
-      column: 'Column',
-      type: 'Type',
-      collation: 'Collation',
-      engine: 'Engine',
-      past: 'Past',
-      now: 'Now',
-      future: 'Future',
-      between: 'Between',
-      recent: 'Recent',
-      soon: 'Soon',
-      month: 'Month',
-      weekday: 'Weekday',
-      account: 'Account',
-      accountName: 'Account name',
-      routingNumber: 'Routing number',
-      mask: 'Mask',
-      amount: 'Amount',
-      transactionType: 'Transaction type',
-      currencyCode: 'Currency code',
-      currencyName: 'Currency name',
-      currencySymbol: 'Currency symbol',
-      bitcoinAddress: 'Bitcoin address',
-      litecoinAddress: 'Litecoin address',
-      creditCardNumber: 'Credit card number',
-      creditCardCVV: 'Credit card CVV',
-      ethereumAddress: 'Ethereum address',
-      iban: 'Iban',
-      bic: 'Bic',
-      transactionDescription: 'Transaction description',
-      branch: 'Branch',
-      commitEntry: 'Commit entry',
-      commitMessage: 'Commit message',
-      commitSha: 'Commit SHA',
-      shortSha: 'Short SHA',
-      abbreviation: 'Abbreviation',
-      adjective: 'Adjective',
-      noun: 'Noun',
-      verb: 'Verb',
-      ingverb: 'Ingverb',
-      phrase: 'Phrase',
-      avatar: 'Avatar',
-      email: 'Email',
-      exampleEmail: 'Example email',
-      userName: 'Username',
-      protocol: 'Protocol',
-      url: 'Url',
-      domainName: 'Domin name',
-      domainSuffix: 'Domain suffix',
-      domainWord: 'Domain word',
-      ip: 'Ip',
-      ipv6: 'Ipv6',
-      userAgent: 'User agent',
-      mac: 'Mac',
-      password: 'Password',
-      word: 'Word',
-      words: 'Words',
-      sentence: 'Sentence',
-      slug: 'Slug',
-      sentences: 'Sentences',
-      paragraph: 'Paragraph',
-      paragraphs: 'Paragraphs',
-      text: 'Text',
-      lines: 'Lines',
-      genre: 'Genre',
-      firstName: 'First name',
-      lastName: 'Last name',
-      middleName: 'Middle name',
-      findName: 'Full name',
-      jobTitle: 'Job title',
-      gender: 'Gender',
-      prefix: 'Prefix',
-      suffix: 'Suffix',
-      title: 'Title',
-      jobDescriptor: 'Job descriptor',
-      jobArea: 'Job area',
-      jobType: 'Job type',
-      phoneNumber: 'Phone number',
-      phoneNumberFormat: 'Phone number format',
-      phoneFormats: 'Phone formats',
-      number: 'Number',
-      float: 'Float',
-      arrayElement: 'Array element',
-      arrayElements: 'Array elements',
-      objectElement: 'Object element',
-      uuid: 'Uuid',
-      boolean: 'Boolean',
-      image: 'Image',
-      locale: 'Locale',
-      alpha: 'Alpha',
-      alphaNumeric: 'Alphanumeric',
-      hexaDecimal: 'Hexadecimal',
-      fileName: 'File name',
-      commonFileName: 'Common file name',
-      mimeType: 'Mime type',
-      commonFileType: 'Common file type',
-      commonFileExt: 'Common file extension',
-      fileType: 'File type',
-      fileExt: 'File extension',
-      directoryPath: 'Directory path',
-      filePath: 'File path',
-      semver: 'Semver',
-      manufacturer: 'Manufacturer',
-      model: 'Model',
-      fuel: 'Fuel',
-      vin: 'Vin'
    }
 };

src/renderer/i18n/it-IT.ts

@@ -1,491 +1,6 @@
 export const itIT = {
    word: {
-      edit: 'Modifica',
-      save: 'Salva',
-      close: 'Chiudi',
-      delete: 'Elimina',
-      confirm: 'Conferma',
-      cancel: 'Annulla',
-      send: 'Invia',
-      connectionName: 'Nome connessione',
-      client: 'Client',
-      hostName: 'Nome host',
-      port: 'Porta',
-      user: 'Utente',
-      password: 'Password',
-      credentials: 'Credenziali',
-      connect: 'Connetti',
-      connected: 'Connesso',
-      disconnect: 'Disconnetti',
-      disconnected: 'Disconnesso',
-      refresh: 'Aggiorna',
-      settings: 'Impostazioni',
-      general: 'Generale',
-      themes: 'Temi',
-      update: 'Aggiornamento',
-      about: 'Informazioni',
-      language: 'Lingua',
-      version: 'Versione',
-      donate: 'Dona',
-      run: 'Esegui',
-      schema: 'Schema',
-      results: 'Risultati',
-      size: 'Dimensioni',
-      seconds: 'Secondi',
-      type: 'Tipo',
-      mimeType: 'Mime-Type',
-      download: 'Scarica',
-      add: 'Aggiungi',
-      data: 'Dati',
-      properties: 'Proprietà',
-      insert: 'Inserisci',
-      connecting: 'Connessione in corso',
-      name: 'Nome',
-      collation: 'Confronto',
-      clear: 'Scarta',
-      options: 'Opzioni',
-      autoRefresh: 'Auto-aggiorna',
-      indexes: 'Indici',
-      foreignKeys: 'Chiavi esterne',
-      length: 'Lunghezza',
-      unsigned: 'Senza segno',
-      default: 'Default',
-      comment: 'Commento',
-      key: 'Chiave | Chiavi',
-      order: 'Ordine',
-      expression: 'Espressione',
-      autoIncrement: 'Auto Incremento',
-      engine: 'Motore',
-      field: 'Campo | Campi',
-      approximately: 'Approssimativamente',
-      total: 'Totali',
-      table: 'Tabella',
-      discard: 'Scarta',
-      stay: 'Resta',
-      author: 'Autore',
-      light: 'Chiaro',
-      dark: 'Scuro',
-      autoCompletion: 'Auto Completamento',
-      application: 'Applicazione',
-      editor: 'Editor',
-      view: 'Vista',
-      definer: 'Definer',
-      algorithm: 'Algoritmo',
-      trigger: 'Trigger | Triggers',
-      storedRoutine: 'Stored routine | Stored routines',
-      scheduler: 'Scheduler | Schedulers',
-      event: 'Evento',
-      parameters: 'Parametri',
-      function: 'Funzione | Funzioni',
-      deterministic: 'Deterministico',
-      context: 'Contesto',
-      export: 'Esporta',
-      import: 'Importa',
-      returns: 'Ritorna',
-      timing: 'Temporizzazione',
-      state: 'Stato',
-      execution: 'Esecuzione',
-      starts: 'Inizia',
-      ends: 'Finisce',
-      ssl: 'SSL',
-      privateKey: 'Chiave privata',
-      certificate: 'Certificato',
-      caCertificate: 'Certificato CA',
-      ciphers: 'Ciphers',
-      upload: 'Carica',
-      browse: 'Sfoglia',
-      faker: 'Faker',
-      content: 'Contenuto',
-      cut: 'Taglia',
-      copy: 'Copia',
-      paste: 'Incolla',
-      tools: 'Strumenti',
-      variables: 'Variabili',
-      processes: 'Processi',
-      database: 'Database',
-      scratchpad: 'Blocco appunti',
-      array: 'Array',
-      changelog: 'Changelog',
-      format: 'Formatta',
-      sshTunnel: 'SSH tunnel',
-      structure: 'Structure',
-      small: 'Piccolo',
-      medium: 'Medio',
-      large: 'Largo',
-      row: 'Riga | Righe',
-      cell: 'Cella | Celle',
-      triggerFunction: 'Funzione di trigger | Funzioni di trigger',
-      all: 'Tutto',
-      duplicate: 'Duplica',
-      routine: 'Routine',
-      new: 'Nuovo',
-      history: 'Cronologia',
-      select: 'Seleziona',
-      passphrase: 'Passphrase',
-      filter: 'Filtra',
-      change: 'Cambia',
-      views: 'Viste',
-      triggers: 'Trigger',
-      routines: 'Routine',
-      functions: 'Function',
-      schedulers: 'Scheduler',
-      includes: 'Includi',
-      drop: 'Drop',
-      completed: 'Completato',
-      aborted: 'Annullato',
-      disabled: 'Disabilitato',
-      enable: 'Abilita',
-      disable: 'Disabilita',
-      commit: 'Commit',
-      rollback: 'Rollback',
-      connectionString: 'Connection string',
-      contributors: 'Contributori',
-      pin: 'Fissa',
-      unpin: 'Sgancia',
-      console: 'Console',
-      shortcuts: 'Scorciatoie'
    },
    message: {
-      appWelcome: 'Benvenuto in Antares SQL Client!',
-      appFirstStep: 'Primo step: crea una nuova connessione.',
-      addConnection: 'Aggiungi connessione',
-      createConnection: 'Crea connessione',
-      createNewConnection: 'Crea nuova connessione',
-      askCredentials: 'Chiedi credenziali',
-      testConnection: 'Testa connessione',
-      editConnection: 'Modifica connessione',
-      deleteConnection: 'Elimina connessione',
-      deleteCorfirm: 'Confermi l\'eliminazione di',
-      connectionSuccessfullyMade: 'Connessione avvenuta con successo!',
-      madeWithJS: 'Fatto con 💛 e JavaScript!',
-      checkForUpdates: 'Cerca aggiornamenti',
-      noUpdatesAvailable: 'Nessun aggiornamento disponibile',
-      checkingForUpdate: 'Controllo aggiornamenti in corso',
-      checkFailure: 'Controllo fallito, riprova più tardi',
-      updateAvailable: 'Aggiornamento disponibile',
-      downloadingUpdate: 'Download dell\'aggiornamento',
-      updateDownloaded: 'Aggiornamento scaricato',
-      restartToInstall: 'Riavvia Antares per installare l\'aggiornamento',
-      unableEditFieldWithoutPrimary: 'Impossibile modificare il campo senza una primary key nel resultset',
-      editCell: 'Modifica cella',
-      deleteRows: 'Elimina riga | Elimina {count} righe',
-      confirmToDeleteRows: 'Confermi di voler cancellare una riga? | Confermi di voler cancellare {count} righe?',
-      notificationsTimeout: 'Timeout Notifiche',
-      uploadFile: 'Carica file',
-      addNewRow: 'Aggiungi nuova riga',
-      numberOfInserts: 'Numero di insert',
-      openNewTab: 'Apri nuova scheda',
-      affectedRows: 'Righe interessate',
-      createNewDatabase: 'Crea nuovo database',
-      databaseName: 'Nome database',
-      serverDefault: 'Default del server',
-      deleteDatabase: 'Cancella database',
-      editDatabase: 'Modifica database',
-      clearChanges: 'Scarta modifiche',
-      addNewField: 'Aggiungi nuovo campo',
-      manageIndexes: 'Gestisci indici',
-      manageForeignKeys: 'Gestisci chiavi esterne',
-      allowNull: 'Permetti NULL',
-      zeroFill: 'Riempimento con zero',
-      customValue: 'Varore personalizzato',
-      onUpdate: 'All\'aggiornamento',
-      deleteField: 'Cancella campo',
-      createNewIndex: 'Crea nuovo indice',
-      addToIndex: 'Aggiungi a indice',
-      createNewTable: 'Crea nuova tabella',
-      emptyTable: 'Svuota tabella',
-      deleteTable: 'Cancella tabella',
-      emptyCorfirm: 'Confermi di voler svuotare',
-      unsavedChanges: 'Modifiche non salvate',
-      discardUnsavedChanges: 'Hai modifiche non salvate. Lasciando questa scheda le modifiche saranno scartate.',
-      thereAreNoIndexes: 'Non ci sono indici',
-      thereAreNoForeign: 'Non ci sono chiavi esterne',
-      createNewForeign: 'Crea nuova chiave esterna',
-      referenceTable: 'Tabella di rif.',
-      referenceField: 'Campo di rif.',
-      foreignFields: 'Campi esterni',
-      invalidDefault: 'Default non valido',
-      onDelete: 'All\'eliminazione',
-      applicationTheme: 'Tema applicazione',
-      editorTheme: 'Tema editor',
-      wrapLongLines: 'A capo righe lunghe',
-      selectStatement: 'Dichiarazione select',
-      triggerStatement: 'Dichiarazione trigger',
-      sqlSecurity: 'Sicurezza SQL',
-      updateOption: 'Update option',
-      deleteView: 'Elimina vista',
-      createNewView: 'Crea nuova vista',
-      deleteTrigger: 'Elimina trigger',
-      createNewTrigger: 'Crea nuovo trigger',
-      currentUser: 'Utente attuale',
-      routineBody: 'Corpo della routine',
-      dataAccess: 'Accesso dati',
-      thereAreNoParameters: 'Non ci sono parametri',
-      createNewParameter: 'Crea nuovo parametro',
-      createNewRoutine: 'Crea nuova stored routine',
-      deleteRoutine: 'Elimina stored routine',
-      functionBody: 'Corpo della funzione',
-      createNewFunction: 'Crea nuova funzione',
-      deleteFunction: 'Elimina funzione',
-      schedulerBody: 'Corpo dello scheduler',
-      createNewScheduler: 'Crea nuovo scheduler',
-      deleteScheduler: 'Elimina scheduler',
-      preserveOnCompletion: 'Preserva al completamento',
-      enableSsl: 'Abilita SSL',
-      manualValue: 'Valore manuale',
-      tableFiller: 'Riempitore Tabella',
-      fakeDataLanguage: 'Lingua dati falsi',
-      searchForElements: 'Cerca elementi',
-      selectAll: 'Seleziona tutto',
-      queryDuration: 'Durata query',
-      includeBetaUpdates: 'Includi aggiornamenti beta',
-      setNull: 'Imposta NULL',
-      processesList: 'Lista processi',
-      processInfo: 'Info processo',
-      manageUsers: 'Gestisci utenti',
-      createNewSchema: 'Crea nuovo schema',
-      schemaName: 'Nome schema',
-      editSchema: 'Modifica schema',
-      deleteSchema: 'Elimina schema',
-      markdownSupported: 'Markdown supportato',
-      plantATree: 'Pianta un albero',
-      dataTabPageSize: 'Grandezza pagina tab DATI',
-      enableSsh: 'Abilita SSH',
-      pageNumber: 'Numero pagina',
-      duplicateTable: 'Duplica tabella',
-      noOpenTabs: 'Non ci sono tab aperte, naviga nella barra sinistra o:',
-      noSchema: 'Nessuno schema',
-      restorePreviourSession: 'Ripristina sessione precedente',
-      runQuery: 'Esegui query',
-      thereAreNoTableFields: 'Non ci sono campi della tabella',
-      newTable: 'Nuova tabella',
-      newView: 'Nuova vista',
-      newTrigger: 'Nuovo trigger',
-      newRoutine: 'Nuova routine',
-      newFunction: 'Nuova funzione',
-      newScheduler: 'Nuovo scheduler',
-      newTriggerFunction: 'Nuova funzione di trigger',
-      thereIsNoQueriesYet: 'Non ci sono ancora query',
-      searchForQueries: 'Cerca query',
-      killProcess: 'Uccidi processo',
-      closeTab: 'Chiudi tab',
-      exportSchema: 'Esporta schema',
-      importSchema: 'Importa schema',
-      directoryPath: 'Percorso directory',
-      newInserStmtEvery: 'Nuova istruzione INSERT ogni',
-      processingTableExport: 'Processo {table}',
-      fechingTableExport: 'Ricavo i dati {table}',
-      writingTableExport: 'Scrittura dati {table}',
-      checkAllTables: 'Seleziona tutte le tabelle',
-      uncheckAllTables: 'Deseleziona tutte le tabelle',
-      goToDownloadPage: 'Vai alla pagina di download',
-      readOnlyMode: 'Modalità sola lettura',
-      killQuery: 'Interrompi query',
-      insertRow: 'Inserisci riga | Inserisci righe',
-      commitMode: 'Modalità commit',
-      autoCommit: 'Auto commit',
-      manualCommit: 'Commit manuale',
-      actionSuccessful: '{action} riuscito',
-      importQueryErrors: 'Attenzione: si è verificato un errore | Attenzione si sono verificati {n} errori',
-      executedQueries: '{n} query eseguite | {n} query eseguite',
-      ourputFormat: 'Formato output',
-      singleFile: 'Singolo file {ext}',
-      zipCompressedFile: 'File {ext} zippato',
-      disableBlur: 'Disabilita sfocatura',
-      untrustedConnection: 'Connessione non affidabile',
-      missingOrIncompleteTranslation: 'Traduzione mancante o incompleta?',
-      findOutHowToContribute: 'Scopri come contribuire',
-      disableFKChecks: 'DIsabilita controllo foreigh key',
-      allConnections: 'Tutte le connessioni',
-      searchForConnections: 'Cerca una connessione',
-      disableScratchpad: 'Disabilita scratchpad',
-      reportABug: 'Segnala un bug',
-      nextTab: 'Prossima tab',
-      previousTab: 'Tab precedente',
-      selectTabNumber: 'Seleziona tab numero {param}',
-      toggleConsole: 'Attiva/disattiva console',
-      addShortcut: 'Aggiungi scorciatoia',
-      editShortcut: 'Modifica scorciatoia',
-      deleteShortcut: 'Cancella scorciatoia',
-      restoreDefaults: 'Ripristina predefiniti',
-      restoreDefaultsQuestion: 'Confermi di ripristinare i valori predefiniti?',
-      registerAShortcut: 'Registra una scorciatoia',
-      invalidShortcutMessage: 'Combinazione non valida, continua a digitare',
-      shortcutAlreadyExists: 'Scorciatoia esistente',
-      saveContent: 'Salva contenuto',
-      openAllConnections: 'Apri tutte le connessioni',
-      openSettings: 'Apri le impostazioni',
-      openScratchpad: 'Apri lo scratchpad',
-      runOrReload: 'Esegui o ricarica',
-      formatQuery: 'Formatta query',
-      queryHistory: 'Cronologia query',
-      clearQuery: 'Pulisci query',
-      openFilter: 'Apri il filtro',
-      nextResultsPage: 'Prossima pagina risultati',
-      previousResultsPage: 'Pagina risultati precedente'
-   },
-   faker: {
-      address: 'Indirizzo',
-      commerce: 'Commercio',
-      company: 'Compagnia',
-      database: 'Database',
-      date: 'Data',
-      finance: 'Finanza',
-      git: 'Git',
-      hacker: 'Hacker',
-      internet: 'Internet',
-      lorem: 'Lorem',
-      name: 'Nome',
-      music: 'Musica',
-      phone: 'Telefono',
-      random: 'Casuale',
-      system: 'Sistema',
-      time: 'Tempo',
-      vehicle: 'Veicolo',
-      zipCode: 'Codice zip',
-      zipCodeByState: 'Codice zip per stato',
-      city: 'Città',
-      cityPrefix: 'Prefisso città',
-      citySuffix: 'Suffisso città',
-      streetName: 'Nome strada',
-      streetAddress: 'Indirizzo strada',
-      streetSuffix: 'Suffisso strada',
-      streetPrefix: 'Prefisso strada',
-      secondaryAddress: 'Indirizzo secondario',
-      county: 'Contea',
-      country: 'Nazione',
-      countryCode: 'Codice nazione',
-      state: 'Stato',
-      stateAbbr: 'Abbreviazione stato',
-      latitude: 'Latitudine',
-      longitude: 'Longitudine',
-      direction: 'Direzione',
-      cardinalDirection: 'Direzione cardinale',
-      ordinalDirection: 'Direzione ordinale',
-      nearbyGPSCoordinate: 'Coordinate GPS vicine',
-      timeZone: 'Time zone',
-      color: 'Colore',
-      department: 'Dipartimento',
-      productName: 'Nome prodotto',
-      price: 'Prezzo',
-      productAdjective: 'Aggettivo prodotto',
-      productMaterial: 'Materiale prodotto',
-      product: 'Prodotto',
-      productDescription: 'Descrizione prodotto',
-      suffixes: 'Suffissi',
-      companyName: 'Nome compagnia',
-      companySuffix: 'Suffisso compagnia',
-      catchPhrase: 'Slogan',
-      bs: 'BS',
-      catchPhraseAdjective: 'Aggettivo slogan',
-      catchPhraseDescriptor: 'Descrittore slogan',
-      catchPhraseNoun: 'Sostantivo slogan',
-      bsAdjective: 'Aggettivo BS',
-      bsBuzz: 'Buzz BS',
-      bsNoun: 'Sostantivo BS',
-      column: 'Colonna',
-      type: 'Tipo',
-      collation: 'Confronto',
-      engine: 'Motore',
-      past: 'Passato',
-      future: 'Futuro',
-      between: 'Tra',
-      recent: 'Recente',
-      soon: 'Presto',
-      month: 'Mese',
-      weekday: 'Giorno della settimana',
-      account: 'Account',
-      accountName: 'Nome account',
-      routingNumber: 'Numero di instradamento',
-      mask: 'Maschera',
-      amount: 'Ammontare',
-      transactionType: 'Tipo transazione',
-      currencyCode: 'Codice valuta',
-      currencyName: 'Nome valuta',
-      currencySymbol: 'Simbolo valuta',
-      bitcoinAddress: 'Indirizzo Bitcoin',
-      litecoinAddress: 'Indirizzo Litecoin',
-      creditCardNumber: 'Numero carta di credito',
-      creditCardCVV: 'CVV carta di credito',
-      ethereumAddress: 'Indirizzo Ethereum',
-      iban: 'Iban',
-      bic: 'Bic',
-      transactionDescription: 'Descrizione transazione',
-      branch: 'Ramo',
-      commitEntry: 'Commit entry',
-      commitMessage: 'Messaggio di commit',
-      commitSha: 'SHA del commit',
-      shortSha: 'SHA breve',
-      abbreviation: 'Abbreviazione',
-      adjective: 'Aggettivo',
-      noun: 'Sostantivo',
-      verb: 'Verbo',
-      ingverb: 'Ingverb',
-      phrase: 'Frase',
-      avatar: 'Avatar',
-      email: 'Email',
-      exampleEmail: 'Email di esempio',
-      userName: 'Username',
-      protocol: 'Protocollo',
-      url: 'Url',
-      domainName: 'Nome dominio',
-      domainSuffix: 'Suffisso dominio',
-      domainWord: 'Parola dominio',
-      ip: 'Ip',
-      ipv6: 'Ipv6',
-      userAgent: 'User agent',
-      mac: 'Mac',
-      password: 'Password',
-      word: 'Parola',
-      words: 'Parole',
-      sentence: 'Sentenza',
-      slug: 'Slug',
-      sentences: 'Sentenze',
-      paragraph: 'Paragrafo',
-      paragraphs: 'Paragrafi',
-      text: 'Testo',
-      lines: 'Righe',
-      genre: 'Genere',
-      firstName: 'Nome',
-      lastName: 'Cognome',
-      middleName: 'Secondo nome',
-      findName: 'Nome completo',
-      jobTitle: 'Titolo di lavoro',
-      gender: 'Genere',
-      prefix: 'Prefisso',
-      suffix: 'Suffisso',
-      title: 'Titolo',
-      jobDescriptor: 'Descrittore del lavoro',
-      jobArea: 'Area di lavoro',
-      jobType: 'Tipo di lavoro',
-      phoneNumber: 'Numero di telefono',
-      phoneNumberFormat: 'Formato numeri di telefono',
-      phoneFormats: 'Formati di telefono',
-      number: 'Numero',
-      float: 'Float',
-      arrayElement: 'Elemento array',
-      arrayElements: 'Elementi array',
-      objectElement: 'Elemento object',
-      uuid: 'Uuid',
-      boolean: 'Booleano',
-      image: 'Immagine',
-      locale: 'Localizzazione',
-      alpha: 'Alfabetico',
-      alphaNumeric: 'Alfanumerico',
-      hexaDecimal: 'Esadecimale',
-      fileName: 'Nome file',
-      commonFileName: 'Nome file comune',
-      mimeType: 'Mime type',
-      commonFileType: 'Tipo file comune',
-      commonFileExt: 'Estensione file comune',
-      fileType: 'Tipo file',
-      fileExt: 'Estensione file',
-      directoryPath: 'Percorso directory',
-      filePath: 'Percorso file',
-      semver: 'Semver',
-      manufacturer: 'Produttore',
-      model: 'Modello',
-      fuel: 'Carburante',
-      vin: 'Vin'
    }
 };

src/renderer/index.ts

@@ -2,9 +2,7 @@
 import { ipcRenderer } from 'electron';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-import * as FloatingVue from 'floating-vue';
+import '@/css/reset.css';
-import '@mdi/font/css/materialdesignicons.css';
-import 'floating-vue/dist/style.css';
 import '@/scss/main.scss';
 
 import { useApplicationStore } from '@/stores/application';
@@ -17,7 +15,6 @@ import { i18n } from '@/i18n';
 createApp(App)
    .use(createPinia())
    .use(i18n)
-   .use(FloatingVue)
    .mount('#app');
 
 const { locale } = useSettingsStore();

src/renderer/libs/connStringDecode.ts

@@ -1,50 +0,0 @@
-import { ConnectionParams } from 'common/interfaces/antares';
-import * as formatter from 'pg-connection-string'; // parses a connection string
-
-const formatHost = (host: string) => {
-   const results = host === 'localhost' ? '127.0.0.1' : host;
-   return results;
-};
-
-const checkForSSl = (conn: string) => {
-   return conn.includes('ssl=true');
-};
-
-const connStringConstruct = (args: ConnectionParams & { pgConnString?: string }): ConnectionParams => {
-   if (!args.pgConnString)
-      return args;
-
-   if (typeof args.pgConnString !== 'string')
-      return args;
-
-   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-   const stringArgs: any = formatter.parse(args.pgConnString);
-
-   const client = args.client || 'pg';
-
-   args.client = client;
-   args.host = formatHost(stringArgs.host);
-   args.database = stringArgs.database;
-   args.port = stringArgs.port || '5432';
-   args.user = stringArgs.user;
-   args.password = stringArgs.password;
-
-   // ssh
-   args.ssh = stringArgs.ssh || args.ssh;
-   args.sshHost = stringArgs.sshHost;
-   args.sshUser = stringArgs.sshUser;
-   args.sshPass = stringArgs.sshPass;
-   args.sshKey = stringArgs.sshKey;
-   args.sshPort = stringArgs.sshPort;
-
-   // ssl mode
-   args.ssl = checkForSSl(args.pgConnString);
-   args.cert = stringArgs.sslcert;
-   args.key = stringArgs.sslkey;
-   args.ca = stringArgs.sslrootcert;
-   args.ciphers = stringArgs.ciphers;
-
-   return args;
-};
-
-export default connStringConstruct;

src/renderer/libs/exportRows.ts

@@ -1,63 +0,0 @@
-import { ClientCode } from 'common/interfaces/antares';
-import { jsonToSqlInsert } from 'common/libs/sqlUtils';
-
-export const exportRows = (args: {
-   type: 'csv' | 'json'| 'sql';
-   content: object[];
-   table: string;
-   client?: ClientCode;
-   fields?: {
-      [key: string]: {type: string; datePrecision: number};
-   };
-}) => {
-   let mime;
-   let content;
-
-   switch (args.type) {
-      case 'csv': {
-         mime = 'text/csv';
-         const csv = [];
-
-         if (args.content.length)
-            csv.push(Object.keys(args.content[0]).join(';'));
-
-         for (const row of args.content)
-            csv.push(Object.values(row).map(col => typeof col === 'string' ? `"${col}"` : col).join(';'));
-
-         content = csv.join('\n');
-         break;
-      }
-      case 'sql': {
-         mime = 'text/sql';
-         const sql = [];
-
-         for (const row of args.content) {
-            sql.push(jsonToSqlInsert({
-               json: row,
-               client:
-               args.client,
-               fields: args.fields,
-               table: args.table
-            }));
-         }
-
-         content = sql.join('\n');
-         break;
-      }
-      case 'json':
-         mime = 'application/json';
-         content = JSON.stringify(args.content, null, 3);
-         break;
-      default:
-         break;
-   }
-
-   const file = new Blob([content], { type: mime });
-   const downloadLink = document.createElement('a');
-   downloadLink.download = `${args.table}.${args.type}`;
-   downloadLink.href = window.URL.createObjectURL(file);
-   downloadLink.style.display = 'none';
-   document.body.appendChild(downloadLink);
-   downloadLink.click();
-   downloadLink.remove();
-};

src/renderer/libs/getContrast.ts

@@ -1,4 +0,0 @@
-export const getContrast = (hexcolor: string) => {
-   if (!hexcolor) return '';
-   return (parseInt(hexcolor.replace('#', ''), 16) > 0xffffff / 2) ? 'dark' : 'light';
-};

src/renderer/libs/unproxify.ts

@@ -1,22 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { toRaw } from 'vue';
-
-/**
- * @param {*} val
- * @param {Boolean} json converts the value in JSON object (default true)
- */
-export function unproxify (val: any, json = true): any {
-   if (json)// JSON conversion
-      return JSON.parse(JSON.stringify(val));
-   else if (Array.isArray(val))// If array
-      return toRaw(val);
-   else if (typeof val === 'object') { // If object
-      const result: any = {};
-      for (const key in val)
-         result[key] = toRaw(val[key]);
-
-      return result;
-   }
-   else
-      return toRaw(val);
-}

src/renderer/scss/main.scss

@@ -0,0 +1,841 @@
+/* stylelint-disable block-no-empty */
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable selector-id-pattern */
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/MaterialIcons-Regular.eot"); /* For IE6-8 */
+  src:
+    local("Material Icons"),
+    local("MaterialIcons-Regular"),
+    url("../assets/fonts/MaterialIcons-Regular.woff2") format("woff2"),
+    url("../assets/fonts/MaterialIcons-Regular.woff") format("woff"),
+    url("../assets/fonts/MaterialIcons-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto Regular";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/Roboto-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto Mono";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/RobotoMono-Regular.ttf") format("truetype");
+}
+
+.material-icons {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  display: inline-flex;
+  vertical-align: middle;
+  text-decoration: inherit;
+  margin-right: 2px;
+  text-align: center;
+  line-height: 1;
+  text-transform: initial;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizelegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: "liga";
+}
+
+/* Generale */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: "Roboto Regular", Helvetica, sans-serif;
+  font-size: 100%;
+  color: #222;
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  background: #eaeaea;
+  color: #222;
+  -webkit-touch-callout: none; /* iOS Safari */
+  user-select: none;
+}
+
+a,
+a:link,
+a:visited {
+  color: #006799;
+  transition: color 0.2s;
+}
+
+a:hover {
+  color: #000;
+}
+
+p {
+  font-size: 1em;
+  margin-bottom: 1em;
+}
+
+li {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+}
+
+input,
+textarea,
+select {
+  font-size: 14px;
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  border: 1px solid #b7b7b7;
+  border-radius: 5px;
+  box-sizing: border-box;
+  margin: 1px;
+  padding: 10px;
+  display: block;
+  background: transparent;
+  color: #777;
+  max-width: 100%;
+  width: 100%;
+  outline: none;
+  letter-spacing: 0;
+}
+
+select {
+  padding: 6px 3px;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+select {
+  width: 100%;
+}
+
+input[type="text"]:disabled,
+input[type="number"]:disabled,
+input[type="submit"]:disabled {
+  opacity: 0.5;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: #0153b0;
+  border-width: 2px;
+  color: #777;
+  margin: 0;
+}
+
+label {
+  margin: 5px 0;
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  color: #0153b0;
+  background: #eaeaea;
+}
+
+/* HEADER */
+
+/* MAIN */
+
+#wrapper {
+  height: 100%;
+}
+
+#header {
+  padding: 10px 15px 0;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
+  background: #383e42;
+  color: #fcfcfc;
+  margin-bottom: 10px;
+}
+
+#header .material-icons {
+  font-size: 24px;
+  margin-top: -2px;
+}
+
+#appTitle {
+  font-size: 18px;
+}
+
+#appTabs {
+  display: flex;
+
+  /* margin-top: 15px; */
+}
+
+#appTabs .navTab {
+  padding: 10px 30px 15px;
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.6;
+  border-bottom: 2px solid transparent;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  transition: all 0.2s;
+  position: relative;
+}
+
+#appTabs .navTab.selected {
+  border-bottom: 2px solid #fff;
+  opacity: 1;
+}
+
+#appTabs .navTab .running {
+  position: absolute;
+  right: 5px;
+  top: 7px;
+  color: #33ce33;
+  font-size: 22px;
+}
+
+#main {
+  padding: 5px;
+  position: relative;
+}
+
+#client {
+  max-width: 400px;
+  min-width: 400px;
+  height: calc(100vh - 90px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-top: 10px;
+}
+
+#server {
+  max-width: 400px;
+  min-width: 400px;
+  height: calc(100vh - 90px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-top: 10px;
+}
+
+.input-element {
+  padding: 15px 10px;
+  position: relative;
+}
+
+.input-element label {
+  position: absolute;
+  top: 5px;
+  left: 20px;
+  padding: 0 5px;
+  z-index: 1;
+}
+
+.input-msg {
+  font-size: 12px;
+  color: #ff2f2f;
+}
+
+.box-50 {
+  width: 50%;
+  margin: 5px;
+}
+
+.box-100 {
+  width: 100%;
+}
+
+.console {
+  background: #2f323a;
+  border-radius: 5px;
+  color: #fcfcfc;
+  padding: 15px;
+  font-size: 12px;
+  line-height: 1.3;
+  font-family: monospace;
+  margin-right: 10px;
+  height: calc(100vh - 90px);
+  overflow: auto;
+  width: 100%;
+  user-select: text;
+}
+
+.console ::selection {
+  background-color: #33ce33;
+  color: #fcfcfc;
+}
+
+#hostBox,
+#portBox,
+#messageBox {
+  padding: 5px 5px 15px 10px;
+  position: relative;
+}
+
+#hostBox h3,
+#portBox h3,
+#messageBox h3 {
+  margin: 5px 0;
+  display: flex;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  color: #0153b0;
+  position: absolute;
+  align-items: center;
+  top: -9px;
+  left: 19px;
+  padding: 0 5px;
+  z-index: 1;
+  text-shadow: -1px 0 #eaeaea, 0 1px #eaeaea, 1px 0 #eaeaea, 0 -1px #eaeaea;
+}
+
+#hostBox h3 span,
+#portBox h3 span,
+#messageBox h3 span {
+  z-index: 1;
+}
+
+#hostBox h3::after,
+#portBox h3::after,
+#messageBox h3::after {
+  content: "";
+  height: 1px;
+  width: 100%;
+  background: #eaeaea;
+  display: block;
+  position: absolute;
+  z-index: 0;
+  left: 0;
+}
+
+.tools-box {
+  position: absolute;
+  top: -8px;
+  right: 15px;
+  display: flex;
+}
+
+#hostBox .round-button,
+#portBox .round-button,
+#messageBox .round-button {
+  position: relative;
+  border-radius: 50px;
+  color: #fff;
+  padding: 5px;
+  height: 26px;
+  max-width: 26px;
+  overflow: hidden;
+  cursor: pointer;
+  align-items: center;
+  transition: max-width 0.3s;
+  z-index: 2;
+  margin-left: 10px;
+}
+
+#hostBox .round-button span,
+#portBox .round-button span,
+#messageBox .round-button span {
+  white-space: nowrap;
+  opacity: 0;
+  margin-right: 20px;
+  font-size: 14px;
+  padding: 1px 0 0 5px;
+  transition: opacity 0.2s;
+}
+
+#hostBox .round-button .material-icons,
+#portBox .round-button .material-icons,
+#messageBox .round-button .material-icons {
+  font-size: 16px;
+  height: 16px;
+  margin: 0;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+#hostBox .round-button:hover,
+#portBox .round-button:hover,
+#messageBox .round-button:hover {
+  max-width: 180px;
+}
+
+#hostBox .round-button:hover span,
+#portBox .round-button:hover span,
+#messageBox .round-button:hover span {
+  opacity: 1;
+}
+
+#messageBox .format {
+  font-family: "Roboto Mono";
+  font-size: 10px;
+}
+
+#hostList,
+#portList,
+#messageList {
+  max-height: 120px;
+  border: 1px solid #b7b7b7;
+  border-radius: 5px;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  overflow: auto;
+}
+
+#portList {
+  max-height: 300px;
+}
+
+#configList {
+  padding: 0 5px;
+  max-height: 40vh;
+  overflow: auto;
+  margin-bottom: 20px;
+}
+
+#configList li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+#configList li .radio-btn {
+  font-size: 24px;
+  cursor: pointer;
+  color: #1565c0;
+}
+
+#hostList li,
+#portList li,
+#configList li,
+#messageList li {
+  position: relative;
+  padding-right: 25px;
+}
+
+#hostList li .deleteHost,
+#portList li .deletePort,
+#configList li .deleteConfig,
+#messageList li .deleteMessage {
+  position: absolute;
+  top: -2px;
+  right: 0;
+  cursor: pointer;
+  font-size: 18px;
+  height: 18px;
+  width: 18px;
+  background: #e22424;
+  border-radius: 50px;
+  color: #eaeaea;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+#hostList li .editHost,
+#portList li .editPort,
+#configList li .editConfig,
+#messageList li .editMessage {
+  position: absolute;
+  top: -2px;
+  right: 24px;
+  cursor: pointer;
+  font-size: 16px;
+  height: 18px;
+  width: 18px;
+  background: #1565c0;
+  border-radius: 50px;
+  color: #eaeaea;
+  opacity: 0;
+  transition: opacity 0.2s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#configList li .deleteConfig {
+  top: 3px;
+  margin: 0;
+}
+
+fieldset:not(:disabled) #hostList li:hover .deleteHost,
+fieldset:not(:disabled) #portList li:hover .deletePort,
+#configList li:hover .deleteConfig,
+fieldset:not(:disabled) #messageList li:hover .deleteMessage,
+fieldset:not(:disabled) #hostList li:hover .editHost,
+fieldset:not(:disabled) #portList li:hover .editPort,
+#configList li:hover .editConfig,
+fieldset:not(:disabled) #messageList li:hover .editMessage {
+  opacity: 1;
+}
+
+#hostList li .checkbox,
+#portList li .checkbox,
+#messageList li .checkbox {
+  font-size: 13px;
+  color: #777;
+  margin-left: 5px;
+  width: fit-content;
+}
+
+#serverReports {
+  padding: 5px 5px 15px 10px;
+}
+
+#serverReports h3 {
+  margin: 15px 0 20px;
+}
+
+#serverReports table {
+  width: 100%;
+}
+
+#serverReports th {
+  padding: 5px;
+  vertical-align: middle;
+  border-bottom: 2px solid #b7b7b7;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: left;
+}
+
+#serverReports td {
+  border-bottom: 1px solid #b7b7b7;
+  padding: 5px 5px 4px;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+#serverReports tfoot {
+  background: #d0d0d0;
+  font-weight: 700;
+}
+
+.help {
+  cursor: help;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.green {
+  color: #33ce33;
+}
+
+.green-bg {
+  background: #2aa72a;
+}
+
+.blue-bg {
+  background: #0153b0;
+}
+
+.yellow {
+  color: yellow;
+}
+
+.red {
+  color: #ff2f2f;
+}
+
+#popcontainer {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  background: rgb(0 0 0 / 30%);
+  z-index: 11;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+}
+
+.popup {
+  padding: 15px;
+  border-radius: 3px;
+  background: #eaeaea;
+  color: #000;
+  box-shadow: 0 0 10px -2px #000;
+  max-width: 70vw;
+  max-height: 90vh;
+}
+
+.popup h4 {
+  font-size: 18px;
+  margin-bottom: 15px;
+}
+
+.popup p {
+  line-height: 1.4;
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.buttons button {
+  transition: filter 0.2s;
+  letter-spacing: 1px;
+}
+
+.buttons button:hover {
+  filter: brightness(110%);
+}
+
+.buttons button:active {
+  filter: brightness(85%);
+}
+
+.button-wrap {
+  position: relative;
+  margin: 20px 5px;
+}
+
+.button-wrap .material-icons {
+  position: absolute;
+  top: 11px;
+  left: 8px;
+  font-size: 16px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+button.cancel {
+  background: transparent;
+  display: inline-block;
+  padding: 10px 14px 9px;
+  color: #0153b0 !important;
+  text-transform: uppercase;
+  border-radius: 5px;
+  border: none;
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  cursor: pointer;
+  outline: none;
+}
+
+button.save {
+  display: inline-block;
+  padding: 10px 14px 9px;
+  text-transform: uppercase;
+  border-radius: 5px;
+  border: 1px solid #b7b7b7;
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  cursor: pointer;
+  outline: none;
+  width: max-content;
+}
+
+button.confirm,
+input[type="submit"] {
+  background: #0153b0;
+  display: inline-block;
+  padding: 10px 14px 9px;
+  color: #fff !important;
+  text-transform: uppercase;
+  border-radius: 5px;
+  border: none;
+  border-bottom: 1px solid #0153b0;
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  cursor: pointer;
+  outline: none;
+  width: max-content;
+}
+
+button:disabled.confirm,
+input[type="submit"]:disabled {
+  background: #777;
+  border-bottom: 1px solid #777;
+  cursor: not-allowed;
+}
+
+button.stop,
+input[type="submit"] {
+  background: #e22424;
+  display: inline-block;
+  padding: 10px 14px 9px;
+  color: #fff !important;
+  text-transform: uppercase;
+  border-radius: 5px;
+  border: none;
+  border-bottom: 1px solid #e22424;
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  cursor: pointer;
+  outline: none;
+  width: max-content;
+}
+
+.button-wrap .material-icons.white {
+  color: #fff;
+}
+
+.button-wrap button {
+  padding-left: 30px;
+}
+
+#error404 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+/* SIDEBAR */
+
+/* FOOTER */
+
+/* VARI */
+.txtright {
+  text-align: right;
+}
+
+.txtleft {
+  text-align: left;
+}
+
+.txtcenter {
+  text-align: center;
+}
+
+.alignright {
+  float: right;
+  margin: 0.5em;
+  margin-right: 0;
+}
+
+.alignleft {
+  float: left;
+  margin: 0.5em;
+  margin-left: 0;
+}
+
+.flex {
+  display: flex;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+  margin: 7px 10px;
+  transition: opacity 0.2s;
+}
+
+fieldset:disabled .checkbox {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.toggle-select {
+  position: relative;
+}
+
+.toggle-select .material-icons {
+  font-size: 18px;
+  color: #1565c0;
+  z-index: 1;
+  position: relative;
+  cursor: pointer;
+}
+
+.toggle-select::after {
+  content: "";
+  height: 10px;
+  width: 10px;
+  background: #eaeaea;
+  display: block;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border-radius: 1px;
+  z-index: 0;
+}
+
+.checkbox-block {
+  display: flex;
+  height: 14px;
+  width: 14px;
+  min-width: 14px;
+  background: #ebebeb;
+  margin-right: 5px;
+  border: 2px solid #1565c0;
+  border-radius: 2px;
+  justify-content: center;
+  align-items: center;
+  transition: background 0.2s;
+}
+
+.checkbox input[type="checkbox"] {
+  display: none;
+}
+
+.checkbox input:checked + .checkbox-block {
+  background: #1565c0;
+}
+
+.checkbox input:checked + .checkbox-block::before {
+  content: "done";
+  display: block;
+  font-family: "Material Icons";
+  color: #fcfcfc;
+  font-size: 14px;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizelegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: "liga";
+}
+
+/* TABLET PORTRAIT */
+
+@media only screen and (min-width: 768px) {
+  /* 768px-HEADER */
+
+  /* 768px-MAIN */
+
+  /* 768px-FOOTER */
+}
+
+/* TABLET LANDSCAPE & NETBOOK */
+@media only screen and (min-width: 1024px) {
+  /* 1024px-HEADER */
+
+  /* 1024px-MAIN */
+
+  /* SIDEBAR */
+
+  /* 1024px-FOOTER */
+}
+
+/* DESKTOP */
+@media only screen and (min-width: 1200px) {
+}

src/renderer/untyped.d.ts

@@ -1,80 +1,3 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-types */
 declare module '@/App.vue';
-declare module 'v-mask';
-declare module 'vuedraggable' {// <- to export as default
-   const draggableComponent: import('vue').DefineComponent<{
-      list: {
-          type: ArrayConstructor;
-          required: boolean;
-          default: any;
-      };
-      modelValue: {
-          type: ArrayConstructor;
-          required: boolean;
-          default: any;
-      };
-      itemKey: {
-          type: (FunctionConstructor | StringConstructor)[];
-          required: boolean;
-      };
-      clone: {
-          type: FunctionConstructor;
-          default: (original: any) => any;
-      };
-      tag: {
-          type: StringConstructor;
-          default: string;
-      };
-      move: {
-          type: FunctionConstructor;
-          default: any;
-      };
-      componentData: {
-          type: ObjectConstructor;
-          required: boolean;
-          default: any;
-      };
-  }, unknown, {
-      error: boolean;
-  }, {
-      realList(): any;
-      getKey(): any;
-  }, {
-      getUnderlyingVm(domElement: any): any;
-      getUnderlyingPotencialDraggableComponent(htmElement: any): any;
-      emitChanges(evt: any): void;
-      alterList(onList: any): void;
-      spliceList(): void;
-      updatePosition(oldIndex: any, newIndex: any): void;
-      getRelatedContextFromMoveEvent({ to, related }: {
-          to: any;
-          related: any;
-      }): any;
-      getVmIndexFromDomIndex(domIndex: any): any;
-      onDragStart(evt: any): void;
-      onDragAdd(evt: any): void;
-      onDragRemove(evt: any): void;
-      onDragUpdate(evt: any): void;
-      computeFutureIndex(relatedContext: any, evt: any): any;
-      onDragMove(evt: any, originalEvent: any): any;
-      onDragEnd(): void;
-  }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, any[], any, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<{
-      move: Function;
-      tag: string;
-      clone: Function;
-      list: unknown[];
-      modelValue: unknown[];
-      componentData: Record<string, any>;
-  } & {
-      itemKey?: string | Function;
-  }>, {
-      move: Function;
-      tag: string;
-      clone: Function;
-      list: unknown[];
-      modelValue: unknown[];
-      componentData: Record<string, any>;
-  }>;
-   export = draggableComponent;
-}