Untitled

import { connect } from 'react-redux';
import { changeSystemState } from '../redux';
import { FormTextBox, renderTable, TableCell } from 'view/component/AdminPage';
import React from 'react';

import T from 'view/js/common';

class RoundScreen extends React.Component {
    state = { lockTick: 0, clickCount: 0, clickTimer: null };
    clock = null;

    componentDidMount() {
        T.ready(() => {
            T.socket.on('round7ScreenState', ({ round7ScreenState, round7Team }) => this.props.changeSystemState({ round7ScreenState, round7Team }));
            T.socket.on('round7UpdateShowPointTB', round7ShowPointTB => this.props.changeSystemState({ round7ShowPointTB }));
            T.socket.on('round7ShowPointList', round7ShowPointList => this.props.changeSystemState({ round7ShowPointList }));
            T.socket.on('round7UpdateMaster', round7CanMaster => this.props.changeSystemState({ round7CanMaster }));
            T.socket.on('round7UpdateLockMaster', round7LockMaster => this.props.changeSystemState({ round7LockMaster }));
            T.socket.on('round7UpdateLockSupporter', round7LockSupporter => this.props.changeSystemState({ round7LockSupporter }));
            T.socket.on('round7UpdateTeam', round7Team => this.props.changeSystemState({ round7Team }));
            // T.socket.on('changeUserTeam', users => users && users.map((user => this.props?.changeUserTeam(user))));
            this.clock = setInterval(() => this.setState({ lockTick: this.state.lockTick + 1 }), 1000);
        });
    }

    componentWillUnmount() {
        this.clock && clearInterval(this.clock);
        this.state.clickTimer && clearTimeout(this.state.clickTimer);
    }

    getTime = (candidate, keyStart, keyEnd) => {
        if (!candidate[keyStart]) {
            return 0;
        } else if (!candidate[keyEnd]) {
            const time = Math.floor((Date.now() - Number(candidate[keyStart])) / 1000);
            return time;
        } else {
            return Math.floor((Number(candidate[keyEnd]) - Number(candidate[keyStart])) / 1000);
        }
    };

    renderTime = (time = 0) => {
        time = Math.abs(time);
        const minute = Math.floor(time / 60);
        const second = ('0' + (time % 60)).slice(-2);
        return `${minute}:${second}`;
    };

    componentThaoTac = (item, keyStart, keyEnd) => {
        const { roundNumber } = this.props.system;
        const roundTeam = this.props.system[`round${roundNumber}Team`];
        return <>
            <button className={`btn ${!item[keyStart] && !item[keyEnd] ? 'btn-secondary' : 'btn-primary'}`} onClick={() => { roundTeam == item._id && T.socket.emit(`round${roundNumber}Start`, item._id); }}><i className='fa fa-play' /></button>
            <button className={`btn ${item[keyStart] && item[keyEnd] ? 'btn-primary' : 'btn-secondary'}`} onClick={() => { roundTeam == item._id && T.socket.emit(`round${roundNumber}End`, item._id); }}><i className='fa fa-stop' /></button>
            <button className='btn btn-secondary' onClick={() => { T.confirm('Cảnh báo', 'Reset thời gian thi của thí sinh', isConfirm => isConfirm && roundTeam == item._id && T.socket.emit(`round${roundNumber}UserResetTime`, item._id)); }}><i className='fa fa-refresh' /></button>
            <button className='btn btn-danger ml-1'>{this.renderTime(this.getTime(item, keyStart, keyEnd))}</button>
            <FormTextBox type='number' className='m-0 p-0 ml-1' placeholder='Thời gian đã thi đấu' ref={e => this['time' + item._id] = e} />
            <button className='btn btn-primary ml-1' onClick={(e) => e.preventDefault() || (this['time' + item._id].value() != null && roundTeam == item._id && T.socket.emit(`round${roundNumber}UserTime`, { userId: item._id, duration: Number(this['time' + item._id].value()) }))}>{<i className='fa fa-sm fa-save' />}</button>
        </>;
    };

