In my current implementation, I am using a multidimensional array to store values and loop through it based on specific criteria. This process involves determining if a number matches and if it has a set status, such as "487 Online."
The data in the array is updated in real-time based on server-side events, and everything runs smoothly on that end.
My goal is to visually represent each state of a call in the following manner:
- If the phone device is online, turn the tile red; otherwise, turn it green and apply .HTML.
- If the phone is ringing, turn the tile yellow and apply .HTML.
- If the phone is in a call, turn the tile orange and apply .HTML.
- If the phone just hangs up, apply .HTML (which doesn't seem to work) and then turn blue using a CSS class with .addClass......after 3 seconds, remove the class (it doesn't display because the online status is captured right after, causing the blue color to be missed; hence, a setTimeout function is used to address this).
The first three steps work as intended, but the issue arises with the fourth step.
The problem I am encountering is related to using JQuery .HTML to modify the content in the tile every time the phone changes state. After debugging and experimenting, it seems that the issue is with how I am using JQuery .HTML and/or the setTimeout function, though I am unsure of the exact reason.
The issue: The Hangup event is triggered, but the .HTML content here doesn't display; instead, it appears to be overwritten by the .HTML from the online event, which is captured immediately after the hangup event. This results in the online event's .HTML being displayed instead.
I have noticed that removing the .HTML in step 1 resolves the issue, but I need it for that step. However, if I leave it there, it seems to overwrite the .HTML in step 4, which is also necessary for some reason.
Here is an example of how the array looks with the extension number, SIP device status, and current state of the device (e.g., Ringing):
[ '487', 'online', 'Hangup' ],
[ '488', 'online' ],
[ '477', 'online', 'Hangup' ] ]
At the server-side, the events generally look like this when the event is triggered:
477 and 487 both hungup
[ [ '487', 'online', 'Hangup' ], [ '477', 'online', 'Hangup' ] ]
something happened to a ChannelDestroyed
Channel Output ChannelDestroyed
something happened to an endpoint
EndpointStateChange
477 current state is: online
[ [ '487', 'online', 'Hangup' ], [ '477', 'online', 'Hangup' ] ]
Below is the current code I am using:
// Code to handle events signaling current call states
socket.on("eventsCalls", function (calldata) {
// Loop through the data and apply appropriate styling
for (var i = 0; i < calldata.length; i++) {
if (calldata[i][0] && calldata[i][2] === "Ringing") {
// Implement actions for ringing state
} else if (calldata[i][0] && calldata[i][2] === "Hangup") {
// Implement actions for hangup state
} else if (calldata[i][0] && calldata[i][2] === "ANSWER") {
// Implement actions for answer state
}
}
});
// Code to handle registered sip devices
socket.on("eventsRegister", function (regisdata) {
// Loop through the data and apply appropriate styling
for (var i = 0; i < regisdata.length; i++) {
if (regisdata[i][0] && regisdata[i][1] === "online") {
// Implement actions for online state
} else if (regisdata[i][0] && regisdata[i][1] === "offline") {
// Implement actions for offline state
}
}
});
Are there any better alternatives or workarounds to address the issue I am currently facing?
EDIT: JSFiddle provides an idea of what I am trying to achieve. It is challenging to replicate the event catching, but when the hangup event occurs, the .HTML content appears to be overwritten by the online event, which might happen simultaneously. This behavior differs from the last two events in my code, where the colors change but the .HTML for hangup seems to be replaced by the online event.