changed react and python server for Download

vrpmdvfrontend/src/pages/monitorings/mondatfiletable.tsx

@@ -0,0 +1,215 @@
+import { DataGrid, GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
+import { Download, Delete, Settings } from "@mui/icons-material";
+import {UseMonDownloadFile, useMonfiledownload} from "../../hooks/data/usemfdownload"
+
+import {
+  DateField,
+  DeleteButton,
+  EditButton,
+  List,
+  MarkdownField,
+  NumberField,
+  ShowButton,
+  useDataGrid,
+} from "@refinedev/mui";
+
+import React, { Dispatch, SetStateAction } from "react";
+import { IMonitoring, IMonitoringFile } from "./monitorings.types";
+import { useApiUrl, useCustom, useList, useUpdate } from "@refinedev/core";
+import Button from "@mui/material/Button/Button";
+import Stack from "@mui/material/Stack/Stack";
+import MFDownlaodDialig from "../../components/download/mfdownlaodDialog";
+import { IMonFilter } from "./filter/monfilter";
+
+export interface MonDatafileTableProps {
+  //monfilters: IMonFilter[],
+  monfilterId: string,
+  setDF: Dispatch<SetStateAction<GridRowSelectionModel>>  
+};
+
+
+
+
+// export const MonDatafileTable = ({monfilters, setDF}: MonDatafileTableProps) => {
+export const MonDatafileTable = ({monfilterId, setDF}: MonDatafileTableProps) => {
+
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState<GridRowSelectionModel>([]);
+  const hasSelected = selectedRowKeys.length > 0;
+
+
+  const dataProvider =  "monitoringfiles";
+
+  const { dataGridProps } = useDataGrid<IMonitoringFile>({
+    syncWithLocation: true,
+    dataProviderName: dataProvider,
+    pagination: {
+      mode: "client",
+      pageSize: 10,
+    },
+    filters: {
+      initial: [
+        {
+          field: "monId",
+          operator: "eq",
+          value: monfilterId,
+        },
+      ],
+    },
+  });
+
+
+  const [open, setOpen] = React.useState(false);
+  
+
+
+  const handleSelection = (value: GridRowSelectionModel) => {
+    setSelectedRowKeys(value);
+    setDF(value);
+  }
+
+  // const onClose = (value: boolean) => {
+  //   setOpen(false);
+  // };
+
+  // const downloadSelectedItems = () => {
+  //   setOpen(true);
+  // }
+
+
+  // const deleteSelectedItems = () => {}
+
+
+  // const setItems = () => {
+
+  // }
+
+
+  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 (
+            <>
+              <DeleteButton hideText recordItemId={row.id} />
+            </>
+          );
+        },
+        align: "center",
+        headerAlign: "center",
+        minWidth: 80,
+      },
+    ],
+    []
+  );
+
+
+
+  
+  return (
+    <DataGrid 
+      {...dataGridProps}
+      columns={columns} 
+      autoHeight  
+      checkboxSelection 
+      onRowSelectionModelChange={(newSelectionModel) => {
+        handleSelection(newSelectionModel);
+      }}
+      rowSelectionModel={selectedRowKeys}
+    />
+  );
+};
+
+
+/*
+import { useState, createContext, Dispatch, SetStateAction} from 'react';
+
+interface AppContextInterface {
+  mode: PaletteMode;
+  setMode: Dispatch<SetStateAction<PaletteMode>>
+}
+
+function App() {
+  const ColorModeContext = createContext<AppContextInterface>({
+      mode: 'dark', // set a default value
+      setMode: () => {},
+  })
+
+  const [mode, setMode] = useState<PaletteMode>('dark');
+  */
+