From 3997bd114bf7bbee79d24672b1000caefa287aff Mon Sep 17 00:00:00 2001
From: "CTFang@WireLab" <ctfang.cs12@nycu.edu.tw>
Date: Mon, 13 May 2024 06:28:11 +0000
Subject: [PATCH] fix: add back last update time
---
frontend/src/Dashboard.tsx | 23 ++++++++++++-------
frontend/src/pages/Charging/ChargingTable.tsx | 18 ++++++++++++++-
2 files changed, 32 insertions(+), 9 deletions(-)
diff --git a/frontend/src/Dashboard.tsx b/frontend/src/Dashboard.tsx
index 4e7461a..19788ed 100644
--- a/frontend/src/Dashboard.tsx
+++ b/frontend/src/Dashboard.tsx
@@ -85,7 +85,7 @@ function Dashboard(props: DashboardProps) {
const { user, setUser } = useContext(LoginContext);
const navigation = useNavigate();
- const [time, setTime] = useState(Date.now());
+ const [time, setTime] = useState<Date>(new Date());
const [refreshInterval, setRefreshInterval] = useState(0);
const [refreshString, setRefreshString] = useState("manual");
@@ -93,20 +93,19 @@ function Dashboard(props: DashboardProps) {
// update the time value every x ms, which triggers refresh (see below)
useEffect(() => {
if (refreshInterval === 0) {
- console.log("refreshInterval is 0")
+ console.log("refreshInterval is 0");
return;
}
- const interval = setInterval(() => setTime(Date.now()), refreshInterval);
+ const interval = setInterval(() => setTime(new Date()), refreshInterval);
return () => {
- console.log("clear refreshInterval")
+ console.log("clear refreshInterval");
clearInterval(interval);
};
}, [refreshInterval]);
// refresh every time the 'time' value changes
useEffect(() => {
- console.log("reload page at", time);
- //setChildKey(prev => prev + 1);
+ console.log("reload page at", time.toISOString());
props.refreshAction();
}, [time]);
@@ -189,9 +188,17 @@ function Dashboard(props: DashboardProps) {
borderColor: "white",
}}
/>
- <SimpleListMenu title={`Refresh: ${refreshString}`} options={refreshStrings} handleMenuItemClick={handleRefreshClick} />
+ <SimpleListMenu
+ title={`Refresh: ${refreshString}`}
+ options={refreshStrings}
+ handleMenuItemClick={handleRefreshClick}
+ />
</Box>
- <SimpleListMenu title={user?.username} options={["Change Password", "Logout"]} handleMenuItemClick={handleUserNameClick} />
+ <SimpleListMenu
+ title={user?.username}
+ options={["Change Password", "Logout"]}
+ handleMenuItemClick={handleUserNameClick}
+ />
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
diff --git a/frontend/src/pages/Charging/ChargingTable.tsx b/frontend/src/pages/Charging/ChargingTable.tsx
index 91e7854..c98f48b 100644
--- a/frontend/src/pages/Charging/ChargingTable.tsx
+++ b/frontend/src/pages/Charging/ChargingTable.tsx
@@ -10,6 +10,7 @@ import { Button, Grid } from "@mui/material";
export default function ChargingTable() {
const [expand, setExpand] = useState(true);
const [refresh, setRefresh] = useState<boolean>(false);
+ const [updateTime, setUpdateTime] = useState<Date>(new Date());
const [onlineChargingData, setOnlineChargingData] = useState<ChargingData[]>([]);
const [offlineChargingData, setOfflineChargingData] = useState<ChargingData[]>([]);
@@ -44,10 +45,10 @@ export default function ChargingTable() {
};
const onRefresh = () => {
- console.log("refreshing charging data");
fetchChargingData("Online", setOnlineChargingData);
fetchChargingData("Offline", setOfflineChargingData);
fetchChargingRecord();
+ setUpdateTime(new Date());
};
useEffect(() => {
@@ -71,6 +72,21 @@ export default function ChargingTable() {
{expand ? "Fold" : "Expand"}
</Button>
</Grid>
+ <Grid item>
+ <Button
+ color="secondary"
+ variant="contained"
+ onClick={() => onRefresh()}
+ sx={{ m: 2, backgroundColor: "blue", "&:hover": { backgroundColor: "blue" } }}
+ >
+ Refresh
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button color="success" variant="contained" sx={{ m: 2 }} disabled>
+ Last update: {updateTime.toISOString().slice(0, 19).replace("T", " ")}
+ </Button>
+ </Grid>
</Grid>
<br />
<ChargingList
--
GitLab