refactor: i18n implementation

src/common/interfaces.ts

@@ -14,7 +14,22 @@ export interface ClientMessage {
    name: string;
 }
 
+export interface ClientReport {
+   host: string;
+   sockets: number;
+   messages: number;
+   received: number;
+   data: number;
+}
+
 export interface ServerPort {
    enabled: boolean;
    port: number;
 }
+
+export interface ServerReport {
+   port: number;
+   sockets: number;
+   data: number;
+   messages: number;
+}

src/main/libs/Sender.ts

@@ -1,7 +1,5 @@
 import * as net from 'net';
 import { ClientHost, ClientMessage } from 'common/interfaces';
-import * as ElectronStore from 'electron-store';
-const persistentStore = new ElectronStore({ name: 'client' });
 
 interface SenderParams {
    closeOnEcho: boolean;
@@ -13,31 +11,32 @@ interface SenderParams {
    trace: boolean;
    alertReset: boolean;
    loop: boolean;
+   messages: ClientMessage[];
 }
 
 class Sender {
-   process: NodeJS.Process;
+   private process: NodeJS.Process;
-   closeOnEcho: boolean;
+   private closeOnEcho: boolean;
-   persistentConnection: boolean;
+   private persistentConnection: boolean;
-   nMsgs: number;
+   private nMsgs: number;
-   tMin: number;
+   private tMin: number;
-   tMax: number;
+   private tMax: number;
-   nClients: number;
+   private nClients: number;
-   trace: boolean;
+   private trace: boolean;
-   alertReset: boolean;
+   private alertReset: boolean;
-   hexMsg: boolean;
+   private hexMsg: boolean;
-   nConnected: number;
+   private nConnected: number;
-   nClosed: number;
+   private nClosed: number;
-   nTryConnect: number;
+   private nTryConnect: number;
-   nReceived: number[];
+   private nReceived: number[];
-   nSent: number;
+   private nSent: number;
-   timeStart: Date;
+   private timeStart: Date;
-   hosts: ClientHost[];
+   private hosts: ClientHost[];
-   messages: ClientMessage[];
+   private messages: ClientMessage[];
-   nHostClients: number[];
+   private nHostClients: number[];
-   nHostBytes: number[];
+   private nHostBytes: number[];
-   nHostMsgs: number[];
+   private nHostMsgs: number[];
-   loop: boolean;
+   private loop: boolean;
 
    /**
     *Creates an instance of Sender.
@@ -78,6 +77,16 @@ class Sender {
       this.hosts = hosts;
    }
 
+   /**
+    * Setta gli hosts
+    *
+    * @param {*} messages
+    * @memberof Sender
+    */
+   setMessages (messages: ClientMessage[]) {
+      this.messages = messages;
+   }
+
    /**
     * Setta i parametri del messaggio
     *
@@ -102,12 +111,8 @@ class Sender {
     * @memberof Sender
     */
    loadMessages () {
-      if (this.trace) this.sendLog('Lettura dei messaggi');
+      if (this.trace)
-      const messages = persistentStore.get('messages', []) as ClientMessage[];
+         this.sendLog(null, '', 'messagesLoaded', { mNumber: this.messages.length });
-      this.messages = messages.filter((message) => {
-         return message.enabled === true;
-      });
-      if (this.trace) this.sendLog(`Messaggi caricari: ${this.messages.length}`);
    }
 
    /**
@@ -117,10 +122,15 @@ class Sender {
     * @param {string} [color=''] Colore del log (green, yellow, red)
     * @memberof Sender
     */
-   sendLog (message: string, color = '') {
+   sendLog (message?: string, color = '', i18n?: string, i18nParams?: {[key: string]: string | number}) {
       const log = {
          event: 'log',
-         content: { message, color }
+         content: {
+            message,
+            color,
+            i18n,
+            params: i18nParams
+         }
       };
       this.process.send(log);
    }
@@ -145,7 +155,7 @@ class Sender {
 
          return msg;
       }
-      else return 'Nessun messaggio specificato';
+      else return '';
    }
 
    /**
@@ -178,8 +188,11 @@ class Sender {
             const clientId = i + 1;
 
             try {
+               this.nTryConnect++;
+
                client.connect(params, () => {
-                  if (this.trace) this.sendLog(`Socket #${clientId} su ${params.host}:${params.port} aperto`);
+                  if (this.trace)
+                     this.sendLog(null, '', 'socketOpen', { number: clientId, host: params.host, port: params.port });
                   this.nHostClients[x]++;
 
                   (async () => {
@@ -190,7 +203,7 @@ class Sender {
 
                         client.write(msg, (err: Error) => {
                            if (err)
-                              this.sendLog(`Socket #${clientId} su ${params.host}:${params.port}:\nErrore messaggio: ${err}`, 'red');
+                              this.sendLog(null, 'red', 'logOnSocket', { number: clientId, host: params.host, port: params.port, message: err.toString() });
                            else {
                               this.nSent++;
                               this.nHostMsgs[x]++;
@@ -198,20 +211,19 @@ class Sender {
                            }
                         });
 
-                        if (this.trace) this.sendLog(`Socket #${clientId} su ${params.host}:${params.port} messaggio #${i + 1}`);
+                        if (this.trace) this.sendLog(null, '', 'socketMessage', { number: clientId, host: params.host, port: params.port, mNumber: i + 1 });
                         if (i + 1 === this.nMsgs && !this.closeOnEcho && !this.persistentConnection) client.end();
                      }// <- msg for
                   })();
                });
             }
             catch (err) {
-               this.sendLog(`Socket #${clientId} su ${params.host}:${params.port}:\n${err}`, 'red');
+               this.sendLog(null, 'red', 'logOnSocket', { number: clientId, host: params.host, port: params.port, message: err.toString() });
             }
 
             client.on('connect', (err: Error) => {
-               this.nTryConnect++;
                if (err)
-                  this.sendLog(`Errore connessione #${clientId} su ${params.host}:${params.port}:\n${err}`, 'red');
+                  this.sendLog(null, 'red', 'logOnSocket', { number: clientId, host: params.host, port: params.port, message: err.toString() });
                else
                   this.nConnected++;
                   // if (this.nConnected === (this.nClients * this.hosts.length)) this.getReport();
@@ -222,12 +234,14 @@ class Sender {
                if (this.closeOnEcho)
                   client.end();
 
-               if (this.trace) this.sendLog(`Socket #${clientId} su ${params.host}:${params.port} risposta: ${data}`);
+               if (this.trace)
+                  this.sendLog(null, '', 'socketReply', { number: clientId, host: params.host, port: params.port, reply: data.toString() });
             });
 
             client.on('close', () => {
                this.nClosed++;
-               if (this.trace) this.sendLog(`Socket #${clientId} su ${params.host}:${params.port} chiuso`);
+               if (this.trace)
+                  this.sendLog(null, '', 'socketClosed', { number: clientId, host: params.host, port: params.port });
 
                // Misura tempo esecuzione
                if (this.nClosed === this.nTryConnect) {
@@ -240,11 +254,10 @@ class Sender {
                switch (err.code) {
                   case 'ECONNRESET':
                      if (this.alertReset)
-                        this.sendLog(`Socket #${clientId} su ${params.host}:${params.port}:\n${err}`, 'yellow');
+                        this.sendLog(null, 'yellow', 'logOnSocket', { number: clientId, host: params.host, port: params.port, message: err.toString() });
-
                      break;
                   default:
-                     this.sendLog(`Socket #${clientId} su ${params.host}:${params.port}:\n${err}`, 'red');
+                     this.sendLog(null, 'red', 'logOnSocket', { number: clientId, host: params.host, port: params.port, message: err.toString() });
                }
             });
          }// <- clients for
@@ -272,19 +285,20 @@ class Sender {
             const clientId = i + 1;
 
             try {
+               this.nTryConnect++;
+
                client.connect(params, () => {
-                  if (this.trace) this.sendLog(`Socket #${clientId} su ${params.host}:${params.port} aperto`);
+                  if (this.trace) this.sendLog(null, '', 'socketOpen', { number: clientId, host: params.host, port: params.port });
                   this.nHostClients[x]++;
                });
             }
             catch (err) {
-               this.sendLog(`Socket #${clientId} su ${params.host}:${params.port}:\n${err}`, 'red');
+               this.sendLog(null, 'red', 'logOnSocket', { number: clientId, host: params.host, port: params.port, message: err.toString() });
             }
 
             client.on('connect', (err: Error) => {
-               this.nTryConnect++;
                if (err)
-                  this.sendLog(`Errore connessione #${clientId} su ${params.host}:${params.port}:\n${err}`, 'red');
+                  this.sendLog(null, 'red', 'logOnSocket', { number: clientId, host: params.host, port: params.port, message: err.toString() });
                else
                   this.nConnected++;
                   // if (this.nConnected === (this.nClients * this.hosts.length)) this.getReport();
@@ -297,23 +311,24 @@ class Sender {
                if (this.closeOnEcho)
                   client.end();
 
-               if (this.trace) this.sendLog(`Socket #${clientId} su ${params.host}:${params.port} risposta: ${data}`);
+               if (this.trace)
+                  this.sendLog(null, '', 'socketReply', { number: clientId, host: params.host, port: params.port, reply: data.toString() });
             });
 
             client.on('close', () => {
                this.nClosed++;
-               if (this.trace) this.sendLog(`Socket #${clientId} su ${params.host}:${params.port} chiuso`);
+               if (this.trace)
+                  this.sendLog(null, '', 'socketClosed', { number: clientId, host: params.host, port: params.port });
             });
 
             client.on('error', (err: Error & { code: string }) => {
                switch (err.code) {
                   case 'ECONNRESET':
                      if (this.alertReset)
-                        this.sendLog(`Socket #${clientId} su ${params.host}:${params.port}:\n${err}`, 'yellow');
+                        this.sendLog(null, 'yellow', 'logOnSocket', { number: clientId, host: params.host, port: params.port, message: err.toString() });
-
                      break;
                   default:
-                     this.sendLog(`Socket #${clientId} su ${params.host}:${params.port}:\n${err}`, 'red');
+                     this.sendLog(null, 'red', 'logOnSocket', { number: clientId, host: params.host, port: params.port, message: err.toString() });
                }
             });
          }// <- clients for
@@ -333,10 +348,10 @@ class Sender {
       this.nSent = 0;
 
       /** Applica uno sleep */
-      function delay () {
+      const delay = () => {
          const wait = Math.floor((Math.random() * this.tMax) + this.tMin);
          return new Promise(resolve => setTimeout(resolve, wait));
-      }
+      };
 
       for (let x = 0; x < this.hosts.length; x++) { // hosts for
          for (let i = 0; i < this.hosts[x].clients.length; i++) { // clients for
@@ -352,7 +367,7 @@ class Sender {
 
                   client.write(msg, (err: Error) => {
                      if (err)
-                        this.sendLog(`Socket #${clientId} su ${params.host}:${params.port}:\nErrore messaggio: ${err}`, 'red');
+                        this.sendLog(null, 'red', 'logOnSocket', { number: clientId, host: params.host, port: params.port, error: err.toString() });
                      else {
                         this.nSent++;
                         this.nHostMsgs[x]++;
@@ -361,7 +376,7 @@ class Sender {
                      }
                   });
 
-                  if (this.trace) this.sendLog(`Socket #${clientId} su ${params.host}:${params.port} messaggio #${i + 1}`);
+                  if (this.trace) this.sendLog(null, '', 'socketMessage', { number: clientId, host: params.host, port: params.port, mNumber: i + 1 });
                }// <- msg for
             })();
          }// <- clients for
@@ -370,10 +385,10 @@ class Sender {
 
    /** Genera il report su console */
    getConsoleReports () {
-      const end = new Date().getMilliseconds() - this.timeStart.getMilliseconds();
+      const end = Number(new Date()) - Number(this.timeStart);
-      const report = `Durata del test: ${end}ms`;
+      const i18n = 'testDuration';
 
-      this.sendLog(report, 'green');
+      this.sendLog(null, 'green', i18n, { ms: end });
    }
 
    stopClients (callback: () => void) {

src/main/libs/Server.ts

@@ -8,14 +8,14 @@ interface ServerParams {
  }
 
 class Server {
-   process: NodeJS.Process;
+   private process: NodeJS.Process;
-   trace: boolean;
+   private trace: boolean;
-   echo: boolean;
+   private echo: boolean;
-   alertReset: boolean;
+   private alertReset: boolean;
-   ports: ServerPort[];
+   private ports: ServerPort[];
-   server: net.Server[];
+   private server: net.Server[];
-   nBytes: number[];
+   private nBytes: number[];
-   nMsgs: number[];
+   private nMsgs: number[];
 
    constructor (process: NodeJS.Process) {
       this.process = process;
@@ -45,10 +45,15 @@ class Server {
     * @param {string} [color=''] Colore del log (green, yellow, red)
     * @memberof Server
     */
-   sendLog (message: string, color = '') {
+   sendLog (message?: string, color = '', i18n?: string, i18nParams?: {[key: string]: string | number}) {
       const log = {
          event: 'log',
-         content: { message, color }
+         content: {
+            message,
+            color,
+            i18n,
+            params: i18nParams
+         }
       };
       this.process.send(log);
    }
@@ -66,7 +71,8 @@ class Server {
          this.nMsgs[i] = 0;
 
          this.server[i].on('connection', (socket: net.Socket) => {
-            if (this.trace) this.sendLog(`Client connesso su porta ${port}`);
+            if (this.trace)
+               this.sendLog(null, '', 'clientConnectedOnPort', { port });
 
             socket.on('data', (msg: Buffer) => {
                const msgString = msg.toString();
@@ -74,33 +80,36 @@ class Server {
                this.nBytes[i] += msg.length;
                this.nMsgs[i]++;
 
-               if (this.trace) this.sendLog(`Messaggio ricevuto su porta ${port}: ${msgString}`);
+               if (this.trace)
+                  this.sendLog(null, '', 'messageReceivedOnPort', { port, message: msgString });
             });// <- socket data
 
             socket.on('end', () => {
-               if (this.trace) this.sendLog(`Client disconnesso su porta ${port}`);
+               if (this.trace)
+                  this.sendLog(null, '', 'clientDisonnectedOnPort', { port });
             });
 
             socket.on('error', (err: Error & { code: string }) => {
                switch (err.code) {
                   case 'ECONNRESET':
                      if (this.alertReset)
-                        this.sendLog(`Errore client su porta ${port}: \n${err}`, 'yellow');
+                        this.sendLog(null, 'yellow', 'clientErrorOnPort', { port, error: err.toString() });
                      else
-                     if (this.trace) this.sendLog(`Client disconnesso su porta ${port}`);
+                     if (this.trace)
+                        this.sendLog(null, '', 'clientDisonnectedOnPort', { port });
                      break;
                   default:
-                     this.sendLog(`Errore client su porta ${port}: \n${err}`, 'red');
+                     this.sendLog(null, 'red', 'clientErrorOnPort', { port, error: err.toString() });
                }
             });
          });// <- server
 
          this.server[i].on('error', (err: Error) => {
-            this.sendLog(`Errore server su porta ${port}: \n${err}`, 'red');
+            this.sendLog(null, 'red', 'serverErrorOnPort', { port, error: err.toString() });
          });
 
          this.server[i].listen(port, () => {
-            this.sendLog(`In ascolto sulla porta ${port}`);
+            this.sendLog(null, '', 'listenindOnPort', { port });
          });
       }
    }
@@ -127,7 +136,8 @@ class Server {
          };
 
          this.server[i].getConnections((err: Error, nSockets: number) => {
-            if (err) this.sendLog(`Errore report: \n${err}`, 'red');
+            if (err)
+               this.sendLog(null, 'red', 'reportError', { error: err.toString() });
             report.sockets = nSockets;
             reportList.push(report);
 

src/main/main.ts

@@ -148,8 +148,8 @@ else {
 
 // Client
 let clientProcess: ChildProcess;
-ipcMain.on('startTest', (event, { params, hosts }) => {
+ipcMain.on('start-test', (event, { params, hosts, messages }) => {
-   event.sender.send('clientLog', { message: 'Test avviato', color: '' });
+   event.sender.send('client-log', { message: '', color: '', i18n: 'testStarted' });
    clientProcess = fork(isDevelopment ? './dist/clientProcess.js' : path.resolve(__dirname, './clientProcess.js'), [], {
       execArgv: isDevelopment ? ['--inspect=9225'] : undefined
    });
@@ -159,8 +159,8 @@ ipcMain.on('startTest', (event, { params, hosts }) => {
    const testParams = {
       event: startEvent,
       params,
-      // storagePath,
+      hosts,
-      hosts
+      messages
    };
    clientProcess.send(testParams);
 
@@ -168,32 +168,32 @@ ipcMain.on('startTest', (event, { params, hosts }) => {
       if (!mainWindow) return;
       switch (message.event) {
          case 'log':
-            mainWindow.webContents.send('clientLog', message.content);
+            mainWindow.webContents.send('client-log', message.content);
             break;
          case 'finish':
             if (params.loop)
                clientProcess.send(testParams);
             else {
-               mainWindow.webContents.send('testFinish', message.content);
+               mainWindow.webContents.send('test-finish', message.content);
                clientProcess.kill();
             }
             break;
          case 'report':
-            mainWindow.webContents.send('reportClientList', message.content);
+            mainWindow.webContents.send('report-client-list', message.content);
             break;
       }
    });
 });
 
-ipcMain.on('sendMessages', (event) => {
+ipcMain.on('send-messages', (event) => {
    clientProcess.send({ event: 'sendStep' });
-   event.sender.send('clientLog', { message: 'Invio messaggi in corso', color: '' });
+   event.sender.send('client-log', { i18n: 'sendingMessages', color: '' });
 });
 
-ipcMain.on('stopTest', (event) => {
+ipcMain.on('stop-test', (event) => {
    try {
       clientProcess.send({ event: 'stop' });
-      event.sender.send('testFinish', 'Test interrotto');
+      event.sender.send('test-finish', 'testAborted');
    }
    catch (error) {
       clientProcess.kill();
@@ -202,8 +202,8 @@ ipcMain.on('stopTest', (event) => {
 
 // Server
 let serverProcess: ChildProcess;
-ipcMain.on('startServer', (event, { params, ports }) => {
+ipcMain.on('start-server', (event, { params, ports }) => {
-   event.sender.send('serverLog', { message: 'Server avviato', color: '' });
+   event.sender.send('server-log', { i18n: 'serverStart', color: '' });
    serverProcess = fork(isDevelopment ? './dist/serverProcess.js' : path.resolve(__dirname, './serverProcess.js'), [], {
       execArgv: isDevelopment ? ['--inspect=9224'] : undefined
    });
@@ -219,26 +219,26 @@ ipcMain.on('startServer', (event, { params, ports }) => {
       if (!mainWindow) return;
       switch (message.event) {
          case 'log':
-            mainWindow.webContents.send('serverLog', message.content);
+            mainWindow.webContents.send('server-log', message.content);
             break;
          case 'report':
-            mainWindow.webContents.send('reportServerList', message.content);
+            mainWindow.webContents.send('report-server-list', message.content);
             break;
       }
    });
 });
 
-ipcMain.on('stopServer', (event) => {
+ipcMain.on('stop-server', (event) => {
    try {
       serverProcess.send({ event: 'stop' });
-      event.sender.send('serverFinish', 'Server stoppato');
+      event.sender.send('server-finish', 'serverStop');
    }
    catch (error) {
       serverProcess.kill();
    }
 });
 
-ipcMain.on('resetReports', () => {
+ipcMain.on('reset-reports', () => {
    if (!mainWindow) return;
    try {
       serverProcess.send({ event: 'reset' });
@@ -248,7 +248,7 @@ ipcMain.on('resetReports', () => {
          message: error.stack,
          color: 'red'
       };
-      mainWindow.webContents.send('serverLog', data);
+      mainWindow.webContents.send('server-log', data);
    }
 });
 

src/main/workers/clientProcess.ts

@@ -1,66 +1,68 @@
-import { ClientHost } from 'common/interfaces';
+import { ClientHost, ClientMessage } from 'common/interfaces';
 import { Sender, SenderParams } from '../libs/Sender';
 
-const Sends = new Sender(process);
+const sender = new Sender(process);
 let clientTimer: NodeJS.Timer;
 
-process.on('message', (message: { event: string; hosts: ClientHost[]; params: SenderParams}) => {
+process.on('message', (message: { event: string; hosts: ClientHost[]; messages: ClientMessage[]; params: SenderParams}) => {
    switch (message.event) {
       case 'start':
-         Sends.setHosts(message.hosts);
+         sender.setHosts(message.hosts);
-         Sends.setParams(message.params);
+         sender.setMessages(message.messages);
+         sender.setParams(message.params);
 
-         Sends.startFullTest(() => {
+         sender.startFullTest(() => {
             const response = {
                event: 'finish',
-               content: 'Test concluso'
+               content: 'testEnded'
             };
             process.send(response);
             if (clientTimer !== undefined) clearInterval(clientTimer);
-            Sends.getReports();
+            sender.getReports();
          });
 
-         Sends.getReports();
+         sender.getReports();
 
          if (clientTimer === undefined) {
             clientTimer = setInterval(() => {
-               Sends.getReports();
+               sender.getReports();
             }, 200);
          }
          break;
       case 'startStep':
-         Sends.setHosts(message.hosts);
+         sender.setHosts(message.hosts);
-         Sends.setParams(message.params);
+         sender.setMessages(message.messages);
+         sender.setParams(message.params);
 
-         Sends.connectClients(() => {
+         sender.connectClients(() => {
             const response = {
                event: 'log',
-               content: { message: 'Client connessi', color: '' }
+               content: { i18n: 'clientsConnected', color: '' }
             };
             process.send(response);
          });
 
-         Sends.getReports();
+         sender.getReports();
 
          if (clientTimer === undefined) {
             clientTimer = setInterval(() => {
-               Sends.getReports();
+               sender.getReports();
             }, 200);
          }
          break;
-      case 'sendStep':
+      case 'sendertep':
-         Sends.sendMessages(() => {
+         sender.sendMessages(() => {
             const response = {
                event: 'log',
-               content: { message: 'Messaggi inviati', color: '' }
+               content: { i18n: 'messagesSent', color: '' }
             };
             process.send(response);
          });
          break;
       case 'stop':
-         Sends.stopClients(() => {
+         sender.stopClients(() => {
             if (clientTimer !== undefined) clearInterval(clientTimer);
-            Sends.getReports();
+            sender.getReports();
             process.exit();
          });
          break;

src/main/workers/serverProcess.ts

@@ -1,29 +1,29 @@
 import { ServerPort } from 'common/interfaces';
 import { Server, ServerParams } from '../libs/Server';
 
-const myServer = new Server(process);
+const server = new Server(process);
 let serverTimer: NodeJS.Timer;
 
 process.on('message', (message: {event: string; ports: ServerPort[]; params: ServerParams}) => {
    switch (message.event) {
       case 'start':
-         myServer.setPorts(message.ports);
+         server.setPorts(message.ports);
-         myServer.startServer(message.params);
+         server.startServer(message.params);
 
          if (serverTimer === undefined) {
             serverTimer = setInterval(() => {
-               myServer.getReports();
+               server.getReports();
             }, 200);
          }
          break;
       case 'stop':
-         myServer.stopServer(() => {
+         server.stopServer(() => {
             if (serverTimer !== undefined) clearInterval(serverTimer);
             process.exit();
          });
          break;
       case 'reset':
-         myServer.resetReports();
+         server.resetReports();
          break;
    }
 });

src/renderer/components/AppHeader.vue

@@ -6,12 +6,12 @@
             :class="{ selected : selTab === 0 }"
             @click="selectTab(0)"
          >
-            Client
+            {{ t('word.client', 1) }}
             <transition name="fade">
                <i
                   v-if="clientStatus === 1"
                   class="material-icons running"
-                  title="In esecuzione"
+                  :title="t('message.running')"
                >play_arrow</i>
             </transition>
          </div>
@@ -20,12 +20,12 @@
             :class="{ selected : selTab === 1 }"
             @click="selectTab(1)"
          >
-            Server
+            {{ t('word.server', 1) }}
             <transition name="fade">
                <i
                   v-if="serverStatus === 1"
                   class="material-icons running"
-                  title="In esecuzione"
+                  :title="t('message.running')"
                >play_arrow</i>
             </transition>
          </div>
@@ -34,6 +34,8 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
 defineProps({
    selTab: Number,
    clientStatus: Number,
@@ -42,6 +44,8 @@ defineProps({
 
 const emit = defineEmits(['selectTab']);
 
+const { t } = useI18n();
+
 const selectTab = (value: number) => {
    emit('selectTab', value);
 };

src/renderer/components/BaseConsole.vue

@@ -6,17 +6,25 @@
          class="log"
          :class="log.color"
       >
-         {{ log.time }} - <span v-html="log.message" />
+         {{ log.time }} - <span v-if="log.message" v-html="log.message" /><span v-else-if="log.i18n">{{ t(`message.${ log.i18n }`, log.params) }}</span>
       </div>
    </div>
 </template>
 
 <script setup lang="ts">
 import { ref, PropType, onUpdated } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 defineProps({
-   logs: Array as PropType<{color: string; time: string; message: string}[]>
+   logs: Array as PropType<{
+      color: string;
+      time: string;
+      message: string;
+      i18n?: string;
+      params: {[key: string]: string};
+   }[]>
 });
+const { t } = useI18n();
 
 const root = ref(null);
 

src/renderer/components/ClientMessages.vue

@@ -4,10 +4,10 @@
       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>
+      <h3><span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus) }}</i></span><span>{{ t('word.message', 2) }}</span></h3>
       <div class="tools-box">
          <div class="round-button green-bg" @click="showAdd">
-            <span>Aggiungi Messaggio</span>
+            <span>{{ t('message.addMessage') }}</span>
             <i class="material-icons">add</i>
          </div>
       </div>
@@ -25,12 +25,12 @@
             </label>
             <i
                class="material-icons editMessage"
-               :title="`Modifica messaggio ${message.name}`"
+               :title="t('message.editMessage', { message: message.name })"
                @click="showEdit(index)"
             >edit</i>
             <i
                class="material-icons deleteMessage"
-               :title="`Elimina messaggio ${message.name}`"
+               :title="t('message.deleteMessage', { message: message.name })"
                @click="deleteMessage(index)"
             >clear</i>
          </li>
@@ -39,20 +39,24 @@
 </template>
 
 <script setup lang="ts">
+import { ClientMessage } from 'common/interfaces';
 import { ref, computed, onUpdated, PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
-   messageList: Array as PropType<any[]>
+   messageList: Array as PropType<ClientMessage[]>
 });
 
+const { t } = useI18n();
+
 const root = ref(null);
 
 const emit = defineEmits([
-   'updateMessages',
+   'update-messages',
-   'showAddMessage',
+   'show-add-message',
-   'showEditMessage',
+   'show-edit-message',
-   'deleteMessage',
+   'delete-message',
-   'toggleMessageCheck'
+   'toggle-message-check'
 ]);
 
 const checkStatus = computed(() => {
@@ -78,18 +82,18 @@ const truncate = (text: string, length: number, suffix: string) => {
 };
 
 const updateMessages = () => {
-   emit('updateMessages');
+   emit('update-messages');
 };
 
 const showAdd = () => {
-   emit('showAddMessage');
+   emit('show-add-message');
 };
 
 const showEdit = (index: number) => {
-   emit('showEditMessage', index);
+   emit('show-edit-message', index);
 };
 const deleteMessage = (index: number) => {
-   emit('deleteMessage', index);
+   emit('delete-message', index);
 };
 
 const checkIcon = (status: number) => {
@@ -104,7 +108,7 @@ const checkIcon = (status: number) => {
 };
 
 const toggleCheck = (status: number) => {
-   emit('toggleMessageCheck', status);
+   emit('toggle-message-check', status);
 };
 
 onUpdated(() => {

src/renderer/components/ClientTab.vue

@@ -4,15 +4,15 @@
          <transition name="fade">
             <NewHost
                v-if="popNewHost"
-               @hideAddHost="hideAddHost"
+               @hide-add-host="hideAddHost"
-               @createHost="createHost"
+               @create-host="createHost"
             />
          </transition>
          <transition name="fade">
             <NewMessage
                v-if="popNewMessage"
-               @hideAddMessage="hideAddMessage"
+               @hide-add-message="hideAddMessage"
-               @createMessage="createMessage"
+               @create-message="createMessage"
             />
          </transition>
          <transition name="fade">
@@ -20,47 +20,32 @@
                v-if="popEditMessage"
                :message="localMessages[idEditedMsg]"
                :index="idEditedMsg"
-               @hideEditMessage="hideEditMessage"
+               @hide-edit-message="hideEditMessage"
-               @editMessage="editMessage"
+               @edit-message="editMessage"
             />
          </transition>
-         <!-- <transition name="fade">
-            <SaveConfig
-               v-if="popSaveConfig"
-               :params="params"
-               @hideSaveConfig="hideSaveConfig"
-               @saveConfig="saveConfig"
-            />
-         </transition>
-         <transition name="fade">
-            <LoadConfig
-               v-if="popLoadConfig"
-               @hideLoadConfig="hideLoadConfig"
-               @loadConfig="loadConfig"
-            />
-         </transition> -->
          <form autocomplete="off" @submit.prevent="startTest">
             <fieldset :disabled="running !== 0">
                <Hosts
                   ref="hosts"
                   :host-list="localHosts"
-                  @updateHosts="updateHosts"
+                  @update-hosts="updateHosts"
-                  @showAddHost="showAddHost"
+                  @show-add-host="showAddHost"
-                  @deleteHost="deleteHost"
+                  @delete-host="deleteHost"
-                  @toggleHostCheck="toggleHostCheck"
+                  @toggle-host-check="toggleHostCheck"
                />
                <Messages
                   ref="messages"
                   :message-list="localMessages"
-                  @updateMessages="updateMessages"
+                  @update-messages="updateMessages"
-                  @showAddMessage="showAddMessage"
+                  @show-add-message="showAddMessage"
-                  @showEditMessage="showEditMessage"
+                  @show-edit-message="showEditMessage"
-                  @deleteMessage="deleteMessage"
+                  @delete-message="deleteMessage"
-                  @toggleMessageCheck="toggleMessageCheck"
+                  @toggle-message-check="toggleMessageCheck"
                />
                <div class="flex box-100">
                   <div class="input-element">
-                     <label>Numero di Messaggi</label>
+                     <label>{{ t('message.numberOfMessages') }}</label>
                      <input
                         v-model.number="params.nMsgs"
                         min="1"
@@ -70,7 +55,7 @@
                      >
                   </div>
                   <div class="input-element">
-                     <label>Numero di Client</label>
+                     <label>{{ t('message.numberOfClients') }}</label>
                      <input
                         v-model.number="params.nClients"
                         min="1"
@@ -82,7 +67,7 @@
                </div>
                <div class="flex box-100">
                   <div class="input-element">
-                     <label>Intervallo Minimo (ms)</label>
+                     <label>{{ t('message.minInterval') }}</label>
                      <input
                         v-model.number="params.tMin"
                         min="0"
@@ -92,7 +77,7 @@
                      >
                   </div>
                   <div class="input-element">
-                     <label>Intervallo Massimo (ms)</label>
+                     <label>{{ t('message.maxInterval') }}</label>
                      <input
                         v-model.number="params.tMax"
                         min="0"
@@ -110,15 +95,15 @@
                            type="checkbox"
                         >
                         <div class="checkbox-block" />
-                        <span>Chiudi alla Risposta</span>
+                        <span>{{ t('message.closeOnReply') }}</span>
                      </label>
-                     <label class="checkbox" title="Connessione Persistente">
+                     <label class="checkbox">
                         <input
                            v-model="params.persistentConnection"
                            type="checkbox"
                         >
                         <div class="checkbox-block" />
-                        <span>Conn. Persistente</span>
+                        <span>{{ t('message.persistentConnection') }}</span>
                      </label>
                      <label class="checkbox">
                         <input
@@ -126,7 +111,7 @@
                            type="checkbox"
                         >
                         <div class="checkbox-block" />
-                        <span>Test a Step</span>
+                        <span>{{ t('message.steptest') }}</span>
                      </label>
                   </div>
                   <div class="box-50">
@@ -136,7 +121,7 @@
                            type="checkbox"
                         >
                         <div class="checkbox-block" />
-                        <span>Abilita Trace</span>
+                        <span>{{ t('message.enableTrace') }}</span>
                      </label>
                      <label class="checkbox">
                         <input
@@ -144,61 +129,40 @@
                            type="checkbox"
                         >
                         <div class="checkbox-block" />
-                        <span>Allerta ECONNRESET</span>
+                        <span>{{ t('message.alertEconnreset') }}</span>
                      </label>
-                     <label class="checkbox" title="Ripete il test dopo il suo termine">
+                     <label class="checkbox" :title="t('message.loopModeEsplaination')">
                         <input
                            v-model="params.loop"
                            type="checkbox"
                         >
                         <div class="checkbox-block" />
-                        <span>Ripetizione Automatica</span>
+                        <span>{{ t('message.loopMode') }}</span>
                      </label>
                   </div>
                </div>
             </fieldset>
             <div class="buttons">
-               <!-- <div class="button-wrap">
-                  <i class="material-icons">get_app</i>
-                  <button
-                     class="save"
-                     title="Carica configurazione"
-                     :disabled="running !== 0"
-                     @click.prevent="showLoadConfig"
-                  >
-                     Carica
-                  </button>
-               </div>
-               <div class="button-wrap">
-                  <i class="material-icons">save</i>
-                  <button
-                     class="save"
-                     title="Salva configurazione corrente"
-                     @click.prevent="showSaveConfig"
-                  >
-                     Salva
-                  </button>
-               </div> -->
                <div v-if="running === 0" class="button-wrap">
                   <i class="material-icons white">play_arrow</i>
                   <button class="confirm" type="submit">
-                     Start
+                     {{ t('word.start') }}
                   </button>
                </div>
                <div v-if="running !== 0 && params.stepTest" class="button-wrap">
                   <i class="material-icons white">message</i>
                   <button
                      class="confirm"
-                     title="Invia Messaggi"
+                     :title="t('message.sendMessages')"
                      @click.prevent="sendMessages"
                   >
-                     Invia
+                     {{ t('word.send') }}
                   </button>
                </div>
                <div v-if="running !== 0" class="button-wrap">
                   <i class="material-icons white">stop</i>
                   <button class="stop" @click.prevent="stopTest">
-                     Stop
+                     {{ t('word.stop') }}
                   </button>
                </div>
             </div>
@@ -210,7 +174,7 @@
                :reports="reportList"
             />
          </transition>
-      </div><!-- /client -->
+      </div>
       <Console
          ref="console"
          :logs="slicedLogs"
@@ -223,17 +187,16 @@ import { ref, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import Console from './BaseConsole.vue';
 import Hosts from './ClientTabHosts.vue';
-import Messages from './ModalMessages.vue';
+import Messages from './ClientMessages.vue';
 import NewHost from './ModalNewHost.vue';
 import NewMessage from './ModalNewMessage.vue';
 import EditMessage from './ModalEditMessage.vue';
-// import SaveConfig from './ModalSaveConfig.vue';
-// import LoadConfig from './ModalLoadConfig.vue';
 import ClientTabReports from './ClientTabReports.vue';
 import { ipcRenderer } from 'electron';
 import { useClientStore } from '@/stores/client';
 import { unproxify } from '../libs/unproxify';
 import { ClientHost, ClientMessage } from 'common/interfaces';
+import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['clientStatus']);
 
@@ -260,12 +223,12 @@ const reportList = ref([]);
 const popNewHost = ref(false);
 const popNewMessage = ref(false);
 const popEditMessage = ref(false);
-// const popSaveConfig = ref(false);
-// const popLoadConfig = ref(false);
 const idEditedMsg = ref(null);
 const localHosts = ref(hosts.value);
 const localMessages = ref(messages.value);
 
+const { t } = useI18n();
+
 const slicedLogs = computed(() => {
    if (logs.value.length > 500)
       logs.value = logs.value.slice(-500);
@@ -279,7 +242,7 @@ const startTest = () => {
       const time = new Date().toLocaleString();
       const log = {
          time: time,
-         message: 'Trace disabilitato: Intervalli troppo brevi',
+         i18n: 'tracesDisabledMessage',
          color: 'yellow'
       };
 
@@ -299,17 +262,20 @@ const startTest = () => {
       params: params.value,
       hosts: localHosts.value.filter((host) => {
          return host.enabled === true;
+      }),
+      messages: localMessages.value.filter((message) => {
+         return message.enabled === true;
       })
    };
-   ipcRenderer.send('startTest', unproxify(obj));
+   ipcRenderer.send('start-test', unproxify(obj));
 };
 
 const sendMessages = () => {
-   ipcRenderer.send('sendMessages');
+   ipcRenderer.send('send-messages');
 };
 
 const stopTest = () => {
-   ipcRenderer.send('stopTest');
+   ipcRenderer.send('stop-test');
 };
 
 // Host
@@ -392,42 +358,34 @@ const toggleMessageCheck = (status: number) => {
    });
    updateStoreMessages(localMessages.value);
 };
-ipcRenderer.on('clientLog', (event, data) => {
+ipcRenderer.on('client-log', (event, data) => {
    const time = new Date().toLocaleString();
-   const { message, color } = data;
+   const { message, color, params, i18n } = data;
    const log = {
       time: time,
       message,
-      color
+      color,
+      params,
+      i18n
    };
 
    logs.value.push(log);
 });
 
-ipcRenderer.on('testFinish', (event, message) => {
+ipcRenderer.on('test-finish', (event, message) => {
    running.value = 0;
    emit('clientStatus', running.value);
    const time = new Date().toLocaleString();
    const log = {
       time: time,
-      message,
+      i18n: message,
       color: ''
    };
 
    logs.value.push(log);
 });
 
-// ipcRenderer.send('getHosts');
+ipcRenderer.on('report-client-list', (event, reports) => {
-// ipcRenderer.on('hosts', (event, hosts) => {
-//    hosts.value = hosts;
-// });
-
-// ipcRenderer.send('getMessages');
-// ipcRenderer.on('localMessages', (event, messages) => {
-//    localMessages.value = messages;
-// });
-
-ipcRenderer.on('reportClientList', (event, reports) => {
    reportList.value = reports;
 });
 </script>

src/renderer/components/ClientTabHosts.vue

@@ -6,11 +6,12 @@
    >
       <h3>
          <span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus)
-         }}</i></span><span>Hosts</span>
+         }}</i></span><span>
+            {{ t('word.host', 2) }}</span>
       </h3>
       <div class="tools-box">
          <div class="round-button green-bg" @click="showAdd">
-            <span>Aggiungi Host</span>
+            <span>{{ t('message.addHost') }}</span>
             <i class="material-icons">add</i>
          </div>
       </div>
@@ -27,7 +28,7 @@
             </label>
             <i
                class="material-icons deleteHost"
-               :title="`Elimina host ${host.host}:${host.port}`"
+               :title="t('message.deleteHost', {host: `${host.host}:${host.port}`})"
                @click="deleteHost(index)"
             >clear</i>
          </li>
@@ -36,8 +37,9 @@
 </template>
 
 <script setup lang="ts">
-import { ClientHost } from '@/stores/client';
+import { ClientHost } from 'common/interfaces';
 import { ref, computed, onUpdated, PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const root = ref(null);
 
@@ -45,7 +47,9 @@ const props = defineProps({
    hostList: Array as PropType<ClientHost[]>
 });
 
-const emit = defineEmits(['updateHosts', 'showAddHost', 'deleteHost', 'toggleHostCheck']);
+const { t } = useI18n();
+
+const emit = defineEmits(['update-hosts', 'show-add-host', 'delete-host', 'toggle-host-check']);
 
 const checkStatus = computed(() => {
    const checked = props.hostList.filter((host) => {
@@ -65,15 +69,15 @@ const sortedHosts = computed(() => {
 });
 
 const updateHosts = () => {
-   emit('updateHosts');
+   emit('update-hosts');
 };
 
 const showAdd = () => {
-   emit('showAddHost');
+   emit('show-add-host');
 };
 
 const deleteHost = (value: number) => {
-   emit('deleteHost', value);
+   emit('delete-host', value);
 };
 
 const checkIcon = (status: number) => {
@@ -88,7 +92,7 @@ const checkIcon = (status: number) => {
 };
 
 const toggleCheck = (status: number) => {
-   emit('toggleHostCheck', status);
+   emit('toggle-host-check', status);
 };
 
 onUpdated(() => {

src/renderer/components/ClientTabReports.vue

@@ -1,29 +1,29 @@
 <template>
    <div id="serverReports" class="box-100">
-      <h3>Report del Test</h3>
+      <h3>{{ t('message.testReport') }}</h3>
       <table>
          <thead>
             <tr>
-               <th>Host</th>
+               <th>{{ t('word.host', 2) }}</th>
-               <th>Client</th>
+               <th>{{ t('word.client', 2) }}</th>
-               <th>Messaggi</th>
+               <th>{{ t('word.message', 2) }}</th>
-               <th>Dati</th>
+               <th>{{ t('word.data', 2) }}</th>
             </tr>
          </thead>
          <tbody>
             <tr v-for="(report, index) in reports" :key="index">
                <td>{{ report.host }}</td>
                <td>{{ report.sockets }}</td>
-               <td><span title="Inviati">{{ report.messages.toLocaleString() }}</span> <i class="material-icons">import_export</i><span title="Ricevuti">{{ report.received }}</span></td>
+               <td><span :title="t('word.sent', 2)">{{ report.messages.toLocaleString() }}</span> <i class="material-icons">import_export</i><span :title="t('word.received', 2)">{{ report.received }}</span></td>
-               <td><span title="Inviati">{{ report.data.toLocaleString() }} B</span></td>
+               <td><span :title="t('word.sent', 2)">{{ report.data.toLocaleString() }} B</span></td>
             </tr>
          </tbody>
          <tfoot>
             <tr>
-               <td>Totali</td>
+               <td>{{ t('word.total', 2) }}</td>
                <td>{{ totSockets }}</td>
-               <td><span title="Inviati">{{ totMessages.toLocaleString() }}</span> <i class="material-icons">import_export</i><span title="Ricevuti">{{ totReceived.toLocaleString() }}</span></td>
+               <td><span :title="t('word.sent', 2)">{{ totMessages.toLocaleString() }}</span> <i class="material-icons">import_export</i><span :title="t('word.received', 2)">{{ totReceived.toLocaleString() }}</span></td>
-               <td><span title="Inviati">{{ totData.toLocaleString() }} B</span></td>
+               <td><span :title="t('word.sent', 2)">{{ totData.toLocaleString() }} B</span></td>
             </tr>
          </tfoot>
       </table>
@@ -31,12 +31,16 @@
 </template>
 
 <script setup lang="ts">
+import { ClientReport } from 'common/interfaces';
 import { PropType, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
-   reports: Array as PropType<any[]>
+   reports: Array as PropType<ClientReport[]>
 });
 
+const { t } = useI18n();
+
 const totSockets = computed(() => {
    return props.reports.reduce((prev, cur) => prev + cur.sockets, 0);
 });

src/renderer/components/ModalEditMessage.vue

@@ -2,9 +2,9 @@
    <div id="popcontainer">
       <div class="popup">
          <div class="box-100">
-            <h4>Modifica Messaggio</h4>
+            <h4>{{ t('message.editMessage') }}</h4>
             <div class="input-element">
-               <label>Nome</label>
+               <label>{{ t('word.name', 1) }}</label>
                <input
                   v-model="staticMsg.name"
                   type="text"
@@ -13,18 +13,18 @@
                >
             </div>
             <div class="input-element">
-               <label>Messaggio</label>
+               <label>{{ t('word.message', 1) }}</label>
                <textarea
                   v-model="staticMsg.message"
                   required
-               >Corpo del messaggio</textarea>
+               />
             </div>
          </div>
          <div class="input-element">
-            <label>Formato</label>
+            <label>{{ t('word.format') }}</label>
             <select v-model="staticMsg.format" required>
                <option value="" disabled>
-                  Seleziona
+                  {{ t('word.select') }}
                </option>
                <option value="ascii">
                   ASCII
@@ -36,14 +36,14 @@
          </div>
          <div class="buttons">
             <button class="cancel" @click="close">
-               Annulla
+               {{ t('word.cancel') }}
             </button>
             <button
                class="confirm"
                :disabled="validation"
                @click="confirm"
             >
-               Modifica
+               {{ t('word.edit') }}
             </button>
          </div>
       </div>
@@ -52,25 +52,28 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
    message: Object,
    index: Number
 });
 
+const { t } = useI18n();
+
 const staticMsg = ref(Object.assign({}, props.message));
 
-const emit = defineEmits(['hideEditMessage', 'editMessage']);
+const emit = defineEmits(['hide-edit-message', 'edit-message']);
 
 const validation = computed(() => {
    return staticMsg.value.message === '' || staticMsg.value.name === '' || staticMsg.value.format === '';
 });
 
 const close = () => {
-   emit('hideEditMessage');
+   emit('hide-edit-message');
 };
 
 const confirm = () => {
-   emit('editMessage', staticMsg.value, props.index);
+   emit('edit-message', staticMsg.value, props.index);
 };
 </script>

src/renderer/components/ModalLoadConfig.vue

@@ -1,73 +0,0 @@
-<template>
-   <div id="popcontainer">
-      <div class="popup">
-         <div class="box-100">
-            <h4>Configurazioni Salvate</h4>
-            <ul id="configList">
-               <li
-                  v-for="(config, index) in configList"
-                  :key="index"
-               >
-                  <span
-                     @mouseover="selected = index"
-                     @mouseleave="selected = null"
-                  >
-                     <i
-                        v-if="selected !== index"
-                        class="material-icons radio-btn"
-                     >radio_button_unchecked</i>
-                     <i
-                        v-if="selected === index"
-                        title="Seleziona"
-                        class="material-icons radio-btn"
-                        @click="loadConfig(index)"
-                     >radio_button_checked</i>
-                  </span>
-                  <span>{{ config.name }} ({{ config.time }})</span>
-                  <i
-                     class="material-icons deleteConfig"
-                     :title="`Elimina configurazione ${config.name}`"
-                     @click="deleteConfig(index)"
-                  >clear</i>
-               </li>
-            </ul>
-         </div>
-         <div class="buttons">
-            <button class="cancel" @click="close">
-               Chiudi
-            </button>
-         </div>
-      </div>
-   </div>
-</template>
-
-<script setup lang="ts">
-import { ipcRenderer } from 'electron';
-import { ref } from 'vue';
-
-const configList = ref([]);
-const selected = ref(null);
-
-const emit = defineEmits(['loadConfig', 'hideLoadConfig']);
-
-const close = () => {
-   emit('hideLoadConfig');
-   selected.value = null;
-};
-
-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) => {
-   configList.value = configs;
-});
-</script>

src/renderer/components/ModalNewHost.vue

@@ -2,9 +2,9 @@
    <div id="popcontainer">
       <div class="popup">
          <div class="box-100">
-            <h4>Nuovo Host</h4>
+            <h4>{{ t('message.addHost') }}</h4>
             <div class="input-element">
-               <label>Indirizzo Host</label>
+               <label>{{ t('message.hostAddress') }}</label>
                <input
                   v-model="host.host"
                   type="text"
@@ -13,7 +13,7 @@
                >
             </div>
             <div class="input-element">
-               <label>Porta</label>
+               <label>{{ t('word.port', 1) }}</label>
                <input
                   v-model.number="host.port"
                   min="1"
@@ -25,14 +25,14 @@
          </div>
          <div class="buttons">
             <button class="cancel" @click="close">
-               Annulla
+               {{ t('word.cancel') }}
             </button>
             <button
                class="confirm"
                :disabled="validation"
                @click="confirm"
             >
-               Crea
+               {{ t('word.create') }}
             </button>
          </div>
       </div>
@@ -41,8 +41,9 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-const emit = defineEmits(['hideAddHost', 'createHost']);
+const emit = defineEmits(['hide-add-host', 'create-host']);
 
 const host = ref({
    host: '',
@@ -50,16 +51,18 @@ const host = ref({
    enabled: true
 });
 
+const { t } = useI18n();
+
 const validation = computed(() => {
    return host.value.host === '' || host.value.port === '';
 });
 
 const close = () => {
-   emit('hideAddHost');
+   emit('hide-add-host');
 };
 
 const confirm = () => {
-   emit('createHost', host.value);
+   emit('create-host', host.value);
    host.value = {
       host: '',
       port: '',

src/renderer/components/ModalNewMessage.vue

@@ -2,9 +2,9 @@
    <div id="popcontainer">
       <div class="popup">
          <div class="box-100">
-            <h4>Nuovo Messaggio</h4>
+            <h4>{{ t('message.addMessage') }}</h4>
             <div class="input-element">
-               <label>Nome</label>
+               <label>{{ t('word.name', 1) }}</label>
                <input
                   v-model="message.name"
                   type="text"
@@ -13,18 +13,18 @@
                >
             </div>
             <div class="input-element">
-               <label>Messaggio</label>
+               <label>{{ t('word.message', 1) }}</label>
                <textarea
                   v-model="message.message"
                   required
-               >Corpo del messaggio</textarea>
+               />
             </div>
          </div>
          <div class="input-element">
-            <label>Formato</label>
+            <label>{{ t('word.format') }}</label>
             <select v-model="message.format" required>
                <option value="" disabled>
-                  Seleziona
+                  {{ t('word.select') }}
                </option>
                <option value="ascii">
                   ASCII
@@ -36,14 +36,14 @@
          </div>
          <div class="buttons">
             <button class="cancel" @click="close">
-               Annulla
+               {{ t('word.cancel') }}
             </button>
             <button
                class="confirm"
                :disabled="validation"
                @click="confirm"
             >
-               Crea
+               {{ t('word.create') }}
             </button>
          </div>
       </div>
@@ -52,8 +52,9 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-const emit = defineEmits(['hideAddMessage', 'createMessage']);
+const emit = defineEmits(['hide-add-message', 'create-message']);
 
 const message = ref({
    message: '',
@@ -62,16 +63,18 @@ const message = ref({
    format: ''
 });
 
+const { t } = useI18n();
+
 const validation = computed(() => {
    return message.value.message === '' || message.value.name === '' || message.value.format === '';
 });
 
 const close = () => {
-   emit('hideAddMessage');
+   emit('hide-add-message');
 };
 
 const confirm = () => {
-   emit('createMessage', message.value);
+   emit('create-message', message.value);
    message.value = {
       message: '',
       name: '',

src/renderer/components/ModalNewPort.vue

@@ -2,9 +2,9 @@
    <div id="popcontainer">
       <div class="popup">
          <div class="box-100">
-            <h4>Nuova porta</h4>
+            <h4>{{ t('message.addPort') }}</h4>
             <div class="input-element">
-               <label>Porta</label>
+               <label>{{ t('word.port', 1) }}</label>
                <input
                   v-model.number="port.port"
                   min="1"
@@ -19,14 +19,14 @@
          </div>
          <div class="buttons">
             <button class="cancel" @click="close">
-               Annulla
+               {{ t('word.cancel') }}
             </button>
             <button
                class="confirm"
                :disabled="validation"
                @click="confirm"
             >
-               Crea
+               {{ t('word.create') }}
             </button>
          </div>
       </div>
@@ -34,15 +34,18 @@
 </template>
 
 <script setup lang="ts">
-import { ServerPort } from '@/stores/server';
+import { ServerPort } from 'common/interfaces';
 import { ref, computed, PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-const emit = defineEmits(['hideAddPort', 'createPort']);
+const emit = defineEmits(['hide-add-port', 'create-port']);
 
 const props = defineProps({
    portList: Array as PropType<ServerPort[]>
 });
 
+const { t } = useI18n();
+
 const port = ref({
    port: null,
    enabled: true
@@ -54,7 +57,7 @@ const validation = computed(() => {
 });
 
 const close = () => {
-   emit('hideAddPort');
+   emit('hide-add-port');
    port.value = {
       port: '',
       enabled: true
@@ -64,7 +67,7 @@ const close = () => {
 
 const confirm = () => {
    if (props.portList.findIndex((p) => p.port === port.value.port) < 0) {
-      emit('createPort', port.value);
+      emit('create-port', port.value);
       port.value = {
          port: '',
          enabled: true

src/renderer/components/ModalSaveConfig.vue

@@ -1,59 +0,0 @@
-<template>
-   <div id="popcontainer">
-      <div class="popup">
-         <div class="box-100">
-            <h4>Nuova Configurazione</h4>
-            <div class="input-element">
-               <label>Nome</label>
-               <input
-                  v-model="name"
-                  type="text"
-                  placeholder="Nome configurazione"
-                  required
-               >
-            </div>
-         </div>
-         <div class="buttons">
-            <button class="cancel" @click="close">
-               Annulla
-            </button>
-            <button
-               class="confirm"
-               :disabled="validation"
-               @click="confirm"
-            >
-               Salva
-            </button>
-         </div>
-      </div>
-   </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-
-const emit = defineEmits(['hideSaveConfig', 'saveConfig']);
-
-const props = defineProps({
-   params: Object
-});
-
-const name = ref('');
-
-const validation = computed(() => {
-   return name.value === '';
-});
-
-const close = () => {
-   emit('hideSaveConfig');
-};
-
-const confirm = () => {
-   const config = {
-      name: name.value,
-      time: new Date().toLocaleString(),
-      params: props.params
-   };
-   emit('saveConfig', config);
-};
-</script>

src/renderer/components/ServerTab.vue

@@ -5,8 +5,8 @@
             <NewPort
                v-show="popNewPort"
                :port-list="localPorts"
-               @hideAddPort="hideAddPort"
+               @hide-add-port="hideAddPort"
-               @createPort="createPort"
+               @create-port="createPort"
             />
          </transition>
          <form autocomplete="off" @submit.prevent="startServer">
@@ -14,10 +14,10 @@
                <Ports
                   ref="ports"
                   :port-list="localPorts"
-                  @updatePorts="updatePorts"
+                  @update-ports="updatePorts"
-                  @showAddPort="showAddPort"
+                  @show-add-port="showAddPort"
-                  @deletePort="deletePort"
+                  @delete-port="deletePort"
-                  @togglePortCheck="togglePortCheck"
+                  @toggle-port-check="togglePortCheck"
                />
                <div class="flex box-100">
                   <div class="box-50">
@@ -27,7 +27,7 @@
                            type="checkbox"
                         >
                         <div class="checkbox-block" />
-                        <span>Echo Server</span>
+                        <span>{{ t('message.echoServer') }}</span>
                      </label>
                      <label class="checkbox">
                         <input
@@ -35,7 +35,7 @@
                            type="checkbox"
                         >
                         <div class="checkbox-block" />
-                        <span>Abilita Trace</span>
+                        <span>{{ t('message.enableTrace') }}</span>
                      </label>
                   </div>
                   <div class="box-50">
@@ -45,7 +45,7 @@
                            type="checkbox"
                         >
                         <div class="checkbox-block" />
-                        <span>Allerta ECONNRESET</span>
+                        <span>{{ t('message.alertEconnreset') }}</span>
                      </label>
                   </div>
                </div>
@@ -54,23 +54,23 @@
                <div v-if="running === 0" class="button-wrap">
                   <i class="material-icons white">play_arrow</i>
                   <button class="confirm" type="submit">
-                     Start
+                     {{ t('word.start') }}
                   </button>
                </div>
                <div v-if="running === 1" class="button-wrap">
                   <i class="material-icons white">stop</i>
                   <button class="stop" @click="stopServer">
-                     Stop
+                     {{ t('word.stop') }}
                   </button>
                </div>
             </div>
          </form>
          <transition name="fade">
-            <SerterTabReports
+            <ServerTabReports
                v-if="reportList.length > 0"
                ref="reports"
                :reports="reportList"
-               @resetReports="resetReports"
+               @reset-reports="resetReports"
             />
          </transition>
       </div><!-- /server -->
@@ -87,13 +87,16 @@ import { storeToRefs } from 'pinia';
 import Console from './BaseConsole.vue';
 import Ports from './ServerTabPorts.vue';
 import NewPort from './ModalNewPort.vue';
-import SerterTabReports from './SerterTabReports.vue';
+import { ServerPort } from 'common/interfaces';
+import ServerTabReports from './ServerTabReports.vue';
 import { ipcRenderer } from 'electron';
 import { useServerStore } from '@/stores/server';
 import { unproxify } from '../libs/unproxify';
-import { ServerPort } from 'common/interfaces';
+import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['serverStatus']);
+const { t } = useI18n();
+
 const serverStore = useServerStore();
 
 const { ports } = storeToRefs(serverStore);
@@ -102,7 +105,7 @@ const { updatePorts: updateStorePorts } = serverStore;
 const running = ref(0);
 const params = ref({
    trace: false,
-   echo: true,
+   echo: false,
    alertReset: false
 });
 const logs = ref([]);
@@ -131,12 +134,12 @@ const startServer = (e: MouseEvent) => {
          return port.enabled === true;
       })
    };
-   ipcRenderer.send('startServer', unproxify(obj));
+   ipcRenderer.send('start-server', unproxify(obj));
 };
 
 const stopServer = (e: MouseEvent) => {
    e.preventDefault();
-   ipcRenderer.send('stopServer');
+   ipcRenderer.send('stop-server');
 };
 
 const updatePorts = () => {
@@ -163,7 +166,7 @@ const deletePort = (portId: number) => {
 };
 
 const resetReports = () => {
-   ipcRenderer.send('resetReports');
+   ipcRenderer.send('reset-reports');
 };
 
 const togglePortCheck = (status: number) => {
@@ -176,33 +179,35 @@ const togglePortCheck = (status: number) => {
    updateStorePorts(localPorts.value);
 };
 
-ipcRenderer.on('serverLog', (event, data) => {
+ipcRenderer.on('server-log', (event, data) => {
    const time = new Date().toLocaleString();
-   const { message, color } = data;
+   const { message, color, params, i18n } = data;
    const log = {
       time: time,
       message,
-      color
+      color,
+      params,
+      i18n
    };
 
    logs.value.push(log);
 });
 
-ipcRenderer.on('serverFinish', (event, message) => {
+ipcRenderer.on('server-finish', (event, message) => {
    running.value = 0;
    reportList.value = [];
    emit('serverStatus', running.value);
    const time = new Date().toLocaleString();
    const log = {
       time: time,
-      message,
+      i18n: message,
       color: ''
    };
 
    logs.value.push(log);
 });
 
-ipcRenderer.on('reportServerList', (event, reports) => {
+ipcRenderer.on('report-server-list', (event, reports) => {
    reportList.value = reports;
 });
 </script>

src/renderer/components/ServerTabPorts.vue

@@ -4,10 +4,10 @@
       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>
+      <h3><span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus) }}</i></span><span>{{ t('word.port', 2) }}</span></h3>
       <div class="tools-box">
          <div class="round-button green-bg" @click="showAdd">
-            <span>Aggiungi Porta</span>
+            <span>{{ t('message.addPort') }}</span>
             <i class="material-icons">add</i>
          </div>
       </div>
@@ -33,15 +33,18 @@
 </template>
 
 <script setup lang="ts">
-import { ServerPort } from '@/stores/server';
+import { ServerPort } from 'common/interfaces';
 import { ref, computed, onUpdated, PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-const emit = defineEmits(['updatePorts', 'showAddPort', 'deletePort', 'togglePortCheck']);
+const emit = defineEmits(['update-ports', 'show-add-port', 'delete-port', 'toggle-port-check']);
 
 const props = defineProps({
    portList: Array as PropType<ServerPort[]>
 });
 
+const { t } = useI18n();
+
 const root = ref(null);
 
 const checkStatus = computed(() => {
@@ -62,15 +65,15 @@ const sortedPorts = computed(() => {
 });
 
 const updatePorts = () => {
-   emit('updatePorts');
+   emit('update-ports');
 };
 
 const showAdd = () => {
-   emit('showAddPort');
+   emit('show-add-port');
 };
 
 const deletePort = (value: number) => {
-   emit('deletePort', value);
+   emit('delete-port', value);
 };
 
 const checkIcon = (status: number) => {
@@ -85,7 +88,7 @@ const checkIcon = (status: number) => {
 };
 
 const toggleCheck = (status: number) => {
-   emit('togglePortCheck', status);
+   emit('toggle-port-check', status);
 };
 
 onUpdated(() => {

src/renderer/components/ServerTabReports.vue

@@ -1,13 +1,13 @@
 <template>
    <div id="serverReports" class="box-100">
-      <h3>Stato del Server</h3>
+      <h3>{{ t('message.serverStatus') }}</h3>
       <table>
          <thead>
             <tr>
-               <th>Porta</th>
+               <th>{{ t('word.port', 2) }}</th>
-               <th>Socket</th>
+               <th>{{ t('word.socket', 2) }}</th>
-               <th>Messaggi</th>
+               <th>{{ t('word.message', 2) }}</th>
-               <th>Dati</th>
+               <th>{{ t('word.data', 2) }}</th>
             </tr>
          </thead>
          <tbody>
@@ -20,7 +20,7 @@
          </tbody>
          <tfoot>
             <tr>
-               <td>Totali</td>
+               <td>{{ t('word.total', 2) }}</td>
                <td>{{ totSockets }}</td>
                <td>{{ totMessages.toLocaleString() }}</td>
                <td>{{ totData.toLocaleString() }} B</td>
@@ -32,10 +32,10 @@
             <i class="material-icons">replay</i>
             <button
                class="save"
-               title="Azzera i dati ricevuti"
+               :title="t('message.resetReceivedData')"
                @click="reset"
             >
-               Reset
+               {{ t('word.reset') }}
             </button>
          </div>
       </div>
@@ -43,27 +43,31 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { computed, PropType } from 'vue';
+import { ServerReport } from 'common/interfaces';
 
-const emit = defineEmits(['resetReports']);
+const emit = defineEmits(['reset-reports']);
+
+const { t } = useI18n();
 
 const props = defineProps({
-   reports: Array as PropType<any[]>
+   reports: Array as PropType<ServerReport[]>
 });
 
 const totSockets = computed(() => {
-   return props.reports.reduce((prev, cur: any) => prev + cur.sockets, 0);
+   return props.reports.reduce((prev, cur) => prev + cur.sockets, 0);
 });
 
 const totMessages = computed(() => {
-   return props.reports.reduce((prev, cur: any) => prev + cur.messages, 0);
+   return props.reports.reduce((prev, cur) => prev + cur.messages, 0);
 });
 
 const totData = computed(() => {
-   return props.reports.reduce((prev, cur: any) => prev + cur.data, 0);
+   return props.reports.reduce((prev, cur) => prev + cur.data, 0);
 });
 
 const reset = () => {
-   emit('resetReports');
+   emit('reset-reports');
 };
 </script>

src/renderer/i18n/en-US.ts

@@ -1,6 +1,75 @@
 export const enUS = {
    word: {
+      client: 'Client | Clients',
+      server: 'Server | Servers',
+      host: 'Host | Hosts',
+      message: 'Message | Messages',
+      port: 'Port | Ports',
+      data: 'Data | Data',
+      name: 'Name | Names',
+      start: 'Start',
+      stop: 'Stop',
+      send: 'Send',
+      total: 'Total | Totals',
+      received: 'Received | Received',
+      sent: 'Sent | Sent',
+      socket: 'Socket | Sockets',
+      format: 'Format',
+      select: 'Select',
+      cancel: 'Cancel',
+      edit: 'Edit',
+      create: 'Create',
+      reset: 'Reset'
    },
    message: {
+      running: 'Running',
+      numberOfMessages: 'Number of messages',
+      numberOfClients: 'Number of clients',
+      minInterval: 'Min. Interval (ms)',
+      maxInterval: 'Max Interval (ms)',
+      closeOnReply: 'Close on reply',
+      persistentConnection: 'Persistent Connection',
+      steptest: ' Step test',
+      enableTrace: 'Enable traces',
+      alertEconnreset: 'Alert ECONNRESET',
+      loopMode: 'Loop mode',
+      loopModeEsplaination: 'Repeat the test after its completion',
+      sendMessages: 'Send messages',
+      addHost: 'Add host',
+      deleteHost: 'Delete host {host}',
+      addMessage: 'Add message',
+      editMessage: 'Edit message {message}',
+      deleteMessage: 'Delete message {message}',
+      hostAddress: 'Host address',
+      addPort: 'Add port {port}',
+      echoServer: 'Echo server',
+      resetReceivedData: 'Reset received data',
+      serverStatus: 'Server status',
+      testReport: 'Test report',
+      testStarted: 'Test started',
+      testAborted: 'Test aborted',
+      testEnded: 'Test ended',
+      clientsConnected: 'Clients connected',
+      messagesSent: 'Messages sent',
+      testDuration: 'Test duration: {ms}ms',
+      noMessageSpecified: 'No message specified',
+      socketOpen: 'Socket #{number} on {host}:{port} open',
+      socketClosed: 'Socket #{number} on {host}:{port} closed',
+      socketMessage: 'Socket #{number} on {host}:{port} message #{mNumber}',
+      socketReply: 'Socket #{number} on {host}:{port} reply #{reply}',
+      logOnSocket: 'Socket #{number} on {host}:{port}: {message}',
+      loadingMessages: 'Loading messages',
+      messagesLoaded: 'Messages loaded: {mNumber}',
+      sendingMessages: 'Sending messages',
+      tracesDisabledMessage: 'Traces disabled, intervals too short',
+      clientConnectedOnPort: 'Client connected on port {port}',
+      clientDisonnectedOnPort: 'Client disconnected on port {port}',
+      messageReceivedOnPort: 'Message received on port {port}: {message}',
+      serverStart: 'Server start',
+      serverStop: 'Server stop',
+      listenindOnPort: 'Listening on port {port}',
+      clientErrorOnPort: 'Client error on port {port}: {error}',
+      serverErrorOnPort: 'Server error on port {port}: {error}',
+      reportError: 'Report error: {error}'
    }
 };

src/renderer/scss/main.scss

@@ -5,27 +5,27 @@
   font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-  src: url("../assets/fonts/MaterialIcons-Regular.eot"); /* For IE6-8 */
+  src: url("../fonts/MaterialIcons-Regular.eot"); /* For IE6-8 */
   src:
     local("Material Icons"),
     local("MaterialIcons-Regular"),
-    url("../assets/fonts/MaterialIcons-Regular.woff2") format("woff2"),
+    url("../fonts/MaterialIcons-Regular.woff2") format("woff2"),
-    url("../assets/fonts/MaterialIcons-Regular.woff") format("woff"),
+    url("../fonts/MaterialIcons-Regular.woff") format("woff"),
-    url("../assets/fonts/MaterialIcons-Regular.ttf") format("truetype");
+    url("../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");
+  src: url("../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");
+  src: url("../fonts/RobotoMono-Regular.ttf") format("truetype");
 }
 
 .material-icons {

src/renderer/stores/client.ts

@@ -6,8 +6,17 @@ const persistentStore = new ElectronStore({ name: 'client' });
 
 export const useClientStore = defineStore('client', {
    state: () => ({
-      hosts: persistentStore.get('hosts', []) as ClientHost[],
+      hosts: persistentStore.get('hosts', [{
-      messages: persistentStore.get('messages', []) as ClientMessage[]
+         enabled: true,
+         host: 'localhost',
+         port: 8080
+      }]) as ClientHost[],
+      messages: persistentStore.get('messages', [{
+         enabled: true,
+         format: 'ascii',
+         message: 'Hello, World!',
+         name: 'Hello, World!'
+      }]) as ClientMessage[]
    }),
    actions: {
       updateHosts (payload: ClientHost[]) {

src/renderer/stores/server.ts

@@ -6,7 +6,10 @@ const persistentStore = new ElectronStore({ name: 'server' });
 
 export const useServerStore = defineStore('server', {
    state: () => ({
-      ports: persistentStore.get('ports', []) as ServerPort[]
+      ports: persistentStore.get('ports', [{
+         enabled: true,
+         port: 8080
+      }]) as ServerPort[]
    }),
    actions: {
       updatePorts (payload: ServerPort[]) {