feat: not possible to add output to same port, will cause visible error

Eyevinn · Sep 3, 2024 · 9ffa7cd · 9ffa7cd
1 parent 0b5467a
commit 9ffa7cd
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 5 deletions.
diff --git a/src/components/modal/configureOutputModal/ConfigureOutputModal.tsx b/src/components/modal/configureOutputModal/ConfigureOutputModal.tsx
@@ -67,6 +67,9 @@ export function ConfigureOutputModal({
     defaultState(preset.pipelines)
   );
   const [multiviews, setMultiviews] = useState<MultiviewSettings[]>([]);
+  const [portDuplicateIndexes, setPortDuplicateIndexes] = useState<number[]>(
+    []
+  );
   const t = useTranslate();
 
   useEffect(() => {
@@ -110,6 +113,11 @@ export function ConfigureOutputModal({
       return;
     }
 
+    if (portDuplicateIndexes.length > 0) {
+      toast.error(t('preset.no_port_selected'));
+      return;
+    }
+
     presetToUpdate.pipelines[0].multiview = multiviews.map(
       (singleMultiview) => {
         return singleMultiview;
@@ -192,13 +200,48 @@ export function ConfigureOutputModal({
     );
   };
 
+  const findDuplicateValues = (data: MultiviewSettings[]) => {
+    const ports = data.map(
+      (item: MultiviewSettings) =>
+        item.output.local_ip + ':' + item.output.local_port.toString()
+    );
+    const duplicateIndices: number[] = [];
+    const seenPorts = new Set();
+
+    ports.forEach((port, index) => {
+      if (seenPorts.has(port)) {
+        duplicateIndices.push(index);
+        // Also include the first occurrence if it's not already included
+        const firstIndex = ports.indexOf(port);
+        if (!duplicateIndices.includes(firstIndex)) {
+          duplicateIndices.push(firstIndex);
+        }
+      } else {
+        seenPorts.add(port);
+      }
+    });
+
+    return duplicateIndices;
+  };
+
   const handleUpdateMultiview = (
     multiview: MultiviewSettings,
     index: number
   ) => {
     const updatedMultiviews = multiviews.map((item, i) =>
       i === index ? { ...item, ...multiview } : item
     );
+
+    const hasDuplicates = findDuplicateValues(updatedMultiviews);
+
+    if (hasDuplicates.length > 0) {
+      setPortDuplicateIndexes(hasDuplicates);
+    }
+
+    if (hasDuplicates.length === 0) {
+      setPortDuplicateIndexes([]);
+    }
+
     setMultiviews(updatedMultiviews);
   };
 
@@ -245,6 +288,11 @@ export function ConfigureOutputModal({
                     handleUpdateMultiview={(input) =>
                       handleUpdateMultiview(input, index)
                     }
+                    portDuplicateError={
+                      portDuplicateIndexes.length > 0
+                        ? portDuplicateIndexes.includes(index)
+                        : false
+                    }
                   />
                   <div
                     className={`w-full flex ${

diff --git a/src/components/modal/configureOutputModal/Input.tsx b/src/components/modal/configureOutputModal/Input.tsx
@@ -7,6 +7,7 @@ interface IInput {
   update: (value: string) => void;
   onKeyDown?: (e: KeyboardEvent) => void;
   size?: 'small' | 'large';
+  inputError?: boolean;
 }
 
 export default function Input({
@@ -15,8 +16,11 @@ export default function Input({
   update,
   type = 'text',
   onKeyDown,
-  size = 'small'
+  size = 'small',
+  inputError
 }: IInput) {
+  const errorCss = 'border-red-500 focus:border-red-500 focus:outline';
+
   return (
     <div className={`flex mb-5 justify-between w-full px-2`}>
       <label className="flex items-center">{label}</label>
@@ -27,7 +31,9 @@ export default function Input({
         onChange={(e) => update(e.target.value)}
         className={`cursor-pointer border text-sm rounded-lg ${
           size === 'small' ? 'w-6/12' : 'w-7/12'
-        } pl-2 pt-1 pb-1 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-gray-400 focus:outline-none`}
+        } pl-2 pt-1 pb-1 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-gray-400 focus:outline-none ${
+          inputError ? errorCss : ''
+        }`}
       />
     </div>
   );

diff --git a/src/components/modal/configureOutputModal/MultiviewSettings.tsx b/src/components/modal/configureOutputModal/MultiviewSettings.tsx
@@ -10,11 +10,13 @@ import toast from 'react-hot-toast';
 type MultiviewSettingsProps = {
   multiview?: MultiviewSettings;
   handleUpdateMultiview: (multiview: MultiviewSettings) => void;
+  portDuplicateError: boolean;
 };
 
 export default function MultiviewSettingsConfig({
   multiview,
-  handleUpdateMultiview
+  handleUpdateMultiview,
+  portDuplicateError
 }: MultiviewSettingsProps) {
   const t = useTranslate();
   const [multiviewPresets, loading] = useMultiviewPresets();
@@ -183,6 +185,7 @@ export default function MultiviewSettingsConfig({
         />
         <Input
           label={t('preset.port')}
+          inputError={portDuplicateError}
           value={
             multiviewOrPreset?.output.local_port
               ? multiviewOrPreset?.output.local_port

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
@@ -603,7 +603,8 @@ export const en = {
     multiview_output_settings: 'Multiview output',
     select_multiview_preset: 'Preset',
     no_multiview_selected: 'No multiview selected',
-    no_multiview_found: 'No multiview found'
+    no_multiview_found: 'No multiview found',
+    no_port_selected: 'Unique port needed'
   },
   error: {
     missing_sources_in_db: 'Missing sources, please restart production.',

diff --git a/src/i18n/locales/sv.ts b/src/i18n/locales/sv.ts
@@ -606,7 +606,8 @@ export const sv = {
     multiview_output_settings: 'Multiview utgång',
     no_multiview_selected: 'Ingen multiview vald',
     no_multiview_found: 'Hittade ingen multiview',
-    select_multiview_preset: 'Förinställningar'
+    select_multiview_preset: 'Förinställningar',
+    no_port_selected: 'Unik port krävs'
   },
   error: {
     missing_sources_in_db: 'Källor saknas, var god starta om produktionen.',