alvin/Challenge_15_Magazijn_App_Maken
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Challenge_15_Magazijn_App_Maken.git synced 2026-03-06 13:22:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implement multilingual support with Dutch and English translations across various pages and functionalities

Browse Source
This commit is contained in:
Alvin
2025-11-05 09:37:04 +01:00
parent 1d5b007577
commit febdcf8217
10 changed files with 304 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/js/add-item.js
View File

@@ -72,9 +72,36 @@ async function addItem(e) {
e.preventDefault();
const formData = new FormData();
formData.append('name', document.getElementById('itemName').value);
// Collect multilingual name data
const nameData = {
nl: document.getElementById('itemNameNl').value.trim(),
en: document.getElementById('itemNameEn').value.trim()
};
// Collect multilingual description data
const descriptionData = {
nl: document.getElementById('itemDescriptionNl').value.trim(),
en: document.getElementById('itemDescriptionEn').value.trim()
};
// Validate that at least one language is filled for name
if (!nameData.nl && !nameData.en) {
alert('Please provide at least one name (Dutch or English)');
return;
}
// If only one language is provided for name, copy it to the other
if (!nameData.nl && nameData.en) {
nameData.nl = nameData.en;
}
if (!nameData.en && nameData.nl) {
nameData.en = nameData.nl;
}
formData.append('name', JSON.stringify(nameData));
formData.append('location', document.getElementById('itemLocation').value);
formData.append('description', document.getElementById('itemDescription').value);
formData.append('description', JSON.stringify(descriptionData));
formData.append('quantity', document.getElementById('itemQuantity').value);
const imageFile = document.getElementById('itemImage').files[0];

62
public/js/admin.js
View File

@@ -28,6 +28,14 @@ async function initializePage() {
}
}
// Reload content when language changes
function reloadContent() {
displayItems();
}
// Make reloadContent available globally for translation manager
window.reloadContent = reloadContent;
// Display user info
function displayUserInfo() {
const username = localStorage.getItem('username');
@@ -68,11 +76,21 @@ function getFilteredItems() {
return items;
}
return items.filter(item =>
item.name.toLowerCase().includes(searchTerm) ||
(item.description && item.description.toLowerCase().includes(searchTerm)) ||
item.location.toLowerCase().includes(searchTerm)
);
return items.filter(item => {
if (window.translationManager) {
const localizedItem = window.translationManager.getLocalizedItem(item);
return localizedItem.name.toLowerCase().includes(searchTerm) ||
(localizedItem.description && localizedItem.description.toLowerCase().includes(searchTerm)) ||
item.location.toLowerCase().includes(searchTerm);
} else {
// Fallback for when translation manager isn't loaded yet (default to Dutch)
const name = item.name?.nl || item.name?.en || item.name || '';
const description = item.description?.nl || item.description?.en || item.description || '';
return name.toLowerCase().includes(searchTerm) ||
description.toLowerCase().includes(searchTerm) ||
item.location.toLowerCase().includes(searchTerm);
}
});
}
// Display items based on current view mode
@@ -91,13 +109,19 @@ function displayGridView() {
itemsGrid.classList.remove('d-none');
const filteredItems = getFilteredItems();
itemsGrid.innerHTML = filteredItems.map(item => `
itemsGrid.innerHTML = filteredItems.map(item => {
const localizedItem = window.translationManager ? window.translationManager.getLocalizedItem(item) : {
name: item.name?.nl || item.name?.en || item.name || 'Onbekend Artikel',
description: item.description?.nl || item.description?.en || item.description || ''
};
return `
<div class="col-md-4 col-lg-3">
<div class="card item-card">
<img src="${item.imageUrl || '/images/default-item.png'}" class="item-image" alt="${item.name}">
<img src="${item.imageUrl || '/images/default-item.png'}" class="item-image" alt="${localizedItem.name}">
<div class="card-body">
<h5 class="card-title">${item.name}</h5>
<p class="card-text text-muted">${item.description || 'No description available'}</p>
<h5 class="card-title">${localizedItem.name}</h5>
<p class="card-text text-muted">${localizedItem.description || 'No description available'}</p>
<p class="card-text">Location: ${item.location}</p>
<p class="card-text">Quantity: ${item.quantity}</p>
<p class="card-text">Reserved: ${item.reserved || 0}</p>
@@ -108,7 +132,8 @@ function displayGridView() {
</div>
</div>
</div>
`).join('');
`;
}).join('');
}
// Display items in list view
@@ -120,11 +145,17 @@ function displayListView() {
const itemsListBody = document.getElementById('itemsListBody');
const filteredItems = getFilteredItems();
itemsListBody.innerHTML = filteredItems.map(item => `
itemsListBody.innerHTML = filteredItems.map(item => {
const localizedItem = window.translationManager ? window.translationManager.getLocalizedItem(item) : {
name: item.name?.nl || item.name?.en || item.name || 'Onbekend Artikel',
description: item.description?.nl || item.description?.en || item.description || ''
};
return `
<tr>
<td><img src="${item.imageUrl || '/images/default-item.png'}" class="item-thumbnail" alt="${item.name}"></td>
<td>${item.name}</td>
<td>${item.description || 'No description available'}</td>
<td><img src="${item.imageUrl || '/images/default-item.png'}" class="item-thumbnail" alt="${localizedItem.name}"></td>
<td>${localizedItem.name}</td>
<td>${localizedItem.description || 'No description available'}</td>
<td>${item.location}</td>
<td>${item.quantity}</td>
<td>${item.reserved || 0}</td>
@@ -133,7 +164,8 @@ function displayListView() {
<button class="btn btn-sm btn-danger" onclick="deleteItem('${item._id}')">Delete</button>
</td>
</tr>
`).join('');
`;
}).join('');
}
// Load reservations