    renderComponent = () => {
        const { roundNumber, groupStage } = this.props.system,
            screenState = this.props.system[`round${roundNumber}ScreenState`],
            canMaster = this.props.system[`round${roundNumber}CanMaster`],
            lockMaster = !!Number(this.props.system[`round${roundNumber}LockMaster`]),
            lockSupporter = !!Number(this.props.system[`round${roundNumber}LockSupporter`]),
            showPointTB = !!Number(this.props.system[`round${roundNumber}ShowPointTB`]),
            roundTeam = this.props.system[`round${roundNumber}Team`];
        const teams = (this.props.user?.list || []).filter(i => i.category == 'team' && i.group == groupStage).sort((a, b) => a.priority - b.priority).slice(0, 4);

        let showPointList = this.props.system[`round${roundNumber}ShowPointList`];
        showPointList = typeof (showPointList) == 'string' ? JSON.parse(showPointList) : showPointList;

        return <div className='col-12 tile'>
            <div className="d-flex justify-content-between align-items-center">
                <h3 className='tile-title'>Yêu nước</h3>
                <button className="btn btn-danger" onClick={() => T.confirm('Xác nhận', `Xóa dữ liệu vòng ${roundNumber}`, true, i => i && T.socket.emit(`round${roundNumber}ClearData`, {}))}>
                    <i className='fa fa-trash' /> Xóa dữ liệu
                </button>
            </div>
            <div style={{ marginTop: 6 }}>
                <div className='btn-group btn-group-sm align-items-center' style={{ gap: 10 }}>Trạng thái:&nbsp;
                    <button type='button' className={screenState == 'Init' ? 'btn btn-success' : 'btn btn-secondary'} onClick={() => screenState != 'Init' && T.socket.emit(`round${roundNumber}ScreenState`, { [`round${roundNumber}ScreenState`]: 'Init', [`round${roundNumber}Team`]: '' })}>Init</button>
                    <button type='button' style={{ display: roundNumber == 7 ? '' : 'none' }} className={screenState == 'GiamKhao' ? 'btn btn-success' : 'btn btn-secondary'} onClick={() => screenState != 'GiamKhao' && T.socket.emit(`round${roundNumber}ScreenState`, { [`round${roundNumber}ScreenState`]: 'GiamKhao', [`round${roundNumber}Team`]: '' })}>Giám khảo CG</button>
                    {/* <button type='button' className={screenState == 'GiamKhao' ? 'btn btn-success' : 'btn btn-secondary'} onClick={() => screenState != 'GiamKhao' && T.socket.emit(`round${roundNumber}ScreenState`, { [`round${roundNumber}ScreenState`]: 'GiamKhao', [`round${roundNumber}Team`]: '' })}>Giám khảo</button> */}
                    <button type='button' className={screenState == 'Final' ? 'btn btn-success' : 'btn btn-secondary'} onClick={() => screenState != 'Final' && T.socket.emit(`round${roundNumber}ScreenState`, { [`round${roundNumber}ScreenState`]: 'Final', [`round${roundNumber}Team`]: '' })}>Final</button>
                    <div className={`btn-group btn-group-sm align-items-center ${screenState == 'Final' ? '' : 'd-none'}`} style={{ gap: 0 }}>
                        {['TG', 'CG'].map(item => {
                            return <button
                                type='button'
                                className={screenState == 'Final' && showPointList.includes(item) ? 'btn btn-primary' : 'btn btn-secondary'}
                                onClick={() => T.socket.emit(`round${roundNumber}ShowPointList`, item)}>
                                {item}
                            </button>
                        })}
                        <button
                            type='button'
                            className={screenState == 'Final' && showPointList.includes('Total') ? 'btn btn-primary' : 'btn btn-secondary'}
                            onClick={() => T.socket.emit(`round${roundNumber}ShowPointList`, 'Total')}>
                            Total
                        </button>
                        <button
                            type='button'
                            className={screenState == 'Final' && showPointList.includes('Sort') ? 'btn btn-primary' : 'btn btn-secondary'}
                            onClick={() => T.socket.emit(`round${roundNumber}ShowPointList`, 'Sort')}>
                            Sort
                        </button>
                    </div>
                    <button type='button' style={{ display: roundNumber != 7 ? '' : 'none' }} className={screenState == 'TongKet' ? 'btn btn-success' : 'btn btn-secondary'} onClick={() => screenState != 'TongKet' && T.socket.emit(`round${roundNumber}ScreenState`, { [`round${roundNumber}ScreenState`]: 'TongKet', [`round${roundNumber}Team`]: '' })}>Tổng kết</button>
                    <div className={`btn-group btn-group-sm align-items-center ${screenState == 'TongKet' ? '' : 'd-none'}`} style={{ gap: 0 }}>
                        {[...Array.from({ length: Number(roundNumber) }, (_, i) => i + 1), 'TK', 'Sort'].map(item =>
                            <button
                                type='button'
                                className={screenState == 'TongKet' && showPointList.includes(item) ? 'btn btn-primary' : 'btn btn-secondary'}
                                onClick={() => T.socket.emit(`round${roundNumber}ShowPointList`, item)}>
                                {item}
                            </button>
                        )}
                    </div>

                    <button type='button' className='btn btn-warning' onClick={e => e.preventDefault() || T.socket.emit(`round${roundNumber}CalculateDiem`)}>Tính điểm</button>
                </div>
            </div>

            <div style={{ marginTop: 6 }}>
                <div className='btn-group btn-group-sm align-items-center' style={{ gap: 10 }}>Thao tác:&nbsp;
                    <button type='button' className={screenState == 'StartPresent' ? 'btn btn-primary' : 'btn btn-secondary'} onClick={() => T.socket.emit(`round${roundNumber}ScreenState`, { [`round${roundNumber}ScreenState`]: 'StartPresent', [`round${roundNumber}Team`]: roundTeam })}>
                        Trình bày
                    </button>
                    <button type='button' className={screenState == 'ShowScoreTG' ? 'btn btn-primary' : 'btn btn-secondary'} onClick={() => T.socket.emit(`round${roundNumber}ScreenState`, { [`round${roundNumber}ScreenState`]: 'ShowScoreTG', [`round${roundNumber}Team`]: roundTeam })}>
                        Điểm thanh niên
                    </button>
                    <button type='button' className={screenState == 'ShowScoreCG' ? 'btn btn-primary' : 'btn btn-secondary'} onClick={() => T.socket.emit(`round${roundNumber}ScreenState`, { [`round${roundNumber}ScreenState`]: 'ShowScoreCG', [`round${roundNumber}Team`]: roundTeam })}>
                        Điểm chuyên gia
                    </button>
                    <button type='button' className={Number(showPointTB) ? 'btn btn-success' : 'btn btn-danger'} onClick={() => T.socket.emit(`round${roundNumber}SetShowPointTB`, { [`round${roundNumber}ShowPointTB`]: Number(!showPointTB) })}>
                        Điểm TB
                    </button>
                    <button type='button' className={Number(lockMaster) ? 'btn btn-success' : 'btn btn-danger'} onClick={() => T.socket.emit(`round${roundNumber}SetLockMaster`, { [`round${roundNumber}LockMaster`]: Number(!lockMaster) })}>
                        Mở chấm chuyên gia
                    </button>
                    <button type='button' className={Number(lockSupporter) ? 'btn btn-success' : 'btn btn-danger'} onClick={() => T.socket.emit(`round${roundNumber}SetLockSupporter`, { [`round${roundNumber}LockSupporter`]: Number(!lockSupporter) })}>
                        Mở chấm thanh niên
                    </button>
                    <button type='button' className={canMaster == '1' ? 'btn btn-danger' : 'btn btn-secondary'} onClick={() => T.socket.emit(`round${roundNumber}SetMaster`, { [`round${roundNumber}CanMaster`]: 1 })}>
                        Mở chấm
                    </button>
                    <button type='button' className={canMaster == '0' ? 'btn btn-danger' : 'btn btn-secondary'} onClick={() => T.socket.emit(`round${roundNumber}SetMaster`, { [`round${roundNumber}CanMaster`]: 0 })}>
                        Khoá chấm
                    </button>
                </div>
            </div>

            <div style={{ marginTop: 6 }}>
                {
                    renderTable({
                        getDataSource: () => teams,
                        renderHead: () => <tr>
                            <th style={{ width: 'auto' }}>#</th>
                            <th style={{ width: '20%' }}>Thí sinh</th>
                            <th style={{ width: '80%' }}>Thao tác</th>
                        </tr>,
                        renderRow: (item, index) => {
                            return <tr key={index}>
                                <TableCell content={index + 1} />
                                <TableCell content={<div className='btn-group btn-group-sm' style={{ gap: 10 }}>
                                    <button className={roundTeam == item._id ? 'btn btn-success' : 'btn btn-secondary'} style={{ fontWeight: 'bold' }}
                                        onClick={() => T.socket.emit(`round${roundNumber}SetTeam`, { [`round${roundNumber}Team`]: item._id })}
                                    >{item.lastname} {item.firstname}</button>
                                    <button type='button' className='btn btn-primary' onClick={() => T.socket.emit('RefreshTeam', { userId: item._id })}>
                                        Refresh
                                    </button>
                                </div>
                                } />
                                <TableCell content={<div className='btn-group btn-group-sm'>
                                    {
                                        this.componentThaoTac(item, `round${roundNumber}StartTime`, `round${roundNumber}EndTime`)
                                    }
                                </div>} />
                            </tr>;
                        },
                    })
                }
            </div>
        </div >;
    }

    render() {
        const { roundNumber } = this.props.system || {};
        return (
            roundNumber == '7' && this.renderComponent()
        );
    }
}

const mapStateToProps = state => ({ system: state.system, user: state.framework.user });
const mapActionsToProps = { changeSystemState };
export default connect(mapStateToProps, mapActionsToProps)(RoundScreen);