done mvp skeleton

assafnoahkoren · Feb 9, 2024 · a636f79 · a636f79
1 parent 6ae0d25
commit a636f79
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 6 deletions.
diff --git a/services/client/src/core/form/AppForm.tsx b/services/client/src/core/form/AppForm.tsx
@@ -64,7 +64,7 @@ export const AppForm: FC<AppFormProps> = React.memo(props => {
 									value={values[field.name]}
 									setValue={value => form.setValue(field.name as any, value)}
 								/>
-								<FormHelperText className="ms-3">{field.helperText}</FormHelperText>
+								{field.helperText && <FormHelperText className="ms-3">{field.helperText}</FormHelperText>}
 							</div>
 						);
 					})}

diff --git a/services/client/src/core/form/custom-fields/field-map.tsx b/services/client/src/core/form/custom-fields/field-map.tsx
@@ -2,7 +2,7 @@ import { Checkbox, TextField } from '@mui/material';
 import { CountryField } from './CountryField';
 
 export const FieldMap = {
-	text: ({ name, register, ...props }: any) => <TextField autoComplete="off" {...props} {...register(name)} />,
+	text: ({ name, register, ...props }: any) => <TextField autoComplete="off" {...props} className='rounded overflow-hidden' {...register(name)} />,
 	number: ({ name, register, ...props }: any) => <TextField {...props} {...register(name)} type="number" />,
 	boolean: ({ name, register, ...props }: any) => <Checkbox {...props} {...register(name)} />,
 	date: ({ name, register, ...props }: any) => <TextField {...props} {...register(name)} />,

diff --git a/services/client/src/core/routing/ProtectedRoutes.tsx b/services/client/src/core/routing/ProtectedRoutes.tsx
@@ -5,6 +5,7 @@ import { Shell } from '../../view/layout/Shell';
 import { checkAuthStatus } from '../firebase/firebase';
 import { GlobalJobs } from '../global-jobs/GlobalJobs';
 import { OnboardingPage } from '../../view/pages/onboarding/OnboardingPage';
+import { DevicePage } from '../../view/pages/device/DevicePage';
 
 const authGuard = async () => {
 	const isAuthenticated = await checkAuth();
@@ -45,5 +46,6 @@ export const ProtectedRoutes: RouteObject = {
 		{ path: 'onboarding', element: <OnboardingPage /> },
 		{ path: 'elevators', element: <>elevators</> },
 		{ path: 'add-device', element: <>add-device</> },
+		{ path: 'device/:id', element: <DevicePage/> },
 	]
 };
diff --git a/services/client/src/core/translations/i18n.ts b/services/client/src/core/translations/i18n.ts
@@ -19,7 +19,7 @@ i18n
 	.use(initReactI18next) // passes i18n down to react-i18next
 	.init({
 		resources,
-		lng: 'en', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+		lng: 'he', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
 		// you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
 		// if you're using a language detector, do not define the lng option
 

diff --git a/services/client/src/view/layout/SideMenu.tsx b/services/client/src/view/layout/SideMenu.tsx
@@ -39,7 +39,7 @@ export const SideMenu: FC = React.memo(() => {
 
 			 <Box className="flex flex-col h-full" sx={{ maxWidth: 360, minWidth: 220}}>
 			 <ListItem className='w-full h-[48px] bg-primary-color flex justify-center items-center'>
-					<span className='font-bold'>
+					<span className='font-bold text-white'>
 							Elevate
 					</span>
 				</ListItem>

diff --git a/services/client/src/view/pages/HomePage.tsx b/services/client/src/view/pages/HomePage.tsx
@@ -1,6 +1,63 @@
 import { FC } from 'react';
+import { AppForm } from '../../core/form/AppForm';
+import { useForm } from 'react-hook-form';
+import { Button } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 
 export const HomePage: FC = () => {
+	const form = useForm();
+	const navigate = useNavigate();
 
-	return <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 20 }}></div>;
+	return <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 20 }}>
+		<div className='w-full p-4 bg-gray-100'>
+			<div className='mb-2 font-bold opacity-75'>מצב כללי</div>
+			<div className='flex gap-4'>
+				<div className='flex flex-col items-center p-4 bg-gray-300 rounded'>
+					<span className='text-3xl font-bold'> 18</span>
+					<span> פעילות </span>
+				</div>
+				<div className='flex flex-col items-center p-4 bg-red-300 rounded'>
+					<span className='text-3xl font-bold'> 3 </span>
+					<span> תקלות </span>
+				</div>
+			</div>
+		</div>
+		<div className='w-full px-4 flex gap-2'>
+			<div className='flex-1'>
+				<AppForm
+					form={form}
+					noSubmit
+					fields={[{name: 'search',  type: 'text', placeholder: 'חיפוש מעלית', helperText:'חיפוש לפי: שם לקוח / מיקום / מזהה מעלית' ,value: '', grid: {colSpan: 12}}]}/>
+			</div>
+		 	<Button className='px-4 min-h-0 min-w-0 h-[43px]'>
+				<i className='fas fa-magnifying-glass'></i>
+			</Button>
+		</div>
+		<div className='px-4 w-full'>
+			<div className='w-full bg-gray-100 rounded'>
+				<div className='flex justify-between h-full p-4'>
+					<div className='flex gap-2 flex-col'>
+						<div className='flex gap-2'>
+							<span className='font-bold opacity-75'>#03</span>
+							<span className='bg-lime-300 px-2 rounded'>תקינה</span>
+						</div>
+						<div className='flex gap-4'>
+							<span>
+								<i className='fas fa-user me-2'></i>
+								שפיר הנדסה
+							</span>
+							<span>
+								<i className='fas fa-map-marker-alt me-2'></i>
+								אשדוד
+							</span>
+						</div>
+					</div>
+
+					<div className='flex gap-2'>
+						<Button onClick={() => navigate('/s/device/1234')}>פתח</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>;
 };
diff --git a/services/client/src/view/pages/device/DevicePage.tsx b/services/client/src/view/pages/device/DevicePage.tsx
@@ -0,0 +1,100 @@
+import { Button } from '@mui/material';
+import React from 'react';
+import { FC } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+export const DevicePage: FC = React.memo(() => {
+	const navigate = useNavigate();
+	return (
+		<>
+			<div className='w-full bg-gray-100 '>
+				<div className='flex flex-col items-start h-full p-4'>
+					<Button className='p-0 pb-2 min-w-0' variant='text' onClick={() => navigate(-1)}>
+						<i className='fas fa-arrow-left me-2'></i>
+					חזור
+					</Button>
+					<div className='flex gap-2 flex-col'>
+						<div className='flex gap-2'>
+							<span className='font-bold opacity-75'>#03</span>
+							<span className='bg-lime-300 px-2 rounded'>תקינה</span>
+							<span>
+								<i className='fas fa-wrench me-2 opacity-50'></i>
+								Model 2BFX
+							</span>
+						</div>
+						<div className='flex gap-4'>
+							<span>
+								<i className='fas fa-user me-2 opacity-50'></i>
+								שפיר הנדסה
+							</span>
+							<span>
+								<i className='fas fa-map-marker-alt me-2 opacity-50'></i>
+								אשדוד
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className='flex justify-center mt-4 gap-2 text-sm opacity-75'>
+				<span>
+				עדכון אחרון
+				</span>
+				<span>
+				24/02 12:00
+				</span>
+			</div>
+			<div className='flex flex-wrap gap-y-4 p-4'>
+				<div className='flex w-full lg:w-1/4 lg:pe-4'>
+					<div className='p-2 py-1 ps-4 flex-1  rounded-s border border-lime-300'>
+						מתח ראשי
+					</div>
+					<div className='p-2 py-1 w-1/4 bg-lime-300 rounded-e flex justify-center'>
+						יש מתח
+					</div>
+				</div>
+
+				<div className='flex w-full lg:w-1/4 lg:pe-4'>
+					<div className='p-2 py-1 ps-4 flex-1  rounded-s border border-lime-300'>
+						דלת חיצונית
+					</div>
+					<div className='p-2 py-1 w-1/4 bg-lime-300 rounded-e flex justify-center'>
+						יש מתח
+					</div>
+				</div>
+
+				<div className='flex w-full lg:w-1/4 lg:pe-4'>
+					<div className='p-2 py-1 ps-4 flex-1  rounded-s border border-red-300'>
+						דלת פנימית
+					</div>
+					<div className='p-2 py-1 w-1/4 bg-red-300 rounded-e flex justify-center'>
+						אין מתח
+					</div>
+				</div>
+
+				<div className='flex w-full lg:w-1/4 lg:pe-4'>
+					<div className='p-2 py-1 ps-4 flex-1  rounded-s border border-lime-300'>
+						מנוע
+					</div>
+					<div className='p-2 py-1 w-1/4 bg-lime-300 rounded-e flex justify-center'>
+						יש מתח
+					</div>
+				</div>
+
+				<div className='flex w-full lg:w-1/4 lg:pe-4'>
+					<div className='p-2 py-1 ps-4 flex-1  rounded-s border border-lime-300'>
+						משקל
+						&nbsp;
+						<span className='text-xs opacity-75'>
+						 משקל מקסימלי 350 kg
+						</span>
+					</div>
+					<div className='p-2 py-1 w-1/4 bg-lime-300 rounded-e flex justify-center'>
+						327.8 kg
+					</div>
+				</div>
+
+
+			</div>
+		</>
+	);
+});
diff --git a/services/client/src/view/theme/AppTheme.tsx b/services/client/src/view/theme/AppTheme.tsx
@@ -11,6 +11,7 @@ interface AppThemeProps extends React.PropsWithChildren {
 
 export const AppTheme: FC<AppThemeProps> = props => {
 	const dir = useHtmlDir();
+
 	const theme = muiTheme(dir);
 	return (
 		<>

diff --git a/services/client/src/view/theme/RtlSupport.tsx b/services/client/src/view/theme/RtlSupport.tsx
@@ -29,7 +29,7 @@ export function RtlSupport(props) {
 
 export function useHtmlDir() {
 
-	const [dir, setDir] = useState(document.dir);
+	const [dir, setDir] = useState(i18n.dir() as string);
 
 	useEffect(() => {
 		// Directly target the <html> element

diff --git a/services/client/src/view/theme/mui-theme.ts b/services/client/src/view/theme/mui-theme.ts
@@ -1,6 +1,13 @@
 import { Direction, createTheme } from "@mui/material";
+import { red,  } from "@mui/material/colors";
 
 export const muiTheme = (dir?: Direction ) => createTheme({
+	palette: {
+		primary: {
+			main: getComputedStyle(document.documentElement).getPropertyValue('--primary-color'),
+		},
+	},
+
 	direction: dir,
 	components: {
 		MuiButton: {