Alpine Store for Browser calling

index.js

export default {
    agents: [],
    id: null,
    ringing: false,
    onCall: false,
    statusMessage: 'Initialising...',
    callTimer: '',
    agentStatus: {
        Idle: 'Available',
        Break: 'Break',
        WrapUp: 'Wrap Up',
        OnCall: 'On Call',
        Offline: 'Offline'
    },

    activeCall: null,

    init() {
        this.setupEcho()
    },

    setCallTimer() {
        this.activeCallTimeStart = Date.now()
        this.activeTimeHandler = setInterval(() => {
            this.callTimer = this.secondsToTime((Date.now() - this.activeCallTimeStart) / 1000)
        }, 100)
    },

    stopCallTimer() {
        clearInterval(this.activeTimeHandler)
        this.callTimer = ''
    },

    answerCall() {
        this.activeCall.accept()
        this.setCallTimer()
        this.ringing = false
        this.onCall = true
        this.setAgentStatus(this.agentStatus.OnCall)
    },

    hangupCall() {
        this.activeCall.disconnect()
    },

    callAgent(email) {
        this.statusMessage = `Calling ${email} ...`

        this.onCall = true

        this.setAgentStatus(this.agentStatus.OnCall)
        this.setCallTimer()
        const params = {Agent: email}
        window.callConnect({params})
            .then((call) => {
                this.activeCall = call
                this.activeCall.on('disconnect', () => {
                    this.stopCallTimer()
                    this.onCall = false
                    this.setAgentStatus(this.agentStatus.Idle)
                    this.statusMessage = "Ready."
                })
            })
    },

    setAgentStatus(status) {
        return axios.post('/agent/status', {status})
            .then(() => {
                Livewire.emit('refreshUserStatus')
            })
    },

    connectToConference(conferenceSid, name) {
        this.statusMessage = `Connecting to ${name} ...`

        this.onCall = true
        this.setAgentStatus(this.agentStatus.OnCall)
        this.setCallTimer()
        const params = {Conference: conferenceSid}
        window.callConnect({params})
            .then((call) => {
                this.activeCall = call
                this.activeCall.on('disconnect', () => {
                    this.stopCallTimer()
                    this.onCall = false
                    this.setAgentStatus(this.agentStatus.WrapUp)
                    this.statusMessage = "Ready."
                })
            })
    },

    setupEcho() {
        Echo.join('online')
            .here((agents) => {
                this.agents = agents
            })
            .joining((agent) => {
                this.agents.push(agent)
            })
            .leaving((agent) => {
                this.agents.splice(this.agents.findIndex((a) => a.id === agent.id), 1)
            })
            .listen('AgentStatusChanged', (e) => {
                let index = this.agents.findIndex((agent) => agent.id === e.agent.id)
                this.agents[index].status = e.agent.status
            })
            .listen('ConferenceCreated', (e) => {
                Livewire.emit('refreshConferences')
            })
            .listen('ConferenceStatusChanged', (e) => {
                Livewire.emit('refreshConferences')
            })
    },

    deviceRegistered() {
        this.statusMessage = `Ready (Agent: ${this.id})`
    },

    deviceError(error) {
        this.statusMessage = `ERROR: ${error}`
    },

    deviceIncoming(call) {
        this.activeCall = call

        this.activeCall.on('disconnect', () => {
            this.stopCallTimer()
            this.onCall = false
            this.setAgentStatus(this.agentStatus.Idle)
        })
        this.ringing = true
    },

    secondsToTime(secs) {
        let hours = Math.floor(secs / (60 * 60))
        let divisor_for_minutes = secs % (60 * 60)
        let minutes = Math.floor(divisor_for_minutes / 60)

        let divisor_for_seconds = divisor_for_minutes % 60
        let seconds = Math.ceil(divisor_for_seconds)

        if (hours === 0)
            return `${minutes}:${String(seconds).padStart(2,'0')}`

        return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
    }
}