Static pages for election templates

ihk-election-static-templates/script.js

@@ -0,0 +1,503 @@
+document.addEventListener("DOMContentLoaded", function () {
+
+    let groupSelectElement = document.getElementById("election-group"),
+        areaSelectElement = document.getElementById("election-area"),
+        formContainer = document.querySelector(".election-form--form"),
+        electionDetail = document.querySelector(".election-detail");
+
+// STEP 1: LOAD SEARCH ITEMS
+
+    // Load all groups and areas
+    if(formContainer) {
+        fetch("https://ihk-wahl.info/selects?ihk_id=M6uOiDGzTD7SlhF1")
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Fill in groups
+                // Remove old entries
+                while (groupSelectElement.firstChild) {
+                    groupSelectElement.removeChild(groupSelectElement.firstChild);
+                }
+
+                // Sort groups alphabetically by name
+                let sortedGroups = data.groups.slice().sort(function (a, b) {
+                    return a.number.localeCompare(b.number);
+                });
+
+                // Populate with sorted options
+                let groupsOptionElement = document.createElement("option");
+                groupsOptionElement.value = "-";
+                groupsOptionElement.textContent = "Wahlgruppe (Alle)";
+                groupsOptionElement.setAttribute("data-number", "");
+                groupsOptionElement.setAttribute("data-title", "Alle");
+                groupSelectElement.appendChild(groupsOptionElement);
+                sortedGroups.forEach(function (group) {
+                    let groupsOptionElement = document.createElement("option");
+                    groupsOptionElement.value = group.id;
+                    groupsOptionElement.textContent = group.number + " " + group.title;
+                    groupsOptionElement.setAttribute("data-number", group.number);
+                    groupsOptionElement.setAttribute("data-title", group.title);
+                    groupSelectElement.appendChild(groupsOptionElement);
+                });
+
+                // Fill in areas
+                // Remove old entries
+                while (areaSelectElement.firstChild) {
+                    areaSelectElement.removeChild(areaSelectElement.firstChild);
+                }
+
+                // Sort groups alphabetically by name
+                let sortedAreas = data.districts.slice().sort(function (a, b) {
+                    return a.number.localeCompare(b.number);
+                });
+
+                // Populate with sorted options
+                let areasOptionElement = document.createElement("option");
+                areasOptionElement.value = "-";
+                areasOptionElement.textContent = "Wahlbezirk (Alle)";
+                areasOptionElement.setAttribute("data-number", "");
+                areasOptionElement.setAttribute("data-title", "Alle");
+                areaSelectElement.appendChild(areasOptionElement);
+                sortedAreas.forEach(function (district) {
+                    let areasOptionElement = document.createElement("option");
+                    areasOptionElement.value = district.id;
+                    areasOptionElement.textContent = district.number + " " + district.title;
+                    areasOptionElement.setAttribute("data-number", district.number);
+                    areasOptionElement.setAttribute("data-title", district.title);
+                    areaSelectElement.appendChild(areasOptionElement);
+                });
+            })
+            .catch(error => {
+                // Handle errors here
+                console.error('Fetch error:', error);
+            });
+
+// STEP 2: CLICK SEARCH
+
+        // Click on search
+        const hiddenInput = document.createElement('input');
+        hiddenInput.type = 'hidden';
+        hiddenInput.name = 'ihk_id';
+        hiddenInput.value = 'M6uOiDGzTD7SlhF1';
+        formContainer.appendChild(hiddenInput);
+
+        formContainer.onsubmit = function (e) {
+            e.preventDefault();
+
+            submitForm(e);
+
+        };
+        let selectElements = formContainer.querySelectorAll("select");
+        selectElements.forEach(select => {
+            select.addEventListener("change", function (e) {
+                submitForm();
+            });
+        });
+
+        document.addEventListener("click", function (event) {
+            if (event.target && (event.target.getAttribute("data-search") === "group" || event.target.getAttribute("data-search") === "area")) {
+                let id = event.target.getAttribute("data-id");
+                document.getElementById("election-searchstring").value = "";
+                if (event.target.getAttribute("data-search") === "group") {
+                    document.getElementById("election-group").value = id;
+                    document.getElementById("election-area").value = "-";
+                } else if (event.target.getAttribute("data-search") === "area") {
+                    document.getElementById("election-group").value = "-";
+                    document.getElementById("election-area").value = id;
+                }
+                submitForm();
+            }
+        });
+    }
+
+// STEP 3: LOAD DETAIL PAGE
+
+    // Get the URL query string parameters
+    const queryParams = new URLSearchParams(window.location.search);
+
+    if (electionDetail && queryParams.has('ihk_id') && queryParams.has('c')) {
+        // Get the values of the 'c' and 'a' parameters
+        const ihkIdValue = queryParams.get('ihk_id');
+        const cValue = queryParams.get('c');
+
+        console.log('Value of "c":', ihkIdValue);
+        console.log('Value of "a":', cValue);
+
+        let electionDetailText = electionDetail.querySelector('.election-detail--text'),
+            electionDetailVideo = electionDetail.querySelector('.election-detail--video'),
+            electionDetailInfo = electionDetail.querySelector('.election-detail--info'),
+            htmlText = '',
+            htmlVideo = '',
+            htmlInfo = '';
+
+        fetch("https://ihk-wahl.info/candidate?ihk_id=" + ihkIdValue + "&candidate=" + cValue)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log(data);
+                // Build the detail page for the candidate
+
+                htmlText += data.img_path ? `
+                    <img src="${data.img_path}" loading="lazy" class="loading" width="545" height="526">
+                ` : '';
+
+                htmlText += '<div class="text-box">';
+
+                htmlText += (data.first_name && data.last_name) ? `
+                    <h1>${data.first_name} ${data.last_name}</h1>
+                ` : '';
+
+                htmlText += data.position ? `
+                    <p class="subheadline">${data.position}</p>
+                ` : '';
+
+                htmlText += data.election_statement ? `
+                    <h2>Was möchten Sie bewegen?</h2>
+                    <p>${data.election_statement}</p>
+                ` : '';
+
+                if (data.twitter_link || data.facebook_link || data.xing_link ||
+                    data.whatsapp_link || data.linkedin_link || data.threema_link ||
+                    data.telegram_link) {
+                    htmlText += `
+                        <div class="social-media">
+                            <p>Meine Kanäle</p>
+                            <ul class="social-icons">
+                    `;
+                }
+
+                htmlText += data.twitter_link ? `
+                    <li><a class="social-share twitter" href="${data.twitter_link}"></a></li>
+                ` : '';
+
+                htmlText += data.facebook_link ? `
+                    <li><a class="social-share facebook" href="${data.facebook_link}"></a></li>
+                ` : '';
+
+                htmlText += data.xing_link ? `
+                    <li><a class="social-share xing" href="${data.xing_link}"></a></li>
+                ` : '';
+
+                htmlText += data.whatsapp_link ? `
+                    <li><a class="social-share whatsapp" href="${data.whatsapp_link}"></a></li>
+                ` : '';
+
+                htmlText += data.linkedin_link ? `
+                    <li><a class="social-share linkedin" href="${data.linkedin_link}"></a></li>
+                ` : '';
+
+                htmlText += data.threema_link ? `
+                    <li><a class="social-share threema" href="${data.threema_link}"></a></li>
+                ` : '';
+
+                htmlText += data.telegram_link ? `
+                    <li><a class="social-share telegram" href="${data.telegram_link}"></a></li>
+                ` : '';
+
+                if (data.twitter_link || data.facebook_link || data.xing_link ||
+                    data.whatsapp_link || data.linkedin_link || data.threema_link ||
+                    data.telegram_link) {
+                    htmlText += `
+                            </ul>
+                        </div>
+                    `;
+                }
+
+                htmlText += '</div>';
+
+                electionDetailText.innerHTML = htmlText;
+
+                htmlVideo += data.video_path ? `
+                    <div className="video-container">
+                        <figure className="video">
+                            <div className="video-box">
+                ` : '';
+
+                if (data.video_path && data.video_img_path) {
+                    htmlVideo += `
+                        <video src="${data.video_path}" controls="" poster="${data.video_img_path}"></video>
+                    `;
+                } else if (data.video_path) {
+                    htmlVideo += `
+                        <video src="${data.video_path}" controls=""></video>
+                    `;
+                }
+
+                htmlVideo += data.video_path ? `                                
+                            </div>
+                        </figure>
+                    </div>
+                ` : '';
+
+                electionDetailVideo.innerHTML = htmlVideo;
+
+                htmlInfo += (data.candidate_election_group_id && data.candidate_election_group_name) ? `
+                    <div class="info-box info-box-01">
+                        <p class="info-headline">Wahlgruppe 02</p>
+                        <p class="info-box--content info-box--text">
+                            <a href="${data.candidate_election_group_id}">${data.candidate_election_group_name}</a>
+                        </p>
+                    </div>
+                ` : '';
+                htmlInfo += (data.candidate_election_district_id && data.candidate_election_district_name) ? `
+                    <div class="info-box info-box-02">
+                        <p class="info-headline">Wahlbezirk 05</p>
+                        <p class="info-box--content info-box--text">
+                            <a href="${data.candidate_election_district_id}">${data.candidate_election_district_name}</a>
+                        </p>
+                    </div>                    
+                ` : '';
+
+                htmlInfo += '<div class="info-box info-box-03">';
+
+                htmlInfo += data.company ? `
+                    <p class="info-headline">Unternehmen</p>
+                    <div class="info-box--content">
+                        <p class="headline">${data.company}</p>
+                ` : '';
+
+                htmlInfo += data.company_address ? `
+                    <p className="address">${data.company_address}</p>
+                ` : '';
+
+                htmlInfo += data.website ? `
+                    <p>
+                        <a href="${data.website}" target="_blank">Unternehmenswebseite</a>
+                    </p>
+                ` : '';
+
+                htmlInfo += data.email ? `
+                    <p>
+                        <a href="mailto:${data.email}">E-Mail</a>
+                    </p>
+                ` : '';
+
+                if (data.phone) {
+
+                    htmlInfo += `
+                        <p>
+                            <a href="tel:${formatNumberLink(data.phone)}">${formatNumberOutput(data.phone)}</a>
+                        </p>
+                    `;
+                }
+
+                htmlInfo += data.company ? `
+                    </div>
+                ` : '';
+
+                htmlInfo += '</div>';
+
+                electionDetailInfo.innerHTML = htmlInfo;
+                
+            })
+            .catch(error => {
+                // Handle errors here
+                console.error('Fetch error:', error);
+            });
+
+    }
+});
+
+function submitForm(e) {
+    let formData,
+        groupSelectElement = document.getElementById("election-group"),
+        areaSelectElement = document.getElementById("election-area"),
+        xhr = new XMLHttpRequest();
+
+    if(e) {
+        formData = new FormData(e.target);
+    } else {
+        formData = new FormData(document.querySelector(".election-form--form"));
+    }
+
+    xhr.open("POST", "https://ihk-wahl.info/search", true);
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+                console.log("Form data sent successfully!");
+                let data = JSON.parse(xhr.responseText); // Assuming the backend sends JSON response
+
+                // Add badge with result (group and area)
+                let badgeGroupsAreas = document.querySelector(".election-result-list--header-left"),
+                    selectedGroupOption = groupSelectElement.options[groupSelectElement.selectedIndex],
+                    groupNumber = selectedGroupOption.getAttribute("data-number"),
+                    groupTitle = selectedGroupOption.getAttribute("data-title"),
+                    selectedAreaOption = areaSelectElement.options[areaSelectElement.selectedIndex],
+                    areaNumber = selectedAreaOption.getAttribute("data-number"),
+                    areaTitle = selectedAreaOption.getAttribute("data-title"),
+                    searchContent = document.getElementById("election-searchstring");
+
+                let badgeHtml = "";
+
+                badgeHtml += (groupNumber !== "" || groupTitle !== "") && (groupTitle !== "Alle") ? `
+                            <div class="election-result-list-badge inverted closable" data-name="group">
+                                <div class="badge-inner">
+                                  <p>Wahlgruppe ${groupNumber}: <span>${groupTitle}</span></p>
+                                </div>
+                            </div>
+                        ` : '';
+
+                badgeHtml += (areaNumber !== "" || areaTitle !== "") && (areaTitle !== "Alle") ? `
+                            <div class="election-result-list-badge inverted closable" data-name="area">
+                                <div class="badge-inner">
+                                    <p>Wahlbezirk ${areaNumber}: <span>${areaTitle}</span></p>
+                                </div>
+                            </div>
+                        ` : '';
+
+                badgeHtml += searchContent.value !== "" ? `
+                            <div class="election-result-list-badge inverted closable" data-name="searchstring">
+                                <div class="badge-inner">
+                                    <p>Suchbegriff: <span>${searchContent.value}</span></p>
+                                </div>
+                            </div>
+                        ` : '';
+
+                badgeGroupsAreas.innerHTML = badgeHtml;
+                let badgeElements = badgeGroupsAreas.querySelectorAll(".election-result-list-badge");
+                badgeElements.forEach(badgeElement => {
+                    badgeElement.addEventListener("click", badgeClick);
+                });
+
+                // Add badge with index of results
+                let badgeResultsContainer = document.querySelector(".election-result-list--header"),
+                    badgeResults = null,
+                    resultsIndex = "";
+
+                // Iterate through the direct children of headerElement
+                for (let i = 0; i < badgeResultsContainer.children.length; i++) {
+                    let child = badgeResultsContainer.children[i];
+                    if (child.classList.contains("election-result-list-badge")) {
+                        badgeResults = child;
+                        break;
+                    }
+                }
+                resultsIndex = data.res.length;
+
+                // Insert Badge with resultsIndex
+                badgeResults.innerHTML = `
+                          <div class="badge-inner">
+                            <p>${resultsIndex}<span>Kanditat:innen</span></p>
+                          </div>
+                        `;
+
+                // Add candidates to list
+                let candidatesContainer = document.querySelector(".election-result-list--inner");
+                candidatesContainer.innerHTML = "";
+
+                // Sort groups alphabetically by name
+                let sortedCandidates = data.res.slice().sort(function (a, b) {
+                    return a.last_name.localeCompare(b.last_name);
+                });
+
+                sortedCandidates.forEach(function (candidate) {
+                    let html = `
+                                <div class="election-result-list-item">
+                                    <a class="top-box" href="index2.html?ihk_id=${data.ihk_id}&c=${candidate.candidate_id}">
+                                        <div class="image-box">
+                                            <img src="${candidate.img_path}" loading="lazy" class="loading" width="310" height="310">
+                                        </div>
+                                        <h3>${candidate.first_name} ${candidate.last_name}</h3>
+                                    </a>
+                                    <div class="text-box">
+                                        <div class="job-box">
+                                            <span class="icon-small-election-group" data-search="group" data-id="${candidate.candidate_election_group_id}">${candidate.candidate_election_group_name}</span>
+                                        </div>
+                                        <div class="city-box">
+                                            <span class="icon-small-icon-election-location" data-search="area" data-id="${candidate.candidate_election_district_id}">${candidate.candidate_election_district_name}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            `;
+
+                    candidatesContainer.innerHTML += html;
+                });
+
+            } else {
+                console.error("Error sending form data.");
+            }
+        }
+    };
+
+    xhr.send(formData);
+}
+
+// Return phone number to call
+function formatNumberLink(phoneNo) {
+    const phoneNoStripped = phoneNo.replace(/\D/g, '');
+
+    let formatedNo = phoneNoStripped;
+    if (phoneNoStripped.startsWith('49')) {
+        // has leading 49 - countrycode
+        formatedNo = `00${phoneNoStripped}`;
+    } else if (phoneNoStripped.startsWith('0')) {
+        if (phoneNoStripped.startsWith('000')) {
+            // has three leading zeros - countrycode with error?
+            formatedNo = phoneNoStripped.substr(1);
+        } else if (phoneNoStripped.startsWith('00')) {
+            // has two leading zeros - countrycode
+            // Do nothing
+        } else {
+            // has leading zero
+            formatedNo = `0049${phoneNoStripped.substr(1)}`;
+        }
+    }
+    return formatedNo;
+}
+
+// Return phone number to show on website
+function formatNumberOutput(phoneNo) {
+    const allowedChars = /[0-9\-\/\s]/g;
+    const phoneNoStripped = phoneNo.match(allowedChars).join('');
+    let formatedNo = phoneNoStripped;
+
+    if (phoneNoStripped.startsWith('49')) {
+        // has leading 49 - countrycode
+        formatedNo = `+${phoneNoStripped}`;
+    } else if (phoneNoStripped.startsWith('0')) {
+        if (phoneNoStripped.startsWith('000')) {
+            // has three leading zeros - countrycode with error?
+            formatedNo = `+${phoneNoStripped.substr(3)}`;
+        } else if (phoneNoStripped.startsWith('00')) {
+            // has two leading zeros - countrycode
+            formatedNo = `+${phoneNoStripped.substr(2)}`;
+        } else {
+            // has leading zero
+            formatedNo = `+49 ${phoneNoStripped.substr(1)}`;
+        }
+    }
+
+    // Überprüfe, ob nach "+49" ein Leerzeichen folgt, falls nicht, füge es hinzu
+    if (formatedNo.startsWith('+49') && !formatedNo.includes(' ', 3)) {
+        formatedNo = `${formatedNo.slice(0, 3)} ${formatedNo.slice(3)}`;
+    }
+
+    return formatedNo;
+}
+
+// STEP 2B: CLICK BADGE (RELOAD SEARCH)
+function badgeClick(e) {
+    const clickedBadge = e.target.closest(".election-result-list-badge"),
+          dataName = clickedBadge.getAttribute("data-name");
+
+    if (dataName === "group") {
+        let groupSelectElement = document.getElementById("election-group");
+        groupSelectElement.value = "-";
+    } else if (dataName === "area") {
+        let areaSelectElement = document.getElementById("election-area");
+        areaSelectElement.value = "-";
+    } else if (dataName === "searchstring") {
+        let searchElement = document.getElementById("election-searchstring");
+        searchElement.value = "";
+    }
+    submitForm();
+}

ihk-election-static-templates/src/fonts.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./nunito-sans-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./nunito-sans-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./nunito-sans-bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./nunito-sans-bold-italic.woff2') format('woff2');
+}