add: use a separate file for the menu & fix the electron builder config

electron-builder.yml

@@ -39,7 +39,8 @@ appImage:
   artifactName: ${name}-${version}.${ext}
 npmRebuild: false
 publish:
-  provider: generic
-  url: https://github.com/Jules010209/aurora-intercom
+  owner: jules010209
+  repo: aurora-intercom
+  provider: github
 electronDownload:
   mirror: https://npmmirror.com/mirrors/electron/

package.json

@@ -61,7 +61,6 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
-    "electron-log": "^5.1.2",
     "electron-store": "^8.2.0",
     "electron-updater": "^6.1.8",
     "framer-motion": "^11.0.20"

src/main/index.ts

@@ -4,32 +4,19 @@ import { electronApp, optimizer, is } from '@electron-toolkit/utils';
 import icon from '../../resources/icon.png?asset';
 import * as net from 'net';
 import Store from 'electron-store';
-import log from 'electron-log';
 import { autoUpdater } from 'electron-updater';
 
 export const TCPClient = new net.Socket();
-
 export const storage = new Store({ watch: true });
 
-autoUpdater.logger = log;
-
 if(is.dev) {
   // Useful for some dev/debugging tasks, but download can
   // not be validated becuase dev app is not signed
   autoUpdater.updateConfigPath = join(__dirname, 'dev-app-update.yml');
 }
 
