From 1de6c3489fc65dc3346be6c6e18791de61bd2036 Mon Sep 17 00:00:00 2001
From: DJ2LS <75909252+DJ2LS@users.noreply.github.com>
Date: Sat, 11 Feb 2023 10:23:04 +0100
Subject: [PATCH] first run with new toast system

---
 gui/preload-main.js | 193 ++++++++++++++-------------------
 gui/src/index.html  | 252 +-------------------------------------------
 2 files changed, 81 insertions(+), 364 deletions(-)

diff --git a/gui/preload-main.js b/gui/preload-main.js
index da27bff1..4171799d 100644
--- a/gui/preload-main.js
+++ b/gui/preload-main.js
@@ -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();
+    })
+
 }
\ No newline at end of file
diff --git a/gui/src/index.html b/gui/src/index.html
index 3599ddcc..94761a11 100644
--- a/gui/src/index.html
+++ b/gui/src/index.html
@@ -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">