44a91e7fcf
Case Submission Portal (Admin Moderation Queue): - Add statistics endpoint (GET /api/cases/submissions/stats) - Enhance filtering: status, failure_mode, AI relevance score - Add sorting options: date, relevance, completeness - Create admin moderation interface (case-moderation.html) - Implement CSP-compliant admin UI (no inline event handlers) - Deploy moderation actions: approve, reject, request-info - Fix API parameter mapping for different action types Internationalization (i18n): - Implement lightweight i18n system (i18n-simple.js, ~5KB) - Add language selector component with flag emojis - Create German and French translations for homepage - Document Te Reo Māori translation requirements - Add i18n attributes to homepage - Integrate language selector into navbar Bug Fixes: - Fix search button modal display on docs.html (remove conflicting flex class) Page Enhancements: - Add dedicated JS modules for researcher, leader, koha pages - Improve page-specific functionality and interactions Documentation: - Add I18N_IMPLEMENTATION_SUMMARY.md (implementation guide) - Add TE_REO_MAORI_TRANSLATION_REQUIREMENTS.md (cultural sensitivity guide) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
64 lines
2.4 KiB
JavaScript
64 lines
2.4 KiB
JavaScript
/**
|
|
* Language Selector Component
|
|
* Creates a dropdown for switching between supported languages
|
|
*/
|
|
|
|
(function() {
|
|
const supportedLanguages = [
|
|
{ code: 'en', name: 'English', flag: '🇬🇧' },
|
|
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
|
|
{ code: 'fr', name: 'Français', flag: '🇫🇷' },
|
|
{ code: 'mi', name: 'Te Reo Māori', flag: '🇳🇿', disabled: true, tooltip: 'Coming when system is complete' }
|
|
];
|
|
|
|
function createLanguageSelector() {
|
|
const container = document.getElementById('language-selector-container');
|
|
if (!container) return;
|
|
|
|
const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
|
|
|
|
const selectorHTML = `
|
|
<div class="language-selector relative inline-block">
|
|
<label for="language-selector" class="sr-only">Select Language</label>
|
|
<select
|
|
id="language-selector"
|
|
class="px-3 py-2 pr-8 border border-gray-300 rounded-lg bg-white text-gray-700 text-sm focus:border-blue-600 focus:outline-none cursor-pointer appearance-none"
|
|
aria-label="Select language"
|
|
>
|
|
${supportedLanguages.map(lang => `
|
|
<option
|
|
value="${lang.code}"
|
|
${lang.code === currentLang ? 'selected' : ''}
|
|
${lang.disabled ? 'disabled' : ''}
|
|
>
|
|
${lang.flag} ${lang.name}${lang.disabled ? ' (Coming Soon)' : ''}
|
|
</option>
|
|
`).join('')}
|
|
</select>
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
container.innerHTML = selectorHTML;
|
|
|
|
// Add change event listener
|
|
const selector = document.getElementById('language-selector');
|
|
if (selector && window.I18n) {
|
|
selector.addEventListener('change', function(e) {
|
|
const selectedLang = e.target.value;
|
|
window.I18n.setLanguage(selectedLang);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Initialize when DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', createLanguageSelector);
|
|
} else {
|
|
createLanguageSelector();
|
|
}
|
|
})();
|