tractatus/public/js/case-submission.js
TheFlow b21cda335d feat(i18n): add multilingual support to case-submission and media-inquiry pages
Adds German and French translations for form submission pages with
dynamic message handling and language selector integration.

**Pages Updated:**
- case-submission.html: Added data-i18n attributes and language selector
- media-inquiry.html: Added data-i18n attributes and language selector

**Translation Files Created:**
- EN/DE/FR for case-submission (form labels, help text, dynamic messages)
- EN/DE/FR for media-inquiry (form labels, help text, dynamic messages)

**JavaScript Updates:**
- case-submission.js: Added i18n translation helper for dynamic content
- media-inquiry.js: Added i18n translation helper for dynamic content
- Submit buttons and error messages now translate based on selected language

**Features:**
- Language flags visible in navbar for easy switching
- Form labels and help text translate on language change
- Submit button text updates during submission ("Submitting..." → "Einreichen..." in DE)
- Success/error messages display in user's selected language
- All translations via DeepL API for professional quality

**Technical Details:**
- Uses cache-busting timestamps for translation fetches (prevents stale cache)
- Submit buttons use <span data-i18n> for translatable content
- Form JavaScript uses window.i18nTranslations for dynamic text

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-26 16:41:54 +13:00

91 lines
2.8 KiB
JavaScript

/**
* Case Submission Form Handler
*/
const form = document.getElementById('case-submission-form');
const submitButton = document.getElementById('submit-button');
const successMessage = document.getElementById('success-message');
const errorMessage = document.getElementById('error-message');
// Helper to get translated text
function t(key) {
if (window.i18nTranslations) {
const keys = key.split('.');
let value = window.i18nTranslations;
for (const k of keys) {
value = value?.[k];
}
return value || key;
}
return key;
}
form.addEventListener('submit', async (e) => {
e.preventDefault();
// Hide previous messages
successMessage.style.display = 'none';
errorMessage.style.display = 'none';
// Disable submit button
submitButton.disabled = true;
submitButton.querySelector('span').textContent = t('messages.submitting');
// Collect form data
const evidenceText = document.getElementById('case-evidence').value;
const evidence = evidenceText
? evidenceText.split('\n').filter(line => line.trim())
: [];
const formData = {
submitter: {
name: document.getElementById('submitter-name').value,
email: document.getElementById('submitter-email').value,
organization: document.getElementById('submitter-organization').value || null,
public: document.getElementById('submitter-public').checked
},
case_study: {
title: document.getElementById('case-title').value,
description: document.getElementById('case-description').value,
failure_mode: document.getElementById('case-failure-mode').value,
tractatus_applicability: document.getElementById('case-tractatus').value,
evidence: evidence,
attachments: []
}
};
try {
const response = await fetch('/api/cases/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
});
const data = await response.json();
if (response.ok) {
// Success
successMessage.textContent = data.message || t('messages.success');
successMessage.style.display = 'block';
form.reset();
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
// Error
errorMessage.textContent = data.message || t('messages.error');
errorMessage.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
}
} catch (error) {
console.error('Submit error:', error);
errorMessage.textContent = t('messages.network_error');
errorMessage.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
} finally {
// Re-enable submit button
submitButton.disabled = false;
submitButton.querySelector('span').textContent = t('form.submit_button');
}
});