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

2nd Version with the complete UI and the first Version of cc+ .so

Browse Source
This commit is contained in:
Markus Lehr
2024-03-31 21:12:43 +02:00
parent 3fe818e144
commit a221b8f046
43 changed files with 2056 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

451
vrpmdvfrontend/dist/assets/index-3c13134c.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

451
vrpmdvfrontend/dist/assets/index-ebf4aa2f.js vendored
View File

File diff suppressed because one or more lines are too long

2
vrpmdvfrontend/dist/index.html vendored
View File

@@ -22,7 +22,7 @@
<title>
Markus Lehr | VR Predictive Maintenance Device.
</title>
<script type="module" crossorigin src="/assets/index-ebf4aa2f.js"></script>
<script type="module" crossorigin src="/assets/index-3c13134c.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

6
vrpmdvfrontend/src/App.tsx
View File

@@ -48,9 +48,15 @@ import { VR_API_URL } from './env';
const API_URL = "https://api.fake-rest.refine.dev";
// Test URL
//const MONITORINGS_API_URL = 'http://127.0.0.1:5000/vrpmdvapi/1_0';
// Embedded URL
const MONITORINGS_API_URL = '/vrpmdvapi/1_0';
// .get(`${API_URL}/exams`)
const MONITORINGSTATUS_API_URL = 'http://127.0.0.1:5000/vrpmdvapi/1_0';
function App() {
return (
<BrowserRouter>

198
vrpmdvfrontend/src/pages/monitorings/create.tsx
View File

@@ -1,14 +1,18 @@
import { Autocomplete, Box, InputAdornment, MenuItem, Select, TextField } from "@mui/material";
import { Autocomplete, Box, FormControl, FormLabel, InputAdornment, MenuItem, Select, Stack, TextField, ToggleButton, ToggleButtonGroup } from "@mui/material";
import { Create, NumberField, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { IMonitoring } from "./monitorings.types";
import { Group } from "@mui/icons-material";
import { MonitoringStatusEditChip } from "./status/monitoringstatusedit";
import { MonitoringStatusChip } from "./status/monitoringstatuschip";
export const MonitoringCreate = () => {
const {
saveButtonProps,
refineCore: { formLoading },
setValue,
register,
control,
formState: { errors },
@@ -23,6 +27,7 @@ export const MonitoringCreate = () => {
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
gap={2}
autoComplete="off"
>
<TextField
@@ -38,57 +43,91 @@ export const MonitoringCreate = () => {
label={"Name"}
name="name"
/>
<TextField
{...register("samplerate", {
required: "The samplerate is required",
})}
error={!!(errors as any)?.samplerate}
helperText={(errors as any)?.samplerate?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="number"
label={"Samplerate"}
name="samplerate"
InputProps={{
endAdornment:
<InputAdornment position="end">hz</InputAdornment>
}}
/>
<TextField
{...register("sampleperiod", {
required: "The sampleperiod is required",
})}
error={!!(errors as any)?.sampleperiod}
helperText={(errors as any)?.sampleperiod?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="number"
label={"Sampleperiod"}
name="sampleperiod"
InputProps={{
endAdornment:
<InputAdornment position="end">s</InputAdornment>
}}
/>
<TextField
{...register("downtime", {
required: "The downtime is required",
})}
error={!!(errors as any)?.downtime}
helperText={(errors as any)?.downtime?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="number"
label={"Downtime"}
name="downtime"
InputProps={{
endAdornment:
<InputAdornment position="end">s</InputAdornment>
}}
/>
<Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
<TextField
{...register("samplerate", {
required: "The samplerate is required",
})}
error={!!(errors as any)?.samplerate}
helperText={(errors as any)?.samplerate?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="number"
label={"Samplerate"}
name="samplerate"
InputProps={{
endAdornment:
<InputAdornment position="end">hz</InputAdornment>
}}
/>
<TextField
{...register("sampleperiod", {
required: "The sampleperiod is required",
})}
error={!!(errors as any)?.sampleperiod}
helperText={(errors as any)?.sampleperiod?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="number"
label={"Sampleperiod"}
name="sampleperiod"
InputProps={{
endAdornment:
<InputAdornment position="end">s</InputAdornment>
}}
/>
<TextField
{...register("downtime", {
required: "The downtime is required",
})}
error={!!(errors as any)?.downtime}
helperText={(errors as any)?.downtime?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="number"
label={"Downtime"}
name="downtime"
InputProps={{
endAdornment:
<InputAdornment position="end">s</InputAdornment>
}}
/>
</Stack>
<FormControl>
<Controller
control={control}
name="status"
defaultValue="off"
render={({ field }) => (
<ToggleButtonGroup
id="Status"
{...field}
exclusive
color="primary"
onChange={(_, newValue) => {
setValue("status", newValue, {
shouldValidate: true,
});
return newValue;
}}
>
<ToggleButton value={"started"}>
{"Started"}
</ToggleButton>
<ToggleButton value={"stopped"}>
{"Stopped"}
</ToggleButton>
<ToggleButton value={"off"}>
{"Deactivated"}
</ToggleButton>
</ToggleButtonGroup>
)}
/>
</FormControl>
<TextField
{...register("owner", {
required: "The downtime is required",
@@ -107,6 +146,61 @@ export const MonitoringCreate = () => {
);
};
//----------- new
// <Controller
// control={control}
// name="category"
// rules={{ required: "This field is required" }}
// // eslint-disable-next-line
// defaultValue={null as any}
// render={({ field }) => (
// <Autocomplete
// {...categoryAutocompleteProps}
// {...field}
// onChange={(_, value) => {
// field.onChange(value);
// }}
// getOptionLabel={(item) => {
// return (
// categoryAutocompleteProps?.options?.find(
// (p) =>
// p?.id?.toString() ===
// item?.id?.toString(),
// )?.title ?? ""
// );
// }}
// isOptionEqualToValue={(option, value) =>
// value === undefined ||
// option?.id?.toString() === value?.id?.toString()
// }
// renderInput={(params) => (
// <TextField
// {...params}
// label="Category"
// margin="normal"
// variant="outlined"
// error={!!(errors as any)?.category?.id}
// helperText={
// (errors as any)?.category?.id?.message
// }
// required
// />
// )}
// />
// )}
// />
//---------------
// <Controller
// name="status"
// control={control}
// rules={{ required: true }}
// render={({ field }) => <MonitoringStatusChip value={field.value} />}
// />

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

@@ -11,12 +11,16 @@ import {
} from "@refinedev/mui";
import React from "react";
import { IMonitoring } from "./monitorings.types";
import { MonitoringStatus } from "./status/monitoringstatus";
import { MonitoringStatusEditChip } from "./status/monitoringstatusedit";
import { useUpdate } from "@refinedev/core";
export const MonitoringList = () => {
const dataProvider = "monitorings";
const { dataGridProps } = useDataGrid<IMonitoring>({
syncWithLocation: true,
dataProviderName: "monitorings",
dataProviderName: dataProvider,
pagination: {
mode: "client",
pageSize: 10,
@@ -34,6 +38,9 @@ export const MonitoringList = () => {
// },
// });
const { mutate } = useUpdate();
const columns = React.useMemo<GridColDef<IMonitoring>[]>(
() => [
{
@@ -43,12 +50,6 @@ export const MonitoringList = () => {
type:"string",
minWidth: 250,
},
{
field: "id",
headerName: "ID",
type: "string",
minWidth: 300,
},
{
field: "created_at",
flex: 1,
@@ -61,7 +62,7 @@ export const MonitoringList = () => {
{
field: "samplerate",
flex: 0.3,
headerName: "Samplerate in Hz",
headerName: "Samplerate/Hz",
renderCell: function render({ row }) {
return (
<NumberField
@@ -79,7 +80,7 @@ export const MonitoringList = () => {
{
field: "sampleperiod",
flex: 0.3,
headerName: "Period in s",
headerName: "Period/s",
renderCell: function render({ row }) {
return (
<NumberField
@@ -97,7 +98,7 @@ export const MonitoringList = () => {
{
field: "downtime",
flex: 0.3,
headerName: "Downtime in s",
headerName: "Downtime/s",
renderCell: function render({ row }) {
return (
<NumberField
@@ -119,6 +120,25 @@ export const MonitoringList = () => {
type:"string",
minWidth: 80,
},
{
field: "status",
headerName: "Status",
width: 124,
editable: true,
renderCell: function render({ row }) {
return <MonitoringStatus key="MonStatus1" objId={row.id} status={row.status}
onChange={ (value) => {
mutate({
resource: dataProvider,
id: row.id,
values: {
status: value,
},
});
}}
/>;
},
},
{
field: "actions",
headerName: "Actions",
@@ -145,3 +165,21 @@ export const MonitoringList = () => {
</List>
);
};
// {
// 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} />;
// },

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

@@ -1,3 +1,4 @@
import { MonitoringStatus } from "./status/monitoringstatus.types";
export interface IMonitoring {
@@ -8,5 +9,8 @@ export interface IMonitoring {
sampleperiod: number;
downtime: number;
owner: string;
status: "off" | "started" | "stopped";//MonitoringStatus;
}
//string;

BIN
vrpmdvfrontend/src/pages/monitorings/status-withAutocomplete.zip Normal file
View File

Binary file not shown.

450
vrpmdvfrontend/src/pages/monitorings/status/monitoringstatus.tsx Normal file
View File

@@ -0,0 +1,450 @@
import { useTranslate, useUpdate } from "@refinedev/core";
import Chip from "@mui/material/Chip";
import type { ChipProps } from "@mui/material/Chip";
import CancelIcon from "@mui/icons-material/Cancel";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import WatchLaterIcon from "@mui/icons-material/WatchLater";
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
import PlayCircleFilledWhiteOutlinedIcon from '@mui/icons-material/PlayCircleFilledWhiteOutlined';
import StopIcon from '@mui/icons-material/Stop';
import NotificationsIcon from "@mui/icons-material/Notifications";
import MopedIcon from "@mui/icons-material/Moped";
import { useTheme } from "@mui/material/styles";
import { red, orange, cyan, blue, green, grey } from "@mui/material/colors";
import { ForkLeft, PersonAdd } from "@mui/icons-material";
import { useState } from "react";
import MenuList from "@mui/material/MenuList";
import MenuItem from "@mui/material/MenuItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Menu from "@mui/material/Menu";
import { ReactJSXElement } from "@emotion/react/types/jsx-namespace";
type MonitoringStatusProps = {
objId: string;
//dataProviderName: string;
onChange: (value: string ) => void;
status: "off" | "started" | "stopped";
};
// type MonitoringStatusProps = {
// status?: "off" | "started" | "stopped";
// };
//export const MonitoringStatus = ({ objId, dataProviderName, status }: MonitoringStatusProps) => {
export const MonitoringStatus = ({ objId, status , onChange}: MonitoringStatusProps) => {
const t = useTranslate();
const { palette } = useTheme();
const isDarkMode = palette.mode === "dark";
const { mutate } = useUpdate();
const dataProviderName = "monitoringstatus";
//const [showMenuState,setMenuState] = useState<boolean>(true);
let color = "";
let icon: ChipProps["icon"];
const CMDSTART: string = "/start";
const CMDSTOP: string = "/stop";
const CMDOFF: string = "/off";
const STARTED = "started";
const STOPPED = "stopped";
const OFF = "off";
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl); // is for handling the menu for a icon button https://mui.com/material-ui/react-menu/
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleStartClick = () => {
// set the statzs Property with the new value
setAnchorEl(null);
onChange('started');
// mutate({
// resource: dataProviderName,
// id: objId,
// values: {
// status: "started",
// },
// });
};
const handleStopClick = () => {
// set the statzs Property with the new value
setAnchorEl(null);
onChange('stopped');
// mutate({
// resource: dataProviderName,
// id: objId,
// values: {
// status: "stopped",
// },
// });
};
const handleOffClick = () => {
// set the statzs Property with the new value
setAnchorEl(null);
onChange('off');
// mutate({
// resource: dataProviderName,
// id: objId,
// values: {
// status: "off",
// },
// });
};
// const handleMenuClick = (evenbr: React.MouseEventHandler<HTMLLIElement>, newstatus: string) => {
// // set the statzs Property with the new value
// setAnchorEl(null);
// mutate({
// resource: {dataProviderName}+"/setStatus",
// id,
// values: {
// status: {newstatus},
// },
// });
// };
const showMenu = (status: string, compare: string) : boolean => {
if (status === compare) {
return false;
}
return true;
}
switch (status) {
case "off":
color = isDarkMode ? grey[200] : grey[800];
icon = (
<HighlightOffOutlinedIcon
sx={{
fill: isDarkMode ? grey[200] : grey[600],
}}
/>
);
break;
case "started":
color = isDarkMode ? green[200] : green[800];
icon = (
<PlayCircleFilledWhiteOutlinedIcon
sx={{
fill: isDarkMode ? green[200] : green[600],
}}
/>
);
break;
case "stopped":
color = isDarkMode ? red[200] : red[800];
icon = (
<StopIcon
sx={{
fill: isDarkMode ? red[200] : red[600],
}}
/>
);
break;
}
const getMonMenu = () : JSX.Element[] => {
let monMenu: JSX.Element[] = []
if (showMenu(status, STARTED)) {
monMenu.push(<MenuItem key={1} id="chip-menu-Item-1" onClick={handleStartClick}>
<ListItemIcon>
<PlayCircleFilledWhiteOutlinedIcon
sx={{
fill: isDarkMode ? green[200] : green[600],
}}
/>
</ListItemIcon>
Start
</MenuItem>)
}
if (showMenu(status, STOPPED)) {
monMenu.push(<MenuItem key={2} id="chip-menu-Item-2" onClick={handleStopClick}>
<ListItemIcon>
<StopIcon
sx={{
fill: isDarkMode ? red[200] : red[600],
}}
/>
</ListItemIcon>
Stop
</MenuItem>)
}
if (showMenu(status, OFF)) {
monMenu.push(<MenuItem key={3} id="chip-menu-Item-3" onClick={handleOffClick}>
<ListItemIcon>
<HighlightOffOutlinedIcon
sx={{
fill: isDarkMode ? grey[200] : grey[600],
}}
/>
</ListItemIcon>
Deactivate
</MenuItem>)
}
return monMenu;
}
// let chipMenu = null;
// if(showMenuState === true) {
// //show the menu
// chipMenu = () => {
// return (
// <div>
// <MenuList>
// <MenuItem>
// <ListItemIcon>
// </ListItemIcon>
// <ListItemText>Start</ListItemText>
// </MenuItem>
// </MenuList>
// </div>
// );
// }
// }
return (
<div>
<Chip
key="MonChip"
id="MonChip1"
variant="outlined"
size="medium"
icon={icon}
sx={{
borderColor: color,
color: color,
width:100,
alignItems: "center",
justifyContent: "left",
}}
label={status}
onClick={handleClick}
/>
<Menu
anchorEl={anchorEl}
key="monchip-menu"
id="monStatus-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
>
{getMonMenu()}
</Menu>
</div>
);
};
//
// { showMenuState ?
// (
// <div>
// <Menu
// anchorEl={anchorEl}
// id="account-menu"
// open={open}
// onClose={handleClose}
// onClick={handleClose}
// >
// <MenuItem onClick={handleClose}>
// <ListItemIcon>
// <HighlightOffOutlinedIcon
// sx={{
// fill: isDarkMode ? grey[200] : grey[600],
// }}
// />
// </ListItemIcon>
// Start
// </MenuItem>
// </Menu>
// </div>
// )
// : null
// }
// PaperProps={{
// elevation: 0,
// sx: {
// overflow: 'visible',
// filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
// mt: 1.5,
// '& .MuiAvatar-root': {
// width: 32,
// height: 32,
// ml: -0.5,
// mr: 1,
// },
// '&::before': {
// content: '""',
// display: 'block',
// position: 'absolute',s
// top: 0,
// right: 14,
// width: 10,
// height: 10,
// bgcolor: 'background.paper',
// transform: 'translateY(-50%) rotate(45deg)',
// zIndex: 0,
// },
// },
// }
// }
// <div>
// <MenuList>
// <MenuItem>
// <ListItemIcon>
// </ListItemIcon>
// <ListItemText>Start</ListItemText>
// </MenuItem>
// </MenuList>
// </div>
// <>
// <Tooltip title="More">
// <IconButton aria-label="more" onClick={onClick} size="small" data-testid="more">
// <MoreHorizIcon fontSize="small" />
// </IconButton>
// </Tooltip>
// {state.contextMenuAnchorElement ? (
// <ProjectContextMenu
// menuAnchor={state.contextMenuAnchorElement}
// project={project}
// onChange={onChange}
// onClose={onCloseContextMenu}
// />
// ) : null}
// </>
// label={t(`enum.orderStatuses.${status}`)}
// case "Delivered":
// color = isDarkMode ? green[200] : green[800];
// icon = (
// <CheckCircleIcon
// sx={{
// fill: isDarkMode ? green[200] : green[600],
// }}
// />
// );mutate
// break;
// case "Cancelled":
// color = isDarkMode ? red[200] : red[800];
// icon = (
// <CancelIcon
// sx={{
// fill: isDarkMode ? red[200] : red[600],
// }}
// />s
// );
// break;
// ---------------------------------
// { showMenu(status, STARTED) ?
// [
// <>
// <MenuItem onClick={handleClose}>
// <ListItemIcon>
// <PlayCircleFilledWhiteOutlinedIcon
// sx={{
// fill: isDarkMode ? green[200] : green[600],
// }}
// />
// </ListItemIcon>
// Start
// </MenuItem>
// </>
// ]
// : []
// }
// { showMenu(status, STOPPED) ?
// [
// <>
// <MenuItem onClick={handleClose}>
// <ListItemIcon>
// <StopIcon
// sx={{
// fill: isDarkMode ? red[200] : red[600],
// }}
// />
// </ListItemIcon>
// Stop
// </MenuItem>
// </>
// ]
// : []
// }
// { showMenu(status, OFF) ?
// <>
// <MenuItem onClick={handleClose}>
// <ListItemIcon>
// <HighlightOffOutlinedIcon
// sx={{
// fill: isDarkMode ? grey[200] : grey[600],
// }}
// />
// </ListItemIcon>
// Deactivate
// </MenuItem>
// </>
// : null
// }

12
vrpmdvfrontend/src/pages/monitorings/status/monitoringstatus.types.ts Normal file
View File

@@ -0,0 +1,12 @@
export type MonitoringStatus = {
monstate: "off" | "started" | "stopped";
};
export type MonitoringStatusProps = {
id: string;
dataProviderName: string;
status: string;
};

10
vrpmdvfrontend/src/pages/monitorings/status/monitoringstatusEdit.types.ts Normal file
View File

@@ -0,0 +1,10 @@
export type MonitoringStatusEditProps = {
value: string;
onChange?: (e: React.SyntheticEvent<Element>, value: string | null) => void;
};

76
vrpmdvfrontend/src/pages/monitorings/status/monitoringstatuschip.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { useTranslate } from "@refinedev/core";
import Chip from "@mui/material/Chip";
import type { ChipProps } from "@mui/material/Chip";
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
import PlayCircleFilledWhiteOutlinedIcon from '@mui/icons-material/PlayCircleFilledWhiteOutlined';
import StopIcon from '@mui/icons-material/Stop';
import { useTheme } from "@mui/material/styles";
import { red, orange, cyan, blue, green, grey } from "@mui/material/colors";
import { MonitoringStatusChipProps } from "./monitoringstatuschip.types";
export const MonitoringStatusChip = ({ value }: MonitoringStatusChipProps) => {
const t = useTranslate();
const { palette } = useTheme();
const isDarkMode = palette.mode === "dark";
let color = "";
let icon: ChipProps["icon"];
switch (value) {
case "off":
color = isDarkMode ? grey[200] : grey[800];
icon = (
<HighlightOffOutlinedIcon
sx={{
fill: isDarkMode ? grey[200] : grey[600],
}}
/>
);
break;
case "started":
color = isDarkMode ? green[200] : green[800];
icon = (
<PlayCircleFilledWhiteOutlinedIcon
sx={{
fill: isDarkMode ? green[200] : green[600],
}}
/>
);
break;
case "stopped":
color = isDarkMode ? red[200] : red[800];
icon = (
<StopIcon
sx={{
fill: isDarkMode ? red[200] : red[600],
}}
/>
);
break;
}
return (
<div>
<Chip
variant="outlined"
size="medium"
icon={icon}
sx={{
borderColor: color,
color: color,
width:100,
alignItems: "center",
justifyContent: "left",
}}
label={value}
/>
</div>
);
};

10
vrpmdvfrontend/src/pages/monitorings/status/monitoringstatuschip.types.ts Normal file
View File

@@ -0,0 +1,10 @@
export type MonitoringStatusChipProps = {
value?: string;
};

95
vrpmdvfrontend/src/pages/monitorings/status/monitoringstatusedit copy.tsx.old Normal file
View File

@@ -0,0 +1,95 @@
import * as React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";
import { MonitoringStatusEditProps } from "./monitoringstatusEdit.types";
import { MonitoringStatusChip } from "./monitoringstatuschip";
export const MonitoringStatusEditChip = ({ value, onChange }: MonitoringStatusEditProps) => {
const [val, setVal] = React.useState({value});
const [receivers, setReceivers] = React.useState([]);
// const handleClick = () => {
// setVal(top100Films[0]); //you pass any value from the array of top100Films
// // set value in TextField from dropdown list
// };
return (
<Stack spacing={1} sx={{ width: 500 }}>
<Autocomplete
id="MonitoringStatusChip"
limitTags={1}
options={chipSetting.map((option) => option.value)}
defaultValue={value}
onChange={onChange}
renderOption={() => (
<MonitoringStatusChip
value = {value}
/>
)}
renderInput={(params) => (
<MonitoringStatusChip
value = {value}
/>
)}
/>
</Stack>
);
}
// -------------renderinpurt ori
{/* <TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/> */}
// renderTags={(value, getTagProps) =>
// value.map((option, index) => (
// <MonitoringStatusChip
// value = {chipSetting[index].value}
// {...getTagProps({ index })}
// />
// ))
// }
// renderTags={(value, getTagProps) =>
// value.map((option, index) => (
// <Chip
// variant="outlined"
// label={option}
// {...getTagProps({ index })}
// />
// ))
// }
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
// const top100Films = [
// { title: "The Shawshank Redemption", year: 1994 },
// { title: "The Godfather", year: 1972 },
// { title: "The Godfather: Part II", year: 1974 },
// { title: "The Dark Knight", year: 2008 },
// { title: "12 Angry Men", year: 1957 },
// { title: "Schindler's List", year: 1993 },
// { title: "Pulp Fiction", year: 1994 },
// ];
const chipSetting = [
{ value: "off" },
{ value: "started"},
{ value: "stopped"},
];

165
vrpmdvfrontend/src/pages/monitorings/status/monitoringstatusedit.tsx Normal file
View File

@@ -0,0 +1,165 @@
import * as React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";
import { MonitoringStatusEditProps } from "./monitoringstatusEdit.types";
import { MonitoringStatusChip } from "./monitoringstatuschip";
import useTheme from "@mui/material/styles/useTheme";
import { red, orange, cyan, blue, green, grey } from "@mui/material/colors";
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
import PlayCircleFilledWhiteOutlinedIcon from '@mui/icons-material/PlayCircleFilledWhiteOutlined';
import StopIcon from '@mui/icons-material/Stop';
import Box from "@mui/material/Box";
export const MonitoringStatusEditChip = ({ value, onChange }: MonitoringStatusEditProps) => {
const [val, setVal] = React.useState({value});
const [receivers, setReceivers] = React.useState([]);
const { palette } = useTheme();
const isDarkMode = palette.mode === "dark";
let color = "";
// <TextField
// id="input-with-icon-textfield"
// label="TextField"
// InputProps={{
// startAdornment: (
// <InputAdornment position="start">
// <AccountCircle />
// </InputAdornment>
// ),
// }}
const getIcon = (value:string) => {
switch (value) {
case "off":
return (
<HighlightOffOutlinedIcon
sx={{fill: isDarkMode ? grey[200] : grey[600],}}
/>
)
case "started":
return (
<HighlightOffOutlinedIcon
sx={{fill: isDarkMode ? grey[200] : grey[600],}}
/>
)
case "stopped":
return (
<HighlightOffOutlinedIcon
sx={{fill: isDarkMode ? grey[200] : grey[600],}}
/>
)
}
return (
<HighlightOffOutlinedIcon
sx={{fill: isDarkMode ? grey[200] : grey[600],}}
/>)
}
// renderOption={(props, option) => (
// <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
// <img
// loading="lazy"
// width="20"
// srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
// src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
// alt=""
// />
// {option.label} ({option.code}) +{option.phone}
// </Box>
// )}
// const handleClick = () => {
// setVal(top100Films[0]); //you pass any value from the array of top100Films
// // set value in TextField from dropdown list
// };
return (
<Stack spacing={1} sx={{ width: 500 }}>
<Autocomplete
id="MonitoringStatusChip"
limitTags={1}
options={chipSetting.map((option) => option.value)}
defaultValue={value}
onChange={onChange}
renderOption={(props, option) => (
<Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
{getIcon(value)}
{option}
</Box>
)}
renderInput={(params) => (
<>
<TextField
{...params}
variant="filled"
label={value}
/>
</>
)}
/>
</Stack>
);
}
// -------------renderinpurt ori
// renderTags={(value, getTagProps) =>
// value.map((option, index) => (
// <MonitoringStatusChip
// value = {chipSetting[index].value}
// {...getTagProps({ index })}
// />
// ))
// }
// renderTags={(value, getTagProps) =>
// value.map((option, index) => (
// <Chip
// variant="outlined"
// label={option}
// {...getTagProps({ index })}
// />
// ))
// }
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
// const top100Films = [
// { title: "The Shawshank Redemption", year: 1994 },
// { title: "The Godfather", year: 1972 },
// { title: "The Godfather: Part II", year: 1974 },
// { title: "The Dark Knight", year: 2008 },
// { title: "12 Angry Men", year: 1957 },
// { title: "Schindler's List", year: 1993 },
// { title: "Pulp Fiction", year: 1994 },
// ];
const chipSetting = [
{ value: "off" },
{ value: "started"},
{ value: "stopped"},
];

177
vrpmdvfrontend/src/pages/monitorings/status/test.tsx copy.old Normal file
View File

@@ -0,0 +1,177 @@
import * as React from "react";
import Chip from "@mui/material/Chip";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";
export default function Tags() {
const [val, setVal] = React.useState({});
const [receivers, setReceivers] = React.useState([]);
console.log(receivers);
const handleClick = () => {
setVal(top100Films[0]); //you pass any value from the array of top100Films
// set value in TextField from dropdown list
};
return (
<Stack spacing={1} sx={{ width: 500 }}>
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[13].title]}
freeSolo
onChange={(e, value, situation, option) => {
if (situation === "removeOption") {
console.log("--->", e, value, situation, option);
}
setReceivers((state) => value);
}}
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
variant="outlined"
label={option}
{...getTagProps({ index })}
/>
))
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
</Stack>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
{ title: "The Godfather: Part II", year: 1974 },
{ title: "The Dark Knight", year: 2008 },
{ title: "12 Angry Men", year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: "Pulp Fiction", year: 1994 },
{
title: "The Lord of the Rings: The Return of the King",
year: 2003
},
{ title: "The Good, the Bad and the Ugly", year: 1966 },
{ title: "Fight Club", year: 1999 },
{
title: "The Lord of the Rings: The Fellowship of the Ring",
year: 2001
},
{
title: "Star Wars: Episode V - The Empire Strikes Back",
year: 1980
},
{ title: "Forrest Gump", year: 1994 },
{ title: "Inception", year: 2010 },
{
title: "The Lord of the Rings: The Two Towers",
year: 2002
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: "Goodfellas", year: 1990 },
{ title: "The Matrix", year: 1999 },
{ title: "Seven Samurai", year: 1954 },
{
title: "Star Wars: Episode IV - A New Hope",
year: 1977
},
{ title: "City of God", year: 2002 },
{ title: "Se7en", year: 1995 },
{ title: "The Silence of the Lambs", year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: "Life Is Beautiful", year: 1997 },
{ title: "The Usual Suspects", year: 1995 },
{ title: "Léon: The Professional", year: 1994 },
{ title: "Spirited Away", year: 2001 },
{ title: "Saving Private Ryan", year: 1998 },
{ title: "Once Upon a Time in the West", year: 1968 },
{ title: "American History X", year: 1998 },
{ title: "Interstellar", year: 2014 },
{ title: "Casablanca", year: 1942 },
{ title: "City Lights", year: 1931 },
{ title: "Psycho", year: 1960 },
{ title: "The Green Mile", year: 1999 },
{ title: "The Intouchables", year: 2011 },
{ title: "Modern Times", year: 1936 },
{ title: "Raiders of the Lost Ark", year: 1981 },
{ title: "Rear Window", year: 1954 },
{ title: "The Pianist", year: 2002 },
{ title: "The Departed", year: 2006 },
{ title: "Terminator 2: Judgment Day", year: 1991 },
{ title: "Back to the Future", year: 1985 },
{ title: "Whiplash", year: 2014 },
{ title: "Gladiator", year: 2000 },
{ title: "Memento", year: 2000 },
{ title: "The Prestige", year: 2006 },
{ title: "The Lion King", year: 1994 },
{ title: "Apocalypse Now", year: 1979 },
{ title: "Alien", year: 1979 },
{ title: "Sunset Boulevard", year: 1950 },
{
title:
"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
year: 1964
},
{ title: "The Great Dictator", year: 1940 },
{ title: "Cinema Paradiso", year: 1988 },
{ title: "The Lives of Others", year: 2006 },
{ title: "Grave of the Fireflies", year: 1988 },
{ title: "Paths of Glory", year: 1957 },
{ title: "Django Unchained", year: 2012 },
{ title: "The Shining", year: 1980 },
{ title: "WALL·E", year: 2008 },
{ title: "American Beauty", year: 1999 },
{ title: "The Dark Knight Rises", year: 2012 },
{ title: "Princess Mononoke", year: 1997 },
{ title: "Aliens", year: 1986 },
{ title: "Oldboy", year: 2003 },
{ title: "Once Upon a Time in America", year: 1984 },
{ title: "Witness for the Prosecution", year: 1957 },
{ title: "Das Boot", year: 1981 },
{ title: "Citizen Kane", year: 1941 },
{ title: "North by Northwest", year: 1959 },
{ title: "Vertigo", year: 1958 },
{
title: "Star Wars: Episode VI - Return of the Jedi",
year: 1983
},
{ title: "Reservoir Dogs", year: 1992 },
{ title: "Braveheart", year: 1995 },
{ title: "M", year: 1931 },
{ title: "Requiem for a Dream", year: 2000 },
{ title: "Amélie", year: 2001 },
{ title: "A Clockwork Orange", year: 1971 },
{ title: "Like Stars on Earth", year: 2007 },
{ title: "Taxi Driver", year: 1976 },
{ title: "Lawrence of Arabia", year: 1962 },
{ title: "Double Indemnity", year: 1944 },
{
title: "Eternal Sunshine of the Spotless Mind",
year: 2004
},
{ title: "Amadeus", year: 1984 },
{ title: "To Kill a Mockingbird", year: 1962 },
{ title: "Toy Story 3", year: 2010 },
{ title: "Logan", year: 2017 },
{ title: "Full Metal Jacket", year: 1987 },
{ title: "Dangal", year: 2016 },
{ title: "The Sting", year: 1973 },
{ title: "2001: A Space Odyssey", year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: "Toy Story", year: 1995 },
{ title: "Bicycle Thieves", year: 1948 },
{ title: "The Kid", year: 1921 },
{ title: "Inglourious Basterds", year: 2009 },
{ title: "Snatch", year: 2000 },
{ title: "3 Idiots", year: 2009 },
{ title: "Monty Python and the Holy Grail", year: 1975 }
];