|
| 1 | +// TODO: Better ordering algorithm |
| 2 | +// TODO: Train cars + train sets |
| 3 | + |
| 4 | +const listContainer = document.getElementById('list-container'); |
| 5 | +const COMPENSATION_TEXTS = { free: 'Download (free)', donation: 'Download (donation-ware)', commercial: 'Buy (commercial)' }; |
| 6 | + |
| 7 | +const _routes = await fetch('https://raw.githubusercontent.com/openrails/content/main/routes.json'); |
| 8 | +const routes = (await _routes.json()).map((item, index) => ({ index, ...item })); |
| 9 | + |
| 10 | +let selectedCard = 'routes'; |
| 11 | +let filters = ['free', 'donation', 'commercial']; |
| 12 | + |
| 13 | +const addOrRemove = (arr, item) => (arr.includes(item) ? arr.filter((i) => i !== item) : [...arr, item]); |
| 14 | + |
| 15 | +function fuzzySearch(input, data, keys) { |
| 16 | + // Convert input to lowercase for case-insensitive search |
| 17 | + const searchQueries = input.toLowerCase().split(/\s+/); |
| 18 | + |
| 19 | + // Filter the data array based on the fuzzy search |
| 20 | + const result = data.filter((item) => { |
| 21 | + // Check if all search queries are present in any of the keys |
| 22 | + return searchQueries.every((searchQuery) => { |
| 23 | + // Check each key in the keys array |
| 24 | + return keys.some((key) => { |
| 25 | + // Get the nested value if key is nested |
| 26 | + const value = key.split('.').reduce((acc, currentKey) => { |
| 27 | + return acc ? acc[currentKey] : undefined; |
| 28 | + }, item); |
| 29 | + |
| 30 | + // If value is a string, check if it includes the search query |
| 31 | + if (typeof value === 'string') { |
| 32 | + return value.toLowerCase().includes(searchQuery); |
| 33 | + } |
| 34 | + |
| 35 | + return false; |
| 36 | + }); |
| 37 | + }); |
| 38 | + }); |
| 39 | + |
| 40 | + return result; |
| 41 | +} |
| 42 | + |
| 43 | +// Modified function from https://stackoverflow.com/a/18650828 |
| 44 | +function formatBytes(bytes, decimals = 2) { |
| 45 | + if (!+bytes) return '0 Bytes'; |
| 46 | + |
| 47 | + const k = 1000; |
| 48 | + const dm = decimals < 0 ? 0 : decimals; |
| 49 | + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; |
| 50 | + |
| 51 | + const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| 52 | + |
| 53 | + return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`; |
| 54 | +} |
| 55 | + |
| 56 | +const selectionCards = document.getElementsByClassName('selection'); |
| 57 | +for (const card of selectionCards) { |
| 58 | + card.addEventListener('click', (e) => selectCard(e)); |
| 59 | +} |
| 60 | + |
| 61 | +const filterButtons = document.getElementsByClassName('filter-btn'); |
| 62 | +for (const btn of filterButtons) { |
| 63 | + btn.addEventListener('click', (e) => toggleFilter(e)); |
| 64 | +} |
| 65 | + |
| 66 | +const searchInput = document.getElementById('search'); |
| 67 | +searchInput.addEventListener('input', generateList); |
| 68 | + |
| 69 | +function selectCard(e) { |
| 70 | + for (const card of selectionCards) { |
| 71 | + card.classList.remove('selected'); |
| 72 | + } |
| 73 | + |
| 74 | + e.currentTarget.classList.add('selected'); |
| 75 | + selectedCard = e.currentTarget.dataset.card; |
| 76 | +} |
| 77 | + |
| 78 | +function toggleFilter(e) { |
| 79 | + const filterType = e.target.dataset.type; |
| 80 | + if (filters.length === 1 && filters.includes(filterType)) return; |
| 81 | + |
| 82 | + e.target.toggleAttribute('data-secondary'); |
| 83 | + filters = addOrRemove(filters, filterType); |
| 84 | + |
| 85 | + generateList(); |
| 86 | +} |
| 87 | + |
| 88 | +function updateContainer(elementsArray) { |
| 89 | + const existingChildren = Array.from(listContainer.children); |
| 90 | + |
| 91 | + // Remove elements that are not in the new array |
| 92 | + existingChildren.forEach((child) => { |
| 93 | + const index = Number(child.dataset.index); |
| 94 | + if (!elementsArray.some((e) => Number(e.dataset.index) === index)) { |
| 95 | + listContainer.removeChild(child); |
| 96 | + } |
| 97 | + }); |
| 98 | + |
| 99 | + // Insert new elements at their correct position |
| 100 | + elementsArray.forEach((element) => { |
| 101 | + const currentChildren = Array.from(listContainer.children); |
| 102 | + const index = Number(element.dataset.index); |
| 103 | + |
| 104 | + if (currentChildren.some((e) => Number(e.dataset.index) === index)) return; |
| 105 | + |
| 106 | + const nextElement = currentChildren.find((e) => Number(e.dataset.index) > index); |
| 107 | + listContainer.insertBefore(element, nextElement); |
| 108 | + }); |
| 109 | +} |
| 110 | + |
| 111 | +function generateList() { |
| 112 | + const newItems = []; |
| 113 | + |
| 114 | + const filteredRoutes = fuzzySearch(searchInput.value, routes, ['name', 'description', 'author.name']); |
| 115 | + |
| 116 | + for (const route of filteredRoutes.filter((r) => filters.includes(r.compensation))) { |
| 117 | + const element = document.createElement('div'); |
| 118 | + |
| 119 | + const authorComponent = route.author.url ? `<a class="author-url" href="${route.author.url}" target="_blank">${route.author.name}</a>` : route.author.name; |
| 120 | + element.innerHTML = ` |
| 121 | + <img src="${route.image}" /> |
| 122 | + <div class="item-header"> |
| 123 | + <div> |
| 124 | + <h3>${route.name}</h3> |
| 125 | + <p class="author">created by ${authorComponent}</p> |
| 126 | + </div> |
| 127 | + <div><a class="btn" href="${route.url}" data-primary>${COMPENSATION_TEXTS[route.compensation]}</a></div> |
| 128 | + </div> |
| 129 | + <p> |
| 130 | + ${route.description} |
| 131 | + </p> |
| 132 | + ${route.downloadSize || route.installSize ? '<div style="margin-top: 0.5em;"></div>' : ''} |
| 133 | + ${route.downloadSize ? `<span class="size-badge">Download size: ${formatBytes(route.downloadSize)}</span>` : ''} |
| 134 | + ${route.installSize ? `<span class="size-badge">Install size: ${formatBytes(route.installSize)}</span>` : ''} |
| 135 | + `; |
| 136 | + |
| 137 | + element.classList.add('item'); |
| 138 | + element.dataset.index = route.index; |
| 139 | + newItems.push(element); |
| 140 | + } |
| 141 | + |
| 142 | + updateContainer(newItems); |
| 143 | +} |
| 144 | + |
| 145 | +generateList(); |
0 commit comments