Fix loads of stuff

pierr3 · Nov 1, 2024 · 13ea751 · 13ea751
1 parent 7a66ac1
commit 13ea751
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 83 deletions.
diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx
@@ -32,8 +32,10 @@ function App() {
       <ErrorDialog />
       <div className="structure">
         <Mini />
-        <RadioContainer />
-        <FocusBar />
+        <div className="sub-structure d-flex flex-column">
+          <RadioContainer />
+          <FocusBar />
+        </div>
         {/* <Sidebar /> */}
       </div>
     </>

diff --git a/src/renderer/src/components/add-station-model/station-modal.tsx b/src/renderer/src/components/add-station-model/station-modal.tsx
@@ -1,7 +1,7 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 
-import useSessionStore from '@renderer/store/sessionStore';
 import AddFrequency from '../sidebar/add-frequency';
+import AddStation from '../sidebar/add-station';
 
 export interface AddStationModalProps {
   closeModal: () => void;
@@ -14,28 +14,6 @@ export enum SaveStatus {
 }
 
 const AddStationModal: React.FC<AddStationModalProps> = ({ closeModal }) => {
-  const [readyToAdd, setReadyToAdd] = useState(false);
-  const [isConnected] = useSessionStore((state) => [state.version, state.isConnected]);
-
-  const stationInputRef = useRef<HTMLInputElement>(null);
-
-  const addStation = () => {
-    if (!readyToAdd || !isConnected) {
-      return;
-    }
-
-    const callsign = stationInputRef.current?.value.toUpperCase();
-    if (!callsign?.match(/^[A-Z0-9_ -]+$/) || !stationInputRef.current) {
-      return;
-    }
-
-    void window.api.GetStation(callsign);
-    stationInputRef.current.value = '';
-    setReadyToAdd(false);
-
-    closeModal();
-  };
-
   const closeHander = () => {
     closeModal();
   };
@@ -48,34 +26,18 @@ const AddStationModal: React.FC<AddStationModalProps> = ({ closeModal }) => {
             <div className="modal-header">
               <h5 className="modal-title">AFV Configuration</h5>
             </div>
-            <div className="modal-body" style={{ paddingBottom: '0' }}>
-              <div className="col-6" style={{ float: 'left' }}>
-                <div className="form-group" style={{ width: '90%' }}>
-                  <h5>Add a Station</h5>
-                  <input
-                    type="text"
-                    className="form-control mt-2"
-                    id="stationInput"
-                    placeholder="XXXX_XXX"
-                    ref={stationInputRef}
-                    onChange={(e) => {
-                      e.target.value.length !== 0 ? setReadyToAdd(true) : setReadyToAdd(false);
-                    }}
-                    onKeyDown={(e) => {
-                      e.key === 'Enter' && addStation();
-                    }}
-                  ></input>
-
-                  <button
-                    className="btn btn-primary mt-2 w-100"
-                    disabled={!readyToAdd || !isConnected}
-                    onClick={addStation}
-                  >
-                    Add
-                  </button>
-                </div>
+            <div
+              className="modal-body"
+              style={{ paddingBottom: '0', display: 'flex', justifyContent: 'space-between' }}
+            >
+              <div className="col" style={{ flex: '1', marginRight: '10px' }}>
+                <AddStation
+                  onAddStation={() => {
+                    closeModal();
+                  }}
+                />
               </div>
-              <div className="col-5" style={{ float: 'right' }}>
+              <div className="col" style={{ flex: '1', marginLeft: '10px' }}>
                 <AddFrequency
                   onAddFrequency={() => {
                     closeModal();

diff --git a/src/renderer/src/components/delete-multiple-radios.tsx b/src/renderer/src/components/delete-multiple-radios.tsx
@@ -1,21 +1,33 @@
 import useRadioState from '@renderer/store/radioStore';
 import useSessionStore from '@renderer/store/sessionStore';
+import useUtilStore from '@renderer/store/utilStore';
 import React from 'react';
 import { TrashFill } from 'react-bootstrap-icons';
 
 const DeleteMultipleRadios: React.FC = () => {
   const [isConnected] = useSessionStore((state) => [state.isConnected]);
-  const [radiosToBeDeleted, removeRadio, setPendingDeletion] = useRadioState((state) => [
+  const [radiosToBeDeleted, radios, removeRadio, setPendingDeletion] = useRadioState((state) => [
     state.radiosSelected,
+    state.radios,
     state.removeRadio,
     state.setPendingDeletion
   ]);
 
+  const [setIsEditMode] = useUtilStore((state) => [state.setIsEditMode]);
+
   const handleDeleteRadios = () => {
-    radiosToBeDeleted.forEach((radio) => {
-      setPendingDeletion(radio.frequency, true);
-      awaitEndOfRxForDeletion(radio.frequency);
-    });
+    if (radiosToBeDeleted.length == 0) {
+      radios.forEach((radio) => {
+        setPendingDeletion(radio.frequency, false);
+        awaitEndOfRxForDeletion(radio.frequency);
+      });
+    } else {
+      radiosToBeDeleted.forEach((radio) => {
+        setPendingDeletion(radio.frequency, true);
+        awaitEndOfRxForDeletion(radio.frequency);
+      });
+    }
+    setIsEditMode(false);
   };
 
   const awaitEndOfRxForDeletion = (frequency: number): void => {

diff --git a/src/renderer/src/components/radio/radio-container.tsx b/src/renderer/src/components/radio/radio-container.tsx
@@ -6,6 +6,8 @@ import useSessionStore from '@renderer/store/sessionStore';
 import useUtilStore from '@renderer/store/utilStore';
 import ExpandedRxInfo from './expanded-rx-info';
 import { useMediaQuery } from 'react-responsive';
+import AddStation from '../sidebar/add-station';
+import AddFrequency from '../sidebar/add-frequency';
 
 const RadioContainer: React.FC = () => {
   const radios = useRadioState((state) => state.radios);
@@ -49,18 +51,30 @@ const RadioContainer: React.FC = () => {
   }
 
   return (
-    <>
-      <div className="h-100 mx-3 d-flex justify-content-center flex-column hide-topbar">
-        <div className="d-flex unicon-overall-container">
-          <TopBarContainer />
-        </div>
+    <div className="h-100 px-4 pt-3 pb-3 d-flex flex-column">
+      <div className="d-flex unicon-overall-container mb-3">
+        <TopBarContainer />
+      </div>
 
-        <div className="d-flex sub-structure w-100 d-flex gap-3">
+      <div className="d-flex flex-column hide-topbar sub-sub-structure">
+        <div className="h-100 d-flex gap-3">
           <div
-            className={`box-container ${showExpandedRxInfo && isWideScreen ? 'radio-list-expanded' : 'w-100'} h-100`}
+            className={`box-container ${showExpandedRxInfo && isWideScreen ? 'radio-list-expanded' : 'w-100'}`}
           >
             {filteredRadios.length === 0 ? (
-              <div className="d-flex justify-content-center radio-text text-muted"></div>
+              <div className="d-flex justify-content-center flex-column radio-text  h-100 w-100">
+                <div
+                  className="container d-flex flex-column justify-content-center  h-100 align-items-center gap-4"
+                  style={{ paddingBottom: '0' }}
+                >
+                  <div className="w-50">
+                    <AddStation />
+                  </div>
+                  <div className="w-50">
+                    <AddFrequency />
+                  </div>
+                </div>
+              </div>
             ) : (
               <div className="row mx-1">
                 {filteredRadios.map((radio) => (
@@ -83,8 +97,7 @@ const RadioContainer: React.FC = () => {
           )}
         </div>
       </div>
-    </>
+    </div>
   );
 };
-
 export default RadioContainer;
diff --git a/src/renderer/src/components/radio/top-bar-container.tsx b/src/renderer/src/components/radio/top-bar-container.tsx
@@ -7,7 +7,7 @@ const TopBarContainer = () => {
   const isWideScreen = useMediaQuery({ minWidth: '790px' });
 
   return (
-    <div className="w-100 my-2 d-flex" style={{ paddingBottom: '10px' }}>
+    <div className="w-100 d-flex">
       {/* Main container with the centered content and right-aligned text */}
       <div className="w-100 d-flex justify-content-between align-items-center">
         {/* Left-aligned element */}

diff --git a/src/renderer/src/components/refresh-multiple-radios.tsx b/src/renderer/src/components/refresh-multiple-radios.tsx
@@ -1,19 +1,23 @@
 import useRadioState from '@renderer/store/radioStore';
 import useSessionStore from '@renderer/store/sessionStore';
+import useUtilStore from '@renderer/store/utilStore';
 import React from 'react';
 import { ArrowClockwise } from 'react-bootstrap-icons';
 
 const RefreshMultipleRadios: React.FC = () => {
   const [isConnected] = useSessionStore((state) => [state.isConnected]);
   const [radiosSelected] = useRadioState((state) => [state.radiosSelected]);
 
+  const [setIsEditMode] = useUtilStore((state) => [state.setIsEditMode]);
+
   const refreshMultipleRadios = () => {
     radiosSelected.forEach((radio) => {
       if (radio.callsign === 'MANUAL') {
         return;
       }
       void window.api.RefreshStation(radio.callsign);
     });
+    setIsEditMode(false);
   };
 
   return (

diff --git a/src/renderer/src/components/sidebar/add-frequency.tsx b/src/renderer/src/components/sidebar/add-frequency.tsx
@@ -3,7 +3,7 @@ import useRadioState, { RadioHelper } from '../../store/radioStore';
 import useSessionStore from '../../store/sessionStore';
 
 export interface AddFrequencyProps {
-  onAddFrequency: () => void;
+  onAddFrequency?: () => void;
 }
 
 const AddFrequency: React.FC<AddFrequencyProps> = ({ onAddFrequency }) => {
@@ -42,7 +42,9 @@ const AddFrequency: React.FC<AddFrequencyProps> = ({ onAddFrequency }) => {
     frequencyInputRef.current.value = '';
     setPreviousValue('');
     setReadyToAdd(false);
-    onAddFrequency();
+    if (onAddFrequency) {
+      onAddFrequency();
+    }
   };
 
   const checkFrequency = (e: React.ChangeEvent<HTMLInputElement>) => {

diff --git a/src/renderer/src/components/sidebar/add-station.tsx b/src/renderer/src/components/sidebar/add-station.tsx
@@ -0,0 +1,63 @@
+import React, { useRef, useState } from 'react';
+import useSessionStore from '../../store/sessionStore';
+
+export interface AddStationProps {
+  className?: string;
+  style?: React.CSSProperties;
+  onAddStation?: () => void;
+}
+
+const AddStation: React.FC<AddStationProps> = ({ className, style, onAddStation }) => {
+  const [readyToAdd, setReadyToAdd] = useState(false);
+  const [isConnected] = useSessionStore((state) => [state.version, state.isConnected]);
+
+  const stationInputRef = useRef<HTMLInputElement>(null);
+
+  const addStation = () => {
+    if (!readyToAdd || !isConnected) {
+      return;
+    }
+
+    const callsign = stationInputRef.current?.value.toUpperCase();
+    if (!callsign?.match(/^[A-Z0-9_ -]+$/) || !stationInputRef.current) {
+      return;
+    }
+
+    void window.api.GetStation(callsign);
+    stationInputRef.current.value = '';
+    setReadyToAdd(false);
+
+    if (onAddStation) {
+      onAddStation();
+    }
+  };
+
+  return (
+    <div className={`form-group ${className ? className : ''}`} style={style}>
+      <h5>Add a Station</h5>
+      <input
+        type="text"
+        className="form-control mt-2"
+        id="stationInput"
+        placeholder="XXXX_XXX"
+        ref={stationInputRef}
+        onChange={(e) => {
+          e.target.value.length !== 0 ? setReadyToAdd(true) : setReadyToAdd(false);
+        }}
+        onKeyDown={(e) => {
+          e.key === 'Enter' && addStation();
+        }}
+      ></input>
+
+      <button
+        className="btn btn-primary mt-2 w-100"
+        disabled={!readyToAdd || !isConnected}
+        onClick={addStation}
+      >
+        Add
+      </button>
+    </div>
+  );
+};
+
+export default AddStation;
diff --git a/src/renderer/src/components/titlebar/TitleBar.scss b/src/renderer/src/components/titlebar/TitleBar.scss
@@ -37,12 +37,6 @@ $transition-speed: 0.1s;
   font-weight: 600;
 }
 
-.rx-text {
-  font-size: 16px;
-  font-family: GlobalVars.$font-medium !important;
-  font-weight: 600 !important;
-}
-
 .rx-text-nofont {
   font-size: 16px;
   font-family: GlobalVars.$font-medium !important;

diff --git a/src/renderer/src/style/UnicomGuard.scss b/src/renderer/src/style/UnicomGuard.scss
@@ -9,7 +9,7 @@
 }
 
 .unicom-bar-container {
-  height: 30px;
+  height: 28px;
   width: fit-content;
   // margin: 10px;
   background-color: lighten($disabled, 10%);
@@ -23,11 +23,11 @@
 }
 
 .rx-info-expand {
-  height: 30px;
+  height: 28px;
 }
 
 .rx-bar-container {
-  height: 30px;
+  height: 29px;
   width: fit-content;
   margin: 10px 0px;
   background-color: lighten($disabled, 10%);
@@ -64,7 +64,7 @@
 
 .rx-text {
   display: inline-block;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
   vertical-align: middle;
 }

diff --git a/src/renderer/src/style/app.scss b/src/renderer/src/style/app.scss
@@ -204,11 +204,15 @@ button:disabled {
 }
 
 .structure {
-  height: calc(100vh - $navbar-height - $focusbar-height - 1rem);
+  height: calc(100vh - $navbar-height);
 }
 
 .sub-structure {
-  height: calc(100vh - $navbar-height - $focusbar-height - 35px - 3rem);
+  height: calc(100% - $focusbar-height);
+}
+
+.sub-sub-structure {
+  height: calc(100vh - $focusbar-height - $navbar-height - 60px - 1rem);
 }
 
 .text-box-container,