github.com/martinohmann/rfoutlet@v1.2.1-0.20220707195255-8a66aa411105/web/src/components/outlets/OutletList.js (about)

     1  import React from 'react';
     2  import { makeStyles } from '@material-ui/core/styles';
     3  import PropTypes from 'prop-types';
     4  import List from '@material-ui/core/List';
     5  import ListItem from '@material-ui/core/ListItem';
     6  import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
     7  import ListItemText from '@material-ui/core/ListItemText';
     8  import IconButton from '@material-ui/core/IconButton';
     9  import Switch from '@material-ui/core/Switch';
    10  import SettingsIcon from '@material-ui/icons/Settings';
    11  import { NoItemsListItem } from '../List';
    12  import { useTranslation } from 'react-i18next';
    13  import { useHistory } from 'react-router';
    14  import { formatSchedule } from '../../format';
    15  import dispatcher from '../../dispatcher';
    16  
    17  const useStyles = makeStyles(theme => ({
    18    container: {
    19      padding: 0,
    20    },
    21  }));
    22  
    23  export default function OutletList({ outlets }) {
    24    const classes = useStyles();
    25    const { t } = useTranslation();
    26  
    27    return (
    28      <List className={classes.container}>
    29        {outlets.map(outlet =>
    30          <OutletListItem
    31            key={outlet.id}
    32            {...outlet}
    33            schedule={outlet.schedule}
    34          />
    35        )}
    36        {outlets.length === 0 && (
    37          <NoItemsListItem
    38            primary={t('No outlets configured for this group.')}
    39            secondary={t('Check your rfoutlet config.')}
    40          />
    41        )}
    42      </List>
    43    );
    44  }
    45  
    46  OutletList.propTypes = {
    47    outlets: PropTypes.array.isRequired,
    48  };
    49  
    50  
    51  const OutletListItem = ({ id, displayName, state, schedule }) => {
    52    const history = useHistory();
    53    const { t } = useTranslation();
    54  
    55    const handleToggle = () => dispatcher.dispatchOutletMessage(id, 'toggle');
    56  
    57    const hasEnabledIntervals = () => schedule.some(interval => interval.enabled);
    58  
    59    return (
    60      <ListItem>
    61        <ListItemText
    62          primary={displayName}
    63          secondary={formatSchedule(schedule, t)}
    64          onClick={() => history.push(`/schedule/${id}`)}
    65        />
    66        <ListItemSecondaryAction>
    67          <Switch
    68            color="primary"
    69            onChange={handleToggle}
    70            checked={state === 1}
    71            disabled={hasEnabledIntervals()}
    72          />
    73          <IconButton onClick={() => history.push(`/schedule/${id}`)}>
    74            <SettingsIcon />
    75          </IconButton>
    76        </ListItemSecondaryAction>
    77      </ListItem>
    78    );
    79  };
    80  
    81  OutletListItem.propTypes = {
    82    id: PropTypes.string.isRequired,
    83    displayName: PropTypes.string.isRequired,
    84    state: PropTypes.number.isRequired,
    85    schedule: PropTypes.array.isRequired,
    86  };