first run with new toast system

This commit is contained in:
DJ2LS 2023-02-11 10:23:04 +01:00
parent 7ed3d0a1f1
commit 1de6c3489f
2 changed files with 81 additions and 364 deletions

View file

@ -10,6 +10,11 @@ const {
bearingDistance,
latLngToLocator
} = require('qth-locator');
const {
v4: uuidv4
} = require('uuid');
const os = require('os');
// split character used for appending additional data to files
@ -2666,234 +2671,151 @@ ipcRenderer.on('action-updater', (event, arg) => {
// CQ TRANSMITTING
ipcRenderer.on('action-show-cq-toast-transmitting', (event, data) => {
var toastCQsending = document.getElementById('toastCQsending');
var toast = bootstrap.Toast.getOrCreateInstance(toastCQsending); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='transmitting cq', duration=5000);
});
// CQ RECEIVED
ipcRenderer.on('action-show-cq-toast-received', (event, data) => {
var toastCQreceiving = document.getElementById('toastCQreceiving');
var toast = bootstrap.Toast.getOrCreateInstance(toastCQreceiving); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='received cq', duration=5000);
});
// QRV TRANSMITTING
ipcRenderer.on('action-show-qrv-toast-transmitting', (event, data) => {
var toastQRVtransmitting = document.getElementById('toastQRVtransmitting');
var toast = bootstrap.Toast.getOrCreateInstance(toastQRVtransmitting); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='transmitting qrv', duration=5000);
});
// QRV RECEIVED
ipcRenderer.on('action-show-qrv-toast-received', (event, data) => {
var toastQRVreceiving = document.getElementById('toastQRVreceiving');
var toast = bootstrap.Toast.getOrCreateInstance(toastQRVreceiving); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='received qrv', duration=5000);
});
// BEACON TRANSMITTING
ipcRenderer.on('action-show-beacon-toast-transmitting', (event, data) => {
displayToast(type='info', icon='bi-broadcast', content='transmitting beacon', duration=5000);
});
// BEACON RECEIVED
ipcRenderer.on('action-show-beacon-toast-received', (event, data) => {
var toastBEACONreceiving = document.getElementById('toastBEACONreceiving');
var toast = bootstrap.Toast.getOrCreateInstance(toastBEACONreceiving); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='info', icon='bi-broadcast', content='received beacon', duration=5000);
});
// PING TRANSMITTING
ipcRenderer.on('action-show-ping-toast-transmitting', (event, data) => {
var toastPINGsending = document.getElementById('toastPINGsending');
var toast = bootstrap.Toast.getOrCreateInstance(toastPINGsending); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='transmitting ping', duration=5000);
});
// PING RECEIVED
ipcRenderer.on('action-show-ping-toast-received', (event, data) => {
var toastPINGreceiving = document.getElementById('toastPINGreceiving');
var toast = bootstrap.Toast.getOrCreateInstance(toastPINGreceiving); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='received ping', duration=5000);
});
// PING RECEIVED ACK
ipcRenderer.on('action-show-ping-toast-received-ack', (event, data) => {
var toastPINGreceivedACK = document.getElementById('toastPINGreceivedACK');
var toast = bootstrap.Toast.getOrCreateInstance(toastPINGreceivedACK); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='received ping ack', duration=5000);
});
// DATA CHANNEL OPENING TOAST
ipcRenderer.on('action-show-arq-toast-datachannel-opening', (event, data) => {
var toastDATACHANNELopening = document.getElementById('toastDATACHANNELopening');
var toast = bootstrap.Toast.getOrCreateInstance(toastDATACHANNELopening); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='secondary', icon='bi-broadcast', content='opening datachannel', duration=5000);
});
// DATA CHANNEL WAITING TOAST
ipcRenderer.on('action-show-arq-toast-datachannel-waiting', (event, data) => {
var toastDATACHANNELwaiting = document.getElementById('toastDATACHANNELwaiting');
var toast = bootstrap.Toast.getOrCreateInstance(toastDATACHANNELwaiting); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='warning', icon='bi-broadcast', content='waiting...', duration=5000);
});
// DATA CHANNEL OPEN TOAST
ipcRenderer.on('action-show-arq-toast-datachannel-open', (event, data) => {
var toastDATACHANNELopen = document.getElementById('toastDATACHANNELopen');
var toast = bootstrap.Toast.getOrCreateInstance(toastDATACHANNELopen); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='datachannel open', duration=5000);
});
// DATA CHANNEL RECEIVED OPENER TOAST
ipcRenderer.on('action-show-arq-toast-datachannel-received-opener', (event, data) => {
var toastDATACHANNELreceivedopener = document.getElementById('toastDATACHANNELreceivedopener');
var toast = bootstrap.Toast.getOrCreateInstance(toastDATACHANNELreceivedopener); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='received datachannel opener', duration=5000);
});
// ARQ TRANSMISSION FAILED
// TODO: use for both - transmitting and receiving --> we need to change the IDs
ipcRenderer.on('action-show-arq-toast-transmission-failed', (event, data) => {
document.getElementById("transmission_progress").className = "progress-bar progress-bar-striped bg-danger";
var toast = bootstrap.Toast.getOrCreateInstance(toastARQtransmittingfailed); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='danger', icon='bi-broadcast', content='transmission failed', duration=5000);
});
// ARQ TRANSMISSION FAILED (Version mismatch)
ipcRenderer.on('action-show-arq-toast-transmission-failed-ver', (event, data) => {
document.getElementById("transmission_progress").className = "progress-bar progress-bar-striped bg-danger";
var toast = bootstrap.Toast.getOrCreateInstance(toastARQtransmittingfailedver); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='danger', icon='bi-broadcast', content='protocoll version missmatch', duration=5000);
});
// ARQ TRANSMISSION STOPPED
// TODO: RENAME ID -- WRONG
ipcRenderer.on('action-show-arq-toast-transmission-stopped', (event, data) => {
var toastDATACHANNELreceivedopener = document.getElementById('toastTRANSMISSIONstopped');
var toast = bootstrap.Toast.getOrCreateInstance(toastDATACHANNELreceivedopener); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='transmission stopped', duration=5000);
});
// ARQ TRANSMISSION FAILED
// TODO: USE FOR TX AND RX
ipcRenderer.on('action-show-arq-toast-transmission-failed', (event, data) => {
document.getElementById("transmission_progress").className = "progress-bar progress-bar-striped bg-danger";
var toastARQreceivingfailed = document.getElementById('toastARQreceivingfailed');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQreceivingfailed); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='arq transmission failed', duration=5000);
});
// ARQ TRANSMISSION TRANSMITTED
ipcRenderer.on('action-show-arq-toast-transmission-transmitted', (event, data) => {
document.getElementById("transmission_progress").className = "progress-bar progress-bar-striped bg-success";
var toastARQtransmittingsuccess = document.getElementById('toastARQtransmittingsuccess');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQtransmittingsuccess); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='data transmitted', duration=5000);
});
// ARQ TRANSMISSION TRANSMITTING
ipcRenderer.on('action-show-arq-toast-transmission-transmitting', (event, data) => {
//document.getElementById("toastARQtransmittingSNR").className = "progress-bar progress-bar-striped progress-bar-animated bg-primary";
var toastARQtransmittingSNR = document.getElementById('toastARQtransmittingSNR');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQtransmittingSNR); // Returns a Bootstrap toast instance
var irs_snr = data["data"][0].irs_snr;
if(irs_snr <= 0){
document.getElementById("toastARQtransmittingSNR").className = "toast align-items-center text-white bg-danger border-0";
document.getElementById('toastARQtransmittingSNRValue').innerHTML = " low " + irs_snr;
toast.show();
displayToast(type='warning', icon='bi-broadcast', content='low link margin -' + irs_snr, duration=5000);
} else if(irs_snr > 0 && irs_snr <= 5){
document.getElementById("toastARQtransmittingSNR").className = "toast align-items-center text-white bg-warning border-0";
document.getElementById('toastARQtransmittingSNRValue').innerHTML = " okay " + irs_snr;
toast.show();
displayToast(type='warning', icon='bi-broadcast', content='medium link margin -' + irs_snr, duration=5000);
} else if(irs_snr > 5 && irs_snr < 12.7){
document.getElementById("toastARQtransmittingSNR").className = "toast align-items-center text-white bg-success border-0";
document.getElementById('toastARQtransmittingSNRValue').innerHTML = " good " + irs_snr;
toast.show();
displayToast(type='success', icon='bi-broadcast', content='high link margin -' + irs_snr, duration=5000);
} else if(irs_snr >= 12.7){
document.getElementById("toastARQtransmittingSNR").className = "toast align-items-center text-white bg-success border-0";
document.getElementById('toastARQtransmittingSNRValue').innerHTML = " really good 12.7+";
toast.show();
displayToast(type='success', icon='bi-broadcast', content='very high link margin -' + irs_snr, duration=5000);
} else {
console.log("no snr info available")
document.getElementById("transmission_progress").className = "progress-bar progress-bar-striped progress-bar-animated bg-primary";
var toastARQtransmitting = document.getElementById('toastARQtransmitting');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQtransmitting); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='info', icon='bi-broadcast', content='no snr information', duration=5000);
}
});
// ARQ TRANSMISSION RECEIVED
ipcRenderer.on('action-show-arq-toast-transmission-received', (event, data) => {
document.getElementById("transmission_progress").className = "progress-bar progress-bar-striped bg-success";
var toastARQreceivingsuccess = document.getElementById('toastARQreceivingsuccess');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQreceivingsuccess); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='warning', icon='bi-broadcast', content='received', duration=5000);
});
// ARQ TRANSMISSION RECEIVING
ipcRenderer.on('action-show-arq-toast-transmission-receiving', (event, data) => {
document.getElementById("transmission_progress").className = "progress-bar progress-bar-striped progress-bar-animated bg-primary";
var toastARQsessionreceiving = document.getElementById('toastARQreceiving');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQsessionreceiving); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='primary', icon='bi-broadcast', content='session receiving', duration=5000);
});
// ARQ SESSION CONNECTING
ipcRenderer.on('action-show-arq-toast-session-connecting', (event, data) => {
var toastARQsessionconnecting = document.getElementById('toastARQsessionconnecting');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQsessionconnecting); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='primary', icon='bi-broadcast', content='connecting...', duration=5000);
});
// ARQ SESSION CONNECTED
ipcRenderer.on('action-show-arq-toast-session-connected', (event, data) => {
var toastARQsessionconnected = document.getElementById('toastARQsessionconnected');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQsessionconnected); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='success', icon='bi-broadcast', content='session connected', duration=5000);
});
// ARQ SESSION CONNECTED
ipcRenderer.on('action-show-arq-toast-session-waiting', (event, data) => {
var toastARQsessionwaiting = document.getElementById('toastARQsessionwaiting');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQsessionwaiting); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='warning', icon='bi-broadcast', content='session waiting...', duration=5000);
});
// ARQ SESSION CLOSE
ipcRenderer.on('action-show-arq-toast-session-close', (event, data) => {
var toastARQsessionclose = document.getElementById('toastARQsessionclose');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQsessionclose); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='warning', icon='bi-broadcast', content='session close', duration=5000);
});
// ARQ SESSION FAILED
ipcRenderer.on('action-show-arq-toast-session-failed', (event, data) => {
var toastARQsessionfailed = document.getElementById('toastARQsessionfailed');
var toast = bootstrap.Toast.getOrCreateInstance(toastARQsessionfailed); // Returns a Bootstrap toast instance
toast.show();
displayToast(type='danger', icon='bi-broadcast', content='session failed', duration=5000);
});
@ -3012,4 +2934,49 @@ function formatBytes(bytes, decimals = 1) {
const i = Math.floor(Math.log(bytes) / Math.log(k))
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
}
// display toast
function displayToast(type='primary', icon='bi-info', content='default', duration=5000){
mainToastContainer = document.getElementById("mainToastContainer");
let randomID = uuidv4()
let toastCode = `
<div class="toast align-items-center bg-outline-${type} border-1" id="${randomID}" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body p-0 m-0 bg-white rounded-2 w-100">
<div class="row p-1 m-0">
<div class="col-auto bg-${type} rounded-start rounded-2 d-flex align-items-center">
<i class="bi ${icon}" style="font-size: 1rem; color: white"></i>
</div>
<div class="col p-2">
${content}
</div>
</div>
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
`;
// insert toast to toast container
mainToastContainer.insertAdjacentHTML("beforeend", toastCode);
// register toast
let toastHTMLElement = document.getElementById(randomID);
let toast = bootstrap.Toast.getOrCreateInstance(toastHTMLElement); // Returns a Bootstrap toast instance
toast._config.delay = duration;
// show toast
toast.show()
//register event listener if toast is hidden
toastHTMLElement.addEventListener('hidden.bs.toast', () => {
// remove eventListener
toastHTMLElement.removeEventListener('hidden.bs.toast', this);
// remove toast
toastHTMLElement.remove();
})
}

