2nd Version with the complete UI and the first Version of cc+ .so
This commit is contained in:
@@ -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} />}
|
||||
// />
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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} />;
|
||||
// },
|
||||
|
||||
|
||||
|
||||
@@ -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
BIN
vrpmdvfrontend/src/pages/monitorings/status-withAutocomplete.zip
Normal file
Binary file not shown.
450
vrpmdvfrontend/src/pages/monitorings/status/monitoringstatus.tsx
Normal file
450
vrpmdvfrontend/src/pages/monitorings/status/monitoringstatus.tsx
Normal 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
|
||||
// }
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
|
||||
export type MonitoringStatus = {
|
||||
monstate: "off" | "started" | "stopped";
|
||||
};
|
||||
|
||||
|
||||
|
||||
export type MonitoringStatusProps = {
|
||||
id: string;
|
||||
dataProviderName: string;
|
||||
status: string;
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export type MonitoringStatusEditProps = {
|
||||
value: string;
|
||||
onChange?: (e: React.SyntheticEvent<Element>, value: string | null) => void;
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
|
||||
|
||||
|
||||
export type MonitoringStatusChipProps = {
|
||||
value?: string;
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -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"},
|
||||
];
|
||||
@@ -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
177
vrpmdvfrontend/src/pages/monitorings/status/test.tsx copy.old
Normal 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 }
|
||||
];
|
||||
Reference in New Issue
Block a user