- Enhanced responsiveness and layout adjustments across various components
This commit is contained in:
@@ -52,7 +52,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
<div className="flex flex-col gap-4 p-4">
|
||||
{values.format.toLowerCase() !== "ftp" ? (
|
||||
<>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="backoffice" className="block mb-2 font-medium">
|
||||
Back Office URL
|
||||
</label>
|
||||
@@ -64,7 +64,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="username" className="block mb-2 font-medium">
|
||||
Username
|
||||
</label>
|
||||
@@ -76,7 +76,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="password">Password</label>
|
||||
<Field
|
||||
name={"password"}
|
||||
@@ -86,7 +86,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
|
||||
<Field
|
||||
name={"readTimeoutSeconds"}
|
||||
@@ -96,7 +96,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
|
||||
<Field
|
||||
name={"connectTimeoutSeconds"}
|
||||
@@ -105,7 +105,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="overviewQuality">Overview quality and scale</label>
|
||||
<Field
|
||||
name={"overviewQuality"}
|
||||
@@ -118,7 +118,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
<option value={"LOW"}>Low</option>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="cropSizeFactor">Crop Size Factor</label>
|
||||
<Field
|
||||
name={"cropSizeFactor"}
|
||||
@@ -138,7 +138,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
<h2 className="font-bold">{values.format} Constants</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="SCID">Source ID / Camera ID</label>
|
||||
<Field
|
||||
name={"SCID"}
|
||||
@@ -150,7 +150,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="timestampSource">Timestamp Source</label>
|
||||
<Field
|
||||
name={"timestampSource"}
|
||||
@@ -162,7 +162,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
<option value={"LOCAL"}>Local</option>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="GPSFormat">GPS Format</label>
|
||||
<Field
|
||||
name={"GPSFormat"}
|
||||
@@ -182,7 +182,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
<div className="border-b border-gray-500 my-3">
|
||||
<h2 className="font-bold">{values.format} Constants</h2>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="FFID">Feed ID / Force ID</label>
|
||||
<Field
|
||||
name={"FFID"}
|
||||
@@ -194,7 +194,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="SCID">Source ID / Camera ID</label>
|
||||
<Field
|
||||
name={"SCID"}
|
||||
@@ -206,7 +206,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="timestampSource">Timestamp Source</label>
|
||||
<Field
|
||||
name={"timestampSource"}
|
||||
@@ -218,7 +218,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
<option value={"LOCAL"}>Local</option>
|
||||
</Field>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="GPSFormat">GPS Format</label>
|
||||
<Field
|
||||
name={"GPSFormat"}
|
||||
@@ -235,7 +235,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
<div className="border-b border-gray-500 my-3">
|
||||
<h2 className="font-bold">{values.format} Lane ID Config</h2>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="LID1">Lane ID 1 (Camera A)</label>
|
||||
<Field
|
||||
name={"LID1"}
|
||||
@@ -247,7 +247,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
} rounded-lg w-full md:w-60`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col md:flex-row space-y-4 justify-between">
|
||||
<label htmlFor="LID2">Lane ID 2 (Camera B)</label>
|
||||
<Field
|
||||
name={"LID2"}
|
||||
@@ -272,7 +272,10 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
{values?.customFields?.map((_, index) => {
|
||||
// if (!field.value) return null;
|
||||
return (
|
||||
<div key={index} className="flex flex-row justify-between items-center mb-4 gap-2">
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between items-center mb-4 gap-2"
|
||||
>
|
||||
<Field
|
||||
name={`customFields.${index}.label`}
|
||||
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
|
||||
@@ -287,23 +290,25 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => arrayHelpers.push({ label: "", value: "" })}
|
||||
className={`mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
|
||||
disabled={values?.customFields && values?.customFields?.length >= 6}
|
||||
>
|
||||
Add Custom Field
|
||||
</button>
|
||||
{values?.customFields && values?.customFields?.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => arrayHelpers.pop()}
|
||||
className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
|
||||
onClick={() => arrayHelpers.push({ label: "", value: "" })}
|
||||
className={`border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
|
||||
disabled={values?.customFields && values?.customFields?.length >= 6}
|
||||
>
|
||||
Remove Custom Field
|
||||
Add Custom Field
|
||||
</button>
|
||||
)}
|
||||
{values?.customFields && values?.customFields?.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => arrayHelpers.pop()}
|
||||
className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
|
||||
>
|
||||
Remove Custom Field
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</FieldArray>
|
||||
|
||||
Reference in New Issue
Block a user