|
| 1 | +async function getData() { |
| 2 | + const url = "/patterns/index.json"; |
| 3 | + try { |
| 4 | + const response = await fetch(url); |
| 5 | + if (!response.ok) { |
| 6 | + throw new Error(`Response status: ${response.status}`); |
| 7 | + } |
| 8 | + const json = await response.json(); |
| 9 | + return json; |
| 10 | + } catch (error) { |
| 11 | + console.error(error.message); |
| 12 | + } |
| 13 | +} |
| 14 | + |
| 15 | +function sleep (time) { |
| 16 | + return new Promise((resolve) => setTimeout(resolve, time)); |
| 17 | +} |
| 18 | + |
| 19 | +function cleanString(string) { |
| 20 | + return string.replace(/ /g, "-") |
| 21 | +} |
| 22 | + |
| 23 | +function capitalizeFirstLetter(string) { |
| 24 | + return string[0].toUpperCase() + string.slice(1); |
| 25 | +} |
| 26 | + |
| 27 | +function sortAtoZ(a, b){ |
| 28 | + const nameA = a.Name.toUpperCase() |
| 29 | + const nameB = b.Name.toUpperCase() |
| 30 | + if (nameA < nameB) { |
| 31 | + return -1; |
| 32 | + } |
| 33 | + if (nameA > nameB) { |
| 34 | + return 1; |
| 35 | + } |
| 36 | + return 0; |
| 37 | +} |
| 38 | + |
| 39 | +function sortDate(a, b){ |
| 40 | + if (a.Params.date != undefined) { |
| 41 | + var dateA = new Date(a.Params.date) |
| 42 | + } else { |
| 43 | + var dateA = new Date("2000-01-01T00:00:00Z"); |
| 44 | + }; |
| 45 | + if (b.Params.date != undefined) { |
| 46 | + var dateB = new Date(b.Params.date) |
| 47 | + } else { |
| 48 | + var dateB = new Date("2000-01-01T00:00:00Z"); |
| 49 | + }; |
| 50 | + if (dateA < dateB) { |
| 51 | + return -1; |
| 52 | + } |
| 53 | + if (dateA > dateB) { |
| 54 | + return 1; |
| 55 | + } |
| 56 | + return 0; |
| 57 | +} |
| 58 | + |
| 59 | +function renderSpinner() { |
| 60 | + return '<div class="pf-l-bullseye">' + |
| 61 | + '<div class="pf-l-bullseye__item">' + |
| 62 | + '<svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100" aria-label="Loading..." >' + |
| 63 | + '<circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />' + |
| 64 | + '</svg>' + |
| 65 | + '</div>' + |
| 66 | + '</div>'; |
| 67 | +} |
| 68 | + |
| 69 | +function renderFilterItem(type, name, linkTitle) { |
| 70 | + var filterItem = '<label class="pf-c-check pf-c-select__menu-item" for="' + type + ':' + cleanString(name) + '">' + |
| 71 | + '<input class="pf-c-check__input" type="checkbox" id="' + type + ':' + cleanString(name) + '"' + 'onclick="filterSelection()" name="' + linkTitle + '"/>' + |
| 72 | + '<span class="pf-c-check__label wrappable">' + linkTitle + '</span>'+ |
| 73 | + '</label>'; |
| 74 | + return filterItem; |
| 75 | +} |
| 76 | + |
| 77 | +function renderFilter(elementId, filterType, filterData) { |
| 78 | + for (item = 0; item < filterData.length; item++) { |
| 79 | + const element = document.getElementById(elementId); |
| 80 | + element.innerHTML += renderFilterItem(filterType, filterData[item].Name, filterData[item].LinkTitle); |
| 81 | + }; |
| 82 | +} |
| 83 | + |
| 84 | +function renderLabel(tier) { |
| 85 | + if (tier != undefined) { |
| 86 | + if (tier == "maintained") { var color = "green" } |
| 87 | + else if (tier == "tested") { var color = "blue" } |
| 88 | + else if (tier == "sandbox") { var color = "orange" }; |
| 89 | + var renderedLabel = '<span class="pf-c-label pf-m-' + color +'">' + |
| 90 | + '<span class="pf-c-label__content">' + |
| 91 | + '<img src="/images/pattern-tier-' + tier + '.png" alt="' + capitalizeFirstLetter(tier) + '" width="16" height="16" class="custom-pattern-icon"/>' + |
| 92 | + capitalizeFirstLetter(tier) + |
| 93 | + '</span>' + |
| 94 | + '</span>'; |
| 95 | + return renderedLabel; |
| 96 | + } else { |
| 97 | + return ""; |
| 98 | + }; |
| 99 | +} |
| 100 | + |
| 101 | +function renderCard(pattern) { |
| 102 | + var renderCard = '<div class="pf-l-gallery__item" style="display: grid;">' + |
| 103 | + '<div class="pf-c-card" style="text-align: left; --pf-c-card__title--FontSize: 1rem; --pf-c-card__body--FontSize: 0.95rem;">' + |
| 104 | + '<div class="pf-c-card__title">' + |
| 105 | + '<a href="' + pattern.Link +'">' + |
| 106 | + pattern.Name + |
| 107 | + '</a>' + |
| 108 | + '</div>' + |
| 109 | + '<div class="pf-c-card__body">' + |
| 110 | + pattern.Params.summary + |
| 111 | + '</div>' + |
| 112 | + '<div class="pf-c-card__footer">' + |
| 113 | + renderLabel(pattern.Params.tier) + |
| 114 | + '</div>' + |
| 115 | + '</div>' + |
| 116 | + '</div>'; |
| 117 | + return renderCard; |
| 118 | +} |
| 119 | + |
| 120 | +function renderFilteredCards(patterns, filter_categories) { |
| 121 | + const element = document.getElementById("patternCards"); |
| 122 | + const patternLoaderSpinner = document.getElementById("patternLoaderSpinner"); |
| 123 | + element.innerHTML = ""; |
| 124 | + patternLoaderSpinner.innerHTML = renderSpinner(); |
| 125 | + var filter = new Object(); |
| 126 | + var filteredPatterns = []; |
| 127 | + var sortValue = document.getElementById("select-pattern-sort"); |
| 128 | + for (const [category, terms] of Object.entries(filter_categories)) { |
| 129 | + for (item = 0; item < terms.length; item++) { |
| 130 | + var checkboxId = category + ":" + cleanString(terms[item].Name); |
| 131 | + var checkbox = document.getElementById(checkboxId); |
| 132 | + if (checkbox.checked) { |
| 133 | + if (filter[category] == undefined) { filter[category] = [] }; |
| 134 | + filter[category].push(terms[item].LinkTitle); |
| 135 | + }; |
| 136 | + }; |
| 137 | + }; |
| 138 | + for (item = 0; item < patterns.length; item++) { |
| 139 | + var checksPassed = new Object(); |
| 140 | + for (const [category, terms] of Object.entries(filter)) { |
| 141 | + if (typeof(patterns[item].Params[category]) == "string") { |
| 142 | + for (termId = 0; termId < terms.length; termId++) { |
| 143 | + if (terms[termId].toLowerCase() == patterns[item].Params[category].toLowerCase()) { |
| 144 | + checksPassed[category] = true; |
| 145 | + } |
| 146 | + } |
| 147 | + } else if (typeof(patterns[item].Params[category]) == "object" && patterns[item].Params[category] != null) { |
| 148 | + var patternTerms = patterns[item].Params[category].map(v => v.toLowerCase()); |
| 149 | + var filterTerms = terms.map(v => v.toLowerCase()); |
| 150 | + if(filterTerms.every(r => patternTerms.includes(r))) { |
| 151 | + checksPassed[category] = true; |
| 152 | + }; |
| 153 | + }; |
| 154 | + }; |
| 155 | + var patternPassed = true; |
| 156 | + for (const [category, terms] of Object.entries(filter)) { |
| 157 | + if (checksPassed[category] != true) { |
| 158 | + patternPassed = false; |
| 159 | + }; |
| 160 | + }; |
| 161 | + if (patternPassed == true) { filteredPatterns.push(patterns[item]); }; |
| 162 | + }; |
| 163 | + if (sortValue.value == "atoz") { |
| 164 | + filteredPatterns.sort(sortAtoZ); |
| 165 | + } else if (sortValue.value == "ztoa") { |
| 166 | + filteredPatterns.sort(sortAtoZ); |
| 167 | + filteredPatterns.reverse(); |
| 168 | + } else if (sortValue.value == "oldest") { |
| 169 | + filteredPatterns.sort(sortDate); |
| 170 | + } else if (sortValue.value == "newest") { |
| 171 | + filteredPatterns.sort(sortDate); |
| 172 | + filteredPatterns.reverse(); |
| 173 | + }; |
| 174 | + patternLoaderSpinner.innerHTML = ""; |
| 175 | + for (item = 0; item < filteredPatterns.length; item++) { |
| 176 | + const element = document.getElementById("patternCards"); |
| 177 | + element.innerHTML += renderCard(filteredPatterns[item]); |
| 178 | + }; |
| 179 | + var totalPatternsCount = patterns.length |
| 180 | + var filteredPatternsCount = filteredPatterns.length |
| 181 | + const counter = document.getElementById("pattern-counter"); |
| 182 | + counter.innerHTML = filteredPatternsCount + " of " + totalPatternsCount + " patterns displayed"; |
| 183 | +} |
| 184 | + |
| 185 | +function filterSelection(filter) { |
| 186 | + // Declaring variables |
| 187 | + const patternsData = getData() |
| 188 | + patternsData.then(output => { |
| 189 | + renderFilteredCards(output.patterns, output.filter_categories) |
| 190 | + }); |
| 191 | +} |
| 192 | + |
| 193 | +const patternsData = getData() |
| 194 | +patternsData.then(output => { |
| 195 | + renderFilter("TiersItems", "tier", output.filter_categories.tier); |
| 196 | + renderFilter("IndustriesItems", "industries", output.filter_categories.industries); |
| 197 | + renderFilter("RhProductsItems", "rh_products", output.filter_categories.rh_products); |
| 198 | + renderFilter("OtherProductsItems", "other_products", output.filter_categories.other_products); |
| 199 | + renderFilteredCards(output.patterns, output.filter_categories) |
| 200 | +}); |
0 commit comments