frontend: add option to enable pcap logging and download the log.

Author: ffreddow

frontend/src/components/Frame.tsx

@@ -5,6 +5,7 @@ import Worker from '../worker?worker'
 import { Row, Spinner } from 'react-bootstrap';
 import { connected, connected_to, secret } from './charger_list';
 import { setAppNavigation } from './Navbar';
+import { enableLogging } from '../utils';
 
 export const chargerID = signal(0);
 export const chargerPort = signal(0);
@@ -79,6 +80,10 @@ export class Frame extends Component {
                 };
 
                 this.worker.postMessage(message);
+
+                if (enableLogging) {
+                    this.worker.postMessage("enableLogging");
+                }
             }
         }
 
@@ -120,6 +125,12 @@ export class Frame extends Component {
             const frame_window = frame.contentWindow;
             frame_window.location.hash = hash;
         }
+
+        window.addEventListener("keydown", (e: KeyboardEvent) => {
+            if (e.ctrlKey && e.altKey && e.code === "KeyP") {
+                this.worker.postMessage("download");
+            }
+        })
     }
 
     componentWillUnmount() {

frontend/src/utils.tsx

@@ -70,3 +70,12 @@ export const loggedIn = signal(AppState.Loading);
 export const PASSWORD_PATTERN = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/;
 export const BACKEND = import.meta.env.VITE_BACKEND_URL;
 export const FRONTEN_URL = import.meta.env.VITE_FRONTEND_URL;
+
+export let enableLogging = false;
+
+window.addEventListener("keydown", (e: KeyboardEvent) => {
+    if (e.ctrlKey && e.altKey && e.code === "KeyL") {
+        alert("Pcap logging enabled");
+        enableLogging = true;
+    }
+})

frontend/src/worker.ts

@@ -26,8 +26,6 @@ declare const self: DedicatedWorkerGlobalScope;
 const tunnel_url = import.meta.env.VITE_BACKEND_WS_URL + "/ws?key_id="
 let wgClient: Client | undefined = undefined;
 let setup_data: SetupMessage;
-self.postMessage("started");
-set_pcap_logging(true);
 
 self.addEventListener("message", async (e: MessageEvent) => {
     if (typeof e.data === "string") {
@@ -51,6 +49,10 @@ self.addEventListener("message", async (e: MessageEvent) => {
                 wgClient.disconnect_inner_ws();
                 break;
 
+            case "enableLogging":
+                set_pcap_logging(true);
+                break;
+
             case "download":
                 triggerDownload();
                 break;
@@ -164,3 +166,5 @@ function triggerDownload() {
         data: msg
     });
 }
+
+self.postMessage("started");