56 lines
No EOL
1.8 KiB
JavaScript
56 lines
No EOL
1.8 KiB
JavaScript
async function fetchTools() {
|
|
try {
|
|
const response = await fetch('tools.json');
|
|
if (!response.ok) {
|
|
throw new Error("VPS response is bad");
|
|
}
|
|
const tools = await response.json();
|
|
return tools;
|
|
} catch (error) {
|
|
console.error("Failed to fetch tools:", error);
|
|
return [];
|
|
}
|
|
};
|
|
|
|
function renderTools(filteredTools, language = 'en') {
|
|
const toolList = document.getElementById('toolsMain');
|
|
toolList.innerHTML = "";
|
|
|
|
filteredTools.forEach(tool => {
|
|
const toolData = {
|
|
name: language === 'de' ? tool["name-de"] : tool.name,
|
|
subheader: language === 'de' ? tool["subheader-de"] : tool.subheader,
|
|
description: language === 'de' ? tool["description-de"] : tool.description,
|
|
url: tool.url
|
|
};
|
|
|
|
const toolItem = document.createElement("div");
|
|
toolItem.className = "tool-div";
|
|
|
|
toolItem.innerHTML = `
|
|
<h1 class="tool-header">↬ ${toolData.name} ↫</h1>
|
|
<h2 class="tool-subhead">${toolData.subheader}</h2>
|
|
<h2 class="tool-desc">${toolData.description}</h2>
|
|
<img class="tool-media" src="assets/${tool.name}.png" alt="${tool.name} Image">
|
|
<a id="visit" class="visit-tool" href="${toolData.url}">Visit "${toolData.name}"!</a>
|
|
`;
|
|
|
|
toolList.appendChild(toolItem);
|
|
});
|
|
};
|
|
|
|
async function filterTools(filterType, language = 'en') {
|
|
const tools = await fetchTools();
|
|
let filteredTools;
|
|
if (filterType) {
|
|
filteredTools = tools;
|
|
}
|
|
renderTools(filteredTools, language);
|
|
}
|
|
|
|
document.getElementById('langauge-selector').addEventListener('change', async (event) => {
|
|
const selectedLanguage = event.target.value;
|
|
await filterTools('all', selectedLanguage);
|
|
});
|
|
|
|
filterTools('all'); |