diff --git a/Backend/API/handlers/newHotdrop.go b/Backend/API/handlers/newHotdrop.go
index 860f0447d6950566ce695a6602543f2a36e64b68..76b03bb29922b74fd0998d8167c57c322cf3cbf0 100644
--- a/Backend/API/handlers/newHotdrop.go
+++ b/Backend/API/handlers/newHotdrop.go
@@ -145,7 +145,7 @@ func NewHotDrop(w http.ResponseWriter, r *http.Request) {
}
department := 0 //check if it is intended to have a department, if not, skip
if data.DepartmentName != "" {
- department, err = other.GetDepartmentIdByName(data.DepartmentName, building)
+ department, err = other.GetDepartmentIdByName(data.DepartmentName, CompID)
if err != nil {
log.Println(err.Error())
w.WriteHeader(http.StatusBadRequest)
diff --git a/Frontend/power-tracker/src/components/enoekAdd.tsx b/Frontend/power-tracker/src/components/enoekAdd.tsx
index dfa53f78345d867da54b4366d62d46d8702693d3..c294cb23fc4637232fa3f420eadc6731846236a4 100644
--- a/Frontend/power-tracker/src/components/enoekAdd.tsx
+++ b/Frontend/power-tracker/src/components/enoekAdd.tsx
@@ -88,23 +88,7 @@ class Processes {
}
}
- async function fetchDataProcess(): Promise<Processes[]> {
- var processArrray: Processes[] = []
- await axios.post(EgressAPI + '/process',
- {
- sessionToken: sessionStorage.getItem('TOKEN')
- }).then((res) => {
- res.data.process.forEach((element: any) => {
- processArrray.push({
- name: element.name
- })
- });
- }).catch((error) => {
- console.log(error)
- })
- console.log(processArrray)
- return processArrray
- }
+
@@ -122,6 +106,23 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search })
name: ""
}]
});
+ async function fetchDataProcess(): Promise<Processes[]> {
+ var processArrray: Processes[] = []
+ await axios.post(EgressAPI + '/process',
+ {
+ sessionToken: sessionStorage.getItem('TOKEN')
+ }).then((res) => {
+ res.data.process.forEach((element: any) => {
+ processArrray.push({
+ name: element.name
+ })
+ });
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+ return processArrray
+ }
// Assuming fetchDataProcess is an async function that fetches data
useEffect(() => {
@@ -171,11 +172,31 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search })
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
+ const [open, setOpen] = useState(false);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
return (
<>
+ <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>
<Form {...form}>
<form onSubmit={form.handleSubmit(addEnoek)}>
@@ -258,6 +279,7 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search })
</FormItem>
)}
/>
+ <br></br>
<Button type='submit'>Done</Button>
</form>
</Form>
diff --git a/Frontend/power-tracker/src/components/enoekAllMeasures.tsx b/Frontend/power-tracker/src/components/enoekAllMeasures.tsx
index 804fae0fced033494875ffe29051f3eb5f89b096..f46eebaa5ad8f0d83d86f5a600de7d01b609ebce 100644
--- a/Frontend/power-tracker/src/components/enoekAllMeasures.tsx
+++ b/Frontend/power-tracker/src/components/enoekAllMeasures.tsx
@@ -112,14 +112,34 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search}) =
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
const permission = sessionStorage.getItem('PERMISSION');
+ const [open, setOpen] = useState(false);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
return (
<>
<ScrollArea>
+ <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>
<Table>
<TableCaption>
(づ ◕‿◕ )づ
@@ -221,17 +241,19 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search}) =
<TableCell>{data.process}</TableCell>
{(permission && parseInt(permission, 10) <= 1) && (
+ <>
+ <br></br>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button size="sm" variant="outline">Delete</Button>
</AlertDialogTrigger>
<AlertDialogContent>
- <AlertDialogTitle>Delete Sensor?</AlertDialogTitle>
+ <AlertDialogTitle>Delete enoek suggestion?</AlertDialogTitle>
<AlertDialogDescription>Do you want to delete {data.author}'s post about {data.header}?</AlertDialogDescription>
<AlertDialogAction onClick={() => {deleteEnoek(data.id); }}>DELETE</AlertDialogAction>
<AlertDialogCancel >Cancel</AlertDialogCancel>
</AlertDialogContent>
- </AlertDialog>
+ </AlertDialog></>
)}
</TableRow>
: null
diff --git a/Frontend/power-tracker/src/components/enoekDecision.tsx b/Frontend/power-tracker/src/components/enoekDecision.tsx
index aaf1d08debf1e14a03927fbdb080b7c093a1dcf1..fcabd504d1e1def1de17970118bd762a9afc4d42 100644
--- a/Frontend/power-tracker/src/components/enoekDecision.tsx
+++ b/Frontend/power-tracker/src/components/enoekDecision.tsx
@@ -53,7 +53,6 @@ import {
import { ScrollArea } from "@/components/ui/scroll-area"
const IngressAPI = import.meta.env.VITE_IAPI_URL
-
type EnokDataItem = {
id: number;
header: string;
@@ -77,30 +76,6 @@ interface ManageAddingProps {
setData: React.Dispatch<React.SetStateAction<{ enoek: EnokDataItem[] }>>;
search: string;
}
-const judge = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number, bool: boolean) => {
- e.preventDefault()
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- console.log('URL To call: ' + IngressAPI + 'token used' + token)
- axios.put(
- IngressAPI + '/new-enoek',
- {
- id: id,
- bool: bool,
- sessionToken:token,
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search}) =>{
@@ -117,11 +92,54 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search}) =
setSortDirection('asc');
}
};
+ const [open, setOpen] = useState(false);
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ const judge = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number, bool: boolean) => {
+ e.preventDefault()
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ console.log('URL To call: ' + IngressAPI + 'token used' + token)
+ axios.put(
+ IngressAPI + '/new-enoek',
+ {
+ id: id,
+ bool: bool,
+ sessionToken:token,
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+ }
return (
<>
<ScrollArea>
+ <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>
<Table>
<TableCaption>
(づ ◕‿◕ )づ
@@ -221,8 +239,9 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search}) =
<TableCell>{new Date(data.start_date).toDateString()}</TableCell>
<TableCell>{new Date(data.end_date).toDateString()}</TableCell>
<TableCell>{data.process}</TableCell>
- <Button className="mb-[10px]" variant="ghost" onClick={(e)=>{judge(e,data.id,true)}}>approve</Button>
- <Button className="mb-[10px]" variant="ghost" onClick={(e)=>{judge(e,data.id,false)}}>reject</Button>
+ <br></br>
+ <Button size="sm" variant="outline" onClick={(e)=>{judge(e,data.id,true)}}>approve</Button>
+ <Button size="sm" variant="outline" onClick={(e)=>{judge(e,data.id,false)}}>reject</Button>
</TableRow>
: null
))}
diff --git a/Frontend/power-tracker/src/components/manageBuildDep.tsx b/Frontend/power-tracker/src/components/manageBuildDep.tsx
index b46872d88a59b89d597e4318534869e148ab894b..35f0600c2af3fd532d2f073934866e896526da2b 100644
--- a/Frontend/power-tracker/src/components/manageBuildDep.tsx
+++ b/Frontend/power-tracker/src/components/manageBuildDep.tsx
@@ -131,13 +131,286 @@ function BuildDepSubpage () {
});
});
}, []);
+ const [open, setOpen] = useState(false);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+
+//ADD NEW DATA
+const addBuilding = (e: React.FormEvent<HTMLFormElement>, buildingName: string) => {
+ e.preventDefault()
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ console.log('URL To call: ' + IngressAPI + 'token used' + token)
+ axios.post(
+ IngressAPI + '/new-building',
+ {
+ building_name: buildingName,
+ sessionToken: token,
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+
+const addDepartment = ( buildingName: string, departmentName: string) => {
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ console.log('URL To call: ' + IngressAPI + 'token used' + token)
+ axios.post(
+ IngressAPI + '/new-department',
+ {
+ building_name: buildingName,
+ department_name: departmentName,
+ sessionToken: token,
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+
+ ///EDIT THE DATA
+const editBuilding= ( oldBuildingName: string, newBuildingName: string) => {
+
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ console.log('URL To call: ' + IngressAPI + 'token used' + token)
+ axios.put(
+ IngressAPI + '/new-building',
+ {
+ old_building_name: oldBuildingName,
+ new_building_name: newBuildingName,
+ sessionToken: token,
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+const editDepartment= ( oldDepartmentName: string, newDepartmentName: string, buildingName: string) => {
+
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ console.log('URL To call: ' + IngressAPI + 'token used' + token)
+ axios.put(
+ IngressAPI + '/new-department',
+ {
+ building_name: buildingName,
+ old_department_name: oldDepartmentName,
+ new_department_name: newDepartmentName,
+ sessionToken: token,
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+
+const deleteBuilding = ( name: string) => {
+
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ console.log('URL To call: ' + IngressAPI + 'token used' + token)
+ axios.delete(
+ IngressAPI + '/new-building',
+ {
+ data:{
+ building_name: name,
+ sessionToken: token,
+ }
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+const deleteDepartment= ( name: string) => {
+
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ console.log('URL To call: ' + IngressAPI + 'token used' + token)
+ axios.delete(
+ IngressAPI + '/new-department',
+ {
+ data:{
+ dep_name: name,
+ sessionToken: token,
+ }
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+
+ // GET THE DATA
+class BuildingDep {
+ buildingName: string = "";
+ departments: string = "";
+
+ constructor(buildingName: string, departments: string) {
+ this.buildingName = buildingName;
+ this.departments = departments;
+ }
+}
+
+async function fetchDataBuildingAndDepartment(): Promise<BuildingDep[]> {
+ var buiDep: BuildingDep[] = []
+ await axios.post(EgressAPI + '/buildDep',
+ {
+ sessionToken: sessionStorage.getItem('TOKEN')
+ }).then((res) => {
+ const buildingDepData = res.data.buildingDep;
+
+ for (const buildingName in buildingDepData) {
+ const departments = buildingDepData[buildingName];
+ if (Array.isArray(departments)) {
+ departments.forEach((department: any) => {
+ buiDep.push(new BuildingDep(buildingName, department.name));
+ });
+ }
+ }
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+
+ return buiDep
+}
+
+type BuildDepData = {
+ buildingDepartmentData: {
+ building: {
+ name: string;
+ };
+ departments: {
+ name: string;
+ }[];
+ }[];
+};
+
+type SetBuildDepData = React.Dispatch<React.SetStateAction<{
+ buildingDepartmentData: {
+ building: {
+ name: string;
+ };
+ departments: {
+ name: string;
+ }[];
+ }[];
+}>>;
+
+const usePopoutState = () => {
+ const [isPopoutOpen, setPopoutOpen] = useState(false);
+ const [whatOperation, setOperation] = useState(0);
+ const [assignValue, setassignValue] = useState(0);
+
+
+
+ const handleOpenPopout = () => {
+ setPopoutOpen(true);
+ };
+
+ const handleClosePopout = () => {
+ setPopoutOpen(false);
+ };
+
+ const handleChangeOperation = (op:number) => {
+ setOperation(op);
+ };
+
+ return {
+ isPopoutOpen,
+ handleOpenPopout,
+ handleClosePopout,
+ whatOperation,
+ handleChangeOperation,
+ assignValue,
+ setassignValue,
+ };
+};
+
+
+interface ManagePopup {
+ handleChangeOperation: (op: number) => void;
+ setassignValue: React.Dispatch<React.SetStateAction<number>>;
+}
+interface DisplayBuildingDepartmentDataProps extends ManagePopup {
+ data: BuildDepData;
+ setData: SetBuildDepData;
+}
+
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>
<div className='w-[1100px]'>
{/* Title and search bar */}
- <div className="w-[100%] h-[40px] flex justify-between content-center">
+ <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">Buildings and Departments</h1>
<Input
className="h-[30px] w-[200px]"
@@ -400,252 +673,6 @@ function BuildDepSubpage () {
);
};
-//ADD NEW DATA
-const addBuilding = (e: React.FormEvent<HTMLFormElement>, buildingName: string) => {
- e.preventDefault()
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- console.log('URL To call: ' + IngressAPI + 'token used' + token)
- axios.post(
- IngressAPI + '/new-building',
- {
- building_name: buildingName,
- sessionToken: token,
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-
-const addDepartment = ( buildingName: string, departmentName: string) => {
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- console.log('URL To call: ' + IngressAPI + 'token used' + token)
- axios.post(
- IngressAPI + '/new-department',
- {
- building_name: buildingName,
- department_name: departmentName,
- sessionToken: token,
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-
- ///EDIT THE DATA
-const editBuilding= ( oldBuildingName: string, newBuildingName: string) => {
-
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- console.log('URL To call: ' + IngressAPI + 'token used' + token)
- axios.put(
- IngressAPI + '/new-building',
- {
- old_building_name: oldBuildingName,
- new_building_name: newBuildingName,
- sessionToken: token,
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-const editDepartment= ( oldDepartmentName: string, newDepartmentName: string, buildingName: string) => {
-
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- console.log('URL To call: ' + IngressAPI + 'token used' + token)
- axios.put(
- IngressAPI + '/new-department',
- {
- building_name: buildingName,
- old_department_name: oldDepartmentName,
- new_department_name: newDepartmentName,
- sessionToken: token,
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-
-const deleteBuilding = ( name: string) => {
-
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- console.log('URL To call: ' + IngressAPI + 'token used' + token)
- axios.delete(
- IngressAPI + '/new-building',
- {
- data:{
- building_name: name,
- sessionToken: token,
- }
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-const deleteDepartment= ( name: string) => {
-
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- console.log('URL To call: ' + IngressAPI + 'token used' + token)
- axios.delete(
- IngressAPI + '/new-department',
- {
- data:{
- dep_name: name,
- sessionToken: token,
- }
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-
- // GET THE DATA
-class BuildingDep {
- buildingName: string = "";
- departments: string = "";
-
- constructor(buildingName: string, departments: string) {
- this.buildingName = buildingName;
- this.departments = departments;
- }
-}
-
-async function fetchDataBuildingAndDepartment(): Promise<BuildingDep[]> {
- var buiDep: BuildingDep[] = []
- await axios.post(EgressAPI + '/buildDep',
- {
- sessionToken: sessionStorage.getItem('TOKEN')
- }).then((res) => {
- const buildingDepData = res.data.buildingDep;
-
- for (const buildingName in buildingDepData) {
- const departments = buildingDepData[buildingName];
- if (Array.isArray(departments)) {
- departments.forEach((department: any) => {
- buiDep.push(new BuildingDep(buildingName, department.name));
- });
- }
- }
- }).catch((error) => {
- console.log(error)
- })
-
- return buiDep
-}
-
-type BuildDepData = {
- buildingDepartmentData: {
- building: {
- name: string;
- };
- departments: {
- name: string;
- }[];
- }[];
-};
-
-type SetBuildDepData = React.Dispatch<React.SetStateAction<{
- buildingDepartmentData: {
- building: {
- name: string;
- };
- departments: {
- name: string;
- }[];
- }[];
-}>>;
-
-const usePopoutState = () => {
- const [isPopoutOpen, setPopoutOpen] = useState(false);
- const [whatOperation, setOperation] = useState(0);
- const [assignValue, setassignValue] = useState(0);
-
-
-
- const handleOpenPopout = () => {
- setPopoutOpen(true);
- };
-
- const handleClosePopout = () => {
- setPopoutOpen(false);
- };
-
- const handleChangeOperation = (op:number) => {
- setOperation(op);
- };
-
- return {
- isPopoutOpen,
- handleOpenPopout,
- handleClosePopout,
- whatOperation,
- handleChangeOperation,
- assignValue,
- setassignValue,
- };
-};
-
-
-interface ManagePopup {
- handleChangeOperation: (op: number) => void;
- setassignValue: React.Dispatch<React.SetStateAction<number>>;
-}
-interface DisplayBuildingDepartmentDataProps extends ManagePopup {
- data: BuildDepData;
- setData: SetBuildDepData;
-}
export default BuildDepSubpage
\ No newline at end of file
diff --git a/Frontend/power-tracker/src/components/manageGateway.tsx b/Frontend/power-tracker/src/components/manageGateway.tsx
index 41f9e62e9d171436ba06a00c1898be39ba39297b..b01fd0dfa23b2a745d4fb4392c5944bc7e8eb8cf 100644
--- a/Frontend/power-tracker/src/components/manageGateway.tsx
+++ b/Frontend/power-tracker/src/components/manageGateway.tsx
@@ -57,111 +57,13 @@ function ManageGateways() {
});
});
}, [setGatewayData]);
+ const [open, setOpen] = useState(false);
- return (
- <ResizablePanelGroup className='flex h-[100%]' direction="horizontal">
- <ResizablePanel minSize={72.5}>
- {/* Title and search bar */}
- <div className="w-[100%] h-[40px] flex justify-between content-center">
- <h1 className="scroll-m-20 text-2xl font-semibold tracking-tight">Buildings and Departments</h1>
- <Input
- className="h-[30px] w-[200px] mr-[10px]"
- type="text"
- value={search}
- onChange={(event) => setSearch(event.target.value) }
- placeholder="Search.."
- />
- </div>
-
- <Separator className="mb-[10px]" />
-
- {/* New building button */}
- <AlertDialog>
- <AlertDialogTrigger>
- <Button className="w-[60px] h-[30px] mb-[10px] ml-[10px]" variant="default" size="icon" >
- <Router className="h-[20px]" />
- <Plus className="h-[18px]" />
- </Button>
- </AlertDialogTrigger>
- <AlertDialogContent>
- <AlertDialogHeader><strong>Add Gateway:</strong></AlertDialogHeader>
- <form onSubmit={(e) => {addGateway(euiInput, nameInput); setEuiInput(""); setNameInput(""); e.preventDefault()}}>
- <label>EUI</label>
- <Input className="mb-[20px]" type="text" value={euiInput} onChange={(event) => setEuiInput(event.target.value)} required/>
- <label>Name</label>
- <Input className="mb-[20px]" type="text" value={nameInput} onChange={(event) => setNameInput(event.target.value)} required/>
- <br/> <br/>
- <AlertDialogFooter>
- <AlertDialogAction type='submit'>Submit gateway!</AlertDialogAction>
- <AlertDialogCancel>Cancel</AlertDialogCancel>
- </AlertDialogFooter>
- </form>
- </AlertDialogContent>
- </AlertDialog>
-
- <Table className=''>
- <TableCaption>Gateways</TableCaption>
- <TableHeader>
- <TableRow>
- <TableHead>Name</TableHead>
- <TableHead>ID</TableHead>
- <TableHead></TableHead>
- <TableHead className="text-right"></TableHead>
- </TableRow>
- </TableHeader>
- <TableBody>
- {gatewayData.gateway.map((gates, index) => (
- <TableRow>
- <TableCell className="min-w-[200px] max-w-[300px] scroll-m-20 text-xl font-semibold tracking-tight flex">
- <Router className="mx-[20px]" />
- <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">{gates.name}</h4>
- </TableCell>
- <TableCell className="w-[400px]">{gates.eui_gate}</TableCell>
- <TableCell className="w-[1fr] flex justify-end">
- <AlertDialog>
- <AlertDialogTrigger asChild>
- <Button className="h-[30px] w-[60px]" variant="outline" onClick={()=>{setEuiInput(gates.eui_gate); setNameInput(gates.name)}}>Edit</Button>
- </AlertDialogTrigger>
- <AlertDialogContent>
- <AlertDialogHeader>Edit {gates.eui_gate} - {gates.name}</AlertDialogHeader>
- <form onSubmit={(e)=>{e.preventDefault();editGateway(euiInput,gates.eui_gate, nameInput, gates.name); setEuiInput(""); setNameInput("");}}>
- <label>EUI</label>
- <Input className="mb-[20px]" type="text" placeholder="EUI" value={euiInput} onChange={(event) => setEuiInput(event.target.value)} required/>
- <label>Name</label>
- <Input className="mb-[20px]" type="text" placeholder="Name" value={nameInput} onChange={(event) => setNameInput(event.target.value)} required/>
- <AlertDialogAction type='submit'>Confirm</AlertDialogAction>
- <AlertDialogCancel onClick={()=>{setEuiInput(""); setNameInput("");}}>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 {gates.eui_gate} - {gates.name}?</AlertDialogHeader>
- <AlertDialogAction onClick={()=>deleteGateway(gates.eui_gate)}>DELETE</AlertDialogAction>
- <AlertDialogCancel>Cancel</AlertDialogCancel>
- </AlertDialogContent>
- </AlertDialog>
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
-
- </ResizablePanel>
-
- <ResizableHandle withHandle className="mx-[10px]" />
-
- <ResizablePanel defaultSize={72.5} className="w-[400px]">
-
- </ResizablePanel>
- </ResizablePanelGroup>
- )
-}
-
+ const handleClose = () => {
+ setOpen(false);
+ };
+
const addGateway = ( euiI: string, nameI: string) => {
var token: string = ""
@@ -183,6 +85,7 @@ const addGateway = ( euiI: string, nameI: string) => {
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -210,6 +113,7 @@ const editGateway= ( eui: string, oldEui: string, name: string, oldName: string)
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -235,6 +139,7 @@ const deleteGateway = ( eui: string) => {
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -260,9 +165,129 @@ async function fetchDataGateway(): Promise<Gateway[]> {
});
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
return gateway
}
+ return (
+ <ResizablePanelGroup className='flex h-[100%]' direction="horizontal">
+ <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>
+ <ResizablePanel minSize={72.5} >
+ {/* 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">Gateways</h1>
+ <Input
+ className="h-[30px] w-[200px] mr-[10px]"
+ type="text"
+ value={search}
+ onChange={(event) => setSearch(event.target.value) }
+ placeholder="Search.."
+ />
+ </div>
+
+ <Separator className="mb-[10px]" />
+
+ {/* New building button */}
+ <AlertDialog>
+ <AlertDialogTrigger>
+ <Button className="w-[60px] h-[30px] mb-[10px] ml-[10px]" variant="default" size="icon" >
+ <Router className="h-[20px]" />
+ <Plus className="h-[18px]" />
+ </Button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <AlertDialogHeader><strong>Add Gateway:</strong></AlertDialogHeader>
+ <form onSubmit={(e) => {addGateway(euiInput, nameInput); setEuiInput(""); setNameInput(""); e.preventDefault()}}>
+ <label>EUI</label>
+ <Input className="mb-[20px]" type="text" value={euiInput} onChange={(event) => setEuiInput(event.target.value)} required/>
+ <label>Name</label>
+ <Input className="mb-[20px]" type="text" value={nameInput} onChange={(event) => setNameInput(event.target.value)} required/>
+ <br/> <br/>
+ <AlertDialogFooter>
+ <AlertDialogAction type='submit'>Submit gateway!</AlertDialogAction>
+ <AlertDialogCancel>Cancel</AlertDialogCancel>
+ </AlertDialogFooter>
+ </form>
+ </AlertDialogContent>
+ </AlertDialog>
+
+ <Table className=''>
+ <TableCaption>Gateways</TableCaption>
+ <TableHeader>
+ <TableRow>
+ <TableHead>Name</TableHead>
+ <TableHead>ID</TableHead>
+ <TableHead></TableHead>
+ <TableHead className="text-right"></TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {gatewayData.gateway.map((gates, index) => (
+ <TableRow>
+ <TableCell className="min-w-[200px] max-w-[300px] scroll-m-20 text-xl font-semibold tracking-tight flex">
+ <Router className="mx-[20px]" />
+ <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">{gates.name}</h4>
+ </TableCell>
+ <TableCell className="w-[400px]">{gates.eui_gate}</TableCell>
+ <TableCell className="w-[1fr] flex justify-end">
+ <AlertDialog>
+ <AlertDialogTrigger asChild>
+ <Button className="h-[30px] w-[60px]" variant="outline" onClick={()=>{setEuiInput(gates.eui_gate); setNameInput(gates.name)}}>Edit</Button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <AlertDialogHeader>Edit {gates.eui_gate} - {gates.name}</AlertDialogHeader>
+ <form onSubmit={(e)=>{e.preventDefault();editGateway(euiInput,gates.eui_gate, nameInput, gates.name); setEuiInput(""); setNameInput("");}}>
+ <label>EUI</label>
+ <Input className="mb-[20px]" type="text" placeholder="EUI" value={euiInput} onChange={(event) => setEuiInput(event.target.value)} required/>
+ <label>Name</label>
+ <Input className="mb-[20px]" type="text" placeholder="Name" value={nameInput} onChange={(event) => setNameInput(event.target.value)} required/>
+ <AlertDialogAction type='submit'>Confirm</AlertDialogAction>
+ <AlertDialogCancel onClick={()=>{setEuiInput(""); setNameInput("");}}>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 {gates.eui_gate} - {gates.name}?</AlertDialogHeader>
+ <AlertDialogAction onClick={()=>deleteGateway(gates.eui_gate)}>DELETE</AlertDialogAction>
+ <AlertDialogCancel>Cancel</AlertDialogCancel>
+ </AlertDialogContent>
+ </AlertDialog>
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+
+ </ResizablePanel>
+
+ <ResizableHandle withHandle className="mx-[10px]" />
+
+ <ResizablePanel defaultSize={72.5} className="w-[400px]">
+
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ )
+}
+
+
+
+
export default ManageGateways
\ No newline at end of file
diff --git a/Frontend/power-tracker/src/components/manageProcesses.tsx b/Frontend/power-tracker/src/components/manageProcesses.tsx
index 7352d50b483efdfad64b08dd95e8f95512a20bec..be50aa363a33d6f9411369cad0568db3a4923c38 100644
--- a/Frontend/power-tracker/src/components/manageProcesses.tsx
+++ b/Frontend/power-tracker/src/components/manageProcesses.tsx
@@ -122,163 +122,13 @@ const ManageProcesses= () => {
});
}, [processDropDownId]);
- return (
- <div className="flex h-[100%]">
- <div className='w-[1100px]'>
- {/* Title and search bar */}
- <div className="w-[100%] h-[40px] flex justify-between content-center">
- <h1 className="scroll-m-20 text-2xl font-semibold tracking-tight">Processes</h1>
- <Input
- className="h-[30px] w-[200px]"
- type="text"
- value={search}
- onChange={(event) => setSearch(event.target.value) }
- placeholder="Search.."
- />
- </div>
-
- <Separator className="mb-[10px]" />
-
- {/* New process button */}
- <AlertDialog>
- <AlertDialogTrigger>
- <Button className="w-[60px] h-[30px] mb-[10px] ml-[10px]" variant="default" size="icon" >
- <Waypoints className="h-[20px]" />
- <Plus className="h-[18px]" />
- </Button>
- </AlertDialogTrigger>
- <AlertDialogContent>
- <form onSubmit={(e) => {addProcess(e, nameInput, descriptionInput); }}>
- <Input className="mb-[10px]" type="text" id="uname" value={nameInput} onChange={(event) => setNameInput(event.target.value)} placeholder="Process Name" required/>
- <Textarea id="description" value={descriptionInput} onChange={(event) => setDescriptionInput(event.target.value)} placeholder="Description" required/>
- <br/><br/>
- <AlertDialogFooter>
- <AlertDialogAction>
- <Button type='submit' onClick={() => {
- setProcessData(prevState => ({
- ...prevState,
- process: [
- ...prevState.process,
- {
- id: 0,
- name: nameInput,
- description: descriptionInput
- }
- ]
- }));
- }}>Submit Process!</Button>
- </AlertDialogAction>
- <AlertDialogCancel>Cancel</AlertDialogCancel>
- </AlertDialogFooter>
- </form>
- </AlertDialogContent>
- </AlertDialog>
-
- <Separator />
-
- <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>
- </div>
- <Separator orientation='vertical' className="ml-[5px]"/>
- </div>
- <Separator />
- </li>
- ))}
- </ul>
+ const [open, setOpen] = useState(false);
- <div className="center">
- <AlertDialog>
- <AlertDialogTrigger asChild>
- <Button size="sm" variant="outline" onClick={()=>{}}>Add machine to process</Button>
- </AlertDialogTrigger>
- <AlertDialogContent>
- <AlertDialogHeader>
- <AlertDialogTitle>Add machine to process</AlertDialogTitle>
- <label>Process</label>
- <select onChange={(e) => { const selectedIndex = e.target.selectedIndex; setProcessDropDown(e.target.value); setProcessDropDownId(processData.process[selectedIndex-1].id)}} value={processDropDown}>
- <option value={""}>Select an option</option>
- {processData.process.map((pro, index) => (
- pro.name !== "" ? (
- <option key={index} value={pro.name}>
- {pro.name}
- </option>
- ) : null
- ))}
- </select>
- {processDropDown !== "" && (
- <div>
- {processMachineData.processMachine.map((element, index) => (
- <div key={index}>
- <input
- type="checkbox"
- checked={element.added}
- onChange={() => {
- const updatedProcessMachineData = [...processMachineData.processMachine];
- updatedProcessMachineData[index].added = !element.added;
- setProcessMachineData({
- ...processMachineData,
- processMachine: updatedProcessMachineData
- });
- }}
- />
- {element.machineEUI} {element.machineName}
- <br/>
- </div>
- ))}
- </div>
- )}
- </AlertDialogHeader>
- <AlertDialogFooter>
- <AlertDialogCancel>Cancel</AlertDialogCancel>
- <AlertDialogAction type='submit' onClick={()=>{handleSave2(processMachineData, processMachineData2, processDropDownId); console.log(processDropDownId)}}>Save</AlertDialogAction>
- </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 */}
- <div className="w-[400px]">
-
- </div>
- </div>
- );
-};
+ const handleClose = () => {
+ setOpen(false);
+ };
+
interface Process {
process: {
id: number,
@@ -358,6 +208,7 @@ const addProcess = (e: React.FormEvent<HTMLFormElement>, name: string, descripti
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -428,6 +279,7 @@ const editProcessMachine = ( realData: ProcessMachineInsert[], oldData: Process
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -452,6 +304,7 @@ const editProcess = ( oldName: string, newName: string, oldDescription: string,
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
const deleteProcess = (name: string, description:string) => {
@@ -477,6 +330,7 @@ const deleteProcess = (name: string, description:string) => {
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -505,6 +359,7 @@ async function fetchDataProcess(): Promise<Processes[]> {
});
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
return processArrray
}
@@ -544,5 +399,176 @@ 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>
+ <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>
+ <Input
+ className="h-[30px] w-[200px]"
+ type="text"
+ value={search}
+ onChange={(event) => setSearch(event.target.value) }
+ placeholder="Search.."
+ />
+ </div>
+
+ <Separator className="mb-[10px]" />
+
+ {/* New process button */}
+ <AlertDialog>
+ <AlertDialogTrigger>
+ <Button className="w-[60px] h-[30px] mb-[10px] ml-[10px]" variant="default" size="icon" >
+ <Waypoints className="h-[20px]" />
+ <Plus className="h-[18px]" />
+ </Button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <form onSubmit={(e) => {addProcess(e, nameInput, descriptionInput); }}>
+ <Input className="mb-[10px]" type="text" id="uname" value={nameInput} onChange={(event) => setNameInput(event.target.value)} placeholder="Process Name" required/>
+ <Textarea id="description" value={descriptionInput} onChange={(event) => setDescriptionInput(event.target.value)} placeholder="Description" required/>
+ <br/><br/>
+ <AlertDialogFooter>
+ <AlertDialogAction>
+ <Button type='submit' onClick={() => {
+ setProcessData(prevState => ({
+ ...prevState,
+ process: [
+ ...prevState.process,
+ {
+ id: 0,
+ name: nameInput,
+ description: descriptionInput
+ }
+ ]
+ }));
+ }}>Submit Process!</Button>
+ </AlertDialogAction>
+ <AlertDialogCancel>Cancel</AlertDialogCancel>
+ </AlertDialogFooter>
+ </form>
+ </AlertDialogContent>
+ </AlertDialog>
+
+ <Separator />
+
+ <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>
+ </div>
+ <Separator orientation='vertical' className="ml-[5px]"/>
+ </div>
+ <Separator />
+ </li>
+ ))}
+ </ul>
+
+ <div className="center">
+ <AlertDialog>
+ <AlertDialogTrigger asChild>
+ <Button size="sm" variant="outline" onClick={()=>{}}>Add machine to process</Button>
+ </AlertDialogTrigger>
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Add machine to process</AlertDialogTitle>
+ <label>Process</label>
+ <select onChange={(e) => { const selectedIndex = e.target.selectedIndex; setProcessDropDown(e.target.value); setProcessDropDownId(processData.process[selectedIndex-1].id)}} value={processDropDown}>
+ <option value={""}>Select an option</option>
+ {processData.process.map((pro, index) => (
+ pro.name !== "" ? (
+ <option key={index} value={pro.name}>
+ {pro.name}
+ </option>
+ ) : null
+ ))}
+ </select>
+ {processDropDown !== "" && (
+ <div>
+ {processMachineData.processMachine.map((element, index) => (
+ <div key={index}>
+ <input
+ type="checkbox"
+ checked={element.added}
+ onChange={() => {
+ const updatedProcessMachineData = [...processMachineData.processMachine];
+ updatedProcessMachineData[index].added = !element.added;
+ setProcessMachineData({
+ ...processMachineData,
+ processMachine: updatedProcessMachineData
+ });
+ }}
+ />
+ {element.machineEUI} {element.machineName}
+ <br/>
+ </div>
+ ))}
+ </div>
+ )}
+ </AlertDialogHeader>
+ <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 */}
+ <div className="w-[400px]">
+
+ </div>
+ </div>
+ );
+};
+
+
export default ManageProcesses
\ No newline at end of file
diff --git a/Frontend/power-tracker/src/pages/ManageSensors.tsx b/Frontend/power-tracker/src/pages/ManageSensors.tsx
index d5391f6c15ea46c490507a0f4f9e24ed98779584..a51833fdd9fcc6981c8fee3bdab00fd8219c8805 100644
--- a/Frontend/power-tracker/src/pages/ManageSensors.tsx
+++ b/Frontend/power-tracker/src/pages/ManageSensors.tsx
@@ -132,8 +132,8 @@ function ManageSensors() {
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
-
}
// function for editing a sensor
@@ -174,6 +174,7 @@ function ManageSensors() {
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -205,6 +206,7 @@ function ManageSensors() {
}
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
return buiDep
@@ -296,6 +298,7 @@ function ManageSensors() {
});
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
console.log(sensorArray)
return sensorArray
@@ -337,6 +340,7 @@ function ManageSensors() {
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -374,11 +378,29 @@ function ManageSensors() {
setSortDirection('asc');
}
};
+ const [open, setOpen] = useState(false);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
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>
<div className='leftbar'>
<div className='w-[100%] rounded-md border shadow-md pl-[10px] flex items-center justify-between'>
<p>Add Sensor</p>
@@ -831,8 +853,8 @@ function ManageSensors() {
<AlertDialogContent>
<AlertDialogTitle>Delete Sensor?</AlertDialogTitle>
<AlertDialogDescription>Do you want to delete {machine.eui} - {machine.machine_name} ?</AlertDialogDescription>
- <AlertDialogCancel onClick={()=>{form.reset()}}>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={() => {deleteSensor(machine.eui); }}>DELETE</AlertDialogAction>
+ <AlertDialogCancel onClick={()=>{form.reset()}}>Cancel</AlertDialogCancel>
</AlertDialogContent>
</AlertDialog>
</div>
diff --git a/Frontend/power-tracker/src/pages/adminUserConfig.tsx b/Frontend/power-tracker/src/pages/adminUserConfig.tsx
index a63828912b85c9c7c18c9fe26df3c425093605ea..374a5ded056127853d537298c6dc295a1ef05bb9 100644
--- a/Frontend/power-tracker/src/pages/adminUserConfig.tsx
+++ b/Frontend/power-tracker/src/pages/adminUserConfig.tsx
@@ -66,6 +66,11 @@ const s_schema = z.object({
// MAIN COMPONENT
function UserConfig() {
+ const [open, setOpen] = useState(false);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
const [userData, setUserData] = useState<UserData>({ Users: [] });
const [search, setSearch] = useState("");
@@ -141,11 +146,215 @@ function UserConfig() {
setSortDirection('asc');
}
};
+
+
+//ADD NEW DATA
+const addUser = ( firstName: string, lastName: string, email: string, password: string, permission: number) => {
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ axios.post(
+ IngressAPI + '/new-user',
+ {
+ sessionToken: token,
+ userData: {
+ id: 0,
+ email: email,
+ first_name: firstName,
+ last_name: lastName,
+ password: password,
+ permission: permission
+ }
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+
+///EDIT THE DATA
+const editUser = ( id: number, firstName: string, lastName: string, email: string, password: string, permission: number) => {
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ axios.put(
+ IngressAPI + '/new-user',
+ {
+ sessionToken: token,
+ userData: {
+ id: id,
+ email: email,
+ first_name: firstName,
+ last_name: lastName,
+ password: password,
+ permission: permission
+ }
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+const deleteUser = ( id: number) => {
+
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ axios.delete(
+ IngressAPI + '/new-user',
+ {
+ data:{
+ sessionToken: token,
+ userID: id
+ }
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+
+async function fetchData(): Promise<UserData>{
+ var data: UserData = { Users: [] };
+ await axios.post(EgressAPI + '/userData',
+ {
+ sessionToken: sessionStorage.getItem('TOKEN')
+ }).then((res) => {
+ // extract data from response
+ res.data.Users.forEach((user: any) => {
+ data.Users.push({id: user.id, FirstName: user.first_name, email: user.email, LastName: user.last_name, permission: user.permission})
+ })
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+ return data
+}
+
+const permissions: Permission[] = [
+ { value: 0, label: 'Admin' },
+ { value: 1, label: 'EnøkSuperuser' },
+ { value: 2, label: 'Employee' },
+];
+
+const translatePermissionValue = (value: number): string => {
+ const matchingPermission = permissions.find(permission => permission.value === value);
+
+ return matchingPermission ? matchingPermission.label : 'Unknown';
+};
+
+//Classes and interfaces here
+
+//Enum for which operation is used so easy implementation later on
+enum Operation {
+ add = 0,
+ edit = 1,
+ delete = 2,
+}
+// interface for user value from api
+interface User {
+ id: number,
+ email: string,
+ FirstName: string,
+ LastName: string,
+ permission: number
+}
+// interface for data from api
+interface UserData {
+ Users: User[]
+}
+
+//STUFF FOR SHOWING THE GET DATA AND MORE
+interface PermissionDropDownProps {
+ selectedValue: number;
+ onChange: (value: number) => void;
+}
+
+interface Permission {
+ value: number;
+ label: string;
+}
+type Users = {
+ id: number;
+ email: string;
+ firstName: string;
+ lastName: string;
+ password: string;
+ permission: number;
+}
+interface ManageUsersEdit {
+ isPopoutOpen: boolean;
+ handleClosePopout: () => void;
+ handleOpenPopout: () => void;
+ handleChangeOperation: (op: number) => void;
+ setassignValue: React.Dispatch<React.SetStateAction<number>>;
+ usersData: {
+ users: {
+ id: number;
+ email: string;
+ FirstName: string;
+ LastName: string;
+ permission: number;
+ }[];
+ }
+}
+
+//THE STUFF ON THE POPOUT SCREEN
+interface ManageUsersProps {
+ handleClosePopout: () => void;
+ op: Operation;
+ assignValue: number;
+ usersData: {
+ users: {
+ id: number;
+ email: string;
+ FirstName: string;
+ LastName: string;
+ permission: number;
+ }[];
+ }
+}
+
// --------------------
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>
<div className ="leftbar">
<div className='w-[100%] rounded-md border shadow-md pl-[10px] flex items-center justify-between'>
<p>Add User</p>
@@ -232,7 +441,9 @@ function UserConfig() {
<div className = "spacer" />
</div>
<div className ="rightbar">
- <Input className="w-[250px]" type="search" value={search} onChange={(e) => filter(e)}/>
+ <div className="w-[250px] h-[70px]">
+ <Input type="text" className="outlined-input" value={search} onChange={(event) => setSearch(event.target.value) } placeholder="Search.."/>
+ </div>
<ScrollArea>
<Table>
<TableCaption>...</TableCaption>
@@ -288,7 +499,7 @@ function UserConfig() {
}
}).map((user, index) => (
<TableRow key={index}>
- <TableCell>{user.id}</TableCell>
+ <TableCell>{index}</TableCell>
<TableCell>{user.FirstName}</TableCell>
<TableCell>{user.LastName}</TableCell>
<TableCell>{user.email}</TableCell>
@@ -409,8 +620,8 @@ function UserConfig() {
<AlertDialogContent>
<AlertDialogTitle>Delete Sensor?</AlertDialogTitle>
<AlertDialogDescription>Do you want to delete {user.FirstName + " " + user.LastName}?</AlertDialogDescription>
- <AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={() => {deleteUser(user.id); }}>DELETE</AlertDialogAction>
+ <AlertDialogCancel>Cancel</AlertDialogCancel>
</AlertDialogContent>
</AlertDialog>
</div>
@@ -428,190 +639,6 @@ function UserConfig() {
-//ADD NEW DATA
-const addUser = ( firstName: string, lastName: string, email: string, password: string, permission: number) => {
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- axios.post(
- IngressAPI + '/new-user',
- {
- sessionToken: token,
- userData: {
- id: 0,
- email: email,
- first_name: firstName,
- last_name: lastName,
- password: password,
- permission: permission
- }
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-
-///EDIT THE DATA
-const editUser = ( id: number, firstName: string, lastName: string, email: string, password: string, permission: number) => {
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- axios.put(
- IngressAPI + '/new-user',
- {
- sessionToken: token,
- userData: {
- id: id,
- email: email,
- first_name: firstName,
- last_name: lastName,
- password: password,
- permission: permission
- }
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-const deleteUser = ( id: number) => {
-
-
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- axios.delete(
- IngressAPI + '/new-user',
- {
- data:{
- sessionToken: token,
- userID: id
- }
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-
-async function fetchData(): Promise<UserData>{
- var data: UserData = {Users: [{id: 0, email: "", FirstName: "", LastName: "", permission: 0}]}
- await axios.post(EgressAPI + '/userData',
- {
- sessionToken: sessionStorage.getItem('TOKEN')
- }).then((res) => {
- // extract data from response
- res.data.Users.forEach((user: any) => {
- data.Users.push({id: user.id, FirstName: user.first_name, email: user.email, LastName: user.last_name, permission: user.permission})
- })
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
- return data
-}
-
-const permissions: Permission[] = [
- { value: 0, label: 'Admin' },
- { value: 1, label: 'EnøkSuperuser' },
- { value: 2, label: 'Employee' },
-];
-
-const translatePermissionValue = (value: number): string => {
- const matchingPermission = permissions.find(permission => permission.value === value);
-
- return matchingPermission ? matchingPermission.label : 'Unknown';
-};
-
-//Classes and interfaces here
-
-//Enum for which operation is used so easy implementation later on
-enum Operation {
- add = 0,
- edit = 1,
- delete = 2,
-}
-// interface for user value from api
-interface User {
- id: number,
- email: string,
- FirstName: string,
- LastName: string,
- permission: number
-}
-// interface for data from api
-interface UserData {
- Users: User[]
-}
-
-//STUFF FOR SHOWING THE GET DATA AND MORE
-interface PermissionDropDownProps {
- selectedValue: number;
- onChange: (value: number) => void;
-}
-
-interface Permission {
- value: number;
- label: string;
-}
-type Users = {
- id: number;
- email: string;
- firstName: string;
- lastName: string;
- password: string;
- permission: number;
-}
-interface ManageUsersEdit {
- isPopoutOpen: boolean;
- handleClosePopout: () => void;
- handleOpenPopout: () => void;
- handleChangeOperation: (op: number) => void;
- setassignValue: React.Dispatch<React.SetStateAction<number>>;
- usersData: {
- users: {
- id: number;
- email: string;
- FirstName: string;
- LastName: string;
- permission: number;
- }[];
- }
-}
-
-//THE STUFF ON THE POPOUT SCREEN
-interface ManageUsersProps {
- handleClosePopout: () => void;
- op: Operation;
- assignValue: number;
- usersData: {
- users: {
- id: number;
- email: string;
- FirstName: string;
- LastName: string;
- permission: number;
- }[];
- }
-}
export default UserConfig;
diff --git a/Frontend/power-tracker/src/pages/enoek.tsx b/Frontend/power-tracker/src/pages/enoek.tsx
index d622195cb0526be210aa66dcc0318260684d4854..6a243eec70df824385dc673622371ead8c414b7b 100644
--- a/Frontend/power-tracker/src/pages/enoek.tsx
+++ b/Frontend/power-tracker/src/pages/enoek.tsx
@@ -5,6 +5,7 @@ import { redirect } from 'react-router-dom';
import "./adminSysConfig.css"
import axios from 'axios';
import TopBar from '@/components/topbar';
+import { Input } from "@/components/ui/input"
import ManageAdding from '../components/enoekAdd'
import AllMeasures from '../components/enoekAllMeasures'
@@ -13,6 +14,17 @@ import Approved from '../components/enoekApprovedMeasures'
import Rejected from '../components/enoekRejectedMeasures'
import MyMeasures from '../components/enoekMyMeasures'
import Jugde from '../components/enoekDecision'
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
const EgressAPI = import.meta.env.VITE_EAPI_URL
const IngressAPI = import.meta.env.VITE_IAPI_URL
@@ -51,59 +63,7 @@ class EnoekClass {
this.approved = approved;
}
}
- async function fetchData(): Promise<EnoekClass[]> {
- var enoekData: EnoekClass[] = []
- await axios.post(EgressAPI + '/enoek',
- {
- sessionToken: sessionStorage.getItem('TOKEN')
- }).then((res) => {
-
- res.data.enoek.forEach((element: any) => {
- enoekData.push({
- id : element.id,
- header : element.header,
- description : element.description,
- author : element.author,
- start_date : element.start_date,
- end_date : element.stop_date,
- active : element.active,
- process : element.process,
- approved : element.approved,
- })
- });
- }).catch((error) => {
- console.log(error)
- })
-
- return enoekData
- }
-
-
- const deleteEnoek = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number) => {
- e.preventDefault()
- var token: string = ""
- var tokenBool = sessionStorage.getItem("TOKEN")
- if (tokenBool == null) {
- redirect('/')
- } else {
- token = tokenBool
- }
- console.log('URL To call: ' + IngressAPI + 'token used' + token)
- axios.delete(
- IngressAPI + '/new-enoek',
- {
- data:{
- id: id,
- sessionToken: token
- }
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
- }
const MainComponent= () =>{
@@ -136,6 +96,61 @@ const MainComponent= () =>{
approved: null, // Nullable boolean
}],
});
+ async function fetchData(): Promise<EnoekClass[]> {
+ var enoekData: EnoekClass[] = []
+ await axios.post(EgressAPI + '/enoek',
+ {
+ sessionToken: sessionStorage.getItem('TOKEN')
+ }).then((res) => {
+
+ res.data.enoek.forEach((element: any) => {
+ enoekData.push({
+ id : element.id,
+ header : element.header,
+ description : element.description,
+ author : element.author,
+ start_date : element.start_date,
+ end_date : element.stop_date,
+ active : element.active,
+ process : element.process,
+ approved : element.approved,
+ })
+ });
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+
+ return enoekData
+ }
+
+
+ const deleteEnoek = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number) => {
+ e.preventDefault()
+
+ var token: string = ""
+ var tokenBool = sessionStorage.getItem("TOKEN")
+ if (tokenBool == null) {
+ redirect('/')
+ } else {
+ token = tokenBool
+ }
+ console.log('URL To call: ' + IngressAPI + 'token used' + token)
+ axios.delete(
+ IngressAPI + '/new-enoek',
+ {
+ data:{
+ id: id,
+ sessionToken: token
+ }
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+ }
useEffect(() => {
@@ -153,12 +168,30 @@ if (permissionString !== null) {
// Result is not null, it's safe to assign it to a variable
permissionInt = parseInt(permissionString, 10);
}
+const [open, setOpen] = useState(false);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
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>
<div className='leftbar'>
{permissionInt!= undefined && permissionInt <= 2 && (
@@ -206,7 +239,7 @@ if (permissionString !== null) {
)}
{permissionInt!= undefined && permissionInt <= 1 && (
<>
- <Button className="mb-[10px]" variant="ghost" onClick={()=>{setPage(Page.judge); setSearch("");}}><h4 className="scroll-m-20 text-xl font-semibold tracking-tight">Accpet/reject measures</h4></Button>
+ <Button className="mb-[10px]" variant="ghost" onClick={()=>{setPage(Page.judge); setSearch("");}}><h4 className="scroll-m-20 text-xl font-semibold tracking-tight">Accept/reject measures</h4></Button>
<br/>
</>
@@ -215,8 +248,8 @@ if (permissionString !== null) {
<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.."/>
- </div>
+ <Input type="text" className="outlined-input" value={search} onChange={(event) => setSearch(event.target.value) } placeholder="Search.."/>
+ </div>
{(() => {
switch (page) {
case Page.overview:
diff --git a/Frontend/power-tracker/src/pages/login.tsx b/Frontend/power-tracker/src/pages/login.tsx
index 99309c72b41a962c6b9ebe3d648b90a35765ed27..9dd4f5972cb013bfb695edd3760db4691a0ee0a6 100644
--- a/Frontend/power-tracker/src/pages/login.tsx
+++ b/Frontend/power-tracker/src/pages/login.tsx
@@ -21,6 +21,17 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form"
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Input } from "@/components/ui/input"
@@ -30,6 +41,11 @@ const EgressAPI = import.meta.env.VITE_EAPI_URL
function Login() {
+ const [open, setOpen] = useState(false);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
const navigate = useNavigate();
@@ -65,11 +81,26 @@ function Login() {
loader()
}).catch((error) => {
console.log(error)
+ setOpen(true);
})
};
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="logincard">
<Card>
<CardHeader>