48
public/js/translations.js
View File

@@ -180,29 +180,49 @@ class TranslationManager {
// Apply saved language preference
this.applyTranslations();
// Set up language toggle if it exists
const languageToggle = document.getElementById('languageToggle');
if (languageToggle) {
languageToggle.addEventListener('change', (e) => {
this.setLanguage(e.target.checked ? 'en' : 'nl');
// Set up language toggle buttons if they exist
const nlBtn = document.getElementById('nlBtn');
const enBtn = document.getElementById('enBtn');
if (nlBtn && enBtn) {
nlBtn.addEventListener('click', () => {
this.setLanguage('nl');
this.updateLanguageButtons();
});
// Set toggle state based on current language (Dutch is default/unchecked)
languageToggle.checked = this.currentLanguage === 'en';
this.updateLanguageLabels();
enBtn.addEventListener('click', () => {
this.setLanguage('en');
this.updateLanguageButtons();
});
// Set initial button states
this.updateLanguageButtons();
}
}
updateLanguageLabels() {
const nlLabel = document.getElementById('nlLabel');
const enLabel = document.getElementById('enLabel');
updateLanguageButtons() {
const nlBtn = document.getElementById('nlBtn');
const enBtn = document.getElementById('enBtn');
if (nlLabel && enLabel) {
nlLabel.classList.toggle('active', this.currentLanguage === 'nl');
enLabel.classList.toggle('active', this.currentLanguage === 'en');
if (nlBtn && enBtn) {
// Remove active class from both buttons
nlBtn.classList.remove('active');
enBtn.classList.remove('active');
// Add active class to current language button
if (this.currentLanguage === 'nl') {
nlBtn.classList.add('active');
} else {
enBtn.classList.add('active');
}
}
}
// Keep the old method for backward compatibility (in case it's used elsewhere)
updateLanguageLabels() {
this.updateLanguageButtons();
}
setLanguage(lang) {
if (lang !== 'en' && lang !== 'nl') {
console.warn('Unsupported language:', lang);