From 2e60b1b70786c7e0e222a38b8b485b3edbde90d5 Mon Sep 17 00:00:00 2001 From: Tony <97451137+TonybynMp4@users.noreply.github.com> Date: Fri, 13 Oct 2023 17:59:12 +0200 Subject: [PATCH 1/3] yeet jquery (& animate) --- html/index.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/html/index.html b/html/index.html index 08f983d..ea33645 100644 --- a/html/index.html +++ b/html/index.html @@ -5,14 +5,12 @@ qbx-dispatch - - -
+
\ No newline at end of file From 34c4a82105b2b622fd3a64345f782a5521b4c0bc Mon Sep 17 00:00:00 2001 From: Tony <97451137+TonybynMp4@users.noreply.github.com> Date: Fri, 13 Oct 2023 17:59:31 +0200 Subject: [PATCH 2/3] add my own animations --- html/style.css | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/html/style.css b/html/style.css index c142516..a091f17 100644 --- a/html/style.css +++ b/html/style.css @@ -35,6 +35,11 @@ body { border-top-left-radius: 2vh; display: flex; flex-direction: column; + animation: call-appear 1.5s ease; +} + +.dispatch-call.removing{ + animation: call-disappear 1.5s ease; } .top-bar { @@ -139,9 +144,30 @@ body { background-color: var(--color-ambulance); } -/* */ @keyframes gradients { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} +} + +@keyframes call-appear { + 0% { + opacity: 0; + transform: translateX(100%); + } + 100% { + opacity: 1; + transform: translateX(0%); + } +} + +@keyframes call-disappear { + 0% { + opacity: 1; + transform: translateX(0%); + } + 100% { + opacity: 0; + transform: translateX(100%); + } } \ No newline at end of file From fca831366e2ff60d4d7c0112585ee3d053f9de19 Mon Sep 17 00:00:00 2001 From: Tony <97451137+TonybynMp4@users.noreply.github.com> Date: Fri, 13 Oct 2023 18:04:43 +0200 Subject: [PATCH 3/3] convert jquery to vanilla JS --- html/main.js | 125 +++++++++++++++++++++++++-------------------------- 1 file changed, 62 insertions(+), 63 deletions(-) diff --git a/html/main.js b/html/main.js index 038a5f0..96c5b76 100644 --- a/html/main.js +++ b/html/main.js @@ -6,24 +6,26 @@ fetch(`https://${GetParentResourceName()}/GetLocales`, { locales = data; }); -$(document).ready(() => { +document.addEventListener('DOMContentLoaded', () => { window.addEventListener('message', function (event) { if (event.data.type == "AddCall") { NewCall(event.data.id, event.data.data.length, event.data.data); - }else if (event.data.type == "RemoveCall") { + } else if (event.data.type == "RemoveCall") { RemoveCall(); }; }); }); -// returns the locale for a given path (like in LUA) +// returns the locale for a given path (like in the core's lang:t) function locale(localeindex) { return locales[localeindex]; } function NewCall(Id, length, data) { - let Call = ` -
+ const callElement = document.createElement('div'); + callElement.classList.add('dispatch-call'); + callElement.setAttribute('id', Id); + let callInnerHTML = `
#${Id}
${data.tencode}
@@ -34,147 +36,144 @@ function NewCall(Id, length, data) {
` - if (data.location || data.heading){ + if (data.location || data.heading) { let style = `margin-right: .5vh;` - Call += `
` + callInnerHTML += `
` if (data.location) { - Call += ` ${data.location}` + callInnerHTML += ` ${data.location}` } if (data.heading) { if (data.location) { style += ` margin-left: 2vh;` } - Call += ` ${data.heading}` + callInnerHTML += ` ${data.heading}` } - Call += `
` + callInnerHTML += `
` } if (data.speed) { - Call += `
${data.speed}
` + callInnerHTML += `
${data.speed}
` } if (data.camId) { - Call += `
#${data.camId}
` + callInnerHTML += `
#${data.camId}
` } if (data.weapon || data.automatic || data.weaponclass) { let style = `margin-right: .5vh;` - Call += `
` + callInnerHTML += `
` if (data.weapon) { - Call += ` ${data.weapon}` + callInnerHTML += ` ${data.weapon}` } if (data.weaponclass) { if (data.weapon) { style += ` margin-left: 2vh;` } - Call += ` ${data.weaponclass}` + callInnerHTML += ` ${data.weaponclass}` } if (data.automatic) { if (data.weapon || !data.weaponclass) { style += ` margin-left: 2vh;` } - Call += ` ${locale('automatic')}` + callInnerHTML += ` ${locale('automatic')}` } - Call += `
` + callInnerHTML += `
` } if (data.model || data.class || data.color || data.plate || data.doors) { let style = `margin-right: .5vh;` - Call += `
` + callInnerHTML += `
` if (data.model) { - Call += ` ${data.model}` + callInnerHTML += ` ${data.model}` } if (data.class) { if (data.model) { style += ` margin-left: 2vh;` } - Call += ` ${data.class}` + callInnerHTML += ` ${data.class}` } if (data.plate) { if (data.model || !data.class) { style += ` margin-left: 2vh;` } - Call += ` ${data.plate}` + callInnerHTML += ` ${data.plate}` } - Call += `
` + callInnerHTML += `
` if (data.doors) { - Call += `
${data.doors}
` + callInnerHTML += `
${data.doors}
` } if (data.color) { - Call += `
${data.color}
` + callInnerHTML += `
${data.color}
` } } if (data.callsign) { - Call += `
${data.callsign}
` + callInnerHTML += `
${data.callsign}
` } if (data.name || data.number) { let style = `margin-right: .5vh;` - Call += `
` + callInnerHTML += `
` if (data.number) { - Call += ` ${data.number}` + callInnerHTML += ` ${data.number}` } if (data.name) { if (data.number) { style += ` margin-left: 2vh;` } - Call += ` ${data.name}` + callInnerHTML += ` ${data.name}` } - Call += `
` + callInnerHTML += `
` } if (typeof data.gender == 'number') { - icon = "fas fa-mars" - gender = 'Male' - if (data.gender === 1){ - icon = "fas fa-venus" - gender = 'Female' - } - Call += `
${gender}
` + const icon = data.gender === 1 && "fas fa-venus" || "fas fa-mars" + const gender = data.gender === 1 && 'Female' || 'Male' + callInnerHTML += `
${gender}
` } if (data.information) { - Call += `
${data.information}
` + callInnerHTML += `
${data.information}
` } - Call += `
` + callInnerHTML += `` - $(".dispatch-container").prepend(Call) + callElement.innerHTML = callInnerHTML; + document.getElementById("dispatch-container").appendChild(callElement); length = length * 1000 || (data.type == 1 && 15000) || (data.type == 2 && 10000) || 8000 UpdateCalls(); - $(`.${Id}`).addClass("animate__slideInRight"); setTimeout(() => { - $(`.${Id}`).addClass("animate__slideOutRight"); + document.getElementById(Id).classList.add("removing"); setTimeout(() => { - $(`.${Id}`).remove(); + document.getElementById(Id).remove(); UpdateCalls(); }, 1500); - }, length); }; function UpdateCalls() { - if ($(".dispatch-call").length == 0) return; - $(".dispatch-call").not(":first").each(function() { - if ($(this).find(".call-buttons").length > 0) { - $(this).find(".call-buttons").remove(); + const calls = document.getElementsByClassName('dispatch-call') + if (calls.length == 0) return; + Object.keys(calls).forEach(function(call, index) { + if (index == 0) return; + const callButtons = call.getElementsByClassName('call-buttons')[0]; + if (callButtons) { + callButtons.remove(); } }); - if ($(".dispatch-call").first().find(".call-buttons").length == 0) { - $(".dispatch-call").first().find(".informations-holder").after(` -
-
-
${locale('accept') || 'Accept'}
-
-
-
${locale('deny') || 'Deny'}
-
+ if (calls[0].getElementsByClassName("call-buttons").length != 0) return; + calls[0].getElementsByClassName("informations-holder")[0].insertAdjacentHTML('afterend', ` +
+
+
${locale('accept') || 'Accept'}
- `); - } +
+
${locale('deny') || 'Deny'}
+
+
+ `); } function RemoveCall() { - if ($(".dispatch-call").length == 0) return; - if ($(".dispatch-call").first().hasClass("animate__slideOutRight")) return; - const Id = $(".dispatch-call").first().attr("class").split(" ")[1]; - $(`.${Id}`).addClass("animate__slideOutRight"); + const calls = document.getElementsByClassName('dispatch-call') + if (calls.length == 0) return; + if (calls[0].classList.contains("animate__slideOutRight")) return; + calls[0].classList.add("animate__slideOutRight"); setTimeout(() => { - $(`.${Id}`).remove(); + calls[0].remove(); UpdateCalls(); fetch(`https://${GetParentResourceName()}/RemoveCall`, { method: 'POST'