-log.info('App starting...');
-
-let win: BrowserWindow;
-
-const sendStatusToWindow = (text: string) => {
-  log.info(text);
-  win.webContents.send('message', text);
-}
-
 const createWindow = (): void => {
-  win = new BrowserWindow({
+  const mainWindow = new BrowserWindow({
     title: 'Aurora Intercom',
     width: 900,
     height: 670,
@@ -44,11 +31,11 @@ const createWindow = (): void => {
     }
   });
 
-  win.on('ready-to-show', () => {
-    win.show();
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show();
   });
 
-  win.webContents.ipc.on('send_data', (_, cmd) => {
+  mainWindow.webContents.ipc.on('send_data', (_, cmd) => {
     TCPClient.write(`#${cmd}\n`);
   });
 
@@ -57,18 +44,18 @@ const createWindow = (): void => {
   });
 
   TCPClient.on('data', (data) => {
-    win.webContents.send('tcp_data', data.toString('ascii'));
+    mainWindow.webContents.send('tcp_data', data.toString('ascii'));
   });
 
-  win.webContents.setWindowOpenHandler((details) => {
+  mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url)
     return { action: 'deny' }
   })
 
   if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    win.loadURL(process.env['ELECTRON_RENDERER_URL'])
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
   } else {
-    win.loadFile(join(__dirname, '../renderer/index.html'))
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
   }
 }
 
@@ -119,34 +106,34 @@ app.whenReady().then(() => {
 });
 
 app.on('ready', () => {
-  autoUpdater.checkForUpdatesAndNotify();
+  autoUpdater.checkForUpdates();
 });
 
 autoUpdater.on('checking-for-update', () => {
-  sendStatusToWindow('Checking for update...');
+  console.log('Checking for update...');
 });
 
 autoUpdater.on('update-available', (_) => {
-  sendStatusToWindow('Update available.');
+  console.log('Update available.');
 });
 
 autoUpdater.on('update-not-available', (_) => {
-  sendStatusToWindow('Update not available.');
+  console.log('Update not available.');
 })
 autoUpdater.on('error', (err) => {
-  sendStatusToWindow('Error in auto-updater. ' + err);
+  console.log('Error in auto-updater. ' + err);
 });
 
 autoUpdater.on('download-progress', (progressObj) => {
   let log_message = "Download speed: " + progressObj.bytesPerSecond;
   log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
   log_message = log_message + ' (' + progressObj.transferred + "/" + progressObj.total + ')';
 
-  sendStatusToWindow(log_message);
+  console.log(log_message);
 });
 
 autoUpdater.on('update-downloaded', (_) => {
-  sendStatusToWindow('Update downloaded');
+  console.log('Update downloaded');
 });
 
 // Quit when all windows are closed, except on macOS. There, it's common

src/renderer/src/assets/menu.css

@@ -0,0 +1,27 @@
+.menu {
+    height: max-content;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+}
+
+.menu.left {
+    margin-right: 20px;
+}
+
+.menu.right {
+    margin-left: 20px;
+}
+
+.menu-item {
+    padding: 50px 20px;
+    margin-bottom: 5px;
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: 600;
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+}
+
+.menu-item:hover {
+    background-color: #e0e0e0;
+}

src/renderer/src/assets/panel.css

@@ -75,38 +75,4 @@
 
 .additional-info p {
     font-size: 16px;
-}
-
-.menu-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.menu {
-    height: max-content;
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-}
-
-.menu.left {
-    margin-right: 20px;
-}
-
-.menu.right {
-    margin-left: 20px;
-}
-
-.menu-item {
-    padding: 50px 20px;
-    margin-bottom: 5px;
-    font-family: 'Courier New', Courier, monospace;
-    font-weight: 600;
-    background-color: #f0f0f0;
-    border: 1px solid #ccc;
-}
-
-.menu-item:hover {
-    background-color: #e0e0e0;
 }

src/renderer/src/components/menu.tsx

@@ -0,0 +1,25 @@
+import "../assets/menu.css";
+import { MenuProps, PositionType } from "@renderer/types/panel";
+
+export const Menu = ({
+    items,
+    clickable,
+    setStationType
+}: MenuProps) => {
+    return (
+        <div className="menu">
+            {items.map((item) => (
+                <button
+                    onClick={() =>
+                        clickable
+                            ? setStationType(item.stationType as PositionType)
+                            : null}
+                    key={item.id}
+                    className="menu-item"
+                >
+                    {item.label}
+                </button>
+            ))}
+        </div>
+    )
+}

src/renderer/src/components/panel.tsx

@@ -1,13 +1,8 @@
 import '../assets/panel.css';
 import { useEffect, useState } from 'react';
 import { handleIntercom } from '@renderer/utils/intercom';
-
-enum PositionType {
-    CTR = "CTR",
-    APP = "APP",
-    TWR = "TWR",
-    MIL = "MIL",
-}
+import { ButtonProps, PositionType, Positions, Station } from '@renderer/types/panel';
+import { Menu } from './menu';
 
 const menuData = {
     leftMenu: [
@@ -24,54 +19,11 @@ const menuData = {
     ]
 }
 
-interface Item {
-    id?: number;
-    label: string;
-    stationType?: PositionType
-}
-
-interface MenuProps {
-    items: Item[];
-    clickable: boolean;
-}
-
-interface Positions {
-    CTR: Station[];
-    APP: Station[];
-    TWR: Station[];
-    MIL: Station[];
-}
-
-interface Station {
-    label: string;
-    frequency: string;
-    callsign: string;
-    color: string;
-}
-
 const Panel = () => {
     const [stations, setStations] = useState<Station[]>([]);
     const [stationType, setStationType] = useState<PositionType>(PositionType.CTR);
     // const [actualPosition, setActualPosition] = useState<string>('');
 
-    const Menu = ({ items, clickable }: MenuProps) => {
-        return (
-            <div className="menu">
-                {items.map((item) => (
-                    <button
-                        onClick={() =>
-                            clickable
-                                ? setStationType(item.stationType as PositionType)
-                                : null}
-                        key={item.id}
-                        className="menu-item"
-                    >
-                        {item.label}
-                    </button>
-                ))}
-            </div>
-        )
-    }
 
     useEffect(() => {
         const fetchData = async () => {
@@ -129,7 +81,7 @@ const Panel = () => {
         // };
     }, [stationType]);
 
-    const Button = ({ position }) => {
+    const Button = ({ position }: ButtonProps) => {
         return <div className="button" style={{ backgroundColor: position.color }}>
             <div>{position.label}</div>
             <div>{position.frequency}</div>
@@ -139,12 +91,15 @@ const Panel = () => {
     return (
         <div className="app">
             <div className="vertical-menu-container">
-                <Menu clickable={false} items={menuData.leftMenu} />
+                <Menu clickable={false} items={menuData.leftMenu} setStationType={setStationType}/>
             </div>
             <div className="control-panel">
                 {stations.map((position) => (
                     <>
-                        <div onClick={() => handleIntercom({ type: "call", position: position.callsign })}>
+                        <div onClick={() => 
+                            true
+                                ? handleIntercom({ type: "call", position: position.callsign })
+                                : handleIntercom({ type: 'hangup' })}>
                             <Button
                                 key={position.label}
                                 position={position}
@@ -154,7 +109,7 @@ const Panel = () => {
                 ))}
             </div>
             <div className="vertical-menu-container">
-                <Menu clickable={true} items={menuData.rightMenu} />
+                <Menu clickable={true} items={menuData.rightMenu} setStationType={setStationType}/>
             </div>
         </div>
     );