Skip to content

Commit 9fc4b77

Browse files
lamATnginxlamATnginx
authored
Fixed N4A cost calculator (#1097)
fix: replaced jquery with vanilla js to fix calculator
1 parent 113e35f commit 9fc4b77

File tree

1 file changed

+84
-94
lines changed

1 file changed

+84
-94
lines changed

‎static/nginxaas-azure/js/cost-calculator_v2.js‎

Lines changed: 84 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// todo [heftel] - if we are going to live with this for a while then this file should be broken up with
22
// modules. Browser support shouldn't be a concern anymore? - https://caniuse.com/es6-module
33

4-
(function () {
4+
(() => {
55
/**
66
* @typedef {typeof costs} Costs
77
* @constant
@@ -167,66 +167,66 @@
167167
};
168168

169169
////////
170-
// Keep element refs with hugo global jquery
170+
// Keep element refs with hugo global HTMLElement
171171
////////
172172

173173
/**
174-
* @type {Object.<string, jQuery>}
174+
* @type {Object.<string, HTMLElement>}
175175
*/
176176
const costFormElements = {
177-
region: $("#region"),
178-
numNcus: $("#numNcus"),
179-
numHours: $("#numHours"),
180-
numListenPorts: $("#numListenPorts"),
181-
isWAF: $("#isWAF"),
177+
region: document.getElementById("region"),
178+
numNcus: document.getElementById("numNcus"),
179+
numHours: document.getElementById("numHours"),
180+
numListenPorts: document.getElementById("numListenPorts"),
181+
isWAF: document.getElementById("isWAF"),
182182
};
183183

184184
/**
185-
* @type {Object.<string, jQuery>}
185+
* @type {Object.<string, HTMLElement>}
186186
*/
187187
const costFormLabelElements = {
188-
numNcusEstVal: $("#numNcusEstVal"),
188+
numNcusEstVal: document.getElementById("numNcusEstVal"),
189189
};
190190

191191
/**
192-
* @type {Object.<string, jQuery>}
192+
* @type {Object.<string, HTMLElement>}
193193
*/
194194
const ncuFormElements = {
195-
avgNewConnsPerSec: $("#avgNewConnsPerSec"),
196-
avgConnDuration: $("#avgConnDuration"),
197-
totalBandwidth: $("#totalBandwidth"),
195+
avgNewConnsPerSec: document.getElementById("avgNewConnsPerSec"),
196+
avgConnDuration: document.getElementById("avgConnDuration"),
197+
totalBandwidth: document.getElementById("totalBandwidth"),
198198
};
199199

200200
/**
201-
* @type {Object.<string, jQuery>}
201+
* @type {Object.<string, HTMLElement>}
202202
*/
203203
const ncuEstimateElements = {
204-
ncuEstConnRate: $("#ncuEstConnRate"),
205-
ncuEstConnDuration: $("#ncuEstConnDuration"),
206-
ncuEstAvgConn: $("#ncuEstAvgConn"),
207-
ncuEstAvgConn2: $("#ncuEstAvgConn2"),
208-
ncuEstConnRate2: $("#ncuEstConnRate2"),
209-
ncuEstDataRate: $("#ncuEstDataRate"),
210-
ncuEstMin1: $("#ncuEstMin1"),
211-
ncuEstMin: $("#ncuEstMin"),
212-
ncuEstTotal: $("#ncuEstTotal"),
213-
ncuEstConnsPerNcu: $("#ncuEstConnsPerNcu"),
214-
ncuEstConnsPerSecondPerNcu: $("#ncuEstConnsPerSecondPerNcu"),
215-
ncuEstMbpsPerNcu: $("#ncuEstMbpsPerNcu"),
204+
ncuEstConnRate: document.getElementById("ncuEstConnRate"),
205+
ncuEstConnDuration: document.getElementById("ncuEstConnDuration"),
206+
ncuEstAvgConn: document.getElementById("ncuEstAvgConn"),
207+
ncuEstAvgConn2: document.getElementById("ncuEstAvgConn2"),
208+
ncuEstConnRate2: document.getElementById("ncuEstConnRate2"),
209+
ncuEstDataRate: document.getElementById("ncuEstDataRate"),
210+
ncuEstMin1: document.getElementById("ncuEstMin1"),
211+
ncuEstMin: document.getElementById("ncuEstMin"),
212+
ncuEstTotal: document.getElementById("ncuEstTotal"),
213+
ncuEstConnsPerNcu: document.getElementById("ncuEstConnsPerNcu"),
214+
ncuEstConnsPerSecondPerNcu: document.getElementById("ncuEstConnsPerSecondPerNcu"),
215+
ncuEstMbpsPerNcu: document.getElementById("ncuEstMbpsPerNcu"),
216216
};
217217

218218
/**
219-
* @type {Object.<string, jQuery>}
219+
* @type {Object.<string, HTMLElement>}
220220
*/
221221
const totalCostDetailElements = {
222-
ncus: $("#cost-detail-ncus"),
223-
hours: $("#cost-detail-hours"),
224-
tierCost: $("#cost-detail-tier-cost"),
225-
listenPorts: $("#cost-detail-listen-ports"),
226-
listenPortsCost: $("#cost-detail-listen-ports-cost"),
227-
waf: $("#cost-detail-waf"),
228-
total: $("#cost-detail-total"),
229-
tiersCostsTable: $("#tiers-costs-table"),
222+
ncus: document.getElementById("cost-detail-ncus"),
223+
hours: document.getElementById("cost-detail-hours"),
224+
tierCost: document.getElementById("cost-detail-tier-cost"),
225+
listenPorts: document.getElementById("cost-detail-listen-ports"),
226+
listenPortsCost: document.getElementById("cost-detail-listen-ports-cost"),
227+
waf: document.getElementById("cost-detail-waf"),
228+
total: document.getElementById("cost-detail-total"),
229+
tiersCostsTable: document.getElementById("tiers-costs-table"),
230230
};
231231

232232
///////
@@ -245,7 +245,7 @@
245245
ncuEstimateValues = ncuEstimateValuesState
246246
) => {
247247
Object.keys(costFormElements).map((elName) => {
248-
costFormElements[elName].on("change", (evt) => {
248+
costFormElements[elName].addEventListener("change", (evt) => {
249249
if (elName === "isWAF") {
250250
values[elName] = evt.target.checked;
251251
} else {
@@ -256,13 +256,13 @@
256256
});
257257

258258
Object.keys(ncuFormElements).map((elName) => {
259-
ncuFormElements[elName].on("change", (evt) => {
259+
ncuFormElements[elName].addEventListener("change", (evt) => {
260260
ncuEstimateValues[elName] = evt.target.value;
261261
updateNcuEstimate(ncuEstimateValues);
262262
});
263263
});
264264

265-
$("#printButton").click(() => {
265+
document.getElementById("printButton").addEventListener('click', () => {
266266
printCostEstimate();
267267
});
268268
};
@@ -276,7 +276,7 @@
276276
* @param {Costs["regionsTiers"]} regionsTiers
277277
*/
278278
const populateTierSelect = (regionsTiers) => {
279-
const $selectTarget = $("#region");
279+
const $selectTarget = document.getElementById("region");
280280

281281
Object.keys(regionsTiers).forEach((tierKey) => {
282282
const option = document.createElement("option");
@@ -320,10 +320,10 @@
320320
const initializeValues = (values = calculatorValuesState) => {
321321
Object.keys(costFormElements).map((elName) => {
322322
const curEl = costFormElements[elName];
323-
if (curEl.is("input") || curEl.is("select")) {
324-
curEl.val(values[elName]);
323+
if (curEl.tagName.toLowerCase() === "input" || curEl.tagName.toLowerCase() === "select") {
324+
curEl.value = values[elName];
325325
} else {
326-
$(curEl).children("input").first().val(values[elName]);
326+
$(curEl).children("input").first().value = values[elName];
327327
}
328328
});
329329
};
@@ -336,22 +336,21 @@
336336
const initializeNcuEstimateValues = (values = ncuEstimateValuesState) => {
337337
Object.keys(ncuFormElements).map((elName) => {
338338
const curEl = ncuFormElements[elName];
339-
if (curEl.is("input") || curEl.is("select")) {
340-
curEl.val(values[elName]);
339+
if (curEl.tagName.toLowerCase() === "input" || curEl.tagName.toLowerCase() === "select") {
340+
curEl.value = values[elName];
341341
} else {
342-
$(curEl).children("input").first().val(values[elName]);
342+
$(curEl).children("input").first().value = values[elName];
343343
}
344344
});
345345

346346
updateNcuEstimate(ncuEstimateValuesState);
347347

348-
ncuEstimateElements.ncuEstConnsPerNcu.text(ncuParameterVals.connsPerNcu);
349-
ncuEstimateElements.ncuEstConnsPerSecondPerNcu.text(
348+
ncuEstimateElements.ncuEstConnsPerNcu.textContent = ncuParameterVals.connsPerNcu;
349+
ncuEstimateElements.ncuEstConnsPerSecondPerNcu.textContent =
350350
(
351351
ncuParameterVals.connsPerSecPerAcu * ncuParameterVals.acusPerNcu
352-
).toFixed(2)
353-
);
354-
ncuEstimateElements.ncuEstMbpsPerNcu.text(ncuParameterVals.mbpsPerNcu);
352+
).toFixed(2);
353+
ncuEstimateElements.ncuEstMbpsPerNcu.textContent = ncuParameterVals.mbpsPerNcu;
355354
};
356355

357356
//////
@@ -366,30 +365,27 @@
366365
const updateNcuEstimate = (ncuValues) => {
367366
const updatedNcuValues = utils.calculateNcuValues(ncuValues);
368367

369-
$("#ncuEstimateValue").text(`${updatedNcuValues.total} NCUs`);
368+
document.getElementById("ncuEstimateValue").textContent = `${updatedNcuValues.total} NCUs`;
370369

371370
// update cost estimate form when estimated number of NCUs changes
372371
if (calculatorValuesState.numNcus !== updatedNcuValues.total) {
373-
costFormElements.numNcus.val(updatedNcuValues.total).trigger("change");
372+
costFormElements.numNcus.value = updatedNcuValues.total
373+
costFormElements.numNcus.dispatchEvent(new Event("change"));
374374
}
375375

376-
ncuEstimateElements.ncuEstConnRate.text(ncuValues.avgNewConnsPerSec);
377-
ncuEstimateElements.ncuEstConnDuration.text(ncuValues.avgConnDuration);
378-
ncuEstimateElements.ncuEstAvgConn.text(
379-
updatedNcuValues.avgConcurrentConnections
380-
);
376+
ncuEstimateElements.ncuEstConnRate.textContent = ncuValues.avgNewConnsPerSec;
377+
ncuEstimateElements.ncuEstConnDuration.textContent = ncuValues.avgConnDuration;
378+
ncuEstimateElements.ncuEstAvgConn.textContent = updatedNcuValues.avgConcurrentConnections;
381379

382-
ncuEstimateElements.ncuEstAvgConn2.text(
383-
updatedNcuValues.avgConcurrentConnections
384-
);
385-
ncuEstimateElements.ncuEstConnRate2.text(ncuValues.avgNewConnsPerSec);
386-
ncuEstimateElements.ncuEstDataRate.text(ncuValues.totalBandwidth);
380+
ncuEstimateElements.ncuEstAvgConn2.textContent = updatedNcuValues.avgConcurrentConnections;
381+
ncuEstimateElements.ncuEstConnRate2.textContent = ncuValues.avgNewConnsPerSec;
382+
ncuEstimateElements.ncuEstDataRate.textContent = ncuValues.totalBandwidth;
387383

388-
ncuEstimateElements.ncuEstMin1.text((updatedNcuValues.min ?? 0).toFixed(2));
389-
ncuEstimateElements.ncuEstMin.text((updatedNcuValues.min ?? 0).toFixed(2));
390-
ncuEstimateElements.ncuEstTotal.text(updatedNcuValues.total);
384+
ncuEstimateElements.ncuEstMin1.textContent = (updatedNcuValues.min ?? 0).toFixed(2);
385+
ncuEstimateElements.ncuEstMin.textContent = (updatedNcuValues.min ?? 0).toFixed(2);
386+
ncuEstimateElements.ncuEstTotal.textContent = updatedNcuValues.total;
391387

392-
costFormLabelElements.numNcusEstVal.text(updatedNcuValues.total);
388+
costFormLabelElements.numNcusEstVal.textContent = updatedNcuValues.total;
393389
};
394390

395391
/**
@@ -402,7 +398,7 @@
402398
const updateCost = (costs, values = calculatorValuesState) => {
403399
const updatedTotalCost = utils.calculateCost(costs, values);
404400

405-
$("#total-value").text(utils.currencyFormatter(updatedTotalCost));
401+
document.getElementById("total-value").textContent = utils.currencyFormatter(updatedTotalCost);
406402
updateTotalCostDetails(values, updatedTotalCost);
407403
};
408404

@@ -411,40 +407,34 @@
411407
* @param {number} totalCost
412408
*/
413409
const updateTotalCostDetails = (formValues, totalCost) => {
414-
totalCostDetailElements.hours.text(formValues.numHours);
415-
totalCostDetailElements.ncus.text(formValues.numNcus);
416-
totalCostDetailElements.listenPorts.text(
417-
Math.max(formValues.numListenPorts - 5, 0)
418-
);
419-
totalCostDetailElements.listenPortsCost.text(
420-
utils.currencyFormatter(costs.listenPorts)
421-
);
410+
totalCostDetailElements.hours.textContent = formValues.numHours;
411+
totalCostDetailElements.ncus.textContent = formValues.numNcus;
412+
totalCostDetailElements.listenPorts.textContent = Math.max(formValues.numListenPorts - 5, 0);
413+
totalCostDetailElements.listenPortsCost.textContent = utils.currencyFormatter(costs.listenPorts);
422414

423415
if (formValues.isWAF) {
424-
totalCostDetailElements.tierCost.text(
416+
totalCostDetailElements.tierCost.textContent =
425417
`(${utils.currencyFormatter(
426418
costs.tiersCosts[costs.regionsTiers[formValues.region].tier]
427-
)} region cost + ${utils.currencyFormatter(costs.WAF, 3)} WAF cost)`
428-
);
419+
)} region cost + ${utils.currencyFormatter(costs.WAF, 3)} WAF cost)`;
429420
} else {
430-
totalCostDetailElements.tierCost.text(
421+
totalCostDetailElements.tierCost.textContent =
431422
utils.currencyFormatter(
432423
costs.tiersCosts[costs.regionsTiers[formValues.region].tier]
433-
)
434-
);
424+
);
435425
}
436426

437-
totalCostDetailElements.total.text(utils.currencyFormatter(totalCost));
427+
totalCostDetailElements.total.textContent = utils.currencyFormatter(totalCost);
438428

439429
// update highlighted tier cost
440430
const rowIndex =
441431
Object.keys(costs.regionsTiers).indexOf(formValues.region) + 1;
442432

443-
totalCostDetailElements.tiersCostsTable.find("tr")?.each((index, rowEl) => {
433+
totalCostDetailElements.tiersCostsTable.querySelectorAll("tr")?.forEach((rowEl, index) => {
444434
if (index === rowIndex) {
445-
$(rowEl).addClass("selected");
435+
rowEl.classList.add("selected");
446436
} else {
447-
$(rowEl).removeClass("selected");
437+
rowEl.classList.remove("selected");
448438
}
449439
});
450440
};
@@ -455,25 +445,25 @@
455445
*/
456446
function printCostEstimate() {
457447
// expand the total price details if they aren't already
458-
const totalDetails = $("#total-cost-details");
459-
const detailsOpen = totalDetails.attr("open");
448+
const totalDetails = document.getElementById("total-cost-details");
449+
const detailsOpen = totalDetails.hasAttribute("open");
460450
if (!detailsOpen) {
461-
totalDetails.attr("open", "true");
451+
totalDetails.setAttribute("open", "true");
462452
}
463-
const ncuDetails = $("#ncu-usage-details");
464-
const ncuDetailsOpen = ncuDetails.attr("open");
453+
const ncuDetails = document.getElementById("ncu-usage-details");
454+
const ncuDetailsOpen = ncuDetails.hasAttribute("open");
465455
if (!ncuDetailsOpen) {
466-
ncuDetails.attr("open", "true");
456+
ncuDetails.setAttribute("open", "true");
467457
}
468458

469459
window.print();
470460

471461
// collapse the total price details if it was closed initially
472462
if (!detailsOpen) {
473-
totalDetails.attr("open", null);
463+
totalDetails.setAttribute("open", null);
474464
}
475465
if (!ncuDetailsOpen) {
476-
ncuDetails.attr("open", null);
466+
ncuDetails.setAttribute("open", null);
477467
}
478468
}
479469

0 commit comments

Comments
 (0)