diff --git a/Frontend/power-tracker/src/components/adminPages.tsx b/Frontend/power-tracker/src/components/adminPages.tsx
index b01e0c026ce4f233acc760a09ae506bd4ce9f96e..df632ce9a04f0aa7a07deff4c9738909752fb8dd 100644
--- a/Frontend/power-tracker/src/components/adminPages.tsx
+++ b/Frontend/power-tracker/src/components/adminPages.tsx
@@ -41,16 +41,19 @@ function AdminPages() {
<div className='navbar'>
<NavigationMenu>
<NavigationMenuList>
+
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()} asChild>
<Link to="/admin1">User configs</Link>
</NavigationMenuLink>
</NavigationMenuItem>
+
<NavigationMenuItem>
<NavigationMenuLink className={navigationMenuTriggerStyle()} asChild>
<Link to="/admin2">System configs</Link>
</NavigationMenuLink>
</NavigationMenuItem>
+
</NavigationMenuList>
</NavigationMenu>
</div>
diff --git a/Frontend/power-tracker/src/components/enoekAdd.tsx b/Frontend/power-tracker/src/components/enoekAdd.tsx
index c294cb23fc4637232fa3f420eadc6731846236a4..67aab318e8942a9943f42503e6d3d00578f4c72f 100644
--- a/Frontend/power-tracker/src/components/enoekAdd.tsx
+++ b/Frontend/power-tracker/src/components/enoekAdd.tsx
@@ -86,12 +86,7 @@ class Processes {
constructor(name: string) {
this.name = name;
}
- }
-
-
-
-
-
+}
const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search }) =>{
diff --git a/Frontend/power-tracker/src/components/manageBuildDep.tsx b/Frontend/power-tracker/src/components/manageBuildDep.tsx
index 35f0600c2af3fd532d2f073934866e896526da2b..6c119a2e50ebb79fc9ee2197c7b2f183f3b04fd2 100644
--- a/Frontend/power-tracker/src/components/manageBuildDep.tsx
+++ b/Frontend/power-tracker/src/components/manageBuildDep.tsx
@@ -395,19 +395,23 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup {
return (
<div className='flex h-[100%]'>
- <AlertDialog open={open}>
- <AlertDialogContent>
- <AlertDialogHeader>
- <AlertDialogTitle>Something went wrong</AlertDialogTitle>
- </AlertDialogHeader>
- <div>
- Please try again or check your connection
- </div>
- <AlertDialogFooter>
- <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
- </AlertDialogFooter>
- </AlertDialogContent>
- </AlertDialog>
+
+
+ {/* Page display error */}
+ <AlertDialog open={open}>
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Something went wrong</AlertDialogTitle>
+ </AlertDialogHeader>
+ <div>
+ Please try again or check your connection
+ </div>
+ <AlertDialogFooter>
+ <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+
<div className='w-[1100px]'>
{/* Title and search bar */}
<div className="w-[100%] h-[40px] flex justify-between content-center" style={{ marginTop: '5px' }}>
@@ -423,39 +427,41 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup {
<Separator className="mb-[10px]" />
- {/* New building button */}
+ {/* New building button and window */}
<AlertDialog>
+ {/* New building Button */}
<AlertDialogTrigger>
<Button className="w-[60px] h-[30px] mb-[10px] ml-[10px]" variant="default" size="icon" onClick={() => { setBuildingBool(!buildingBool)}} title="Add Building">
<Factory className="h-[20px]" />
<Plus className="h-[18px]" />
</Button>
</AlertDialogTrigger>
+ {/* New Building window */}
<AlertDialogContent>
<form onSubmit={(e) => { if(buildingNameInput!=""){addBuilding(e,buildingNameInput); setBuildingNameInput(""); setBuildingBool(!buildingBool);}}} className="form-container">
- <Input className="mb-[20px]" type="text" placeholder="Buidling Name" value={buildingNameInput} onChange={(event) => setBuildingNameInput(event.target.value)} required/>
- <AlertDialogFooter>
- <AlertDialogAction>
- <Button
- type="submit"
- onClick={() => {
- setBuildDepData(prevState => ({
- ...prevState,
- buildingDepartmentData: [
- ...prevState.buildingDepartmentData,
- {
- building: {
- name: buildingNameInput
- },
- departments: []
- }
- ]
- }));
- }}>Submit
- </Button>
- </AlertDialogAction>
- <AlertDialogCancel>Cancel</AlertDialogCancel>
- </AlertDialogFooter>
+ <Input className="mb-[20px]" type="text" placeholder="Buidling Name" value={buildingNameInput} onChange={(event) => setBuildingNameInput(event.target.value)} required/>
+ <AlertDialogFooter>
+ <AlertDialogAction>
+ <Button
+ type="submit"
+ onClick={() => {
+ setBuildDepData(prevState => ({
+ ...prevState,
+ buildingDepartmentData: [
+ ...prevState.buildingDepartmentData,
+ {
+ building: {
+ name: buildingNameInput
+ },
+ departments: []
+ }
+ ]
+ }));
+ }}>Submit
+ </Button>
+ </AlertDialogAction>
+ <AlertDialogCancel>Cancel</AlertDialogCancel>
+ </AlertDialogFooter>
</form>
</AlertDialogContent>
</AlertDialog>
@@ -508,10 +514,11 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup {
</div>
{/* In building dropdown */}
<AccordionContent>
- {/* Add department button */}
+ {/* Add department button and window*/}
<div className="depbar">
<Separator orientation='vertical' className="mr-[5px]"/>
<AlertDialog>
+ {/* Add department button */}
<AlertDialogTrigger asChild>
<Button className="w-[60px] h-[30px] mb-[10px] ml-[20px] mt-[10px]" variant="default" size="icon" onClick={() => {
setDepartmentBool(!departmentBool);
@@ -523,6 +530,7 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup {
<Plus className="h-[18px]" />
</Button>
</AlertDialogTrigger>
+ {/* Add department window */}
<AlertDialogContent>
<form onSubmit={(e) => {
e.preventDefault();
@@ -589,9 +597,11 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup {
<div/>
<div className="h-[100%] flex items-center justify-around">
<AlertDialog>
+ {/* Edit Department button */}
<AlertDialogTrigger asChild>
<Button className="h-[30px] w-[60px]" variant="outline" onClick={()=>{setDepartmentNameInput(department.name)}}>Edit</Button>
</AlertDialogTrigger>
+ {/* Edit department window */}
<AlertDialogContent>
<AlertDialogHeader>Edit {department.name}</AlertDialogHeader>
<form onSubmit={(e)=>{e.preventDefault();editDepartment(department.name, departmentNameInput,buildDep.building.name);setDepartmentNameInput("")}}>
@@ -602,9 +612,11 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup {
</AlertDialogContent>
</AlertDialog>
<AlertDialog>
+ {/* Delete Department Button */}
<AlertDialogTrigger asChild>
<Button className="h-[30px] w-[60px]" variant="outline" >Delete</Button>
</AlertDialogTrigger>
+ {/* Delete Department Window */}
<AlertDialogContent>
<AlertDialogHeader>Are you sure about deleting {department.name}? This will remove it from alle machines that has this department.</AlertDialogHeader>
<AlertDialogAction onClick={()=>deleteDepartment(department.name)}>DELETE</AlertDialogAction>
@@ -665,9 +677,7 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup {
<Separator className='mx-10' orientation="vertical"/> {/* Needs parent container to be set to 100% height for it to work as it takes on the height of parent container */}
- <div className="w-[400px]">
-
- </div>
+ <div className="w-[400px]" />
</div>
);
diff --git a/Frontend/power-tracker/src/components/manageProcesses.tsx b/Frontend/power-tracker/src/components/manageProcesses.tsx
index be50aa363a33d6f9411369cad0568db3a4923c38..7673b4426eeab773fd58f067036e37ca0c564d7a 100644
--- a/Frontend/power-tracker/src/components/manageProcesses.tsx
+++ b/Frontend/power-tracker/src/components/manageProcesses.tsx
@@ -401,20 +401,23 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach
return (
<div className="flex h-[100%]">
+
<AlertDialog open={open}>
- <AlertDialogContent>
- <AlertDialogHeader>
- <AlertDialogTitle>Something went wrong</AlertDialogTitle>
- </AlertDialogHeader>
- <div>
- Please try again or check your connection
- </div>
- <AlertDialogFooter>
- <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
- </AlertDialogFooter>
- </AlertDialogContent>
- </AlertDialog>
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Something went wrong</AlertDialogTitle>
+ </AlertDialogHeader>
+ <div>
+ Please try again or check your connection
+ </div>
+ <AlertDialogFooter>
+ <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+
<div className='w-[1100px]'>
+
{/* Title and search bar */}
<div className="w-[100%] h-[40px] flex justify-between content-center" style={{ marginTop: '5px' }}>
<h1 className="scroll-m-20 text-2xl font-semibold tracking-tight">Processes</h1>
@@ -429,7 +432,7 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach
<Separator className="mb-[10px]" />
- {/* New process button */}
+ {/* New process button and window*/}
<AlertDialog>
<AlertDialogTrigger>
<Button className="w-[60px] h-[30px] mb-[10px] ml-[10px]" variant="default" size="icon" >
@@ -466,45 +469,57 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach
<Separator />
+ {/* List of Processes */}
<ul>
{processData.process.map((process, index) => (
<li>
<div className="buildingbar flex items-center">
+
<Separator orientation='vertical' className="mr-[5px]"/>
+
<div className='flex flex-row'>
<Waypoints className="mx-[20px] mt-[2px]" />
<strong><h4 className="scroll-m-20 text-xl font-semibold tracking-tight">{process.name}</h4></strong>
</div>
+
<Separator orientation='vertical' className="mx-[5px]"/>
+
<div className="h-[100%] flex items-center justify-around">
- <AlertDialog>
- <AlertDialogTrigger asChild>
- <Button className="h-[30px] w-[60px]" variant="outline" onClick={()=>{setText(process.name); setDesc(process.description)}}>Edit</Button>
- </AlertDialogTrigger>
- <AlertDialogContent>
- <AlertDialogHeader>Edit {process.name}</AlertDialogHeader>
- <form onSubmit={(e)=>{e.preventDefault();editProcess(process.name, text ,process.description,desc); setText(""); setDesc("");}}>
- <label>Process Name</label>
- <Input className="mb-[20px]" type="text" placeholder="Process Name" value={text} onChange={(event) => setText(event.target.value)} required/>
- <label>Description</label>
- <Input className="mb-[20px]" type="text" placeholder="Description" value={desc} onChange={(event) => setDesc(event.target.value)} required/>
- <AlertDialogAction type='submit'>Confirm</AlertDialogAction>
- <AlertDialogCancel onClick={()=>{setText(""); setDesc("");}}>Cancel</AlertDialogCancel>
- </form>
- </AlertDialogContent>
- </AlertDialog>
- <AlertDialog>
- <AlertDialogTrigger asChild>
- <Button className="h-[30px] w-[60px]" variant="outline" >Delete</Button>
- </AlertDialogTrigger>
- <AlertDialogContent>
- <AlertDialogHeader>Are you sure about deleting {process.name}?</AlertDialogHeader>
- <AlertDialogAction onClick={()=>deleteProcess(process.name, process.description)}>DELETE</AlertDialogAction>
- <AlertDialogCancel>Cancel</AlertDialogCancel>
- </AlertDialogContent>
- </AlertDialog>
+ {/* Edit Process Button and window */}
+ <AlertDialog>
+ {/* Edit Button */}
+ <AlertDialogTrigger asChild>
+ <Button className="h-[30px] w-[60px]" variant="outline" onClick={()=>{setText(process.name); setDesc(process.description)}}>Edit</Button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <AlertDialogHeader>Edit {process.name}</AlertDialogHeader>
+ <form onSubmit={(e)=>{e.preventDefault();editProcess(process.name, text ,process.description,desc); setText(""); setDesc("");}}>
+ <label>Process Name</label>
+ <Input className="mb-[20px]" type="text" placeholder="Process Name" value={text} onChange={(event) => setText(event.target.value)} required/>
+ <label>Description</label>
+ <Input className="mb-[20px]" type="text" placeholder="Description" value={desc} onChange={(event) => setDesc(event.target.value)} required/>
+ <AlertDialogAction type='submit'>Confirm</AlertDialogAction>
+ <AlertDialogCancel onClick={()=>{setText(""); setDesc("");}}>Cancel</AlertDialogCancel>
+ </form>
+ </AlertDialogContent>
+ </AlertDialog>
+
+ {/* Delete Process Button */}
+ <AlertDialog>
+ <AlertDialogTrigger asChild>
+ <Button className="h-[30px] w-[60px]" variant="outline" >Delete</Button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <AlertDialogHeader>Are you sure about deleting {process.name}?</AlertDialogHeader>
+ <AlertDialogAction onClick={()=>deleteProcess(process.name, process.description)}>DELETE</AlertDialogAction>
+ <AlertDialogCancel>Cancel</AlertDialogCancel>
+ </AlertDialogContent>
+ </AlertDialog>
+
</div>
+
<Separator orientation='vertical' className="ml-[5px]"/>
+
</div>
<Separator />
</li>
@@ -512,7 +527,10 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach
</ul>
<div className="center">
+
+ {/* Add machines to Process button and window */}
<AlertDialog>
+ {/* Add Button */}
<AlertDialogTrigger asChild>
<Button size="sm" variant="outline" onClick={()=>{}}>Add machine to process</Button>
</AlertDialogTrigger>
@@ -530,6 +548,7 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach
) : null
))}
</select>
+ {/* List of machines */}
{processDropDown !== "" && (
<div>
{processMachineData.processMachine.map((element, index) => (
@@ -553,15 +572,17 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach
</div>
)}
</AlertDialogHeader>
+ {/* Submit/Cancel Action */}
<AlertDialogFooter>
<AlertDialogAction type='submit' onClick={()=>{handleSave2(processMachineData, processMachineData2, processDropDownId); console.log(processDropDownId)}}>Save</AlertDialogAction>
<AlertDialogCancel>Cancel</AlertDialogCancel>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
+
</div>
</div>
- <Separator className='mx-10' orientation="vertical"/> {/* Needs parent container to be set to 100% height for it to work as it takes on the height of parent container */}
+ <Separator className='mx-10' orientation="vertical"/> {/* Needs parent container to be set to a specific height for it to work as it takes on the height of parent container */}
<div className="w-[400px]">
</div>
diff --git a/Frontend/power-tracker/src/components/topbar.tsx b/Frontend/power-tracker/src/components/topbar.tsx
index ca2ecc482eb0a961b8afb0294be55fe74f8f950d..d91c82b13d3efd6f9c16516c54c5f42c19f0a889 100644
--- a/Frontend/power-tracker/src/components/topbar.tsx
+++ b/Frontend/power-tracker/src/components/topbar.tsx
@@ -21,22 +21,19 @@ import {
function TopBar() {
const navigate = useNavigate();
- const [isOpen, setIsOpen] = useState(false)
-
- function toggle() {
- setIsOpen((isOpen) => !isOpen);
- }
+ // User logs out
const logout = async () => {
sessionStorage.removeItem("TOKEN");
return navigate('/');
};
+ // Retrieves users first and last name
var Name = sessionStorage.getItem("FIRSTNAME")+ " " + sessionStorage.getItem("LASTNAME")
return (
<div id="menubar">
- {/*-------------- MAIN BAR --------------*/}
+ {/*-------------- Top MAIN BAR --------------*/}
<div id="topbar">
<div id = "topbar-start">
<p className = "elem">{Name}</p>
@@ -48,7 +45,7 @@ function TopBar() {
</div>
</div>
<Separator/>
- {/*-------------- NAVIGATION --------------*/}
+ {/*-------------- Bottom NAVIGATION --------------*/}
<div>
<div className='navbar'>
<NavigationMenu>
diff --git a/Frontend/power-tracker/src/pages/ManageSensors.tsx b/Frontend/power-tracker/src/pages/ManageSensors.tsx
index a51833fdd9fcc6981c8fee3bdab00fd8219c8805..e813b878f990bda06aab4a3381bd012e01468a7c 100644
--- a/Frontend/power-tracker/src/pages/ManageSensors.tsx
+++ b/Frontend/power-tracker/src/pages/ManageSensors.tsx
@@ -387,28 +387,37 @@ function ManageSensors() {
return(
<>
<TopBar></TopBar>
+
<main>
- <AlertDialog open={open}>
- <AlertDialogContent>
- <AlertDialogHeader>
- <AlertDialogTitle>Something went wrong</AlertDialogTitle>
- </AlertDialogHeader>
- <div>
- Please try again or check your connection
- </div>
- <AlertDialogFooter>
- <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
- </AlertDialogFooter>
- </AlertDialogContent>
- </AlertDialog>
+ {/* Page load error */}
+ <AlertDialog open={open}>
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Something went wrong</AlertDialogTitle>
+ </AlertDialogHeader>
+ <div>
+ Please try again or check your connection
+ </div>
+ <AlertDialogFooter>
+ <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+
<div className='leftbar'>
<div className='w-[100%] rounded-md border shadow-md pl-[10px] flex items-center justify-between'>
- <p>Add Sensor</p>
+
+ {/* Add machine Button and window */}
+ <p>Add Machine</p>
<AlertDialog>
- <AlertDialogTrigger><Button variant="outline" size="icon"><PlusIcon className='w-[20px]'></PlusIcon></Button></AlertDialogTrigger>
+ {/* Add machine Button */}
+ <AlertDialogTrigger>
+ <Button variant="outline" size="icon"><PlusIcon className='w-[20px]'></PlusIcon></Button>
+ </AlertDialogTrigger>
+ {/* Add machine window */}
<AlertDialogContent>
<AlertDialogHeader>
- <AlertDialogTitle>Add Sensor</AlertDialogTitle>
+ <AlertDialogTitle>Add Machine</AlertDialogTitle>
</AlertDialogHeader>
<Form {...form}>
@@ -547,12 +556,12 @@ function ManageSensors() {
</form>
</Form>
-
</AlertDialogContent>
</AlertDialog>
</div>
<div className = "spacer" />
</div>
+
<div className="rightbar">
<div className="w-[250px] h-[70px]">
<Input type="text" className="outlined-input" value={search} onChange={(event) => setSearch(event.target.value) } placeholder="Search.."/>
diff --git a/Frontend/power-tracker/src/pages/adminUserConfig.tsx b/Frontend/power-tracker/src/pages/adminUserConfig.tsx
index 374a5ded056127853d537298c6dc295a1ef05bb9..e3cde759bca3ce97ed9dc80494d4afc4f5eec62d 100644
--- a/Frontend/power-tracker/src/pages/adminUserConfig.tsx
+++ b/Frontend/power-tracker/src/pages/adminUserConfig.tsx
@@ -342,24 +342,28 @@ interface ManageUsersProps {
<>
<TopBar></TopBar>
<main>
- <AlertDialog open={open}>
- <AlertDialogContent>
- <AlertDialogHeader>
- <AlertDialogTitle>Something went wrong</AlertDialogTitle>
- </AlertDialogHeader>
- <div>
- Please try again or check your connection
- </div>
- <AlertDialogFooter>
- <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
- </AlertDialogFooter>
- </AlertDialogContent>
- </AlertDialog>
- <div className ="leftbar">
- <div className='w-[100%] rounded-md border shadow-md pl-[10px] flex items-center justify-between'>
+ <AlertDialog open={open}>
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Something went wrong</AlertDialogTitle>
+ </AlertDialogHeader>
+ <div>
+ Please try again or check your connection
+ </div>
+ <AlertDialogFooter>
+ <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+ <div className ="leftbar">
+ <div className='w-[100%] rounded-md border shadow-md pl-[10px] flex items-center justify-between'>
<p>Add User</p>
<AlertDialog>
- <AlertDialogTrigger><Button variant="outline" size="icon"><PlusIcon className='w-[20px]'></PlusIcon></Button></AlertDialogTrigger>
+ {/* Add User button */}
+ <AlertDialogTrigger>
+ <Button variant="outline" size="icon"><PlusIcon className='w-[20px]'></PlusIcon></Button>
+ </AlertDialogTrigger>
+ {/* Add user Menu */}
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Add User</AlertDialogTitle>
@@ -504,127 +508,127 @@ interface ManageUsersProps {
<TableCell>{user.LastName}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.permission}</TableCell>
- <div className="center">
- <AlertDialog>
- <AlertDialogTrigger asChild>
- <Button size="sm" variant="outline">Edit</Button>
- </AlertDialogTrigger>
- <AlertDialogContent>
- <AlertDialogTitle>Edit Sensor</AlertDialogTitle>
- <Form {...form}>
- <form onSubmit={ form.handleSubmit(onEdit)}>
- <FormField
- control={form.control}
- name='id'
- render={({ field }) => (
- <FormItem>
- <FormLabel>ID</FormLabel>
- <FormControl>
- <Input readOnly defaultValue={user.id} {...field} />
- </FormControl>
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name='firstName'
- render={({ field }) => (
- <FormItem>
- <FormLabel>First Name</FormLabel>
- <FormControl>
- <Input defaultValue={user.FirstName} {...field} />
- </FormControl>
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name='lastName'
- render={({ field }) => (
- <FormItem>
- <FormLabel>Last Name</FormLabel>
- <FormControl>
- <Input defaultValue={user.LastName} {...field} />
- </FormControl>
- </FormItem>
- )}
- />
-
- <br/>
- <FormField
- control={form.control}
- name='email'
- render={({ field }) => (
- <FormItem>
- <FormLabel>Email</FormLabel>
- <FormControl>
- <Input defaultValue={user.email} {...field} />
- </FormControl>
- </FormItem>
- )}
- />
- <br/>
- <FormField
- control={form.control}
- name='password'
- render={({ field }) => (
- <FormItem>
- <FormLabel>New Password</FormLabel>
- <FormControl>
- <Input type='password' {...field} />
- </FormControl>
- </FormItem>
- )}
- />
- <br/>
- <FormField
- control={form.control}
- name='permission'
- render={({ field }) => (
- <FormItem>
- <FormLabel>Permission level</FormLabel>
- <FormControl>
- <Input type="number" defaultValue={user.permission} {...field} />
- </FormControl>
- </FormItem>
- )}
- /> <br/>
- <AlertDialogFooter>
- <AlertDialogAction type='submit' onClick={()=>{
- if (form.getValues().id === undefined) {
- form.setValue("id", user.id);
- }
- if (form.getValues().firstName === undefined) {
- form.setValue("firstName", user.FirstName);
- }
- if (form.getValues().lastName === undefined) {
- form.setValue("lastName", user.LastName);
- }
- if (form.getValues().email === undefined) {
- form.setValue("email", user.email);
- }
- if (form.getValues().permission === undefined) {
- form.setValue("permission", user.permission);
- }
- }}>Done</AlertDialogAction>
- <AlertDialogCancel onClick={()=>{form.reset}}>Cancel</AlertDialogCancel>
- </AlertDialogFooter>
- </form>
- </Form>
- </AlertDialogContent>
- </AlertDialog>
- <AlertDialog>
- <AlertDialogTrigger asChild>
- <Button size="sm" variant="outline">Delete</Button>
- </AlertDialogTrigger>
- <AlertDialogContent>
- <AlertDialogTitle>Delete Sensor?</AlertDialogTitle>
- <AlertDialogDescription>Do you want to delete {user.FirstName + " " + user.LastName}?</AlertDialogDescription>
- <AlertDialogAction onClick={() => {deleteUser(user.id); }}>DELETE</AlertDialogAction>
- <AlertDialogCancel>Cancel</AlertDialogCancel>
- </AlertDialogContent>
- </AlertDialog>
- </div>
+ <div className="center">
+ <AlertDialog>
+ <AlertDialogTrigger asChild>
+ <Button size="sm" variant="outline">Edit</Button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <AlertDialogTitle>Edit Sensor</AlertDialogTitle>
+ <Form {...form}>
+ <form onSubmit={ form.handleSubmit(onEdit)}>
+ <FormField
+ control={form.control}
+ name='id'
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>ID</FormLabel>
+ <FormControl>
+ <Input readOnly defaultValue={user.id} {...field} />
+ </FormControl>
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name='firstName'
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>First Name</FormLabel>
+ <FormControl>
+ <Input defaultValue={user.FirstName} {...field} />
+ </FormControl>
+ </FormItem>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name='lastName'
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Last Name</FormLabel>
+ <FormControl>
+ <Input defaultValue={user.LastName} {...field} />
+ </FormControl>
+ </FormItem>
+ )}
+ />
+
+ <br/>
+ <FormField
+ control={form.control}
+ name='email'
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Email</FormLabel>
+ <FormControl>
+ <Input defaultValue={user.email} {...field} />
+ </FormControl>
+ </FormItem>
+ )}
+ />
+ <br/>
+ <FormField
+ control={form.control}
+ name='password'
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>New Password</FormLabel>
+ <FormControl>
+ <Input type='password' {...field} />
+ </FormControl>
+ </FormItem>
+ )}
+ />
+ <br/>
+ <FormField
+ control={form.control}
+ name='permission'
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Permission level</FormLabel>
+ <FormControl>
+ <Input type="number" defaultValue={user.permission} {...field} />
+ </FormControl>
+ </FormItem>
+ )}
+ /> <br/>
+ <AlertDialogFooter>
+ <AlertDialogAction type='submit' onClick={()=>{
+ if (form.getValues().id === undefined) {
+ form.setValue("id", user.id);
+ }
+ if (form.getValues().firstName === undefined) {
+ form.setValue("firstName", user.FirstName);
+ }
+ if (form.getValues().lastName === undefined) {
+ form.setValue("lastName", user.LastName);
+ }
+ if (form.getValues().email === undefined) {
+ form.setValue("email", user.email);
+ }
+ if (form.getValues().permission === undefined) {
+ form.setValue("permission", user.permission);
+ }
+ }}>Done</AlertDialogAction>
+ <AlertDialogCancel onClick={()=>{form.reset}}>Cancel</AlertDialogCancel>
+ </AlertDialogFooter>
+ </form>
+ </Form>
+ </AlertDialogContent>
+ </AlertDialog>
+ <AlertDialog>
+ <AlertDialogTrigger asChild>
+ <Button size="sm" variant="outline">Delete</Button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <AlertDialogTitle>Delete Sensor?</AlertDialogTitle>
+ <AlertDialogDescription>Do you want to delete {user.FirstName + " " + user.LastName}?</AlertDialogDescription>
+ <AlertDialogAction onClick={() => {deleteUser(user.id); }}>DELETE</AlertDialogAction>
+ <AlertDialogCancel>Cancel</AlertDialogCancel>
+ </AlertDialogContent>
+ </AlertDialog>
+ </div>
</TableRow>
))}
</TableBody>
diff --git a/Frontend/power-tracker/src/pages/login.tsx b/Frontend/power-tracker/src/pages/login.tsx
index 9dd4f5972cb013bfb695edd3760db4691a0ee0a6..9a2a206bd81c051958fc0abf760d6dacfcf4a626 100644
--- a/Frontend/power-tracker/src/pages/login.tsx
+++ b/Frontend/power-tracker/src/pages/login.tsx
@@ -86,21 +86,24 @@ function Login() {
};
return(
- <div id="loginpage"> {/* !! READ ABOUT USING "zod" https://zod.dev to allow client side validation && needed to make SHADUI form !! */}
- <AlertDialog open={open}>
- <AlertDialogContent>
- <AlertDialogHeader>
- <AlertDialogTitle>Login failed</AlertDialogTitle>
- </AlertDialogHeader>
- <div>
- Invalid username or password. Please try again.
- </div>
-
- <AlertDialogFooter>
- <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
- </AlertDialogFooter>
- </AlertDialogContent>
- </AlertDialog>
+ <div id="loginpage">
+
+ {/* Failed Login Alert */}
+ <AlertDialog open={open}>
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Login failed</AlertDialogTitle>
+ </AlertDialogHeader>
+ <div>
+ Invalid username or password. Please try again.
+ </div>
+ <AlertDialogFooter>
+ <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+
+ {/* Log in menu */}
<div id="logincard">
<Card>
<CardHeader>
@@ -109,6 +112,7 @@ function Login() {
<CardContent>
<Form {...loginForm}>
<form onSubmit={loginForm.handleSubmit(onSubmit)}>
+ {/* EMAIL */}
<FormField
control={loginForm.control}
name="email"
@@ -121,6 +125,7 @@ function Login() {
</FormItem>
)}
/>
+ {/* PASSWORD */}
<FormField
control={loginForm.control}
name="password"
diff --git a/Frontend/power-tracker/src/pages/overview.tsx b/Frontend/power-tracker/src/pages/overview.tsx
index c7784481c86fc1c5bba8b9c12a530ec39cbf0e9b..7b959428fd268107c60d36338212cd74000a4694 100644
--- a/Frontend/power-tracker/src/pages/overview.tsx
+++ b/Frontend/power-tracker/src/pages/overview.tsx
@@ -108,18 +108,19 @@ function Overview() {
<TopBar></TopBar>
<main>
-
+ {/* The Linechart */}
<div className = "rightbar">
<div className="h-[100%] w-[100%] relative overflow-auto">
<LineChart data={buildingData}/>
</div>
</div>
+ {/* Options and date picker menu for line chart */}
<div className = "leftbar">
<div>
- {/* GOTTA IMPLEMENT FUNCTIONALITY TO THE 2 BUTTONS TO CHNAGE INOUT */}
- <label className='text-primary text-sm'>Minuites between readings</label>
+ {/* Set reading interval, plus/minus buttons */}
+ <label className='text-primary text-sm'>Minutes between readings</label>
<div className='flex'>
<Input className="w-[280px] h-[40px]" type='number' value={interval} onChange={event => setInterval(parseInt(event.target.value))}></Input>
<div className="flex flex-col h-[40px] ml-[5px]">
@@ -132,7 +133,7 @@ function Overview() {
</div>
</div>
- {/* DATE FROM PICKER */}
+ {/* DATE FROM datepicker */}
<label className='text-primary text-sm'>Date From</label>
<div className='flex'>
<DatePicker width={280} dates={endDate} setDate={setEndDate} allowedDate={startDate} />
@@ -159,7 +160,7 @@ function Overview() {
</div>
</div>
- {/* DATE TO PICKER */}
+ {/* DATE TO datepicker */}
<label className='text-primary text-sm'>Date To</label>
<div className='flex mb-[10px]'>
<DatePicker width={280} dates={startDate} setDate={setStartDate} allowedDate={new Date()}/>
@@ -216,7 +217,7 @@ function Overview() {
<br/>
<div className="flex items-center align-center justify-center mb-[10px]"><Button className="h-[25px] w-[25px]" variant="outline" size="icon" onClick={_ => setRecall(!recall)}><RefreshCw className='h-[15px] w-[15px]'/></Button></div>
- {/* */}
+ {/* Building checkbox menu */}
<div className ="rounded-md border shadow-md px-[5px]">
{buildingsState.buildings !== null ? (
buildingsState.buildings.map((building, i) => {
@@ -224,10 +225,12 @@ function Overview() {
<Accordion type='single' collapsible>
<AccordionItem value={i.toString()}>
<div id="accordion-bar">
+ {/* Part that triggers the accordion expansion */}
<AccordionTrigger className='mx-[5px]'>
<label>{building.name}</label>
</AccordionTrigger>
<Separator orientation='vertical'></Separator>
+ {/* Checkbox outside trigger to avoid triggering expansion when checking */}
<div className='w-[100%] h-[100%] flex justify-center items-center'>
<Checkbox
checked={building.active}
@@ -246,10 +249,12 @@ function Overview() {
<Accordion type='single' collapsible>
<AccordionItem value={i.toString()}>
<div id="accordion-bar">
+ {/* Part that triggers the accordion expansion */}
<AccordionTrigger className='mr-[5px] ml-[15px]'>
<label>{department.name}</label>
</AccordionTrigger>
<Separator orientation='vertical'></Separator>
+ {/* Checkbox outside trigger to avoid triggering expansion when checking */}
<div className='w-[100%] h-[100%] flex justify-center items-center'>
<Checkbox
checked={department.active}
@@ -294,7 +299,10 @@ function Overview() {
<div></div>
)}
</div>
+
<br/>
+
+ {/* Process checkbox menu */}
<div className ="rounded-md border shadow-md px-[5px]">
{buildingsState.processes !== null ? (
buildingsState.processes.map((process, i) => {
@@ -302,10 +310,12 @@ function Overview() {
<Accordion type='single' collapsible>
<AccordionItem value={i.toString()}>
<div id="accordion-bar">
+ {/* Part that triggers the accordion expansion */}
<AccordionTrigger className='mx-[5px]'>
<label>{process.name}</label>
</AccordionTrigger>
<Separator orientation='vertical'></Separator>
+ {/* Checkbox outside trigger to avoid triggering expansion when checking */}
<div className='w-[100%] h-[100%] flex justify-center items-center'>
<Checkbox
checked={process.active}