markus.lehr/vrpmdv-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Monitoring files in Python and Mui/React

Browse Source
This commit is contained in:
Markus Lehr
2024-06-29 17:12:58 +02:00
parent 5285f8b26e
commit dbae0a776d
23 changed files with 726 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
vrpmdvfrontend/src/pages/monitorings/downloadbutton Normal file
View File

@@ -0,0 +1,24 @@
import {
useModal,
} from "@refinedev/core";
import Button from "@refinedev/mui";
export const DownloadButton = () => {
const { visible, show, close } = useModal();
return (
<Button>
Download
</Button>
);
};
// {visible && (
// <YourModalComponent>
// <p>Dummy Modal Content</p>
// <button onClick={close}>Close Modal</button>
// </YourModalComponent>
// )}

1
vrpmdvfrontend/src/pages/monitorings/list.tsx
View File

@@ -147,6 +147,7 @@ export const MonitoringList = () => {
return (
<>
<EditButton hideText recordItemId={row.id} />
<ShowButton hideText recordItemId={row.id} />
<DeleteButton hideText recordItemId={row.id} />
</>
);

261
vrpmdvfrontend/src/pages/monitorings/mondatfilelist.tsx Normal file
View File

@@ -0,0 +1,261 @@
import { DataGrid, GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
import { Download, Delete } from "@mui/icons-material";
import {
DateField,
DeleteButton,
EditButton,
List,
MarkdownField,
NumberField,
ShowButton,
useDataGrid,
} from "@refinedev/mui";
import React from "react";
import { IMonitoring, IMonitoringFile } from "./monitorings.types";
//import { MonitoringStatus } from "./status/monitoringstatus";
// import { MonitoringStatusEditChip } from "./status/monitoringstatusedit";
import { useUpdate } from "@refinedev/core";
import Button from "@mui/material/Button/Button";
import Stack from "@mui/material/Stack/Stack";
export const MonDatafileList = () => {
const dataProvider = "monitoringfiles";
//const dataProvider = "monitorings";
const { dataGridProps } = useDataGrid<IMonitoringFile>({
syncWithLocation: true,
dataProviderName: dataProvider,
pagination: {
mode: "client",
pageSize: 10,
},
});
const [selectedRowKeys, setSelectedRowKeys] = React.useState<GridRowSelectionModel>([]);
const hasSelected = selectedRowKeys.length > 0;
// const updateSelectedItems = () => {
// mutate(
// {
// resource: "posts",
// ids: selectedRowKeys.map(String),
// values: {
// status: "approved",
// },
// },
// {
// onSuccess: () => {
// setSelectedRowKeys([]);
// },
// },
// );
// };
// const { data: categoryData, isLoading: categoryIsLoading } = useMany({
// resource: "categories",
// ids:
// dataGridProps?.rows
// ?.map((item: any) => item?.category?.id)
// .filter(Boolean) ?? [],
// queryOptions: {
// enabled: !!dataGridProps?.rows,
// },
// });
const { mutate } = useUpdate();
//dataGridProps.disableRowSelectionOnClick: true;
const columns = React.useMemo<GridColDef<IMonitoringFile>[]>(
() => [
{
field: "name",
flex: 1,
headerName: "Name",
type:"string",
minWidth: 250,
},
{
field: "timestamp",
flex: 1,
headerName: "Timestamp",
minWidth: 30,
renderCell: function render({ value }) {
let d = new Date();
const unixtime = new Date(value);
//return <DateField value={unixtime} />;
return <DateField value={unixtime} format={'DD-MM-YYYY hh:mm:ss A'}/>;
},
},
{
field: "samplerate",
flex: 0.3,
headerName: "Samplerate/Hz",
renderCell: function render({ row }) {
return (
<NumberField
value={row.samplerate}
options={{
minimumIntegerDigits: 1,
minimumFractionDigits:0,
maximumFractionDigits: 0,
}}
/>
);
},
minWidth: 120,
},
{
field: "sampleperiod",
flex: 0.3,
headerName: "Period/s",
renderCell: function render({ row }) {
return (
<NumberField
value={row.sampleperiod}
options={{
minimumIntegerDigits: 1,
minimumFractionDigits:1,
maximumFractionDigits: 3,
}}
/>
);
},
minWidth: 120,
},
{
field: "downtime",
flex: 0.3,
headerName: "Downtime/s",
renderCell: function render({ row }) {
return (
<NumberField
value={row.downtime}
options={{
minimumIntegerDigits: 1,
minimumFractionDigits:1,
maximumFractionDigits: 3,
}}
/>
);
},
minWidth: 120,
},
{
field: "actions",
headerName: "Actions",
sortable: false,
renderCell: function render({ row }) {
return (
<>
<ShowButton hideText recordItemId={row.id} />
<DeleteButton hideText recordItemId={row.id} />
</>
);
},
align: "center",
headerAlign: "center",
minWidth: 80,
},
],
[]
);
return (
<List
cardProps={{ sx: { paddingX: { xs: 2, md: 0 } } }}
cardHeaderProps={{
subheader: hasSelected && (
<Stack direction="row">
<Button
startIcon={<Download color="success" />}
onClick={() => updateSelectedItems("approved")}
>
Download
</Button>
<Button
startIcon={<Delete color="error" />}
onClick={() => updateSelectedItems("rejected")}
>
{t("buttons.rejectAll")}
</Button>
</Stack>
),
}}
>
<DataGrid
{...dataGridProps}
columns={columns}
autoHeight
checkboxSelection
onRowSelectionModelChange={(newSelectionModel) => {
setSelectedRowKeys(newSelectionModel);
}}
rowSelectionModel={selectedRowKeys}
/>
</List>
);
};
/*
<List
cardProps={{ sx: { paddingX: { xs: 2, md: 0 } } }}
cardHeaderProps={{
subheader: hasSelected && (
<Stack direction="row">
<Button
startIcon={<Download color="success" />}
onClick={() => updateSelectedItems("approved")}
>
{t("buttons.acceptAll")}
</Button>
<Button
startIcon={<Delete color="error" />}
onClick={() => updateSelectedItems("rejected")}
>
{t("buttons.rejectAll")}
</Button>
</Stack>
),
}}
>
<DataGrid
{...dataGridProps}
columns={columns}
autoHeight
checkboxSelection
onRowSelectionModelChange={(newSelectionModel) => {
setSelectedRowKeys(newSelectionModel);
}}
rowSelectionModel={selectedRowKeys}
/>
</List>
);
*/
// onRowSelectionModelChange={(newSelectionModel) => {
// setSelectedRowKeys(newSelectionModel);
// }}
// rowSelectionModel={selectedRowKeys}
// {
// field: "monstate",
// headerName: t("orders.fields.status"),
// width: 124,
// renderCell: function render({ row }) {
// return <MonitoringStatus status={row.monstate} />;
// },
// },
// renderEditCell: function render({ row }) {
// return <MonitoringStatusEditChip value={row.status} />;
// },

10
vrpmdvfrontend/src/pages/monitorings/monitorings.types.ts
View File

@@ -11,6 +11,16 @@ export interface IMonitoring {
owner: string;
status: "off" | "started" | "stopped";//MonitoringStatus;
}
export interface IMonitoringFile {
id: string;
name: string;
samplerate: number;
sampleperiod: number;
downtime: number;
timestamp: string;
}
//string;