working toasts

This commit is contained in:
DJ2LS 2023-09-20 19:19:10 +02:00
parent 3d2a13f1aa
commit e26963770e
2 changed files with 74 additions and 0 deletions

View file

@ -0,0 +1,51 @@
const { v4: uuidv4 } = require("uuid");
import * as bootstrap from 'bootstrap'
export function displayToast(
type,
icon,
content,
duration,
) {
let 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

@ -3,6 +3,7 @@ const path = require("path");
const FD = require("./src/js/freedata.js");
//import FD from './freedata.js';
import { newMessageReceived } from './chatHandler.js';
import {displayToast} from './popupHandler.js'
// ----------------- init pinia stores -------------
import { setActivePinia } from 'pinia';
@ -241,6 +242,8 @@ client.on("data", function (socketdata) {
}
// ----------- catch tnc messages START -----------
//init message variable
var message = ''
if (data["freedata"] == "tnc-message") {
switch (data["fec"]) {
case "is_writing":
@ -262,44 +265,64 @@ client.on("data", function (socketdata) {
switch (data["cq"]) {
case "transmitting":
// CQ TRANSMITTING
displayToast("success", "bi-arrow-left-right", "transmitting CQ", 5000);
break;
case "received":
// CQ RECEIVED
displayToast("success", "bi-arrow-left-right", "received CQ from ", 5000);
break;
}
switch (data["qrv"]) {
case "transmitting":
// QRV TRANSMITTING
displayToast("success", "bi-arrow-left-right", "transmitting QRV ", 5000);
break;
case "received":
// QRV RECEIVED
message = "received QRV from " + data['dxcallsign'] + " | " + data['dxgrid']
displayToast("success", "bi-arrow-left-right", message, 5000);
break;
}
switch (data["beacon"]) {
case "transmitting":
// BEACON TRANSMITTING
displayToast("success", "bi-arrow-left-right", "transmitting BEACON ", 5000);
break;
case "received":
// BEACON RECEIVED
message = "received BEACON from " + data['dxcallsign'] + " | " + data['dxgrid']
displayToast("success", "bi-arrow-left-right", message, 5000);
break;
}
switch (data["ping"]) {
case "transmitting":
// PING TRANSMITTING
message = "transmitting PING to " + data['dxcallsign']
displayToast("success", "bi-arrow-left-right", message, 5000);
break;
case "received":
// PING RECEIVED
message = "received PING from " + data['dxcallsign'] + " | " + data['dxgrid']
displayToast("success", "bi-arrow-left-right", message, 5000);
break;
case "acknowledge":
// PING ACKNOWLEDGE
message = "received PING ACK from " + data['dxcallsign'] + " | " + data['dxgrid']
displayToast("success", "bi-arrow-left-right", message, 5000);
break;
}