sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx

   1 import * as React from 'react';
   2
   3 import { Theme, createStyles, WithStyles, withStyles, Tooltip } from '@material-ui/core';
   4
   5 import { faBan } from '@fortawesome/free-solid-svg-icons';
   6 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
   7
   8 import AddIcon from '@material-ui/icons/Add';
   9 import EditIcon from '@material-ui/icons/Edit';
  10 import RemoveIcon from '@material-ui/icons/RemoveCircleOutline';
  11
  12 import Button from '@material-ui/core/Button';
  13 import IconButton from '@material-ui/core/IconButton';
  14
  15 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
  16 import MaterialTable, { MaterialTableCtorType, ColumnType } from '../../../../framework/src/components/material-table';
  17 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  18
  19 import { loadAllMountedNetworkElementsAsync } from '../../../connectApp/src/actions/mountedNetworkElementsActions';
  20
  21 import { loadAllMainteneceEntriesAsyncAction } from '../actions/maintenenceActions';
  22 import { MaintenenceEntry, spoofSymbol } from '../models/maintenenceEntryType';
  23
  24 import EditMaintenenceEntryDialog, { EditMaintenenceEntryDialogMode } from '../components/editMaintenenceEntryDialog';
  25 import { convertToLocaleString } from '../utils/timeUtils';
  26
  27 const styles = (theme: Theme) => createStyles({
  28   button: {
  29     margin: 0,
  30     padding: "6px 6px",
  31     minWidth: 'unset'
  32   },
  33   spacer: {
  34     marginLeft: theme.spacing.unit,
  35     marginRight: theme.spacing.unit,
  36     display: "inline"
  37   }
  38 });
  39
  40 const MaintenenceEntriesTable = MaterialTable as MaterialTableCtorType<MaintenenceEntry>;
  41
  42 const mapProps = (state: IApplicationStoreState) => ({
  43    maintenenceEntries: state.maintenance.maintenenceEntries.entries,
  44    busy: state.maintenance.maintenenceEntries.busy
  45 });
  46
  47 const mapDispatcher = (dispatcher: IDispatcher) => ({
  48   onLoadMenteneceEntries: async () => {
  49     await dispatcher.dispatch(loadAllMountedNetworkElementsAsync)
  50     dispatcher.dispatch(loadAllMainteneceEntriesAsyncAction);
  51   }
  52 });
  53
  54 const emptyMaintenenceEntry: MaintenenceEntry = {
  55   _id: '',
  56   mountId: '',
  57   description: '',
  58   start: convertToLocaleString(new Date().valueOf()),
  59   end: convertToLocaleString(new Date().valueOf()),
  60   active: false,
  61 };
  62
  63 type MaintenenceViewComponentProps = Connect<typeof mapProps, typeof mapDispatcher> & WithStyles<typeof styles> & {
  64
  65 }
  66
  67 type MaintenenceViewComponentState = {
  68   maintenenceEntryToEdit: MaintenenceEntry;
  69   maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode;
  70 }
  71
  72 class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentProps, MaintenenceViewComponentState> {
  73
  74   constructor (props: MaintenenceViewComponentProps) {
  75     super(props);
  76
  77     this.state = {
  78       maintenenceEntryToEdit: emptyMaintenenceEntry,
  79       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.None,
  80     };
  81
  82   }
  83
  84   render() {
  85     const { classes } = this.props;
  86     const addMaintenenceEntryAction = {
  87       icon: AddIcon, tooltip: 'Add', onClick: () => {
  88         const startTime = (new Date().valueOf());
  89         const endTime = startTime;
  90         this.setState({
  91           maintenenceEntryToEdit: {
  92             ...emptyMaintenenceEntry,
  93             start: convertToLocaleString(startTime),
  94             end: convertToLocaleString(endTime),
  95           },
  96           maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.AddMaintenenceEntry
  97         });
  98       }
  99     };
 100     const now = new Date().valueOf();
 101     return (
 102       <>
 103         <MaintenenceEntriesTable asynchronus rows={this.props.maintenenceEntries} customActionButtons={[ addMaintenenceEntryAction ]} columns={
 104         [
 105             { property: "mountId", title: "Mount Id", type: ColumnType.text },
 106             {
 107               property: "notifications", title: "Notification", width: 50, align: "center", type: ColumnType.custom, customControl: ({ rowData }) => (
 108                 rowData.active && (Date.parse(rowData.start).valueOf() <= now) && (Date.parse(rowData.end).valueOf() >= now) && <FontAwesomeIcon icon={faBan} /> || null
 109               )
 110             },
 111           { property: "active", title: "Activation State", type: ColumnType.boolean, labels: { "true": "active", "false": "not active" }, },
 112           { property: "start", title: "Start Date", type: ColumnType.text },
 113           { property: "end", title: "End Date", type: ColumnType.text },
 114           { property: "actions", title: "Actions", type: ColumnType.custom, customControl : ({ rowData })=>(
 115             <>
 116               <div className={classes.spacer}>
 117                 <Tooltip title={"1h from now"} ><Button className={classes.button} onClick={ (event) => this.onOpenPlus1hEditMaintenenceEntryDialog(event, rowData)} >+1h</Button></Tooltip>
 118                 <Tooltip title={"8h from now"} ><Button className={classes.button} onClick={(event) => this.onOpenPlus8hEditMaintenenceEntryDialog(event, rowData)} >+8h</Button></Tooltip>
 119               </div>
 120               <div className={classes.spacer}>
 121                 <Tooltip title={"Edit"} ><IconButton className={classes.button} onClick={(event) => this.onOpenEditMaintenenceEntryDialog(event, rowData)} ><EditIcon /></IconButton></Tooltip>
 122                 <Tooltip title={"Remove"} ><IconButton disabled={ !!rowData[spoofSymbol] } className={classes.button} onClick={(event) => this.onOpenRemoveMaintenenceEntryDialog(event, rowData)} ><RemoveIcon /></IconButton></Tooltip>
 123               </div>
 124             </>
 125           ) },
 126         ]
 127         } idProperty={'_id'}> </MaintenenceEntriesTable>
 128         <EditMaintenenceEntryDialog initialMaintenenceEntry={this.state.maintenenceEntryToEdit} mode={this.state.maintenenceEntryEditorMode}
 129           onClose={ this.onCloseEditMaintenenceEntryDialog } />
 130        </>
 131     );
 132   }
 133
 134   componentDidMount(){
 135     this.props.onLoadMenteneceEntries();
 136   }
 137
 138   private onOpenPlus1hEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => {
 139     event.preventDefault();
 140     event.stopPropagation();
 141     const startTime = (new Date().valueOf());
 142     const endTime = startTime + (1 * 60 * 60 * 1000);
 143     this.setState({
 144       maintenenceEntryToEdit: {
 145         ...entry,
 146         start: convertToLocaleString(startTime),
 147         end: convertToLocaleString(endTime),
 148       },
 149       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry
 150     });
 151   }
 152
 153   private onOpenPlus8hEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => {
 154     event.preventDefault();
 155     event.stopPropagation();
 156     const startTime = (new Date().valueOf());
 157     const endTime = startTime + (8 * 60 * 60 * 1000);
 158     this.setState({
 159       maintenenceEntryToEdit: {
 160         ...entry,
 161         start: convertToLocaleString(startTime),
 162         end: convertToLocaleString(endTime),
 163       },
 164       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry
 165     });
 166   }
 167
 168   private onOpenEditMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => {
 169     event.preventDefault();
 170     event.stopPropagation();
 171     const startTime = (new Date().valueOf());
 172     const endTime = startTime ;
 173     this.setState({
 174       maintenenceEntryToEdit: {
 175         ...entry,
 176         ...(entry.start && endTime)
 177           ? { start: entry.start, end: entry.end }
 178           : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime)}
 179       },
 180       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.EditMaintenenceEntry
 181     });
 182   }
 183
 184   private onOpenRemoveMaintenenceEntryDialog = (event: React.MouseEvent<HTMLElement>, entry: MaintenenceEntry) => {
 185     event.preventDefault();
 186     event.stopPropagation();
 187     const startTime = (new Date().valueOf());
 188     const endTime = startTime;
 189     this.setState({
 190       maintenenceEntryToEdit: {
 191         ...entry,
 192         ...(entry.start && endTime)
 193           ? { start: entry.start, end: entry.end }
 194           : { start: convertToLocaleString(startTime), end: convertToLocaleString(endTime) }
 195       },
 196       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.RemoveMaintenenceEntry
 197     });
 198   }
 199
 200   private onCloseEditMaintenenceEntryDialog = () => {
 201     this.setState({
 202       maintenenceEntryToEdit: emptyMaintenenceEntry,
 203       maintenenceEntryEditorMode: EditMaintenenceEntryDialogMode.None,
 204     });
 205   }
 206 }
 207
 208 export const MaintenenceView = withStyles(styles)(connect(mapProps, mapDispatcher)(MaintenenceViewComponent));
 209 export default MaintenenceView;