View file

@ -137,257 +137,7 @@
<!-------------------------------- MAIN AREA ---------------->
<!-------------------------------- INFO TOASTS ---------------->
<div aria-live="polite" aria-atomic="true" class="position-relative" style="z-index: 500">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- SENDING CQ -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastCQsending" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body"><i class="bi bi-activity"
style="font-size: 1rem; color: white;"></i>Sending CQ CQ CQ</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- RECEIVING CQ -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastCQreceiving" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Receiving CQ CQ CQ</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- RECEIVING QRV -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastQRVreceiving" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Receiving a QRV signal!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- TRANSMITTING QRV -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastQRVtransmitting"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Transmitting a QRV signal!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- RECEIVING BEACON -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastBEACONreceiving"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Receiving a beacon signal!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- SENDING PING -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastPINGsending" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Sending Ping</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- RECEIVED PING -->
<div class="toast align-items-center text-white bg-primary border-0" id="toastPINGreceiving"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">RECEIVED PING REQUEST</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- RECEIVED PING ACK -->
<div class="toast align-items-center text-white bg-success border-0" id="toastPINGreceivedACK"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">RECEIVED PING ACKNOWLEDGE</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- DATACHANNEL OPENING -->
<div class="toast align-items-center text-white bg-secondary border-0" id="toastDATACHANNELopening"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">OPENING DATACHANNEL</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- DATACHANNEL OPEN -->
<div class="toast align-items-center text-white bg-success border-0" id="toastDATACHANNELopen"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">DATACHANNEL OPENED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- DATACHANNEL WAITING -->
<div class="toast align-items-center text-white bg-warning border-0" id="toastDATACHANNELwaiting"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">DATACHANNEL BUSY! Waiting...</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- STOPPING TRANSMISSION -->
<div class="toast align-items-center text-white bg-danger border-0" id="toastTRANSMISSIONstopped"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Transmission stopped!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- DATACHANNEL RECEIVED OPENER -->
<div class="toast align-items-center text-white bg-secondary border-0"
id="toastDATACHANNELreceivedopener" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">INCOMING FILE TRANSMISSION</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- DATACHANNEL FAILED -->
<div class="toast align-items-center text-white bg-danger border-0" id="toastDATACHANNELfailed"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">OPENING DATACHANNEL FAILED</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ RECEIVING -->
<div class="toast align-items-center text-white bg-secondary border-0" id="toastARQreceiving"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Receiving file...</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ RECEIVING SUCCESS -->
<div class="toast align-items-center text-white bg-success border-0" id="toastARQreceivingsuccess"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">FILE SUCCESSFULLY RECEIVED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ RECEIVING FAILED -->
<div class="toast align-items-center text-white bg-danger border-0" id="toastARQreceivingfailed"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">FILE NOT SUCCESSFULLY RECEIVED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ TRANSMITTING -->
<div class="toast align-items-center text-white bg-secondary border-0" id="toastARQtransmitting"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">TRANSMITTING...</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ SNR INFORMATION -->
<div class="toast align-items-center text-white bg-secondary border-0" id="toastARQtransmittingSNR"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">TRANSMITTING - SNR IRS:<span id="toastARQtransmittingSNRValue"></span>
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ TRANSMITTING FAILED -->
<div class="toast align-items-center text-white bg-danger border-0" id="toastARQtransmittingfailed"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">TRANSMITTING FILE FAILED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ TRANSMITTING FAILED -->
<div class="toast align-items-center text-white bg-danger border-0" id="toastARQtransmittingfailedver"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">TRANSMITTING FAILED, VERSION MISMATCH!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ TRANSMITTING SUCCESS-->
<div class="toast align-items-center text-white bg-success border-0" id="toastARQtransmittingsuccess"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">FILE SUCCESSFULLY TRANSMITTED!</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ SESSION CONNECTING-->
<div class="toast align-items-center text-white bg-warning border-0" id="toastARQsessionconnecting"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">CONNECTING / OPENING ARQ SESSION</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ SESSION CONNECTED-->
<div class="toast align-items-center text-white bg-success border-0" id="toastARQsessionconnected"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">CONNECTED / ARQ SESSION</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ SESSION WAITING-->
<div class="toast align-items-center text-white bg-warning border-0" id="toastARQsessionwaiting"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">CHANNEL BUSY - Waiting...</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ SESSION CLOSE-->
<div class="toast align-items-center text-white bg-success border-0" id="toastARQsessionclose"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">CLOSE / ARQ SESSION</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<!-- ARQ SESSION FAILED-->
<div class="toast align-items-center text-white bg-danger border-0" id="toastARQsessionfailed"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">FAILED / ARQ SESSION</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
<div class="toast-container position-absolute top-0 end-0 p-3" id="mainToastContainer"></div>
</div>
<!------------------------------------------------------------------------------------------>
<div class="container p-0" style="margin-top:55px">