CSV Filter<\/title>\n <link\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\"\n rel=\"stylesheet\"\n \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.17.0\/xlsx.full.min.js\"><\/script>\n <style>\n .agripediaCardLinkList {\n color: blue !important;\n text-decoration: underline;\n }\n <\/style>\n <\/head>\n <body class=\"bg-gray-100 font-sans\">\n <div class=\"container mx-auto p-4\">\n <div\n class=\"bg-gray-200 rounded-md shadow-lg border-2 border-gray-300 p-6 mb-4\"\n >\n <h2 class=\"text-lg font-semibold mb-2\">Filter<\/h2>\n <form id=\"filterForm\" class=\"mb-4\" onsubmit=\"return false;\">\n <div class=\"flex space-x-4 mb-4\">\n <select\n id=\"categoryFilter\"\n style=\"height: 50px; width: 50%\"\n class=\"px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500\"\n >\n <option value=\"\">Kategorie ausw\u00e4hlen<\/option>\n <\/select>\n <select\n id=\"areaFilter\"\n style=\"height: 50px; width: 50%\"\n class=\"px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500\"\n >\n <option value=\"\">Bereich ausw\u00e4hlen<\/option>\n <\/select>\n <\/div>\n\n <div class=\"flex justify-between items-center\">\n <button\n id=\"filterReset\"\n class=\"bg-red-500 text-white py-2 px-4 border border-red-700 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50\"\n >\n Zur\u00fccksetzen\n <\/button>\n <span id=\"versionCount\" class=\"text-gray-700\"\n >Version: 1.5\n <\/span>\n <\/div>\n <\/form>\n <\/div>\n\n <div class=\"py-4 flex justify-between items-center\">\n <span id=\"resultCount\" class=\"text-gray-700\"\n >Ergebnisse: 0<\/span\n >\n <button\n type=\"button\"\n id=\"sortButton\"\n class=\"bg-gray-500 text-white py-2 px-4 border border-gray-200 rounded-md hover:from-gray-900 hover:to-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50\"\n >\n Nach Wirkung sortieren\n <\/button>\n <\/div>\n \n <div id=\"dataDisplay\" class=\"grid grid-cols-1 gap-4 w-full\"><\/div>\n\n \n <div\n id=\"paginationControls\"\n class=\"flex justify-center items-center mt-4\"\n >\n <button\n id=\"prevButton\"\n class=\"bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600\"\n disabled\n >\n Previous\n <\/button>\n <span id=\"pageInfo\" class=\"text-gray-700\">Page 1<\/span>\n <button\n id=\"nextButton\"\n class=\"bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600\"\n >\n Next\n <\/button>\n <select\n id=\"pageSelect\"\n class=\"ml-4 border border-gray-300 rounded-md bg-white\"\n >\n \n <\/select>\n <\/div>\n <\/div>\n <script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const dataDisplay = document.getElementById(\"dataDisplay\");\n const categoryFilter =\n document.getElementById(\"categoryFilter\");\n const filterReset = document.getElementById(\"filterReset\");\n const areaFilter = document.getElementById(\"areaFilter\");\n const resultCount = document.getElementById(\"resultCount\");\n const sortButton = document.getElementById(\"sortButton\");\n const prevButton = document.getElementById(\"prevButton\");\n const nextButton = document.getElementById(\"nextButton\");\n const pageInfo = document.getElementById(\"pageInfo\");\n const pageSelect = document.getElementById(\"pageSelect\");\n\n let data = [];\n let filteredData = [];\n let currentPage = 1;\n const itemsPerPage = 10;\n\n \/\/ Function to strip HTML tags from a string\n function stripHtml(html) {\n const doc = new DOMParser().parseFromString(\n html,\n \"text\/html\"\n );\n return doc.body.textContent || \"\";\n }\n\n \/\/ Function to read the Excel file\n function readExcelFile(file) {\n const reader = new FileReader();\n reader.onload = function (e) {\n const data = new Uint8Array(e.target.result);\n const workbook = XLSX.read(data, { type: \"array\" });\n const firstSheetName = workbook.SheetNames[2];\n const worksheet = workbook.Sheets[firstSheetName];\n const jsonData = XLSX.utils.sheet_to_json(worksheet, {\n header: 1,\n });\n \/\/ console.log('Raw JSON Data:', jsonData); \/\/ Log raw data\n\n \/\/ Set constants for starting row and column\n const startingRow = 2; \/\/ Starting from the 3rd row (4th in 0-index), assuming data begins with 1\n const startingColumn = 0; \/\/ Starting from the 3rd column (3rd in 0-index) if starts with 0\n\n \/\/ Adjust the slicing based on starting positions\n const filteredData = jsonData\n .slice(startingRow) \/\/ Start from the specified row\n .filter((row) =>\n row\n .slice(startingColumn)\n .some((cell) => cell !== \"\")\n ); \/\/ Ignore empty rows, considering starting column\n\n \/\/ Get headers from the first non-empty row that follows the specified starting row\n const headers = filteredData[0]\n ? filteredData[0].slice(startingColumn)\n : [];\n const dataToProcess = filteredData.slice(1); \/\/ Data after the header row\n \/\/ console.log('last JSON Data:', filteredData); \/\/ Log raw data\n\n \/\/ Process the data with specified headers\n processData(dataToProcess, headers);\n };\n reader.readAsArrayBuffer(file);\n }\n\n \/\/ Adjust this function to accept headers as a parameter\n function processData(jsonData, headers) {\n \/\/ console.log('Headers:', headers); \/\/ Log headers\n data = jsonData.map((row) => {\n const obj = {};\n headers.forEach((header, index) => {\n obj[header] = row[index] || \"\"; \/\/ Safeguard against undefined values\n });\n \/\/ console.log('Processed Row:', obj); \/\/ Log each processed row\n return obj;\n });\n \/\/ console.log('Processed Data:', data); \/\/ Log processed data\n filteredData = data;\n updateFilters();\n displayData();\n }\n\n filterReset.onclick = function resetFilters() {\n document.getElementById(\"filterForm\").reset(); \/\/ Reset the form\n document.getElementById(\"categoryFilter\").value = \"\"; \/\/ Set to default option\n document.getElementById(\"areaFilter\").value = \"\"; \/\/ Set to default option\n filterData();\n displayData();\n };\n\n function updateFilters() {\n \/\/ Use the actual header names for categories and areas\n const categoriesHeader = \"Kategorie\";\n const areasHeader = \"Bereich\";\n\n \/\/ Check if filteredData is populated\n \/\/ console.log('Filtered Data:', filteredData); \/\/ Log filtered data before processing categories and areas\n\n const categories = [\n ...new Set(\n filteredData.flatMap((item) => {\n const categoryValue = item[categoriesHeader]; \/\/ Access using header\n if (categoryValue) {\n return categoryValue\n .split(\",\")\n .map((cat) => cat.trim())\n .filter((cat) => cat.length > 0);\n }\n return [];\n })\n ),\n ];\n\n const areas = [\n ...new Set(\n filteredData.flatMap((item) => {\n const areaValue = item[areasHeader]; \/\/ Access using header\n if (areaValue) {\n return areaValue\n .split(\",\")\n .map((area) => area.trim())\n .filter((area) => area.length > 0);\n }\n return [];\n })\n ),\n ];\n\n \/\/ Populate category filter\n categoryFilter.innerHTML =\n '<option value=\"\">Kategorie ausw\u00e4hlen<\/option>' +\n categories\n .map(\n (cat) =>\n `<option value=\"${cat}\">${cat}<\/option>`\n )\n .join(\"\");\n\n \/\/ Populate area filter\n areaFilter.innerHTML =\n '<option value=\"\">Bereich ausw\u00e4hlen<\/option>' +\n areas\n .map(\n (area) =>\n `<option value=\"${area}\">${area}<\/option>`\n )\n .join(\"\");\n\n \/\/ Log to verify that filters have been updated\n \/\/ console.log('Categories:', categories);\n \/\/ console.log('Areas:', areas);\n }\n\n function filterData() {\n const selectedCategory = categoryFilter.value;\n const selectedArea = areaFilter.value;\n\n \/\/ console.log('Data:', data);\n \/\/ console.log('Selected category:', selectedCategory); \/\/ Log selected category\n \/\/ console.log('Selected area:', selectedArea); \/\/ Log selected area\n\n filteredData = data.filter((item) => {\n \/\/ Check for category matching in case of comma-separated values\n const categoryMatches = selectedCategory\n ? item.Kategorie.split(\",\")\n .map((cat) => cat.trim())\n .includes(selectedCategory)\n : true;\n\n \/\/ Check for area matching considering comma-separated values\n const areaMatches = selectedArea\n ? item.Bereich.split(\",\")\n .map((area) => area.trim())\n .includes(selectedArea)\n : true;\n\n const itemMatches = categoryMatches && areaMatches; \/\/ Combine results\n\n \/\/ Debugging log to understand which items are being considered\n \/\/ console.log(`Item ID: ${item.ID} - Category Matches: ${categoryMatches}, Area Matches: ${areaMatches}, Matches: ${itemMatches}`);\n\n return itemMatches;\n });\n\n currentPage = 1;\n \/\/ console.log('Filtered Data:', filteredData); \/\/ Log filtered data\n displayData();\n }\n\n \/\/ Function to display the data\n function displayData() {\n dataDisplay.innerHTML = \"\";\n const start = (currentPage - 1) * itemsPerPage;\n const end = start + itemsPerPage;\n const pageData = filteredData.slice(start, end);\n\n pageData.forEach((item) => {\n \/\/ Agriscore letters display\n const agriscoreDisplay = getAgriscoreDisplay(\n item.Agriscore\n );\n\n const div = document.createElement(\"div\");\n div.className =\n \"bg-gray-200 p-4 my-2 rounded-md shadow-lg border-2 border-gray-300\";\n div.innerHTML = `\n <div class=\"grid grid-cols-4 gap-4\">\n <h3 class=\"col-span-3 text-xl font-semibold\">${stripHtml(\n item.Massnahme || \"\"\n )}<\/h3>\n <p class=\"col-span-1 text-gray-600 justify-self-end\" style=\"white-space: nowrap !important;\"> Wirkung <\/p>\n <\/div>\n <div class=\"flex justify-between items-center mt-4\">\n <span class=\"text-gray-700\"> ID: ${item.ID || \"\"} <\/span>\n <div class=\"flex space-x-1\">\n ${agriscoreDisplay}\n <\/div>\n <\/div>\n <div class=\"mt-4\">\n <strong>Beschreibung und Wirkung<\/strong>\n <p class=\"text-gray-800\">${stripHtml(\n item[\"Beschreibung und Wirkung\"] || \"\"\n )}<\/p>\n <\/div>\n <div class=\"mt-4\">\n <strong>Bemerkung<\/strong>\n <p class=\"text-gray-800\">\n ${stripHtml(item.Bemerkung || \"\")}\n <\/p>\n <\/div>\n <div class=\"mt-4\"> <div class=\"mt-4\">\n <strong>Literatur<\/strong>\n <ul class=\"list-disc pl-5\">\n ${\n item[\"Literatur 1\"]\n ? `<li><a class=\"agripediaCardLinkList\" href=\"${\n item[\"Literaturlink 1\"]\n }\" target=\"_blank\" >${stripHtml(item[\"Literatur 1\"] || \"\")}<\/a><\/li>`\n : \"\"\n }\n ${\n item[\"Literatur 2\"]\n ? `<li><a class=\"agripediaCardLinkList\" href=\"${\n item[\"Literaturlink 2\"]\n }\" target=\"_blank\" >${stripHtml(item[\"Literatur 2\"] || \"\")}<\/a><\/li>`\n : \"\"\n }\n ${\n item[\"Literatur 3\"]\n ? `<li><a class=\"agripediaCardLinkList\" href=\"${\n item[\"Literaturlink 3\"]\n }\" target=\"_blank\" >${stripHtml(item[\"Literatur 3\"] || \"\")}<\/a><\/li>`\n : \"\"\n }\n${\n item[\"Literatur 4\"]\n ? `<li><a class=\"agripediaCardLinkList\" href=\"${\n item[\"Literaturlink 4\"]\n }\" target=\"_blank\" >${stripHtml(item[\"Literatur 4\"] || \"\")}<\/a><\/li>`\n : \"\"\n }\n <\/ul>\n <\/div>\n\n <\/div>\n `;\n dataDisplay.appendChild(div);\n });\n\n resultCount.textContent = `Ergebnisse: ${filteredData.length}`;\n \/\/ console.log('Displayed Data:', pageData); \/\/ Log displayed data\n updatePagination();\n }\n\n function getAgriscoreDisplay(agriscore) {\n return `<img src=${getAgriscoreDisplayImageUrl(\n agriscore.trim()\n )} alt={letter} width=\"200\" height=\"20\" \/>`;\n }\n\n function getBackgroundColor(letter) {\n switch (letter) {\n case \"A\":\n return \"m-3 flex h-10 w-10 items-center justify-center bg-green-500\"; \/\/ Green\n case \"B\":\n return \"m-3 flex h-10 w-10 items-center justify-center bg-green-400\"; \/\/ Slightly yellow-green\n case \"C\":\n return \"m-3 flex h-10 w-10 items-center justify-center bg-gradient-to-r from-green-300 to-yellow-300\";\n case \"D\":\n return \"m-3 flex h-10 w-10 items-center justify-center bg-yellow-300\"; \/\/ Yellow\n case \"E\":\n return \"m-3 flex h-10 w-10 items-center justify-center bg-yellow-200\"; \/\/ Slightly golden-yellow\n case \"F\":\n return \"m-3 flex h-10 w-10 items-center justify-center bg-yellow-100\"; \/\/ Whitish-yellow\n default:\n return \"m-3 flex h-10 w-10 items-center justify-center rounded-full bg-gray-300\"; \/\/ Default color\n }\n }\n\n function getAgriscoreDisplayImageUrl(letter) {\n switch (letter) {\n case \"A\":\n return \"https:\/\/agripedia.ch\/wp-content\/uploads\/sites\/22\/js\/img\/Agriscore_A.png\"; \/\/ A\n case \"B\":\n return \"https:\/\/agripedia.ch\/wp-content\/uploads\/sites\/22\/js\/img\/Agriscore_B.png\"; \/\/ B\n case \"C\":\n return \"https:\/\/agripedia.ch\/wp-content\/uploads\/sites\/22\/js\/img\/Agriscore_C.png\"; \/\/ C\n case \"D\":\n return \"https:\/\/agripedia.ch\/wp-content\/uploads\/sites\/22\/js\/img\/Agriscore_D.png\"; \/\/ D\n case \"E\":\n return \"https:\/\/agripedia.ch\/wp-content\/uploads\/sites\/22\/js\/img\/Agriscore_E.png\"; \/\/ E\n case \"F\":\n return \"https:\/\/agripedia.ch\/wp-content\/uploads\/sites\/22\/js\/img\/Agriscore_F.png\"; \/\/ F\n default:\n return \"https:\/\/agripedia.ch\/wp-content\/uploads\/sites\/22\/js\/img\/Agriscore_A.png\"; \/\/ A\n }\n }\n\n \/\/ Function to update pagination controls\n function updatePagination() {\n const totalPages = Math.ceil(\n filteredData.length \/ itemsPerPage\n );\n pageInfo.textContent = `Page ${currentPage}`;\n\n prevButton.disabled = currentPage === 1;\n nextButton.disabled = currentPage === totalPages;\n\n pageSelect.innerHTML = \"\";\n for (let i = 1; i <= totalPages; i++) {\n const option = document.createElement(\"option\");\n option.value = i;\n option.textContent = i;\n pageSelect.appendChild(option);\n }\n pageSelect.value = currentPage;\n }\n\n \/\/ Event listeners\n categoryFilter.addEventListener(\"change\", filterData);\n areaFilter.addEventListener(\"change\", filterData);\n let isAscending = true;\n sortButton.addEventListener(\"click\", () => {\n \/\/ console.log('To be Sorted data 1',filteredData);\n\n filteredData.sort((a, b) => {\n if (isAscending) {\n return a.Agriscore.localeCompare(b.Agriscore); \/\/ Ascending order\n } else {\n return b.Agriscore.localeCompare(a.Agriscore); \/\/ Descending order\n }\n });\n\n isAscending = !isAscending;\n\n displayData();\n });\n prevButton.addEventListener(\"click\", () => {\n if (currentPage > 1) {\n currentPage--;\n displayData();\n }\n });\n nextButton.addEventListener(\"click\", () => {\n const totalPages = Math.ceil(\n filteredData.length \/ itemsPerPage\n );\n if (currentPage < totalPages) {\n currentPage++;\n displayData();\n }\n });\n pageSelect.addEventListener(\"change\", (e) => {\n currentPage = parseInt(e.target.value);\n displayData();\n });\n\n \/\/ Read the Excel file\n fetch(\"https:\/\/agripedia.ch\/focus-ap-pa\/wp-content\/uploads\/sites\/22\/2025\/03\/index1.xlsx\")\n \/\/https:\/\/agripedia.ch\/kwnoledgefarmch\/wp-content\/uploads\/index1.xlsx\n .then((response) => response.blob())\n .then((blob) => {\n readExcelFile(blob);\n });\n });\n <\/script>\n <\/body>\n<\/html>\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":927,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_sb_is_suggestion_mode":false,"_sb_show_suggestion_boards":false,"_sb_show_comment_boards":false,"_sb_suggestion_history":"","_sb_update_block_changes":"","inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-3027","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/agripedia.ch\/focus-ap-pa\/de\/wp-json\/wp\/v2\/pages\/3027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agripedia.ch\/focus-ap-pa\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agripedia.ch\/focus-ap-pa\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agripedia.ch\/focus-ap-pa\/de\/wp-json\/wp\/v2\/users\/927"}],"replies":[{"embeddable":true,"href":"https:\/\/agripedia.ch\/focus-ap-pa\/de\/wp-json\/wp\/v2\/comments?post=3027"}],"version-history":[{"count":86,"href":"https:\/\/agripedia.ch\/focus-ap-pa\/de\/wp-json\/wp\/v2\/pages\/3027\/revisions"}],"predecessor-version":[{"id":3419,"href":"https:\/\/agripedia.ch\/focus-ap-pa\/de\/wp-json\/wp\/v2\/pages\/3027\/revisions\/3419"}],"wp:attachment":[{"href":"https:\/\/agripedia.ch\/focus-ap-pa\/de\/wp-json\/wp\/v2\/media?parent=3027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}