From fa1a16388b326b6185959dee05a5ef495f1cfb85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20H=C3=B8yland?= <daniehoy@stud.ntnu.no>
Date: Wed, 1 May 2024 18:46:22 +0200
Subject: [PATCH] added Something went wrong popout if backend catches error
---
.../power-tracker/src/components/enoekAdd.tsx | 55 +-
.../src/components/enoekAllMeasures.tsx | 20 +
.../src/components/enoekDecision.tsx | 68 ++-
.../src/components/manageBuildDep.tsx | 521 +++++++++---------
.../src/components/manageGateway.tsx | 227 ++++----
.../src/components/manageProcesses.tsx | 336 +++++------
.../power-tracker/src/pages/ManageSensors.tsx | 23 +
.../src/pages/adminUserConfig.tsx | 393 ++++++-------
Frontend/power-tracker/src/pages/enoek.tsx | 136 +++--
9 files changed, 998 insertions(+), 781 deletions(-)
diff --git a/Frontend/power-tracker/src/components/enoekAdd.tsx b/Frontend/power-tracker/src/components/enoekAdd.tsx
index a9d3321..c294cb2 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)}>
diff --git a/Frontend/power-tracker/src/components/enoekAllMeasures.tsx b/Frontend/power-tracker/src/components/enoekAllMeasures.tsx
index f79a2db..f46eeba 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>
(づ ◕‿◕ )づ
diff --git a/Frontend/power-tracker/src/components/enoekDecision.tsx b/Frontend/power-tracker/src/components/enoekDecision.tsx
index afcd772..fcabd50 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>
(づ ◕‿◕ )づ
diff --git a/Frontend/power-tracker/src/components/manageBuildDep.tsx b/Frontend/power-tracker/src/components/manageBuildDep.tsx
index 8032d53..35f0600 100644
--- a/Frontend/power-tracker/src/components/manageBuildDep.tsx
+++ b/Frontend/power-tracker/src/components/manageBuildDep.tsx
@@ -131,10 +131,283 @@ 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" style={{ marginTop: '5px' }}>
@@ -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 a501f54..b01fd0d 100644
--- a/Frontend/power-tracker/src/components/manageGateway.tsx
+++ b/Frontend/power-tracker/src/components/manageGateway.tsx
@@ -57,9 +57,135 @@ function ManageGateways() {
});
});
}, [setGatewayData]);
+ const [open, setOpen] = useState(false);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+
+const addGateway = ( euiI: string, nameI: 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 + '/add-gateway',
+ {
+ name:nameI,
+ eui:euiI,
+ sessionToken:token
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+
+const editGateway= ( eui: string, oldEui: string, name: string, oldName: 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 + '/add-gateway',
+ {
+ name: name,
+ oldName: oldName,
+ eui: eui,
+ oldEui: oldEui,
+ sessionToken: token,
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+
+const deleteGateway = ( eui: 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 + '/add-gateway',
+ {
+ data:{
+ eui: eui,
+ sessionToken: token
+ }
+ })
+ .then((res)=>{
+ console.log(res.data)
+ }).catch((error) => {
+ console.log(error)
+ setOpen(true)
+ })
+}
+
+class Gateway {
+ eui_gate: string = "";
+ name: string = "";
+ constructor(eui_gate: string, name:string) {
+ this.eui_gate = eui_gate; this.name = name;
+ }
+}
+
+async function fetchDataGateway(): Promise<Gateway[]> {
+ var gateway: Gateway[] = []
+ await axios.post(EgressAPI + '/sensorGatewayData',
+ {
+ sessionToken: sessionStorage.getItem('TOKEN')
+ }).then((res) => {
+ res.data.gateway.forEach((element: any) => {
+ gateway.push({
+ eui_gate: element.eui_gate,
+ name: element.name
+ })
+ });
+ }).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' }}>
@@ -162,107 +288,6 @@ function ManageGateways() {
}
-const addGateway = ( euiI: string, nameI: 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 + '/add-gateway',
- {
- name:nameI,
- eui:euiI,
- sessionToken:token
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-
-const editGateway= ( eui: string, oldEui: string, name: string, oldName: 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 + '/add-gateway',
- {
- name: name,
- oldName: oldName,
- eui: eui,
- oldEui: oldEui,
- sessionToken: token,
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-
-const deleteGateway = ( eui: 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 + '/add-gateway',
- {
- data:{
- eui: eui,
- sessionToken: token
- }
- })
- .then((res)=>{
- console.log(res.data)
- }).catch((error) => {
- console.log(error)
- })
-}
-
-class Gateway {
- eui_gate: string = "";
- name: string = "";
- constructor(eui_gate: string, name:string) {
- this.eui_gate = eui_gate; this.name = name;
- }
-}
-
-async function fetchDataGateway(): Promise<Gateway[]> {
- var gateway: Gateway[] = []
- await axios.post(EgressAPI + '/sensorGatewayData',
- {
- sessionToken: sessionStorage.getItem('TOKEN')
- }).then((res) => {
- res.data.gateway.forEach((element: any) => {
- gateway.push({
- eui_gate: element.eui_gate,
- name: element.name
- })
- });
- }).catch((error) => {
- console.log(error)
- })
- return gateway
-}
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 5a56333..be50aa3 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" 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 />
+ const [open, setOpen] = useState(false);
- <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>
- );
-};
+ 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 0db22b6..a51833f 100644
--- a/Frontend/power-tracker/src/pages/ManageSensors.tsx
+++ b/Frontend/power-tracker/src/pages/ManageSensors.tsx
@@ -132,6 +132,7 @@ function ManageSensors() {
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -173,6 +174,7 @@ function ManageSensors() {
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -204,6 +206,7 @@ function ManageSensors() {
}
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
return buiDep
@@ -295,6 +298,7 @@ function ManageSensors() {
});
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
console.log(sensorArray)
return sensorArray
@@ -336,6 +340,7 @@ function ManageSensors() {
console.log(res.data)
}).catch((error) => {
console.log(error)
+ setOpen(true)
})
}
@@ -373,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>
diff --git a/Frontend/power-tracker/src/pages/adminUserConfig.tsx b/Frontend/power-tracker/src/pages/adminUserConfig.tsx
index 4398d0e..374a5de 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>
@@ -430,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: [] };
- 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 b7ce5fa..6a243ee 100644
--- a/Frontend/power-tracker/src/pages/enoek.tsx
+++ b/Frontend/power-tracker/src/pages/enoek.tsx
@@ -14,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
@@ -52,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= () =>{
@@ -137,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(() => {
@@ -154,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 && (
--
GitLab