plugin upload
This commit is contained in:
parent
00e60ec1b7
commit
c4905e952e
17 changed files with 1426 additions and 0 deletions
353
native/wordpress/maple-calc/assets/js/frontend.js
Normal file
353
native/wordpress/maple-calc/assets/js/frontend.js
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
document.addEventListener("DOMContentLoaded", function () {
|
||||
console.log("Frontend.js loaded");
|
||||
|
||||
// Initialize charts on page load
|
||||
initializeCharts();
|
||||
|
||||
// Handle form submissions
|
||||
handleFormSubmissions();
|
||||
|
||||
// Add animations for results
|
||||
addResultAnimations();
|
||||
});
|
||||
|
||||
function initializeCharts() {
|
||||
console.log("Initializing charts...");
|
||||
|
||||
// Mortgage Charts
|
||||
const mortgageCharts = document.querySelectorAll(".mortgage-chart");
|
||||
mortgageCharts.forEach((canvas) => {
|
||||
console.log("Rendering mortgage chart for:", canvas);
|
||||
const principal = parseFloat(canvas.dataset.principal) || 200000;
|
||||
const totalInterest = parseFloat(canvas.dataset.interest) || 123312.18;
|
||||
renderMortgageChart(canvas, principal, totalInterest);
|
||||
});
|
||||
|
||||
// Data Center Charts
|
||||
const datacenterCharts = document.querySelectorAll(".datacenter-chart");
|
||||
datacenterCharts.forEach((canvas) => {
|
||||
console.log("Rendering datacenter chart for:", canvas);
|
||||
const powerCost = parseFloat(canvas.dataset.power) || 730;
|
||||
const coolingCost = parseFloat(canvas.dataset.cooling) || 876;
|
||||
const rackCost = parseFloat(canvas.dataset.rack) || 500;
|
||||
renderDatacenterChart(canvas, powerCost, coolingCost, rackCost);
|
||||
});
|
||||
|
||||
// ROI Charts
|
||||
const roiCharts = document.querySelectorAll(".roi-chart");
|
||||
roiCharts.forEach((canvas) => {
|
||||
console.log("Rendering ROI chart for:", canvas);
|
||||
const initialInvestment = parseFloat(canvas.dataset.investment) || 10000;
|
||||
const netProfit = parseFloat(canvas.dataset.profit) || 4025.52;
|
||||
renderRoiChart(canvas, initialInvestment, netProfit);
|
||||
});
|
||||
}
|
||||
|
||||
function handleFormSubmissions() {
|
||||
const calculatorForms = document.querySelectorAll(".maple-calc form");
|
||||
|
||||
calculatorForms.forEach((form) => {
|
||||
form.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted");
|
||||
|
||||
// Validate form inputs
|
||||
const inputs = form.querySelectorAll("input[required]");
|
||||
let isValid = true;
|
||||
|
||||
inputs.forEach((input) => {
|
||||
if (!input.value) {
|
||||
isValid = false;
|
||||
input.style.borderColor = "#ff0000";
|
||||
} else {
|
||||
input.style.borderColor = "#ccc";
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
alert("Please fill in all required fields.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Process form data
|
||||
const formData = new FormData(form);
|
||||
const formEntries = Object.fromEntries(formData.entries());
|
||||
|
||||
// Determine calculator type
|
||||
const calculatorType = form
|
||||
.closest(".maple-calc")
|
||||
.classList.contains("mortgage-calculator")
|
||||
? "mortgage"
|
||||
: form
|
||||
.closest(".maple-calc")
|
||||
.classList.contains("datacenter-calculator")
|
||||
? "datacenter"
|
||||
: "roi";
|
||||
|
||||
const resultsDiv = form.nextElementSibling;
|
||||
|
||||
if (calculatorType === "mortgage") {
|
||||
const principal = parseFloat(formEntries.principal) || 200000;
|
||||
const interestRate = parseFloat(formEntries.interest_rate) || 3.5;
|
||||
const termYears = parseInt(formEntries.term_years) || 30;
|
||||
|
||||
const monthlyPayment = calculateMonthlyPayment(
|
||||
principal,
|
||||
interestRate,
|
||||
termYears,
|
||||
);
|
||||
const totalPayment = monthlyPayment * termYears * 12;
|
||||
const totalInterest = totalPayment - principal;
|
||||
|
||||
updateMortgageResults(
|
||||
resultsDiv,
|
||||
monthlyPayment,
|
||||
totalPayment,
|
||||
totalInterest,
|
||||
);
|
||||
renderMortgageChart(
|
||||
resultsDiv.querySelector(".mortgage-chart"),
|
||||
principal,
|
||||
totalInterest,
|
||||
);
|
||||
} else if (calculatorType === "datacenter") {
|
||||
const powerKw = parseFloat(formEntries.power_kw) || 10;
|
||||
const costPerKwh = parseFloat(formEntries.cost_per_kwh) || 0.1;
|
||||
const rackSpace = parseInt(formEntries.rack_space) || 5;
|
||||
const coolingFactor = 1.2;
|
||||
|
||||
const powerCostPerMonth = powerKw * costPerKwh * 24 * 30;
|
||||
const coolingCostPerMonth = powerCostPerMonth * coolingFactor;
|
||||
const rackCostPerMonth = rackSpace * 100;
|
||||
const totalMonthlyCost =
|
||||
powerCostPerMonth + coolingCostPerMonth + rackCostPerMonth;
|
||||
const totalAnnualCost = totalMonthlyCost * 12;
|
||||
|
||||
updateDatacenterResults(
|
||||
resultsDiv,
|
||||
powerCostPerMonth,
|
||||
coolingCostPerMonth,
|
||||
rackCostPerMonth,
|
||||
totalMonthlyCost,
|
||||
totalAnnualCost,
|
||||
);
|
||||
renderDatacenterChart(
|
||||
resultsDiv.querySelector(".datacenter-chart"),
|
||||
powerCostPerMonth,
|
||||
coolingCostPerMonth,
|
||||
rackCostPerMonth,
|
||||
);
|
||||
} else if (calculatorType === "roi") {
|
||||
const initialInvestment =
|
||||
parseFloat(formEntries.initial_investment) || 10000;
|
||||
const annualReturnRate =
|
||||
parseFloat(formEntries.annual_return_rate) || 7;
|
||||
const timeYears = parseInt(formEntries.time_years) || 5;
|
||||
|
||||
const finalValue =
|
||||
initialInvestment * Math.pow(1 + annualReturnRate / 100, timeYears);
|
||||
const netProfit = finalValue - initialInvestment;
|
||||
const roiPercentage = (netProfit / initialInvestment) * 100;
|
||||
|
||||
updateRoiResults(resultsDiv, finalValue, netProfit, roiPercentage);
|
||||
renderRoiChart(
|
||||
resultsDiv.querySelector(".roi-chart"),
|
||||
initialInvestment,
|
||||
netProfit,
|
||||
);
|
||||
}
|
||||
|
||||
// Show results with animation
|
||||
resultsDiv.style.opacity = "0";
|
||||
setTimeout(() => {
|
||||
resultsDiv.style.opacity = "1";
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function calculateMonthlyPayment(principal, interestRate, termYears) {
|
||||
const monthlyInterestRate = interestRate / 100 / 12;
|
||||
const termMonths = termYears * 12;
|
||||
return (
|
||||
(principal *
|
||||
(monthlyInterestRate * Math.pow(1 + monthlyInterestRate, termMonths))) /
|
||||
(Math.pow(1 + monthlyInterestRate, termMonths) - 1)
|
||||
);
|
||||
}
|
||||
|
||||
function updateMortgageResults(
|
||||
resultsDiv,
|
||||
monthlyPayment,
|
||||
totalPayment,
|
||||
totalInterest,
|
||||
) {
|
||||
resultsDiv.querySelector("p:nth-child(2)").innerHTML =
|
||||
`<strong>Monthly Payment:</strong> $${monthlyPayment.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(3)").innerHTML =
|
||||
`<strong>Total Payment:</strong> $${totalPayment.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(4)").innerHTML =
|
||||
`<strong>Total Interest:</strong> $${totalInterest.toFixed(2)}`;
|
||||
}
|
||||
|
||||
function updateDatacenterResults(
|
||||
resultsDiv,
|
||||
powerCost,
|
||||
coolingCost,
|
||||
rackCost,
|
||||
totalMonthlyCost,
|
||||
totalAnnualCost,
|
||||
) {
|
||||
resultsDiv.querySelector("p:nth-child(2)").innerHTML =
|
||||
`<strong>Power Cost (Monthly):</strong> $${powerCost.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(3)").innerHTML =
|
||||
`<strong>Cooling Cost (Monthly):</strong> $${coolingCost.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(4)").innerHTML =
|
||||
`<strong>Rack Cost (Monthly):</strong> $${rackCost.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(5)").innerHTML =
|
||||
`<strong>Total Monthly Cost:</strong> $${totalMonthlyCost.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(6)").innerHTML =
|
||||
`<strong>Total Annual Cost:</strong> $${totalAnnualCost.toFixed(2)}`;
|
||||
}
|
||||
|
||||
function updateRoiResults(resultsDiv, finalValue, netProfit, roiPercentage) {
|
||||
resultsDiv.querySelector("p:nth-child(2)").innerHTML =
|
||||
`<strong>Final Value:</strong> $${finalValue.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(3)").innerHTML =
|
||||
`<strong>Net Profit:</strong> $${netProfit.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(4)").innerHTML =
|
||||
`<strong>ROI (%):</strong> ${roiPercentage.toFixed(2)}%`;
|
||||
}
|
||||
|
||||
function renderMortgageChart(canvas, principal, totalInterest) {
|
||||
if (!canvas) {
|
||||
console.error("Mortgage chart canvas not found");
|
||||
return;
|
||||
}
|
||||
const ctx = canvas.getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ["Principal", "Total Interest"],
|
||||
datasets: [
|
||||
{
|
||||
data: [principal, totalInterest],
|
||||
backgroundColor: ["#02066F", "#ff6384"],
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
labels: {
|
||||
font: {
|
||||
size: 14,
|
||||
family: "Arial, sans-serif",
|
||||
},
|
||||
color: "#222222",
|
||||
boxWidth: 20,
|
||||
padding: 20,
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function renderDatacenterChart(canvas, powerCost, coolingCost, rackCost) {
|
||||
if (!canvas) {
|
||||
console.error("Datacenter chart canvas not found");
|
||||
return;
|
||||
}
|
||||
const ctx = canvas.getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ["Power Cost", "Cooling Cost", "Rack Cost"],
|
||||
datasets: [
|
||||
{
|
||||
data: [powerCost, coolingCost, rackCost],
|
||||
backgroundColor: ["#02066F", "#ff6384", "#36a2eb"],
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
labels: {
|
||||
font: {
|
||||
size: 14,
|
||||
family: "Arial, sans-serif",
|
||||
},
|
||||
color: "#222222",
|
||||
boxWidth: 20,
|
||||
padding: 20,
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function renderRoiChart(canvas, initialInvestment, netProfit) {
|
||||
if (!canvas) {
|
||||
console.error("ROI chart canvas not found");
|
||||
return;
|
||||
}
|
||||
const ctx = canvas.getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ["Initial Investment", "Net Profit"],
|
||||
datasets: [
|
||||
{
|
||||
data: [initialInvestment, netProfit],
|
||||
backgroundColor: ["#02066F", "#36a2eb"],
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
labels: {
|
||||
font: {
|
||||
size: 14,
|
||||
family: "Arial, sans-serif",
|
||||
},
|
||||
color: "#222222",
|
||||
boxWidth: 20,
|
||||
padding: 20,
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function addResultAnimations() {
|
||||
const resultsDivs = document.querySelectorAll(".results");
|
||||
resultsDivs.forEach((div) => {
|
||||
div.style.transition = "opacity 0.5s ease-in-out";
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue