diff --git a/ihk-election-static-templates/index.html b/ihk-election-static-templates/index.html new file mode 100644 index 0000000..4bd0312 --- /dev/null +++ b/ihk-election-static-templates/index.html @@ -0,0 +1,5419 @@ + + + + + + + pages-election-overview-page--election-overview-page + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

No Preview

+

Sorry, but you either have no stories or none are selected somehow.

+ +

If the problem persists, check the browser console, or the terminal you've run Storybook from.

+
+
+

+    
+
+
+
+ + +
+
+
+

Finden Sie die Branchenvertreter:innen Ihrer Region

+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/ihk-election-static-templates/index2.html b/ihk-election-static-templates/index2.html new file mode 100644 index 0000000..1f6fbf1 --- /dev/null +++ b/ihk-election-static-templates/index2.html @@ -0,0 +1,5286 @@ + + + + + + + pages-election-detail-page--election-detail-page + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

No Preview

+

Sorry, but you either have no stories or none are selected somehow.

+ +

If the problem persists, check the browser console, or the terminal you've run Storybook from.

+
+
+

+    
+
+
+
+ + +
+
+
+
+
+ +
+
+ +
+
+ +
+ +

IHK-Wahlbüro

+

Wir beantworten gerne Ihre Fragen zur IHK-Wahl 2024. Rufen Sie uns einfach an.

+ +
+
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/ihk-election-static-templates/script.js b/ihk-election-static-templates/script.js new file mode 100644 index 0000000..d8144e4 --- /dev/null +++ b/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 ? ` + + ` : ''; + + htmlText += '
'; + + htmlText += (data.first_name && data.last_name) ? ` +

${data.first_name} ${data.last_name}

+ ` : ''; + + htmlText += data.position ? ` +

${data.position}

+ ` : ''; + + htmlText += data.election_statement ? ` +

Was möchten Sie bewegen?

+

${data.election_statement}

+ ` : ''; + + if (data.twitter_link || data.facebook_link || data.xing_link || + data.whatsapp_link || data.linkedin_link || data.threema_link || + data.telegram_link) { + htmlText += ` +
+

Meine Kanäle

+ +
+ `; + } + + htmlText += '
'; + + electionDetailText.innerHTML = htmlText; + + htmlVideo += data.video_path ? ` +
+
+
+ ` : ''; + + if (data.video_path && data.video_img_path) { + htmlVideo += ` + + `; + } else if (data.video_path) { + htmlVideo += ` + + `; + } + + htmlVideo += data.video_path ? ` +
+
+
+ ` : ''; + + electionDetailVideo.innerHTML = htmlVideo; + + htmlInfo += (data.candidate_election_group_id && data.candidate_election_group_name) ? ` +
+

Wahlgruppe 02

+

+ ${data.candidate_election_group_name} +

+
+ ` : ''; + htmlInfo += (data.candidate_election_district_id && data.candidate_election_district_name) ? ` +
+

Wahlbezirk 05

+

+ ${data.candidate_election_district_name} +

+
+ ` : ''; + + htmlInfo += '
'; + + htmlInfo += data.company ? ` +

Unternehmen

+
+

${data.company}

+ ` : ''; + + htmlInfo += data.company_address ? ` +

${data.company_address}

+ ` : ''; + + htmlInfo += data.website ? ` +

+ Unternehmenswebseite +

+ ` : ''; + + htmlInfo += data.email ? ` +

+ E-Mail +

+ ` : ''; + + if (data.phone) { + + htmlInfo += ` +

+ ${formatNumberOutput(data.phone)} +

+ `; + } + + htmlInfo += data.company ? ` +
+ ` : ''; + + htmlInfo += '
'; + + 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") ? ` +
+
+

Wahlgruppe ${groupNumber}: ${groupTitle}

+
+
+ ` : ''; + + badgeHtml += (areaNumber !== "" || areaTitle !== "") && (areaTitle !== "Alle") ? ` +
+
+

Wahlbezirk ${areaNumber}: ${areaTitle}

+
+
+ ` : ''; + + badgeHtml += searchContent.value !== "" ? ` +
+
+

Suchbegriff: ${searchContent.value}

+
+
+ ` : ''; + + 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 = ` +
+

${resultsIndex}Kanditat:innen

+
+ `; + + // 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 = ` +
+ +
+ +
+

${candidate.first_name} ${candidate.last_name}

+
+
+
+ ${candidate.candidate_election_group_name} +
+
+ ${candidate.candidate_election_district_name} +
+
+
+ `; + + 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(); +} \ No newline at end of file diff --git a/ihk-election-static-templates/src/SourceSansPro-Bold-webfont.b29ecdbf.woff b/ihk-election-static-templates/src/SourceSansPro-Bold-webfont.woff similarity index 100% rename from ihk-election-static-templates/src/SourceSansPro-Bold-webfont.b29ecdbf.woff rename to ihk-election-static-templates/src/SourceSansPro-Bold-webfont.woff diff --git a/ihk-election-static-templates/src/SourceSansPro-It-webfont.b8d175e8.woff b/ihk-election-static-templates/src/SourceSansPro-It-webfont.woff similarity index 100% rename from ihk-election-static-templates/src/SourceSansPro-It-webfont.b8d175e8.woff rename to ihk-election-static-templates/src/SourceSansPro-It-webfont.woff diff --git a/ihk-election-static-templates/src/SourceSansPro-Light-webfont.ef0dd133.woff b/ihk-election-static-templates/src/SourceSansPro-Light-webfont.woff similarity index 100% rename from ihk-election-static-templates/src/SourceSansPro-Light-webfont.ef0dd133.woff rename to ihk-election-static-templates/src/SourceSansPro-Light-webfont.woff diff --git a/ihk-election-static-templates/src/SourceSansPro-Regular-webfont.16947b28.woff b/ihk-election-static-templates/src/SourceSansPro-Regular-webfont.woff similarity index 100% rename from ihk-election-static-templates/src/SourceSansPro-Regular-webfont.16947b28.woff rename to ihk-election-static-templates/src/SourceSansPro-Regular-webfont.woff diff --git a/ihk-election-static-templates/src/SourceSansPro-Semibold-webfont.e2720da1.woff b/ihk-election-static-templates/src/SourceSansPro-Semibold-webfont.woff similarity index 100% rename from ihk-election-static-templates/src/SourceSansPro-Semibold-webfont.e2720da1.woff rename to ihk-election-static-templates/src/SourceSansPro-Semibold-webfont.woff diff --git a/ihk-election-static-templates/src/fonts.css b/ihk-election-static-templates/src/fonts.css new file mode 100644 index 0000000..90050cc --- /dev/null +++ b/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'); +} diff --git a/ihk-election-static-templates/src/icons.3b88460a.woff b/ihk-election-static-templates/src/icons.woff similarity index 100% rename from ihk-election-static-templates/src/icons.3b88460a.woff rename to ihk-election-static-templates/src/icons.woff diff --git a/ihk-election-static-templates/src/korb-webfont.745dd52a.woff b/ihk-election-static-templates/src/korb-webfont.woff similarity index 100% rename from ihk-election-static-templates/src/korb-webfont.745dd52a.woff rename to ihk-election-static-templates/src/korb-webfont.woff diff --git a/ihk-election-static-templates/src/korb_bold-webfont.b592c1f0.woff b/ihk-election-static-templates/src/korb_bold-webfont.woff similarity index 100% rename from ihk-election-static-templates/src/korb_bold-webfont.b592c1f0.woff rename to ihk-election-static-templates/src/korb_bold-webfont.woff diff --git a/ihk-election-static-templates/src/magazine-header-flag.png b/ihk-election-static-templates/src/magazine-header-flag.png new file mode 100644 index 0000000..825affc Binary files /dev/null and b/ihk-election-static-templates/src/magazine-header-flag.png differ diff --git a/ihk-election-static-templates/src/nunito-sans-bold-italic.woff2 b/ihk-election-static-templates/src/nunito-sans-bold-italic.woff2 new file mode 100644 index 0000000..33563d8 Binary files /dev/null and b/ihk-election-static-templates/src/nunito-sans-bold-italic.woff2 differ diff --git a/ihk-election-static-templates/src/nunito-sans-bold.woff2 b/ihk-election-static-templates/src/nunito-sans-bold.woff2 new file mode 100644 index 0000000..19fcc94 Binary files /dev/null and b/ihk-election-static-templates/src/nunito-sans-bold.woff2 differ diff --git a/ihk-election-static-templates/src/nunito-sans-italic.woff2 b/ihk-election-static-templates/src/nunito-sans-italic.woff2 new file mode 100644 index 0000000..827096d Binary files /dev/null and b/ihk-election-static-templates/src/nunito-sans-italic.woff2 differ diff --git a/ihk-election-static-templates/src/nunito-sans-regular.woff2 b/ihk-election-static-templates/src/nunito-sans-regular.woff2 new file mode 100644 index 0000000..c527ba4 Binary files /dev/null and b/ihk-election-static-templates/src/nunito-sans-regular.woff2 differ diff --git a/ihk-election-static-templates/src/pictograms.5d5cdb0c.woff b/ihk-election-static-templates/src/pictograms.woff similarity index 100% rename from ihk-election-static-templates/src/pictograms.5d5cdb0c.woff rename to ihk-election-static-templates/src/pictograms.woff