From c833b262b028f5c3f3e1df110bb308b8d4ac622f Mon Sep 17 00:00:00 2001 From: martynmj <martynmj@stud.ntnu.no> Date: Wed, 8 May 2024 23:09:43 +0200 Subject: [PATCH] added toasts and changed sensors to machines --- Frontend/power-tracker/.env-cmdrc.json | 4 +- Frontend/power-tracker/src/App.tsx | 2 + .../power-tracker/src/components/enoekAdd.tsx | 33 +++++----------- .../src/components/enoekAllMeasures.tsx | 35 ++++------------- .../src/components/enoekDecision.tsx | 33 +++++++--------- .../src/components/manageBuildDep.tsx | 32 +++++++++++---- .../src/components/manageGateway.tsx | 31 ++++++++++++--- .../src/components/manageProcesses.tsx | 32 ++++++++++----- .../power-tracker/src/components/topbar.tsx | 2 +- .../power-tracker/src/pages/ManageSensors.tsx | 39 +++++++++++-------- .../src/pages/adminUserConfig.tsx | 32 ++++++++------- Frontend/power-tracker/src/pages/overview.tsx | 15 ++++++- 12 files changed, 165 insertions(+), 125 deletions(-) diff --git a/Frontend/power-tracker/.env-cmdrc.json b/Frontend/power-tracker/.env-cmdrc.json index 0c38275..424e493 100644 --- a/Frontend/power-tracker/.env-cmdrc.json +++ b/Frontend/power-tracker/.env-cmdrc.json @@ -10,8 +10,8 @@ }, "dev":{ - "VITE_IAPI_URL": "http://localhost:9090", - "VITE_EAPI_URL": "http://localhost:9091", + "VITE_IAPI_URL": "http://192.168.0.132:9090", + "VITE_EAPI_URL": "http://192.168.0.132:9091", "GENERATE_SOURCEMAP": false } } \ No newline at end of file diff --git a/Frontend/power-tracker/src/App.tsx b/Frontend/power-tracker/src/App.tsx index 0c632c6..1274e12 100644 --- a/Frontend/power-tracker/src/App.tsx +++ b/Frontend/power-tracker/src/App.tsx @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Login from './pages/login'; import Overview from './pages/overview'; import ManageGateways from './components/manageGateway' +import { Toaster } from "@/components/ui/toaster" import { ThemeProvider } from "@/components/theme-provider" import ManageSensors from './pages/ManageSensors'; @@ -28,6 +29,7 @@ function App() { <Route path="/faq" element={<FAQ />} /> </Routes> </Router> + <Toaster /> </ThemeProvider> ) } diff --git a/Frontend/power-tracker/src/components/enoekAdd.tsx b/Frontend/power-tracker/src/components/enoekAdd.tsx index 67aab31..d474656 100644 --- a/Frontend/power-tracker/src/components/enoekAdd.tsx +++ b/Frontend/power-tracker/src/components/enoekAdd.tsx @@ -13,24 +13,6 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select" -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card" -import { - Table, - TableBody, - TableCaption, - TableCell, - TableHead, - TableHeader, - TableRow, - SortableColumnHeader, -} from "@/components/ui/table" import { AlertDialog, AlertDialogAction, @@ -51,14 +33,11 @@ import { FormLabel, FormMessage, } from "@/components/ui/form" -import { ScrollArea } from "@/components/ui/scroll-area" import { z } from "zod" import { useForm } from "react-hook-form" -import { zodResolver } from "@hookform/resolvers/zod" -import { PlusIcon } from 'lucide-react'; import { Input } from "@/components/ui/input" -import { machine } from 'os'; import { DatePicker } from '@/components/ui/datepicker' +import { useToast } from "@/components/ui/use-toast" const EgressAPI = import.meta.env.VITE_EAPI_URL const IngressAPI = import.meta.env.VITE_IAPI_URL @@ -95,7 +74,7 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search }) const [endDate, setEndDate] = React.useState<Date>() const [description, setDescription] = useState(""); const [process, setProcess] = useState(""); - + const { toast } = useToast() const [processData, setProcessData] = useState({ process: [{ name: "" @@ -275,7 +254,13 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search }) )} /> <br></br> - <Button type='submit'>Done</Button> + <Button type='submit' + onClick={()=>{ + toast({ + title: "Added Measure.", + }) + }}> + Done</Button> </form> </Form> {/* diff --git a/Frontend/power-tracker/src/components/enoekAllMeasures.tsx b/Frontend/power-tracker/src/components/enoekAllMeasures.tsx index f46eeba..896d38c 100644 --- a/Frontend/power-tracker/src/components/enoekAllMeasures.tsx +++ b/Frontend/power-tracker/src/components/enoekAllMeasures.tsx @@ -1,26 +1,10 @@ import { Button } from "@/components/ui/button"; -import { DatePicker } from '@/components/ui/datepicker' import React from "react"; import { useState } from "react"; import axios from 'axios'; import { redirect } from 'react-router-dom'; -import { date } from "zod"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select" -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card" +import { useToast } from "@/components/ui/use-toast" import { Table, TableBody, @@ -42,15 +26,6 @@ import { AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" -import { - Form, - FormControl, - FormDescription, - FormField, - FormItem, - FormLabel, - FormMessage, -} from "@/components/ui/form" import { ScrollArea } from "@/components/ui/scroll-area" const IngressAPI = import.meta.env.VITE_IAPI_URL @@ -79,6 +54,7 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search}) = const [currentSortedColumn, setCurrentSortedColumn] = useState<string | null>(null); const [sortDirection, setSortDirection] = useState<'asc' | 'desc' | null>(null); + const { toast } = useToast() const handleClick = (column: string) => { if (currentSortedColumn === column) { @@ -250,7 +226,12 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search}) = <AlertDialogContent> <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> + <AlertDialogAction onClick={() => { + deleteEnoek(data.id); + toast({ + title: "Deleted Measure.", + }) + }}>DELETE</AlertDialogAction> <AlertDialogCancel >Cancel</AlertDialogCancel> </AlertDialogContent> </AlertDialog></> diff --git a/Frontend/power-tracker/src/components/enoekDecision.tsx b/Frontend/power-tracker/src/components/enoekDecision.tsx index fcabd50..8c98e66 100644 --- a/Frontend/power-tracker/src/components/enoekDecision.tsx +++ b/Frontend/power-tracker/src/components/enoekDecision.tsx @@ -4,22 +4,7 @@ import React from "react"; import { useState } from "react"; import axios from 'axios'; import { redirect } from 'react-router-dom'; -import { date } from "zod"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select" -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card" +import { useToast } from "@/components/ui/use-toast" import { Table, TableBody, @@ -94,6 +79,8 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search}) = }; const [open, setOpen] = useState(false); + const { toast } = useToast() + const handleClose = () => { setOpen(false); }; @@ -240,8 +227,18 @@ const MainComponent: React.FC<ManageAddingProps> = ({ enoek, setData, search}) = <TableCell>{new Date(data.end_date).toDateString()}</TableCell> <TableCell>{data.process}</TableCell> <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> + <Button size="sm" variant="outline" onClick={(e)=>{ + judge(e,data.id,true) + toast({ + title: "Approved Measure.", + }) + }}>approve</Button> + <Button size="sm" variant="outline" onClick={(e)=>{ + judge(e,data.id,false) + toast({ + title: "Rejected Measure.", + }) + }}>reject</Button> </TableRow> : null ))} diff --git a/Frontend/power-tracker/src/components/manageBuildDep.tsx b/Frontend/power-tracker/src/components/manageBuildDep.tsx index 6c119a2..ce023b4 100644 --- a/Frontend/power-tracker/src/components/manageBuildDep.tsx +++ b/Frontend/power-tracker/src/components/manageBuildDep.tsx @@ -25,8 +25,9 @@ import { } from "@/components/ui/accordion" import { Factory } from 'lucide-react'; import { Warehouse } from 'lucide-react'; -import { Pencil } from 'lucide-react'; import { Label } from '@radix-ui/react-label'; +import { ToastAction } from "@/components/ui/toast" +import { useToast } from "@/components/ui/use-toast" const EgressAPI = import.meta.env.VITE_EAPI_URL @@ -356,7 +357,7 @@ const usePopoutState = () => { const [isPopoutOpen, setPopoutOpen] = useState(false); const [whatOperation, setOperation] = useState(0); const [assignValue, setassignValue] = useState(0); - + const handleOpenPopout = () => { @@ -390,9 +391,10 @@ interface ManagePopup { interface DisplayBuildingDepartmentDataProps extends ManagePopup { data: BuildDepData; setData: SetBuildDepData; -} - - + } + + const { toast } = useToast() + return ( <div className='flex h-[100%]'> @@ -457,6 +459,9 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup { } ] })); + toast({ + title: "Added Building.", + }) }}>Submit </Button> </AlertDialogAction> @@ -493,7 +498,14 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup { <AlertDialogHeader>Edit {buildDep.building.name}</AlertDialogHeader> <form onSubmit={(e)=>{e.preventDefault();editBuilding(buildDep.building.name, buildingNameInput); setBuildingNameInput("")}}> <Input className="mb-[20px]" type="text" placeholder="Buidling Name" value={buildingNameInput} onChange={(event) => setBuildingNameInput(event.target.value)} required/> - <AlertDialogAction type='submit'>Confirm</AlertDialogAction> + <AlertDialogAction + type='submit' + onClick={() => { + toast({ + title: "Edited Building.", + }) + }}>Confirm + </AlertDialogAction> <AlertDialogCancel onClick={()=>{setBuildingNameInput("")}}>Cancel</AlertDialogCancel> </form> </AlertDialogContent> @@ -504,7 +516,13 @@ interface DisplayBuildingDepartmentDataProps extends ManagePopup { </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader>Are you sure about deleting {buildDep.building.name} and all its machines and departments?</AlertDialogHeader> - <AlertDialogAction onClick={()=>deleteBuilding(buildDep.building.name)}>DELETE</AlertDialogAction> + <AlertDialogAction + onClick={()=> { + deleteBuilding(buildDep.building.name); + toast({ + title: "Deleted Building.", + })}}>DELETE + </AlertDialogAction> <AlertDialogCancel>Cancel</AlertDialogCancel> </AlertDialogContent> </AlertDialog> diff --git a/Frontend/power-tracker/src/components/manageGateway.tsx b/Frontend/power-tracker/src/components/manageGateway.tsx index b01fd0d..a8644c2 100644 --- a/Frontend/power-tracker/src/components/manageGateway.tsx +++ b/Frontend/power-tracker/src/components/manageGateway.tsx @@ -7,7 +7,6 @@ import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Plus } from 'lucide-react'; import { Router } from 'lucide-react'; -import { Textarea } from "@/components/ui/textarea" import { Table, TableBody, @@ -33,6 +32,9 @@ import { AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" +import { ToastAction } from "@/components/ui/toast" +import { useToast } from "@/components/ui/use-toast" + const EgressAPI = import.meta.env.VITE_EAPI_URL const IngressAPI = import.meta.env.VITE_IAPI_URL @@ -169,7 +171,7 @@ async function fetchDataGateway(): Promise<Gateway[]> { }) return gateway } - + const { toast } = useToast() return ( <ResizablePanelGroup className='flex h-[100%]' direction="horizontal"> @@ -218,7 +220,15 @@ async function fetchDataGateway(): Promise<Gateway[]> { <Input className="mb-[20px]" type="text" value={nameInput} onChange={(event) => setNameInput(event.target.value)} required/> <br/> <br/> <AlertDialogFooter> - <AlertDialogAction type='submit'>Submit gateway!</AlertDialogAction> + <AlertDialogAction + type='submit' + onClick={ ()=>{ + toast({ + title: "Added Gateway!", + }) + }}> + Submit gateway! + </AlertDialogAction> <AlertDialogCancel>Cancel</AlertDialogCancel> </AlertDialogFooter> </form> @@ -255,7 +265,11 @@ async function fetchDataGateway(): Promise<Gateway[]> { <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> + <AlertDialogAction type='submit' onClick={() => { + toast({ + title: "Edited Gateway.", + }) + }}>Confirm</AlertDialogAction> <AlertDialogCancel onClick={()=>{setEuiInput(""); setNameInput("");}}>Cancel</AlertDialogCancel> </form> </AlertDialogContent> @@ -266,7 +280,14 @@ async function fetchDataGateway(): Promise<Gateway[]> { </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader>Are you sure about deleting {gates.eui_gate} - {gates.name}?</AlertDialogHeader> - <AlertDialogAction onClick={()=>deleteGateway(gates.eui_gate)}>DELETE</AlertDialogAction> + <AlertDialogAction + onClick={()=>{ + deleteGateway(gates.eui_gate); + toast({ + title: "Deleted Gateway.", + }) + }}>DELETE + </AlertDialogAction> <AlertDialogCancel>Cancel</AlertDialogCancel> </AlertDialogContent> </AlertDialog> diff --git a/Frontend/power-tracker/src/components/manageProcesses.tsx b/Frontend/power-tracker/src/components/manageProcesses.tsx index 7673b44..2670171 100644 --- a/Frontend/power-tracker/src/components/manageProcesses.tsx +++ b/Frontend/power-tracker/src/components/manageProcesses.tsx @@ -18,12 +18,8 @@ import { AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, -} from "@/components/ui/accordion" +import { ToastAction } from "@/components/ui/toast" +import { useToast } from "@/components/ui/use-toast" const EgressAPI = import.meta.env.VITE_EAPI_URL const IngressAPI = import.meta.env.VITE_IAPI_URL @@ -53,6 +49,8 @@ const ManageProcesses= () => { const [processDropDown, setProcessDropDown] = useState(""); const [processDropDownId, setProcessDropDownId] = useState(0); + const { toast } = useToast() + const [processMachineData, setProcessMachineData] = useState({ processMachine: [{ added: false, @@ -459,6 +457,9 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach } ] })); + toast({ + title: "Added Process.", + }) }}>Submit Process!</Button> </AlertDialogAction> <AlertDialogCancel>Cancel</AlertDialogCancel> @@ -498,7 +499,11 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach <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> + <AlertDialogAction type='submit' onClick={ ()=>{ + toast({ + title: "Edited Process.", + }) + }}>Confirm</AlertDialogAction> <AlertDialogCancel onClick={()=>{setText(""); setDesc("");}}>Cancel</AlertDialogCancel> </form> </AlertDialogContent> @@ -511,7 +516,11 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader>Are you sure about deleting {process.name}?</AlertDialogHeader> - <AlertDialogAction onClick={()=>deleteProcess(process.name, process.description)}>DELETE</AlertDialogAction> + <AlertDialogAction onClick={()=>{ + deleteProcess(process.name, process.description); + toast({ + title: "Deleted Process.", + })}}>DELETE</AlertDialogAction> <AlertDialogCancel>Cancel</AlertDialogCancel> </AlertDialogContent> </AlertDialog> @@ -574,7 +583,12 @@ async function fetchDataProcessMachine(processId: number): Promise<ProcessesMach </AlertDialogHeader> {/* Submit/Cancel Action */} <AlertDialogFooter> - <AlertDialogAction type='submit' onClick={()=>{handleSave2(processMachineData, processMachineData2, processDropDownId); console.log(processDropDownId)}}>Save</AlertDialogAction> + <AlertDialogAction type='submit' onClick={()=>{ + handleSave2(processMachineData, processMachineData2, processDropDownId); + console.log(processDropDownId); + toast({ + title: "Added selected machine(s) to process.", + })}}>Save</AlertDialogAction> <AlertDialogCancel>Cancel</AlertDialogCancel> </AlertDialogFooter> </AlertDialogContent> diff --git a/Frontend/power-tracker/src/components/topbar.tsx b/Frontend/power-tracker/src/components/topbar.tsx index d91c82b..51f8783 100644 --- a/Frontend/power-tracker/src/components/topbar.tsx +++ b/Frontend/power-tracker/src/components/topbar.tsx @@ -63,7 +63,7 @@ function TopBar() { {sessionStorage.getItem("PERMISSION") === "0" && ( <NavigationMenuItem> <NavigationMenuLink className={navigationMenuTriggerStyle()} asChild> - <Link to="/sensors">Sensor Management</Link> + <Link to="/sensors">Machine Management</Link> </NavigationMenuLink> </NavigationMenuItem> )} diff --git a/Frontend/power-tracker/src/pages/ManageSensors.tsx b/Frontend/power-tracker/src/pages/ManageSensors.tsx index e813b87..cd8967f 100644 --- a/Frontend/power-tracker/src/pages/ManageSensors.tsx +++ b/Frontend/power-tracker/src/pages/ManageSensors.tsx @@ -13,14 +13,6 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select" -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card" import { Table, TableBody, @@ -54,10 +46,9 @@ import { import { ScrollArea } from "@/components/ui/scroll-area" import { z } from "zod" import { useForm } from "react-hook-form" -import { zodResolver } from "@hookform/resolvers/zod" import { PlusIcon } from 'lucide-react'; import { Input } from "@/components/ui/input" -import { machine } from 'os'; +import { useToast } from "@/components/ui/use-toast" const EgressAPI = import.meta.env.VITE_EAPI_URL const IngressAPI = import.meta.env.VITE_IAPI_URL @@ -67,6 +58,7 @@ function ManageSensors() { // const buttonRef = useRef(null); + const { toast } = useToast() const [sensorData, setSensorData] = useState({ sensor: [{ @@ -389,7 +381,7 @@ function ManageSensors() { <TopBar></TopBar> <main> - {/* Page load error */} + {/* Page load error */}3 <AlertDialog open={open}> <AlertDialogContent> <AlertDialogHeader> @@ -550,8 +542,15 @@ function ManageSensors() { )} /> <br/> <AlertDialogFooter> - <AlertDialogAction type='submit'>Done</AlertDialogAction> - <AlertDialogCancel onClick={()=>{form.reset()}}>Cancel</AlertDialogCancel> + <AlertDialogAction type='submit' onClick={()=>{ + toast({ + title: "Added Machine." + }) + } + }>Done</AlertDialogAction> + <AlertDialogCancel onClick={()=>form.reset()}> + Cancel + </AlertDialogCancel> </AlertDialogFooter> </form> </Form> @@ -701,7 +700,7 @@ function ManageSensors() { <Button size="sm" variant="outline">Edit</Button> </AlertDialogTrigger> <AlertDialogContent> - <AlertDialogTitle>Edit Sensor</AlertDialogTitle> + <AlertDialogTitle>Edit Machine</AlertDialogTitle> <Form {...form}> <form onSubmit={ form.handleSubmit(editSensor)}> <FormField @@ -827,6 +826,9 @@ function ManageSensors() { /> <br/> <AlertDialogFooter> <AlertDialogAction type='submit' onClick={()=>{ + toast({ + title: "Edited Machine." + }) if (form.getValues().eui === undefined) { form.setValue("eui", machine.eui); } @@ -860,9 +862,14 @@ function ManageSensors() { <Button size="sm" variant="outline">Delete</Button> </AlertDialogTrigger> <AlertDialogContent> - <AlertDialogTitle>Delete Sensor?</AlertDialogTitle> + <AlertDialogTitle>Delete Machine?</AlertDialogTitle> <AlertDialogDescription>Do you want to delete {machine.eui} - {machine.machine_name} ?</AlertDialogDescription> - <AlertDialogAction onClick={() => {deleteSensor(machine.eui); }}>DELETE</AlertDialogAction> + <AlertDialogAction onClick={() => { + deleteSensor(machine.eui); + toast({ + title: "Deleted Machine" + }) + }}>DELETE</AlertDialogAction> <AlertDialogCancel onClick={()=>{form.reset()}}>Cancel</AlertDialogCancel> </AlertDialogContent> </AlertDialog> diff --git a/Frontend/power-tracker/src/pages/adminUserConfig.tsx b/Frontend/power-tracker/src/pages/adminUserConfig.tsx index e3cde75..491d265 100644 --- a/Frontend/power-tracker/src/pages/adminUserConfig.tsx +++ b/Frontend/power-tracker/src/pages/adminUserConfig.tsx @@ -6,13 +6,6 @@ import { redirect } from 'react-router-dom'; import "./adminUserConfig.css" import axios from 'axios'; import TopBar from '@/components/topbar'; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select" import { Table, TableBody, @@ -47,9 +40,9 @@ import { Input } from '@/components/ui/input'; import { ScrollArea } from "@/components/ui/scroll-area" import { z } from "zod" import { useForm } from "react-hook-form" -import { zodResolver } from "@hookform/resolvers/zod" -import { Scroll } from 'lucide-react'; import { PlusIcon } from 'lucide-react'; +import { ToastAction } from "@/components/ui/toast" +import { useToast } from "@/components/ui/use-toast" const EgressAPI = import.meta.env.VITE_EAPI_URL @@ -75,7 +68,7 @@ function UserConfig() { const [userData, setUserData] = useState<UserData>({ Users: [] }); const [search, setSearch] = useState(""); const [usersToShow, setUsersToShow] = useState<UserData>({ Users: [] }); - + const { toast } = useToast() var baseAmount = 10 @@ -336,7 +329,6 @@ interface ManageUsersProps { }[]; } } - // -------------------- return ( <> @@ -433,7 +425,11 @@ interface ManageUsersProps { /> <br/> <AlertDialogFooter> - <AlertDialogAction type="submit">Submit</AlertDialogAction> + <AlertDialogAction type="submit" onClick={()=>{ + toast({ + title: "Added User.", + }) + }}>Submit</AlertDialogAction> <AlertDialogCancel onClick={()=>{form.reset()}}>Cancel</AlertDialogCancel> </AlertDialogFooter> </form> @@ -514,7 +510,7 @@ interface ManageUsersProps { <Button size="sm" variant="outline">Edit</Button> </AlertDialogTrigger> <AlertDialogContent> - <AlertDialogTitle>Edit Sensor</AlertDialogTitle> + <AlertDialogTitle>Edit User</AlertDialogTitle> <Form {...form}> <form onSubmit={ form.handleSubmit(onEdit)}> <FormField @@ -610,6 +606,9 @@ interface ManageUsersProps { if (form.getValues().permission === undefined) { form.setValue("permission", user.permission); } + toast({ + title: "Edited User.", + }) }}>Done</AlertDialogAction> <AlertDialogCancel onClick={()=>{form.reset}}>Cancel</AlertDialogCancel> </AlertDialogFooter> @@ -624,7 +623,12 @@ interface ManageUsersProps { <AlertDialogContent> <AlertDialogTitle>Delete Sensor?</AlertDialogTitle> <AlertDialogDescription>Do you want to delete {user.FirstName + " " + user.LastName}?</AlertDialogDescription> - <AlertDialogAction onClick={() => {deleteUser(user.id); }}>DELETE</AlertDialogAction> + <AlertDialogAction onClick={() => { + deleteUser(user.id); + toast({ + title: "Deleted User.", + }) + }}>DELETE</AlertDialogAction> <AlertDialogCancel>Cancel</AlertDialogCancel> </AlertDialogContent> </AlertDialog> diff --git a/Frontend/power-tracker/src/pages/overview.tsx b/Frontend/power-tracker/src/pages/overview.tsx index 7b95942..f4b8599 100644 --- a/Frontend/power-tracker/src/pages/overview.tsx +++ b/Frontend/power-tracker/src/pages/overview.tsx @@ -17,7 +17,7 @@ import { DatePicker } from '@/components/ui/datepicker' import { Input } from '@/components/ui/input'; import { Separator } from "@/components/ui/separator" import { Checkbox } from "@/components/ui/checkbox" - +import { useToast } from "@/components/ui/use-toast" const IngressAPI: String = import.meta.env.VITE_IAPI_URL @@ -63,6 +63,8 @@ function Overview() { checked: [false] }) + const { toast } = useToast() + const [interval, setInterval] = useState(20) //the interval between each packet of data const [since, setSince] = useState(2) //how long the first packet of data should be fetched from const [start, setStart] = useState(0) @@ -215,7 +217,16 @@ function Overview() { </div> </div> <br/> - <div className="flex items-center align-center justify-center mb-[10px]"><Button className="h-[25px] w-[25px]" variant="outline" size="icon" onClick={_ => setRecall(!recall)}><RefreshCw className='h-[15px] w-[15px]'/></Button></div> + <div className="flex items-center align-center justify-center mb-[10px]"> + <Button className="h-[25px] w-[25px]" variant="outline" size="icon" onClick={() => { + setRecall(!recall) + toast({ + title: "Refreshed.", + }) + }}> + <RefreshCw className='h-[15px] w-[15px]'/> + </Button> + </div> {/* Building checkbox menu */} <div className ="rounded-md border shadow-md px-[5px]"> -- GitLab