mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
working toasts
This commit is contained in:
parent
3d2a13f1aa
commit
e26963770e
2 changed files with 74 additions and 0 deletions
51
gui_vue/src/js/popupHandler.js
Normal file
51
gui_vue/src/js/popupHandler.js
Normal 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();
|
||||||
|
});
|
||||||
|
}
|
|
@ -3,6 +3,7 @@ const path = require("path");
|
||||||
const FD = require("./src/js/freedata.js");
|
const FD = require("./src/js/freedata.js");
|
||||||
//import FD from './freedata.js';
|
//import FD from './freedata.js';
|
||||||
import { newMessageReceived } from './chatHandler.js';
|
import { newMessageReceived } from './chatHandler.js';
|
||||||
|
import {displayToast} from './popupHandler.js'
|
||||||
|
|
||||||
// ----------------- init pinia stores -------------
|
// ----------------- init pinia stores -------------
|
||||||
import { setActivePinia } from 'pinia';
|
import { setActivePinia } from 'pinia';
|
||||||
|
@ -241,6 +242,8 @@ client.on("data", function (socketdata) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// ----------- catch tnc messages START -----------
|
// ----------- catch tnc messages START -----------
|
||||||
|
//init message variable
|
||||||
|
var message = ''
|
||||||
if (data["freedata"] == "tnc-message") {
|
if (data["freedata"] == "tnc-message") {
|
||||||
switch (data["fec"]) {
|
switch (data["fec"]) {
|
||||||
case "is_writing":
|
case "is_writing":
|
||||||
|
@ -262,44 +265,64 @@ client.on("data", function (socketdata) {
|
||||||
switch (data["cq"]) {
|
switch (data["cq"]) {
|
||||||
case "transmitting":
|
case "transmitting":
|
||||||
// CQ TRANSMITTING
|
// CQ TRANSMITTING
|
||||||
|
displayToast("success", "bi-arrow-left-right", "transmitting CQ", 5000);
|
||||||
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "received":
|
case "received":
|
||||||
// CQ RECEIVED
|
// CQ RECEIVED
|
||||||
|
displayToast("success", "bi-arrow-left-right", "received CQ from ", 5000);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (data["qrv"]) {
|
switch (data["qrv"]) {
|
||||||
case "transmitting":
|
case "transmitting":
|
||||||
// QRV TRANSMITTING
|
// QRV TRANSMITTING
|
||||||
|
displayToast("success", "bi-arrow-left-right", "transmitting QRV ", 5000);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "received":
|
case "received":
|
||||||
// QRV RECEIVED
|
// QRV RECEIVED
|
||||||
|
message = "received QRV from " + data['dxcallsign'] + " | " + data['dxgrid']
|
||||||
|
displayToast("success", "bi-arrow-left-right", message, 5000);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (data["beacon"]) {
|
switch (data["beacon"]) {
|
||||||
case "transmitting":
|
case "transmitting":
|
||||||
// BEACON TRANSMITTING
|
// BEACON TRANSMITTING
|
||||||
|
displayToast("success", "bi-arrow-left-right", "transmitting BEACON ", 5000);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "received":
|
case "received":
|
||||||
// BEACON RECEIVED
|
// BEACON RECEIVED
|
||||||
|
message = "received BEACON from " + data['dxcallsign'] + " | " + data['dxgrid']
|
||||||
|
displayToast("success", "bi-arrow-left-right", message, 5000);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (data["ping"]) {
|
switch (data["ping"]) {
|
||||||
case "transmitting":
|
case "transmitting":
|
||||||
// PING TRANSMITTING
|
// PING TRANSMITTING
|
||||||
|
message = "transmitting PING to " + data['dxcallsign']
|
||||||
|
displayToast("success", "bi-arrow-left-right", message, 5000);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "received":
|
case "received":
|
||||||
// PING RECEIVED
|
// PING RECEIVED
|
||||||
|
message = "received PING from " + data['dxcallsign'] + " | " + data['dxgrid']
|
||||||
|
displayToast("success", "bi-arrow-left-right", message, 5000);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "acknowledge":
|
case "acknowledge":
|
||||||
// PING ACKNOWLEDGE
|
// PING ACKNOWLEDGE
|
||||||
|
message = "received PING ACK from " + data['dxcallsign'] + " | " + data['dxgrid']
|
||||||
|
displayToast("success", "bi-arrow-left-right", message, 5000);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue