TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated forms along with addg tabs

Browse Source
This commit is contained in:
Toba Ojo
2025-08-18 12:53:30 +01:00
parent d537a32e2c
commit be7f0cf1de
29 changed files with 704 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/components/CameraSettings/CameraSettingFields.tsx
View File

@@ -5,21 +5,20 @@ import type {
} from "../../types/types";
const CameraSettingFields = () => {
const initialValues = {
const initialValues: CameraSettingValues = {
friendlyName: "",
cameraAddress: "",
userName: "",
password: "",
setupCamera: 1,
};
const validateValues = (values: CameraSettingValues) => {
const errors: CameraSettingErrorValues = {};
if (!values.friendlyName) errors.friendlyName = "Required";
if (!values.cameraAddress) errors.cameraAddress = "Required";
if (!values.userName) errors.userName = "Required";
if (!values.password) errors.password = "Required";
console.log(errors);
return errors;
};
@@ -35,100 +34,101 @@ const CameraSettingFields = () => {
validate={validateValues}
validateOnChange={false}
>
{({ errors }) => {
return (
<Form className="flex flex-col space-y-4 p-2">
<div className="flex flex-col space-y-2">
<label htmlFor="friendlyName" className="relative">
Friendly Name
</label>
{errors.friendlyName && (
<small className="absolute right-0 text-red-500">
{errors?.friendlyName}
</small>
)}
<Field
name={"friendlyName"}
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter camera name"
/>
</div>
<div className="flex flex-col">
<label htmlFor="setupCamera" className="relative">
Setup Camera
</label>
{({ errors, touched, setFieldValue }) => (
<Form className="flex flex-col space-y-4 p-2">
<div className="flex flex-col space-y-2 relative">
<label htmlFor="friendlyName">Friendly Name</label>
{touched.friendlyName && errors.friendlyName && (
<small className="absolute right-0 top-0 text-red-500">
{errors.friendlyName}
</small>
)}
<Field
id="friendlyName"
name="friendlyName"
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter camera name"
/>
</div>
<Field
as="select"
name="setupCamera"
className="p-2 border border-gray-400 rounded-lg text-white"
>
<option value={1} className="bg-[#253445]">
1
</option>
<option value={2} className="bg-[#253445]">
2
</option>
<option value={3} className="bg-[#253445]">
3
</option>
<option value={4} className="bg-[#253445]">
4
</option>
</Field>
</div>
<div className="flex flex-col">
<label htmlFor="cameraAddress">Camera Address</label>
{errors.cameraAddress && (
<small className="absolute right-0 text-red-500">
{errors?.cameraAddress}
</small>
)}
<Field
name={"cameraAddress"}
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="123, London Road..."
/>
</div>
<div className="flex flex-col">
<label htmlFor="userName">User Name</label>
{errors.userName && (
<small className="absolute right-0 text-red-500">
{errors?.userName}
</small>
)}
<Field
name={"userName"}
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter user name"
/>
</div>
<div className="flex flex-col">
<label htmlFor="password">Password</label>
{errors.password && (
<small className="absolute right-0 text-red-500">
{errors?.password}
</small>
)}
<Field
name={"password"}
type="password"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter password"
/>
</div>
<button
type="submit"
className="bg-blue-800 rounded-lg p-2 mx-auto"
<div className="flex flex-col space-y-2 relative">
<label htmlFor="setupCamera">Setup Camera</label>
<Field
as="select"
id="setupCamera"
name="setupCamera"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
setFieldValue("setupCamera", parseInt(e.target.value, 10))
}
>
Save settings
</button>
</Form>
);
}}
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
</Field>
</div>
<div className="flex flex-col space-y-2 relative">
<label htmlFor="cameraAddress">Camera Address</label>
{touched.cameraAddress && errors.cameraAddress && (
<small className="absolute right-0 top-0 text-red-500">
{errors.cameraAddress}
</small>
)}
<Field
id="cameraAddress"
name="cameraAddress"
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="123, London Road..."
autoComplete="street-address"
/>
</div>
<div className="flex flex-col space-y-2 relative">
<label htmlFor="userName">User Name</label>
{touched.userName && errors.userName && (
<small className="absolute right-0 top-0 text-red-500">
{errors.userName}
</small>
)}
<Field
id="userName"
name="userName"
type="text"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter user name"
autoComplete="username"
/>
</div>
<div className="flex flex-col space-y-2 relative">
<label htmlFor="password">Password</label>
{touched.password && errors.password && (
<small className="absolute right-0 top-0 text-red-500">
{errors.password}
</small>
)}
<Field
id="password"
name="password"
type="password"
className="p-2 border border-gray-400 rounded-lg"
placeholder="Enter password"
autoComplete="new-password"
/>
</div>
<button
type="submit"
className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
>
Save settings
</button>
</Form>
)}
</Formik>
);
};