mirror of
https://github.com/Alvin-Zilverstand/Challenge_15_Magazijn_App_Maken.git
synced 2026-03-06 02:56:41 +01:00
Implement multilingual support with Dutch and English translations across various pages and functionalities
This commit is contained in:
Alvin
@@ -12,25 +12,35 @@
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">School Warehouse - Admin</a>
|
||||
<a class="navbar-brand" href="#" data-translate="school-warehouse">School Magazijn - Admin</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="admin.html">Inventory</a>
|
||||
<a class="nav-link" href="admin.html" data-translate="inventory">Voorraad</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="add-item.html">Add New Item</a>
|
||||
<a class="nav-link active" href="add-item.html" data-translate="add-new-item">Nieuw Artikel Toevoegen</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="admin-reservations.html">Reservations</a>
|
||||
<a class="nav-link" href="admin-reservations.html" data-translate="reservations">Reserveringen</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-nav ms-auto">
|
||||
<div class="language-toggle nav-item">
|
||||
<div class="language-switcher">
|
||||
<button class="language-btn active" id="nlBtn" data-lang="nl">
|
||||
<i class="fas fa-flag me-1"></i>Nederlands
|
||||
</button>
|
||||
<button class="language-btn" id="enBtn" data-lang="en">
|
||||
<i class="fas fa-flag me-1"></i>English
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="nav-item nav-link text-light" id="userInfo"></span>
|
||||
<a class="nav-link" href="#" id="logoutBtn">Logout</a>
|
||||
<a class="nav-link" href="#" id="logoutBtn" data-translate="logout">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,13 +51,22 @@
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Add New Item</h3>
|
||||
<h3 data-translate="add-new-item">Nieuw Artikel Toevoegen</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="addItemForm">
|
||||
<div class="mb-3">
|
||||
<label for="itemName" class="form-label">Item Name</label>
|
||||
<input type="text" class="form-control" id="itemName" required>
|
||||
<label class="form-label">Item Name</label>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label for="itemNameNl" class="form-label text-muted small">Dutch</label>
|
||||
<input type="text" class="form-control" id="itemNameNl" placeholder="Nederlandse naam" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="itemNameEn" class="form-label text-muted small">English</label>
|
||||
<input type="text" class="form-control" id="itemNameEn" placeholder="English name" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="itemLocation" class="form-label">Location</label>
|
||||
@@ -58,8 +77,17 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="itemDescription" class="form-label">Description</label>
|
||||
<textarea class="form-control" id="itemDescription" rows="3"></textarea>
|
||||
<label class="form-label">Description</label>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label for="itemDescriptionNl" class="form-label text-muted small">Dutch</label>
|
||||
<textarea class="form-control" id="itemDescriptionNl" rows="3" placeholder="Nederlandse beschrijving"></textarea>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="itemDescriptionEn" class="form-label text-muted small">English</label>
|
||||
<textarea class="form-control" id="itemDescriptionEn" rows="3" placeholder="English description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="itemQuantity" class="form-label">Quantity</label>
|
||||
@@ -87,6 +115,7 @@
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/translations.js"></script>
|
||||
<script src="js/add-item.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -12,25 +12,35 @@
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">School Magazijn - Admin</a>
|
||||
<a class="navbar-brand" href="#" data-translate="school-warehouse">School Magazijn - Admin</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="admin.html">Voorraad</a>
|
||||
<a class="nav-link active" href="admin.html" data-translate="inventory">Voorraad</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="add-item.html">Nieuw Artikel Toevoegen</a>
|
||||
<a class="nav-link" href="add-item.html" data-translate="add-new-item">Nieuw Artikel Toevoegen</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="admin-reservations.html">Reserveringen</a>
|
||||
<a class="nav-link" href="admin-reservations.html" data-translate="reservations">Reserveringen</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-nav ms-auto">
|
||||
<div class="language-toggle nav-item">
|
||||
<div class="language-switcher">
|
||||
<button class="language-btn active" id="nlBtn" data-lang="nl">
|
||||
<i class="fas fa-flag me-1"></i>Nederlands
|
||||
</button>
|
||||
<button class="language-btn" id="enBtn" data-lang="en">
|
||||
<i class="fas fa-flag me-1"></i>English
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="nav-item nav-link text-light" id="userInfo"></span>
|
||||
<a class="nav-link" href="#" id="logoutBtn">Uitloggen</a>
|
||||
<a class="nav-link" href="#" id="logoutBtn" data-translate="logout">Uitloggen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -160,6 +170,7 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="js/translations.js"></script>
|
||||
<script src="js/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -477,68 +477,82 @@ body {
|
||||
color: var(--vista-white);
|
||||
}
|
||||
|
||||
/* Language Toggle Styles */
|
||||
/* Language Toggle Styles - Modern Button Design */
|
||||
.language-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.language-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 28px;
|
||||
.language-switcher {
|
||||
display: flex;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 25px;
|
||||
padding: 2px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.language-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
.language-switcher:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.language-slider {
|
||||
position: absolute;
|
||||
.language-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
margin: 0;
|
||||
border-radius: 20px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.language-btn:hover {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.language-btn.active {
|
||||
background: linear-gradient(135deg, var(--vista-blue), var(--vista-coral));
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.language-btn.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--vista-coral);
|
||||
transition: .4s;
|
||||
border-radius: 34px;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
|
||||
animation: shine 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.language-slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
@keyframes shine {
|
||||
0% { transform: translateX(-100%); }
|
||||
50% { transform: translateX(100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
input:checked + .language-slider {
|
||||
background-color: var(--vista-blue);
|
||||
/* Focus styles for accessibility */
|
||||
.language-btn:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
input:checked + .language-slider:before {
|
||||
transform: translateX(32px);
|
||||
}
|
||||
|
||||
.language-label {
|
||||
color: var(--vista-white);
|
||||
font-weight: 500;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.language-label.active {
|
||||
font-weight: bold;
|
||||
.language-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Language toggle for login page */
|
||||
@@ -552,6 +566,24 @@ input:checked + .language-slider:before {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.language-toggle-container .language-label {
|
||||
color: var(--vista-blue) !important;
|
||||
.language-switcher.login-page {
|
||||
background-color: rgba(21, 78, 135, 0.1);
|
||||
border: 1px solid rgba(21, 78, 135, 0.2);
|
||||
}
|
||||
|
||||
.language-switcher.login-page:hover {
|
||||
background-color: rgba(21, 78, 135, 0.15);
|
||||
}
|
||||
|
||||
.language-switcher.login-page .language-btn {
|
||||
color: var(--vista-blue);
|
||||
}
|
||||
|
||||
.language-switcher.login-page .language-btn:hover {
|
||||
color: var(--vista-coral);
|
||||
}
|
||||
|
||||
.language-switcher.login-page .language-btn.active {
|
||||
background: linear-gradient(135deg, var(--vista-blue), var(--vista-coral));
|
||||
color: white;
|
||||
}
|
||||
@@ -14,12 +14,14 @@
|
||||
<div class="col-md-6">
|
||||
<div class="language-toggle-container text-center mb-3">
|
||||
<div class="language-toggle">
|
||||
<span class="language-label text-dark" id="nlLabel">NL</span>
|
||||
<label class="language-switch">
|
||||
<input type="checkbox" id="languageToggle">
|
||||
<span class="language-slider"></span>
|
||||
</label>
|
||||
<span class="language-label text-dark" id="enLabel">EN</span>
|
||||
<div class="language-switcher login-page">
|
||||
<button class="language-btn active" id="nlBtn" data-lang="nl">
|
||||
<i class="fas fa-flag me-1"></i>Nederlands
|
||||
</button>
|
||||
<button class="language-btn" id="enBtn" data-lang="en">
|
||||
<i class="fas fa-flag me-1"></i>English
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
|
||||
@@ -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];
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -27,12 +27,14 @@
|
||||
</ul>
|
||||
<div class="navbar-nav ms-auto">
|
||||
<div class="language-toggle nav-item">
|
||||
<span class="language-label" id="nlLabel">NL</span>
|
||||
<label class="language-switch">
|
||||
<input type="checkbox" id="languageToggle">
|
||||
<span class="language-slider"></span>
|
||||
</label>
|
||||
<span class="language-label" id="enLabel">EN</span>
|
||||
<div class="language-switcher">
|
||||
<button class="language-btn active" id="nlBtn" data-lang="nl">
|
||||
<i class="fas fa-flag me-1"></i>Nederlands
|
||||
</button>
|
||||
<button class="language-btn" id="enBtn" data-lang="en">
|
||||
<i class="fas fa-flag me-1"></i>English
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="nav-item nav-link text-light" id="userInfo"></span>
|
||||
<a class="nav-link" href="#" id="logoutBtn" data-translate="logout">Uitloggen</a>
|
||||
|
||||
@@ -27,12 +27,14 @@
|
||||
</ul>
|
||||
<div class="navbar-nav ms-auto">
|
||||
<div class="language-toggle nav-item">
|
||||
<span class="language-label" id="nlLabel">NL</span>
|
||||
<label class="language-switch">
|
||||
<input type="checkbox" id="languageToggle">
|
||||
<span class="language-slider"></span>
|
||||
</label>
|
||||
<span class="language-label" id="enLabel">EN</span>
|
||||
<div class="language-switcher">
|
||||
<button class="language-btn active" id="nlBtn" data-lang="nl">
|
||||
<i class="fas fa-flag me-1"></i>Nederlands
|
||||
</button>
|
||||
<button class="language-btn" id="enBtn" data-lang="en">
|
||||
<i class="fas fa-flag me-1"></i>English
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="nav-item nav-link text-light" id="userInfo"></span>
|
||||
<a class="nav-link" href="#" id="logoutBtn" data-translate="logout">Uitloggen</a>
|
||||
|
||||
@@ -53,9 +53,27 @@ router.get('/:id', auth, async (req, res) => {
|
||||
// Add new item (admin only)
|
||||
router.post('/', auth, adminOnly, upload.single('image'), async (req, res) => {
|
||||
try {
|
||||
let name, description;
|
||||
|
||||
// Parse multilingual name data
|
||||
try {
|
||||
name = typeof req.body.name === 'string' ? JSON.parse(req.body.name) : req.body.name;
|
||||
} catch (e) {
|
||||
// If parsing fails, assume it's a simple string and create multilingual object
|
||||
name = { nl: req.body.name, en: req.body.name };
|
||||
}
|
||||
|
||||
// Parse multilingual description data
|
||||
try {
|
||||
description = typeof req.body.description === 'string' ? JSON.parse(req.body.description) : req.body.description;
|
||||
} catch (e) {
|
||||
// If parsing fails, assume it's a simple string and create multilingual object
|
||||
description = { nl: req.body.description || '', en: req.body.description || '' };
|
||||
}
|
||||
|
||||
const itemData = {
|
||||
name: req.body.name,
|
||||
description: req.body.description,
|
||||
name: name,
|
||||
description: description,
|
||||
location: req.body.location,
|
||||
quantity: parseInt(req.body.quantity)
|
||||
};
|
||||
@@ -76,9 +94,27 @@ router.post('/', auth, adminOnly, upload.single('image'), async (req, res) => {
|
||||
// Update item (admin only)
|
||||
router.put('/:id', auth, adminOnly, upload.single('image'), async (req, res) => {
|
||||
try {
|
||||
let name, description;
|
||||
|
||||
// Parse multilingual name data
|
||||
try {
|
||||
name = typeof req.body.name === 'string' ? JSON.parse(req.body.name) : req.body.name;
|
||||
} catch (e) {
|
||||
// If parsing fails, assume it's a simple string and create multilingual object
|
||||
name = { nl: req.body.name, en: req.body.name };
|
||||
}
|
||||
|
||||
// Parse multilingual description data
|
||||
try {
|
||||
description = typeof req.body.description === 'string' ? JSON.parse(req.body.description) : req.body.description;
|
||||
} catch (e) {
|
||||
// If parsing fails, assume it's a simple string and create multilingual object
|
||||
description = { nl: req.body.description || '', en: req.body.description || '' };
|
||||
}
|
||||
|
||||
const updateData = {
|
||||
name: req.body.name,
|
||||
description: req.body.description,
|
||||
name: name,
|
||||
description: description,
|
||||
location: req.body.location,
|
||||
quantity: parseInt(req.body.quantity)
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user