Skip to content

Commit

Permalink
ui fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
assafnoahkoren committed Feb 9, 2024
1 parent a636f79 commit ec7fb07
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 31 deletions.
12 changes: 8 additions & 4 deletions services/client/src/view/layout/SideMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,29 +38,33 @@ 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'>
<ListItem className='w-full h-[48px] bg-primary-color flex justify-between items-center'>
<div onClick={() => setLayoutState({isMenuOpen: false})} className='w-[48px] h-full flex justify-center items-center opacity-50 text-white text-xl'>
<i className='fal fa-times'></i>
</div>
<span className='font-bold text-white'>
Elevate
</span>
<div className='w-[48px]'></div>
</ListItem>
<nav className='flex-1'>
<List>
<ListItem>
<ListItemButton onClick={goto('/s/home')}>
<i className='fa-solid w-5 fa-home me-4'></i>
<ListItemText primary="Home" />
<ListItemText primary="בית" />
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton onClick={goto('/s/elevators')}>
<i className='fa-solid w-5 fa-elevator me-4'></i>
<ListItemText primary="Elevators" />
<ListItemText primary="מעליות" />
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton onClick={goto('/s/add-device')}>
<i className='fa-solid w-5 fa-plus me-4'></i>
<ListItemText primary="Add Device"/>
<ListItemText primary="הוסף מכשיר"/>
</ListItemButton>
</ListItem>
</List>
Expand Down
2 changes: 1 addition & 1 deletion services/client/src/view/layout/TopBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const TopBar: FC = React.memo(() => {
<Button onClick={() => setLayoutState({isMenuOpen: true})} variant="text" className="text-white opacity-75 rounded-none min-w-0 h-full" >
<i className="fa-solid fa-bars"></i>
</Button>
<LanguagePicker />
{/* <LanguagePicker /> */}
</span>
<ProfileButton />
</div>
Expand Down
87 changes: 63 additions & 24 deletions services/client/src/view/pages/HomePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const HomePage: FC = () => {
<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 className='text-3xl font-bold'> 57</span>
<span> פעילות </span>
</div>
<div className='flex flex-col items-center p-4 bg-red-300 rounded'>
Expand All @@ -33,31 +33,70 @@ export const HomePage: FC = () => {
<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='px-4 w-full flex flex-wrap gap-4'>
<DeviceRow device={{
id: '03',
client: 'שפיר הנדסה',
location: 'אשדוד',
status: 'תקינה',
color: 'bg-lime-300'
}}/>
<DeviceRow device={{
id: '03',
client: 'שפיר הנדסה',
location: 'חיפה',
status: 'תקלה',
color: 'bg-red-300'
}}/>
<DeviceRow device={{
id: '03',
client: 'שפיר הנדסה',
location: 'באר שבע',
status: 'תקינה',
color: 'bg-lime-300'
}}/>
</div>

</div>;
};

type DeviceRowProps = {
device?: {
id?: string;
client?: string;
location?: string;
status?: string;
color?: string;
}
};

const DeviceRow: FC<DeviceRowProps> = ({ device }) => {
const navigate = useNavigate();

return (
<div className='w-full lg:w-fit 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'>
<Button onClick={() => navigate('/s/device/1234')}>פתח</Button>
<span className='font-bold opacity-75'>#{device?.id}</span>
<span className={`px-2 rounded ${device?.color}`}>{device?.status}</span>
</div>
<div className='flex gap-4'>
<span>
<i className='fas fa-user me-2'></i>
{device?.client}
</span>
<span>
<i className='fas fa-map-marker-alt me-2'></i>
{device?.location}
</span>
</div>
</div>

<div className='flex gap-2 ms-4'>
<Button onClick={() => navigate('/s/device/1234')}>פתח</Button>
</div>
</div>
</div>
</div>;
};
)
}
2 changes: 1 addition & 1 deletion services/client/src/view/pages/LoginPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const LoginPage: FC = props => {
<div className="flex flex-col justify-center items-center bg-slate-200 h-screen">
<div className="flex flex-col items-center gap-4 bg-white p-10 h-min shadow-lg w-1/3 min-w-[350px] max-w-[90vw] rounded relative">
<div className="absolute top-0 left-0 p-4">
<LanguagePicker />
{/* <LanguagePicker /> */}
</div>
<h1 className="text-5xl font-bold mb-4">Elevate</h1>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col items-center gap-4 w-4/5">
Expand Down
2 changes: 1 addition & 1 deletion services/client/src/view/pages/RegisterPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const RegisterPage: FC = () => {
<div className="flex flex-col justify-center items-center bg-slate-200 h-screen">
<div className="flex flex-col items-center gap-4 bg-white p-10 h-min shadow-lg w-1/3 min-w-[350px] max-w-[90vw] rounded relative">
<div className="absolute top-0 left-0 p-4">
<LanguagePicker />
{/* <LanguagePicker /> */}
</div>
<h1 className="text-5xl font-bold mb-4">Elevate</h1>
<form className="flex flex-col items-center gap-4 w-4/5" onSubmit={handleSubmit(onSubmit)}>
Expand Down

0 comments on commit ec7fb07

Please sign in to comment.