DynamicScheduler.js

import React, { Component } from 'react';
import UtilService from '../services/util.service';
import { CustomDialog } from '../layout/components/CustomDialog';
import { appGrowl } from '../layout/components/AppGrowl';
import {InputSwitch} from 'primereact/inputswitch';
import AuthStore from '../authenticate/auth.store';

export default class DynamicScheduler extends Component {
    constructor(props) {
        super(props);
        this.dailyOptions= [];
        this.state= {
            dsStatus: false, // Dynamic Scheduler Status
            showDialog: false,
            fsStatus: false,
            fixedScheduler: {},
            dynamicScheduler: {},
            permissions: AuthStore.getState(),
        }
        this.currentStatus = null;
        this.updateDSStatus = this.updateDSStatus.bind(this);
        this.closeDialog = this.closeDialog.bind(this);
        this.showConfirmDialog = this.showConfirmDialog.bind(this);
    }

    componentDidMount() {
        UtilService.getDynamicSchedulerStatus()
        .then(response => {
            var status = false;
            if(response) {
                status = response.value;
            }
            this.setState({dynamicScheduler: response, dsStatus: status});
        });

        UtilService.getFixedTimeSchedulerStatus()
        .then(response => {
            var status = false;
            if(response) {
                status = response.value;
            }
            this.setState({fixedScheduler: response, fsStatus: status});
        });
    } 

    /**
     * Update Dynamic Scheduling
     */
    async updateDSStatus() {
        
        if(this.state.scheduleType === 'dynamic') {
            let dynamicScheduler = this.state.dynamicScheduler;
            dynamicScheduler.value = this.currentStatus;
            let response = await UtilService.updateDynamicSchedulerStatus(dynamicScheduler);
            if(response) {
                appGrowl.show({severity: 'success', summary: 'Success', detail: 'Dynamic Scheduling is turned '+((this.currentStatus === true)?'On' : 'Off')+' successfully!'}); 
            }   else {
                appGrowl.show({severity: 'error', summary: 'Error', detail: 'Dynamic Scheduling is not updated successfully.'});
            }
            if(this.props.callBack) {
                this.props.callBack(this.currentStatus, this.state.scheduleType);
            }
            this.setState({dsStatus: this.currentStatus, showDialog: false}); 
        }
        if(this.state.scheduleType === 'fixed') {
            let fixedScheduler = this.state.fixedScheduler;
            fixedScheduler.value = this.currentStatus;
            let response = await UtilService.updateFixedTimeSchedulerStatus(fixedScheduler);
            if(response) {
                appGrowl.show({severity: 'success', summary: 'Success', detail: 'Fixed Time Scheduling is turned '+((this.currentStatus === true)?'On' : 'Off')+' successfully!'}); 
            }   else {
                appGrowl.show({severity: 'error', summary: 'Error', detail: 'Fixed Scheduling is not updated successfully.'});
            }
            if(this.props.callBack) {
                this.props.callBack(this.currentStatus, this.state.scheduleType);
            }
            this.setState({fsStatus: this.currentStatus, showDialog: false}); 
        }
    }
    /**
     * Show confirmation dialog to enable/disable Dynamic Scheduling
     * @param {*} e 
     */
    showConfirmDialog(e, scheduleType) {
        this.currentStatus = e.value;
        this.setState({showDialog: true, scheduleType: scheduleType})
    }

    showConfirmDialogFixedScheduler(e) {
        this.currentStatusFixed = e.value;
        this.setState({showDialogFixed: true})
    }

    /**
     * Close the Confirmation dialog
     */
    closeDialog() {
        this.setState({showDialog: false});
    }
    
    render() {
        const  {dynamicScheduler}  = this.state.permissions.userRolePermission;
        return (
            <>
            <div className="p-field p-grid">
                <label className='col-lg-8 col-md-8 col-sm-12' htmlFor="autodeletion" style={{marginRight: '10px', marginLeft: '1em'}}>Dynamic Scheduling :</label>
                {/* <label htmlFor="onLabel" style={{ marginRight: '0.25em', color: 'black'}}>OFF</label> */}
                <div className='col-lg-2 col-md-2 col-sm-12'>
                <InputSwitch disabled={dynamicScheduler.setting?!dynamicScheduler.setting:true}
                    checked={this.state.dsStatus} onChange={(e) => this.showConfirmDialog(e, 'dynamic')} 
                    tooltip={`Dynamic Scheduling is turned ${this.state.dsStatus?'On':'Off'}. ${dynamicScheduler.setting?'Click':"Don't have permission"} to turn it ${this.state.dsStatus? "'Off'" : "'On'"}`}
                    tooltipOptions={this.tooltipOptions}/>
                </div>
                </div>
                {/* <label htmlFor="onLabel" style={{marginLeft: '0.25em', color: 'black'}}>ON</label> */}
            <div className="p-field p-grid">   
                    <label className='col-lg-8 col-md-8 col-sm-12' htmlFor="autodeletion" style={{marginRight: '10px', marginLeft: '1em'}}>Fixed Scheduling :</label>
                    <div className='col-lg-2 col-md-2 col-sm-12'>
                    {/* <label htmlFor="onLabel" style={{ marginRight: '0.25em', color: 'black'}}>OFF</label> */}
                    <InputSwitch disabled={dynamicScheduler.setting?!dynamicScheduler.setting:true}
                        checked={this.state.fsStatus} onChange={(e) => this.showConfirmDialog(e, 'fixed')} 
                        tooltip={`Fixed Time Scheduling is turned ${this.state.fsStatus?'On':'Off'}. ${dynamicScheduler.setting?'Click':"Don't have permission"} to turn it ${this.state.fsStatus? "'Off'" : "'On'"}`}
                        tooltipOptions={this.tooltipOptions}/>
                 </div>
            </div>

            <CustomDialog type="confirmation" visible={this.state.showDialog} width={'30vw'}
                    header={'Confirmation'} message={`Do you want to turn ${this.currentStatus === true ? 'On' : 'Off'} ${this.state.scheduleType === 'dynamic'? 'Dynamic Scheduling' : 'Fixed Time Scheduling'}` } 
                    content={''} showIcon={true}
                    onClose={this.closeDialog} onCancel={this.closeDialog} onSubmit={this.updateDSStatus}
                     />
            </>

            
        );
    }
}