109 lines
3.7 KiB
JavaScript
109 lines
3.7 KiB
JavaScript
const euroFormat = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
|
|
|
|
/**
|
|
* Erstellt ein Accordion an einem vorgegebenen Punkt, mit einem Inhalt der übergeben wird
|
|
* @param {DOMElement} rootElement
|
|
* @param {object} element
|
|
* @param {DOMElement} body
|
|
* @param {string} linkName
|
|
*/
|
|
export function createAccordion(rootElement, element, body, linkName) {
|
|
// accordion
|
|
const accordion = document.createElement("div");
|
|
accordion.setAttribute("class", "accordion clickable");
|
|
|
|
if (body !== null)
|
|
accordion.setAttribute("class", "accordion clickable");
|
|
else
|
|
accordion.setAttribute("class", "accordion");
|
|
|
|
// accordion Titel
|
|
const accordionTitle = document.createElement("div");
|
|
accordionTitle.setAttribute("class", "accordion-title");
|
|
|
|
// accordion Titel Nummer
|
|
const numberText = document.createElement("div");
|
|
numberText.innerHTML = element.number;
|
|
numberText.setAttribute("class", "title-number");
|
|
accordionTitle.appendChild(numberText);
|
|
|
|
// accordion Titel Name
|
|
const titleText = document.createElement("div");
|
|
titleText.setAttribute("class", "title-name");
|
|
|
|
const titleLink = document.createElement("a");
|
|
titleLink.innerHTML = element.name;
|
|
titleLink.setAttribute("class", "title-link");
|
|
titleLink.href = `html/detail.html?account=${linkName}`;
|
|
//titleLink.target = "_blank";
|
|
|
|
titleText.appendChild(titleLink);
|
|
accordionTitle.appendChild(titleText);
|
|
|
|
// accordion Titel Beschreibung
|
|
const descriptionText = document.createElement("div");
|
|
descriptionText.innerHTML = element.description ? element.description : "";
|
|
descriptionText.setAttribute("class", "title-description");
|
|
accordionTitle.appendChild(descriptionText);
|
|
|
|
// accordion Titel Wert
|
|
const balanceText = document.createElement("div");
|
|
balanceText.innerHTML = euroFormat.format(element.balance);
|
|
|
|
if (element.balance < 0)
|
|
balanceText.setAttribute("class", "title-balance negative-number");
|
|
else if (element.balance > 0)
|
|
balanceText.setAttribute("class", "title-balance positive-number");
|
|
else
|
|
balanceText.setAttribute("class", "title-balance neutral-number");
|
|
|
|
accordionTitle.appendChild(balanceText);
|
|
|
|
// accordion Anzeige, ob Unterkonten vorhanden
|
|
const indicatorText = document.createElement("div");
|
|
indicatorText.innerHTML = element.subaccounts.length > 0 ? "↓" : "";
|
|
indicatorText.setAttribute("class", "title-indicator");
|
|
accordionTitle.appendChild(indicatorText);
|
|
|
|
// accordion onclick handler
|
|
accordionTitle.onclick = () => {
|
|
if (accordion.querySelector(".accordion-content")) {
|
|
closeAccordion(accordion);
|
|
} else {
|
|
const accordions = document.querySelectorAll(".accordion");
|
|
//accordions.forEach((accordion) => closeAccordion(accordion));
|
|
if (body !== null) openAccordion(accordion, body);
|
|
}
|
|
}
|
|
|
|
accordion.appendChild(accordionTitle);
|
|
rootElement.appendChild(accordion);
|
|
}
|
|
|
|
/**
|
|
* Öffnet das Accordion
|
|
* @param {DOMElement} accordion
|
|
* @param {DOMElement} body
|
|
*/
|
|
function openAccordion(accordion, body) {
|
|
// accordion Inhalt
|
|
const accordionContent = document.createElement("div");
|
|
accordionContent.setAttribute("class", "accordion-content");
|
|
accordionContent.appendChild(body);
|
|
|
|
accordion.appendChild(accordionContent);
|
|
accordion.setAttribute("class", "accordion clickable open");
|
|
};
|
|
|
|
|
|
/**
|
|
* Schließt das Accordion
|
|
* @param {DOMElement} accordion
|
|
* @param {DOMElement} body
|
|
*/
|
|
function closeAccordion(accordion) {
|
|
accordion.setAttribute("class", "accordion clickable");
|
|
const content = accordion.querySelector(".accordion-content");
|
|
if (content)
|
|
content.remove();
|
|
}; |