Merge pull request 'Improve switch port handling and UI layout' (#4) from that into main

Reviewed-on: #4

BACKEND/app/services/switch_connection.ts

@@ -271,7 +271,9 @@ export default class SwitchController {
   }
 
   public async getPorts(): Promise<boolean> {
+    this._send('    terminal length 0')
     this._send('show interface status')
+    this._send('    ')
     await this.sleep(2000)
     const statusOutput = this.buffer
     this.buffer = ''

BACKEND/providers/socket_io_provider.ts

@@ -658,10 +658,10 @@ export class WebSocketIo {
     try {
       const ip = station.switch_control_ip as string
       const port = station.switch_control_port as number
-      const username = station.switch_control_username as string
-      const password = station.switch_control_password as string
+      const username = (station.switch_control_username as string) || ''
+      const password = (station.switch_control_password as string) || ''
 
-      if (!ip || !port || !password) {
+      if (!ip || !port) {
         socket.emit('switch_output', {
           stationId: station.id,
           portGroups: [],

FRONTEND/src/components/DrawerControl.tsx

@@ -792,14 +792,19 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
   const normalizePortName = (port: string): string => {
     if (!port) return "";
 
-    // Match interface type + numeric hierarchy (e.g. "Gi" + "1/0/24")
+    // Example inputs: "Fa0/1", "Gi0/0/1", "Fa0/0/2"
     const match = port.match(/^([A-Za-z]+)([\d/]+)$/);
 
     if (!match) return port;
 
-    const numbers = match[2]; // e.g. "1/0/24"
+    // const type = match[1]; // Fa, Gi, Te, etc.
+    const numbers = match[2]; // "0/1" / "0/0/1" / "0/0/2"
 
-    return numbers;
+    // Get the last part after slash
+    const parts = numbers.split("/");
+    const last = parts[parts.length - 1];
+
+    return `${last}`;
   };
 
   const changeShowPort = (status: string) => {
@@ -1260,9 +1265,11 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                         <Box
                           style={{
                             display: "flex",
-                            flexWrap: "wrap",
-                            justifyContent: "center",
-                            gap: "10px",
+                            flexDirection: "column",
+                            // flexWrap: "wrap",
+                            // justifyContent: "center",
+                            alignItems: "center",
+                            gap: "8px",
                             overflow: "auto",
                             height: "11vh",
                             maxWidth: "70vw",