reptil1990/DocuSighn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2-Sprachen (DE,EN)

Browse Source
This commit is contained in:
Carsten Graf
2026-01-16 14:45:22 +00:00
parent 48ac8e97bc
commit 6fca4087da
7 changed files with 414 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
css/master.css
View File

@@ -18,6 +18,34 @@ body {
border-radius: 16px; border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden; overflow: hidden;
position: relative;
}
.language-switcher {
position: absolute;
top: 20px;
right: 20px;
z-index: 1000;
}
.lang-button {
background: rgba(255, 255, 255, 0.9);
border: 2px solid #667eea;
color: #667eea;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 0.9em;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.lang-button:hover {
background: #667eea;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
} }
.header { .header {

28
css/signature.css
View File

@@ -21,6 +21,34 @@ body {
border-radius: 16px; border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden; overflow: hidden;
position: relative;
}
.language-switcher {
position: absolute;
top: 20px;
right: 20px;
z-index: 1000;
}
.lang-button {
background: rgba(255, 255, 255, 0.9);
border: 2px solid #11998e;
color: #11998e;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 0.9em;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.lang-button:hover {
background: #11998e;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(17, 153, 142, 0.3);
} }
.header { .header {

54
html/master.html
View File

@@ -7,40 +7,46 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<link rel="stylesheet" href="../css/master.css"> <link rel="stylesheet" href="../css/master.css">
<script src="../js/i18n.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="language-switcher">
<button id="langSwitch" class="lang-button" onclick="toggleLanguage()">
<span id="langDisplay">DE</span>
</button>
</div>
<div class="header"> <div class="header">
<h1>📄 Master Station</h1> <h1 data-i18n="master.title">📄 Master Station</h1>
<p>PDF hochladen und Unterschrift empfangen</p> <p data-i18n="master.subtitle">PDF hochladen und Unterschrift empfangen</p>
</div> </div>
<div class="content"> <div class="content">
<div class="connection-status" id="connectionStatus" style="display: none;"> <div class="connection-status" id="connectionStatus" style="display: none;">
<span class="status-indicator disconnected" id="statusIndicator"></span> <span class="status-indicator disconnected" id="statusIndicator"></span>
<span id="connectionText">Warte auf Signatur-Station...</span> <span id="connectionText" data-i18n="master.waitingForStation">Warte auf Signatur-Station...</span>
</div> </div>
<div class="upload-section" id="uploadSection"> <div class="upload-section" id="uploadSection">
<h2>PDF Dokument auswählen</h2> <h2 data-i18n="master.selectPdf">PDF Dokument auswählen</h2>
<p style="margin: 20px 0; color: #666;">Wähle eine PDF-Datei aus, die unterschrieben werden soll</p> <p style="margin: 20px 0; color: #666;" data-i18n="master.selectPdfDesc">Wähle eine PDF-Datei aus, die unterschrieben werden soll</p>
<input type="file" id="pdfInput" accept=".pdf" disabled> <input type="file" id="pdfInput" accept=".pdf" disabled>
<button class="upload-button" id="pdfSelectButton" onclick="document.getElementById('pdfInput').click()" disabled> <button class="upload-button" id="pdfSelectButton" onclick="document.getElementById('pdfInput').click()" disabled data-i18n="master.selectPdfButton">
PDF auswählen PDF auswählen
</button> </button>
<p id="pdfSelectHint" style="margin-top: 15px; color: #856404; font-style: italic; display: block;"> <p id="pdfSelectHint" style="margin-top: 15px; color: #856404; font-style: italic; display: block;" data-i18n="master.waitForConnection">
⚠️ Bitte warten Sie, bis die Signatur-Station verbunden ist. ⚠️ Bitte warten Sie, bis die Signatur-Station verbunden ist.
</p> </p>
</div> </div>
<div id="statusSection" style="display: none;"> <div id="statusSection" style="display: none;">
<div class="status waiting" id="statusMessage"> <div class="status waiting" id="statusMessage" data-i18n="master.waitingForSignature">
Warte auf Unterschrift von der Signatur-Station... Warte auf Unterschrift von der Signatur-Station...
</div> </div>
<div class="text-input-section" id="textInputSection" style="display: none;"> <div class="text-input-section" id="textInputSection" style="display: none;">
<label for="textInput" style="display: block; margin-bottom: 10px; font-weight: 500; color: #667eea;"> <label for="textInput" style="display: block; margin-bottom: 10px; font-weight: 500; color: #667eea;" data-i18n="master.textOverlayLabel">
📝 Text für Unterschrifts-Overlay (wird oben links angezeigt): 📝 Text für Unterschrifts-Overlay (wird oben links angezeigt):
</label> </label>
<input type="text" id="textInput" <input type="text" id="textInput"
@@ -49,19 +55,19 @@
<!-- Page Navigation --> <!-- Page Navigation -->
<div class="page-navigation" id="pageNavigation" style="display: none;"> <div class="page-navigation" id="pageNavigation" style="display: none;">
<button class="nav-button" id="prevPageBtn" onclick="changePage(-1)">◀ Zurück</button> <button class="nav-button" id="prevPageBtn" onclick="changePage(-1)" data-i18n="master.prevPage">◀ Zurück</button>
<span id="pageInfo">Seite 1 von 1</span> <span id="pageInfo" data-i18n="master.pageInfo">Seite 1 von 1</span>
<button class="nav-button" id="nextPageBtn" onclick="changePage(1)">Weiter ▶</button> <button class="nav-button" id="nextPageBtn" onclick="changePage(1)" data-i18n="master.nextPage">Weiter ▶</button>
<div class="page-jump"> <div class="page-jump">
<input type="number" id="jumpToPageInput" min="1" max="1" placeholder="Seite" style="width: 60px; padding: 5px; border: 1px solid #667eea; border-radius: 4px; text-align: center;"> <input type="number" id="jumpToPageInput" min="1" max="1" data-i18n-placeholder="master.pagePlaceholder" placeholder="Seite" style="width: 60px; padding: 5px; border: 1px solid #667eea; border-radius: 4px; text-align: center;">
<button class="nav-button" id="jumpToPageBtn" onclick="jumpToPage()">Springe zu Seite</button> <button class="nav-button" id="jumpToPageBtn" onclick="jumpToPage()" data-i18n="master.jumpToPage">Springe zu Seite</button>
</div> </div>
</div> </div>
<div class="signature-placeholder" id="signaturePlaceholder" style="display: none;"> <div class="signature-placeholder" id="signaturePlaceholder" style="display: none;">
<div class="placeholder-content" id="placeholderContent"> <div class="placeholder-content" id="placeholderContent">
<span class="placeholder-icon">✍️</span> <span class="placeholder-icon">✍️</span>
<span class="placeholder-text">Empfangene Unterschrift wird hier angezeigt</span> <span class="placeholder-text" data-i18n="master.signaturePlaceholder">Empfangene Unterschrift wird hier angezeigt</span>
</div> </div>
<img id="placeholderSignatureImage" src="" alt="Unterschrift" style="display: none;"> <img id="placeholderSignatureImage" src="" alt="Unterschrift" style="display: none;">
</div> </div>
@@ -81,27 +87,27 @@
</div> </div>
<div class="signature-controls" id="signatureControls"> <div class="signature-controls" id="signatureControls">
<p><strong>📝 Unterschrift positionieren:</strong> Ziehe die Unterschrift an die gewünschte Position im PDF. Nutze den Griff rechts unten zum Skalieren.</p> <p><strong data-i18n="master.positionSignature">📝 Unterschrift positionieren:</strong> <span data-i18n="master.positionSignatureDesc">Ziehe die Unterschrift an die gewünschte Position im PDF. Nutze den Griff rechts unten zum Skalieren.</span></p>
<div class="page-selector" id="pageSelector" style="display: none; margin: 15px 0; padding: 15px; background: #f0f2ff; border-radius: 8px;"> <div class="page-selector" id="pageSelector" style="display: none; margin: 15px 0; padding: 15px; background: #f0f2ff; border-radius: 8px;">
<p style="margin-bottom: 10px;"><strong>Auf welchen Seiten platzieren?</strong></p> <p style="margin-bottom: 10px;"><strong data-i18n="master.whichPages">Auf welchen Seiten platzieren?</strong></p>
<div style="display: flex; gap: 10px; flex-wrap: wrap;"> <div style="display: flex; gap: 10px; flex-wrap: wrap;">
<label style="cursor: pointer;"> <label style="cursor: pointer;">
<input type="checkbox" id="currentPageOnly" checked onchange="updatePageSelection()"> <input type="checkbox" id="currentPageOnly" checked onchange="updatePageSelection()">
Nur aktuelle Seite (<span id="currentPageNum">1</span>) <span data-i18n="master.currentPageOnly">Nur aktuelle Seite</span> (<span id="currentPageNum">1</span>)
</label> </label>
<label style="cursor: pointer;"> <label style="cursor: pointer;">
<input type="checkbox" id="allPages" onchange="updatePageSelection()"> <input type="checkbox" id="allPages" onchange="updatePageSelection()">
Alle Seiten <span data-i18n="master.allPages">Alle Seiten</span>
</label> </label>
</div> </div>
</div> </div>
<div style="display: flex; gap: 15px; margin-top: 15px;"> <div style="display: flex; gap: 15px; margin-top: 15px;">
<button class="upload-button" onclick="removeSignatureOverlay()" style="flex: 1; background: #dc3545;"> <button class="upload-button" onclick="removeSignatureOverlay()" style="flex: 1; background: #dc3545;" data-i18n="master.removeSignature">
🗑️ Unterschrift entfernen 🗑️ Unterschrift entfernen
</button> </button>
<button class="upload-button" id="placeSignatureButton" style="flex: 2; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);"> <button class="upload-button" id="placeSignatureButton" style="flex: 2; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);" data-i18n="master.placeSignature">
✓ Unterschrift & Text platzieren & PDF erstellen ✓ Unterschrift & Text platzieren & PDF erstellen
</button> </button>
</div> </div>
@@ -109,14 +115,14 @@
<div style="text-align: center;"> <div style="text-align: center;">
<div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;"> <div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
<button class="download-button" id="downloadButton" disabled> <button class="download-button" id="downloadButton" disabled data-i18n="master.downloadPdf">
⬇ Unterschriebene PDF herunterladen ⬇ Unterschriebene PDF herunterladen
</button> </button>
<button class="discard-button" id="discardButton"> <button class="discard-button" id="discardButton" data-i18n="master.discard">
🗑️ Verwerfen 🗑️ Verwerfen
</button> </button>
</div> </div>
<p id="downloadHint" style="margin-top: 10px; color: #666; display: none;"> <p id="downloadHint" style="margin-top: 10px; color: #666; display: none;" data-i18n="master.downloadReady">
PDF wurde erstellt und ist bereit zum Download PDF wurde erstellt und ist bereit zum Download
</p> </p>
</div> </div>

39
html/signature.html
View File

@@ -6,69 +6,74 @@
<title>Unterschrift - PDF Signatur</title> <title>Unterschrift - PDF Signatur</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<link rel="stylesheet" href="../css/signature.css"> <link rel="stylesheet" href="../css/signature.css">
<script src="../js/i18n.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="language-switcher">
<button id="langSwitch" class="lang-button" onclick="toggleLanguage()">
<span id="langDisplay">DE</span>
</button>
</div>
<div class="header"> <div class="header">
<h1>✍️ Unterschriften-Station</h1> <h1 data-i18n="signature.title">✍️ Unterschriften-Station</h1>
<p>Bereit für Unterschriften</p> <p data-i18n="signature.subtitle">Bereit für Unterschriften</p>
</div> </div>
<div class="content"> <div class="content">
<div id="loadingSection" class="loading"> <div id="loadingSection" class="loading">
<div class="spinner"></div> <div class="spinner"></div>
<p>Verbinde mit Server...</p> <p data-i18n="signature.connecting">Verbinde mit Server...</p>
</div> </div>
<div id="waitingSection" class="waiting-message" style="display: none;"> <div id="waitingSection" class="waiting-message" style="display: none;">
<div class="icon">📄</div> <div class="icon">📄</div>
<h2>Warte auf PDF...</h2> <h2 data-i18n="signature.waitingForPdf">Warte auf PDF...</h2>
<p>Bereit zum Unterschreiben. Lade ein PDF auf der Master-Station hoch.</p> <p data-i18n="signature.waitingDesc">Bereit zum Unterschreiben. Lade ein PDF auf der Master-Station hoch.</p>
<div id="alreadyConnectedWarning" class="already-connected-warning" style="display: none;"> <div id="alreadyConnectedWarning" class="already-connected-warning" style="display: none;">
<div class="warning-icon">⚠️</div> <div class="warning-icon">⚠️</div>
<div class="warning-text"> <div class="warning-text">
<strong>Hinweis:</strong> Bereits eine andere Signatur-Station ist mit dem Master verbunden. <strong data-i18n="signature.warning">Hinweis:</strong> <span data-i18n="signature.warningText">Bereits eine andere Signatur-Station ist mit dem Master verbunden. Diese Station kann nicht verwendet werden, solange die andere Station aktiv ist.</span>
Diese Station kann nicht verwendet werden, solange die andere Station aktiv ist.
</div> </div>
</div> </div>
</div> </div>
<div id="signatureSection" style="display: none;"> <div id="signatureSection" style="display: none;">
<div class="pdf-display" id="pdfDisplay"> <div class="pdf-display" id="pdfDisplay">
<h3>📄 Zu unterschreibendes Dokument</h3> <h3 data-i18n="signature.documentToSign">📄 Zu unterschreibendes Dokument</h3>
<div id="pageInfoSignature" style="margin: 10px 0; font-weight: bold; color: #11998e; font-size: 1.1em;"> <div id="pageInfoSignature" style="margin: 10px 0; font-weight: bold; color: #11998e; font-size: 1.1em;" data-i18n="signature.pageInfo">
Seite 1 von 1 Seite 1 von 1
</div> </div>
<div id="pdfPagesContainer" style="max-height: 60vh; overflow-y: auto; border: 2px solid #11998e; border-radius: 8px; padding: 10px; background: white;"> <div id="pdfPagesContainer" style="max-height: 60vh; overflow-y: auto; border: 2px solid #11998e; border-radius: 8px; padding: 10px; background: white;">
<!-- Pages will be inserted here dynamically --> <!-- Pages will be inserted here dynamically -->
</div> </div>
<p style="margin-top: 15px; color: #666; font-size: 0.9em;">Scrolle nach unten um alle Seiten zu sehen</p> <p style="margin-top: 15px; color: #666; font-size: 0.9em;" data-i18n="signature.scrollHint">Scrolle nach unten um alle Seiten zu sehen</p>
</div> </div>
<div class="info-box"> <div class="info-box">
<strong>📝 Anleitung:</strong> Zeichnen Sie Ihre Unterschrift mit dem Finger oder der Maus im Feld unten. Drücken Sie dann auf "Unterschrift senden". <strong data-i18n="signature.instruction">📝 Anleitung:</strong> <span data-i18n="signature.instructionText">Zeichnen Sie Ihre Unterschrift mit dem Finger oder der Maus im Feld unten. Drücken Sie dann auf "Unterschrift senden".</span>
</div> </div>
<div class="signature-section"> <div class="signature-section">
<h3 style="margin-bottom: 15px;">Unterschriftsfeld:</h3> <h3 style="margin-bottom: 15px;" data-i18n="signature.signatureField">Unterschriftsfeld:</h3>
<canvas id="signatureCanvas" class="signature-pad" width="740" height="300"></canvas> <canvas id="signatureCanvas" class="signature-pad" width="740" height="300"></canvas>
</div> </div>
<div class="controls"> <div class="controls">
<button class="button button-clear" id="clearButton"> <button class="button button-clear" id="clearButton" data-i18n="signature.clear">
🗑️ Löschen 🗑️ Löschen
</button> </button>
<button class="button button-submit" id="submitButton" disabled> <button class="button button-submit" id="submitButton" disabled data-i18n="signature.send">
✓ Unterschrift senden ✓ Unterschrift senden
</button> </button>
</div> </div>
<div class="success-message" id="successMessage"> <div class="success-message" id="successMessage">
<h2>✅ Erfolgreich!</h2> <h2 data-i18n="signature.successTitle">✅ Erfolgreich!</h2>
<p>Ihre Unterschrift wurde erfolgreich übertragen.</p> <p data-i18n="signature.successText">Ihre Unterschrift wurde erfolgreich übertragen.</p>
</div> </div>
<div class="error-message" id="errorMessage"> <div class="error-message" id="errorMessage" data-i18n="signature.error">
❌ Fehler beim Senden der Unterschrift. Bitte versuchen Sie es erneut. ❌ Fehler beim Senden der Unterschrift. Bitte versuchen Sie es erneut.
</div> </div>
</div> </div>

248
js/i18n.js Normal file
View File

@@ -0,0 +1,248 @@
// Internationalization (i18n) system
let currentLanguage = 'de';
// Translations
const translations = {
de: {
master: {
title: '📄 Master Station',
subtitle: 'PDF hochladen und Unterschrift empfangen',
waitingForStation: 'Warte auf Signatur-Station...',
connectedToStation: '✓ Verbunden mit Signatur-Station',
selectPdf: 'PDF Dokument auswählen',
selectPdfDesc: 'Wähle eine PDF-Datei aus, die unterschrieben werden soll',
selectPdfButton: 'PDF auswählen',
waitForConnection: '⚠️ Bitte warten Sie, bis die Signatur-Station verbunden ist.',
waitingForSignature: 'Warte auf Unterschrift von der Signatur-Station...',
signatureReceived: '✅ Unterschrift erhalten! Unterschrift oben sichtbar. Ziehe sie auf das PDF.',
textOverlayLabel: '📝 Text für Unterschrifts-Overlay (wird oben links angezeigt):',
prevPage: '◀ Zurück',
nextPage: 'Weiter ▶',
pageInfo: 'Seite 1 von 1',
pagePlaceholder: 'Seite',
jumpToPage: 'Springe zu Seite',
signaturePlaceholder: 'Empfangene Unterschrift wird hier angezeigt',
positionSignature: '📝 Unterschrift positionieren:',
positionSignatureDesc: 'Ziehe die Unterschrift an die gewünschte Position im PDF. Nutze den Griff rechts unten zum Skalieren.',
whichPages: 'Auf welchen Seiten platzieren?',
currentPageOnly: 'Nur aktuelle Seite',
allPages: 'Alle Seiten',
removeSignature: '🗑️ Unterschrift entfernen',
placeSignature: '✓ Unterschrift & Text platzieren & PDF erstellen',
downloadPdf: '⬇ Unterschriebene PDF herunterladen',
discard: '🗑️ Verwerfen',
downloadReady: 'PDF wurde erstellt und ist bereit zum Download',
pdfCreated: '✅ PDF wurde erstellt! Bereit zum Download.',
discardConfirm: 'Möchten Sie wirklich verwerfen? Alle Änderungen gehen verloren.'
},
signature: {
title: '✍️ Unterschriften-Station',
subtitle: 'Bereit für Unterschriften',
connecting: 'Verbinde mit Server...',
waitingForPdf: 'Warte auf PDF...',
waitingDesc: 'Bereit zum Unterschreiben. Lade ein PDF auf der Master-Station hoch.',
warning: 'Hinweis:',
warningText: 'Bereits eine andere Signatur-Station ist mit dem Master verbunden. Diese Station kann nicht verwendet werden, solange die andere Station aktiv ist.',
documentToSign: '📄 Zu unterschreibendes Dokument',
pageInfo: 'Seite 1 von 1',
scrollHint: 'Scrolle nach unten um alle Seiten zu sehen',
instruction: '📝 Anleitung:',
instructionText: 'Zeichnen Sie Ihre Unterschrift mit dem Finger oder der Maus im Feld unten. Drücken Sie dann auf "Unterschrift senden".',
signatureField: 'Unterschriftsfeld:',
clear: '🗑️ Löschen',
send: '✓ Unterschrift senden',
successTitle: '✅ Erfolgreich!',
successText: 'Ihre Unterschrift wurde erfolgreich übertragen.',
error: '❌ Fehler beim Senden der Unterschrift. Bitte versuchen Sie es erneut.'
}
},
en: {
master: {
title: '📄 Master Station',
subtitle: 'Upload PDF and receive signature',
waitingForStation: 'Waiting for signature station...',
connectedToStation: '✓ Connected to signature station',
selectPdf: 'Select PDF Document',
selectPdfDesc: 'Choose a PDF file to be signed',
selectPdfButton: 'Select PDF',
waitForConnection: '⚠️ Please wait until the signature station is connected.',
waitingForSignature: 'Waiting for signature from signature station...',
signatureReceived: '✅ Signature received! Signature visible above. Drag it onto the PDF.',
textOverlayLabel: '📝 Text for signature overlay (displayed top left):',
prevPage: '◀ Back',
nextPage: 'Next ▶',
pageInfo: 'Page 1 of 1',
pagePlaceholder: 'Page',
jumpToPage: 'Jump to page',
signaturePlaceholder: 'Received signature will be displayed here',
positionSignature: '📝 Position signature:',
positionSignatureDesc: 'Drag the signature to the desired position in the PDF. Use the handle at the bottom right to scale.',
whichPages: 'On which pages to place?',
currentPageOnly: 'Current page only',
allPages: 'All pages',
removeSignature: '🗑️ Remove signature',
placeSignature: '✓ Place signature & text & create PDF',
downloadPdf: '⬇ Download signed PDF',
discard: '🗑️ Discard',
downloadReady: 'PDF has been created and is ready for download',
pdfCreated: '✅ PDF has been created! Ready for download.',
discardConfirm: 'Do you really want to discard? All changes will be lost.'
},
signature: {
title: '✍️ Signature Station',
subtitle: 'Ready for signatures',
connecting: 'Connecting to server...',
waitingForPdf: 'Waiting for PDF...',
waitingDesc: 'Ready to sign. Upload a PDF on the Master station.',
warning: 'Note:',
warningText: 'Another signature station is already connected to the master. This station cannot be used as long as the other station is active.',
documentToSign: '📄 Document to sign',
pageInfo: 'Page 1 of 1',
scrollHint: 'Scroll down to see all pages',
instruction: '📝 Instructions:',
instructionText: 'Draw your signature with your finger or mouse in the field below. Then press "Send signature".',
signatureField: 'Signature field:',
clear: '🗑️ Clear',
send: '✓ Send signature',
successTitle: '✅ Success!',
successText: 'Your signature has been successfully transmitted.',
error: '❌ Error sending signature. Please try again.'
}
}
};
// Detect system language (default to German)
function detectLanguage() {
// Always default to German
return 'de';
}
// Initialize language
function initLanguage() {
// Check if language is stored in localStorage
const storedLang = localStorage.getItem('language');
if (storedLang && (storedLang === 'de' || storedLang === 'en')) {
currentLanguage = storedLang;
} else {
// Detect from browser
currentLanguage = detectLanguage();
localStorage.setItem('language', currentLanguage);
}
updateLanguageDisplay();
translatePage();
}
// Update language display button
function updateLanguageDisplay() {
const langDisplay = document.getElementById('langDisplay');
if (langDisplay) {
langDisplay.textContent = currentLanguage.toUpperCase();
}
}
// Toggle language
function toggleLanguage() {
currentLanguage = currentLanguage === 'de' ? 'en' : 'de';
localStorage.setItem('language', currentLanguage);
updateLanguageDisplay();
translatePage();
updateDynamicTranslations();
// Update HTML lang attribute
document.documentElement.lang = currentLanguage;
// Update text in overlay if it exists
if (typeof updateTextInOverlay === 'function') {
updateTextInOverlay();
}
// Update text input with date
if (typeof updateTextInputWithDate === 'function') {
updateTextInputWithDate();
}
}
// Translate a single element
function translateElement(element) {
const key = element.getAttribute('data-i18n');
if (!key) return;
const keys = key.split('.');
let translation = translations[currentLanguage];
for (const k of keys) {
if (translation && translation[k]) {
translation = translation[k];
} else {
return; // Translation not found
}
}
if (typeof translation === 'string') {
element.textContent = translation;
}
}
// Translate placeholder
function translatePlaceholder(element) {
const key = element.getAttribute('data-i18n-placeholder');
if (!key) return;
const keys = key.split('.');
let translation = translations[currentLanguage];
for (const k of keys) {
if (translation && translation[k]) {
translation = translation[k];
} else {
return;
}
}
if (typeof translation === 'string') {
element.placeholder = translation;
}
}
// Translate entire page
function translatePage() {
// Translate all elements with data-i18n
document.querySelectorAll('[data-i18n]').forEach(translateElement);
// Translate placeholders
document.querySelectorAll('[data-i18n-placeholder]').forEach(translatePlaceholder);
// Update dynamic content
updateDynamicTranslations();
}
// Update dynamic translations (for content that changes)
function updateDynamicTranslations() {
// This will be called from master.js and signature.js for dynamic content
if (typeof window.updateDynamicTranslationsCustom === 'function') {
window.updateDynamicTranslationsCustom();
}
}
// Get translation by key
function t(key) {
const keys = key.split('.');
let translation = translations[currentLanguage];
for (const k of keys) {
if (translation && translation[k]) {
translation = translation[k];
} else {
return key; // Return key if translation not found
}
}
return typeof translation === 'string' ? translation : key;
}
// Initialize on page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initLanguage);
} else {
initLanguage();
}

60
js/master.js
View File

@@ -33,7 +33,7 @@ function updateConnectionStatus(isConnected) {
if (isConnected) { if (isConnected) {
statusIndicator.classList.remove('disconnected'); statusIndicator.classList.remove('disconnected');
statusIndicator.classList.add('connected'); statusIndicator.classList.add('connected');
connectionText.textContent = '✓ Verbunden mit Signatur-Station'; connectionText.textContent = t('master.connectedToStation');
// Enable PDF selection // Enable PDF selection
pdfInput.disabled = false; pdfInput.disabled = false;
@@ -42,7 +42,7 @@ function updateConnectionStatus(isConnected) {
} else { } else {
statusIndicator.classList.remove('connected'); statusIndicator.classList.remove('connected');
statusIndicator.classList.add('disconnected'); statusIndicator.classList.add('disconnected');
connectionText.textContent = '⏳ Warte auf Signatur-Station...'; connectionText.textContent = t('master.waitingForStation');
// Disable PDF selection // Disable PDF selection
pdfInput.disabled = true; pdfInput.disabled = true;
@@ -358,7 +358,8 @@ async function renderAllPages(pdfBytes) {
// Add page separator // Add page separator
const separator = document.createElement('div'); const separator = document.createElement('div');
separator.className = 'pdf-page-separator'; separator.className = 'pdf-page-separator';
separator.textContent = `Seite ${pageNum} von ${numPages}`; const pageText = currentLanguage === 'de' ? 'Seite' : 'Page';
separator.textContent = `${pageText} ${pageNum} ${currentLanguage === 'de' ? 'von' : 'of'} ${numPages}`;
container.appendChild(separator); container.appendChild(separator);
// Create canvas for this page // Create canvas for this page
@@ -404,7 +405,8 @@ function updatePageNavigation() {
if (totalPages > 1) { if (totalPages > 1) {
pageNav.style.display = 'flex'; pageNav.style.display = 'flex';
pageInfo.textContent = `Seite ${currentPageNum} von ${totalPages}`; const pageText = currentLanguage === 'de' ? 'Seite' : 'Page';
pageInfo.textContent = `${pageText} ${currentPageNum} ${currentLanguage === 'de' ? 'von' : 'of'} ${totalPages}`;
prevBtn.disabled = currentPageNum <= 1; prevBtn.disabled = currentPageNum <= 1;
nextBtn.disabled = currentPageNum >= totalPages; nextBtn.disabled = currentPageNum >= totalPages;
@@ -591,7 +593,7 @@ async function showSignatureOverlay(signatureDataUrl) {
} }
document.getElementById('statusMessage').className = 'status signed'; document.getElementById('statusMessage').className = 'status signed';
document.getElementById('statusMessage').textContent = '✅ Unterschrift erhalten! Unterschrift oben sichtbar. Ziehe sie auf das PDF.'; document.getElementById('statusMessage').textContent = t('master.signatureReceived');
document.getElementById('downloadButton').disabled = true; document.getElementById('downloadButton').disabled = true;
document.getElementById('downloadHint').style.display = 'none'; document.getElementById('downloadHint').style.display = 'none';
@@ -903,10 +905,19 @@ function updateTextInputWithDate() {
const textInput = document.getElementById('textInput'); const textInput = document.getElementById('textInput');
if (textInput) { if (textInput) {
const currentDate = getCurrentDateString(); const currentDate = getCurrentDateString();
textInput.value = `Abgeholt am ${currentDate} durch:`; if (currentLanguage === 'de') {
textInput.value = `Abgeholt am ${currentDate} durch:`;
} else {
textInput.value = `Picked up on ${currentDate} by:`;
}
// Update overlay text immediately
updateTextInOverlay();
} }
} }
// Make function globally accessible for i18n.js
window.updateTextInputWithDate = updateTextInputWithDate;
function updateTextInOverlay() { function updateTextInOverlay() {
const textInput = document.getElementById('textInput'); const textInput = document.getElementById('textInput');
const text = textInput ? textInput.value : ''; const text = textInput ? textInput.value : '';
@@ -923,6 +934,9 @@ function updateTextInOverlay() {
} }
} }
// Make function globally accessible for i18n.js
window.updateTextInOverlay = updateTextInOverlay;
function removeSignatureOverlay() { function removeSignatureOverlay() {
// Only remove the overlay, keep signedPdfBytes intact // Only remove the overlay, keep signedPdfBytes intact
const overlay = document.getElementById('signatureOverlay'); const overlay = document.getElementById('signatureOverlay');
@@ -965,7 +979,7 @@ function removeSignature() {
placeholderContent.style.display = 'flex'; placeholderContent.style.display = 'flex';
document.getElementById('statusMessage').className = 'status waiting'; document.getElementById('statusMessage').className = 'status waiting';
document.getElementById('statusMessage').textContent = 'Warte auf Unterschrift von der Signatur-Station...'; document.getElementById('statusMessage').textContent = t('master.waitingForSignature');
document.getElementById('downloadButton').disabled = true; document.getElementById('downloadButton').disabled = true;
document.getElementById('downloadHint').style.display = 'none'; document.getElementById('downloadHint').style.display = 'none';
signatureDataUrl = null; signatureDataUrl = null;
@@ -987,7 +1001,7 @@ document.getElementById('placeSignatureButton').addEventListener('click', async
// Show loading state // Show loading state
const btn = document.getElementById('placeSignatureButton'); const btn = document.getElementById('placeSignatureButton');
const originalText = btn.textContent; const originalText = btn.textContent;
btn.textContent = '⏳ PDF wird erstellt...'; btn.textContent = '⏳ ' + (currentLanguage === 'de' ? 'PDF wird erstellt...' : 'PDF is being created...');
btn.disabled = true; btn.disabled = true;
// Add signature to PDF // Add signature to PDF
@@ -1002,7 +1016,7 @@ document.getElementById('placeSignatureButton').addEventListener('click', async
// Update status // Update status
document.getElementById('statusMessage').className = 'status ready'; document.getElementById('statusMessage').className = 'status ready';
document.getElementById('statusMessage').textContent = '✅ PDF wurde erstellt! Bereit zum Download.'; document.getElementById('statusMessage').textContent = t('master.pdfCreated');
// Enable download // Enable download
document.getElementById('downloadButton').disabled = false; document.getElementById('downloadButton').disabled = false;
@@ -1098,7 +1112,7 @@ document.getElementById('downloadButton').addEventListener('click', async () =>
// Reset place signature button // Reset place signature button
const placeBtn = document.getElementById('placeSignatureButton'); const placeBtn = document.getElementById('placeSignatureButton');
placeBtn.textContent = '✓ Unterschrift platzieren & PDF erstellen'; placeBtn.textContent = t('master.placeSignature');
placeBtn.disabled = false; placeBtn.disabled = false;
// Reset page navigation and scrollable state // Reset page navigation and scrollable state
@@ -1165,7 +1179,7 @@ function resetToStart() {
// Reset status message // Reset status message
document.getElementById('statusMessage').className = 'status waiting'; document.getElementById('statusMessage').className = 'status waiting';
document.getElementById('statusMessage').textContent = 'Warte auf Unterschrift von der Signatur-Station...'; document.getElementById('statusMessage').textContent = t('master.waitingForSignature');
// Clear all data // Clear all data
removeSignature(); removeSignature();
@@ -1222,5 +1236,29 @@ document.addEventListener('DOMContentLoaded', () => {
} }
}); });
// Update translations when language changes (called from i18n.js)
window.updateDynamicTranslationsCustom = function() {
// Update page info if visible
if (totalPages > 0) {
const pageInfo = document.getElementById('pageInfo');
if (pageInfo) {
const pageText = currentLanguage === 'de' ? 'Seite' : 'Page';
pageInfo.textContent = `${pageText} ${currentPageNum} ${currentLanguage === 'de' ? 'von' : 'of'} ${totalPages}`;
}
}
// Re-translate connection status
const statusIndicator = document.getElementById('statusIndicator');
if (statusIndicator) {
const isConnected = statusIndicator.classList.contains('connected');
updateConnectionStatus(isConnected);
}
// Update text input default value
if (typeof updateTextInputWithDate === 'function') {
updateTextInputWithDate();
}
};
// Connect WebSocket on load // Connect WebSocket on load
connectWebSocket(); connectWebSocket();

12
js/signature.js
View File

@@ -128,7 +128,11 @@ async function renderPdfPreview(pdfBytes, pageNum = null) {
totalPages = pdfDoc.numPages; totalPages = pdfDoc.numPages;
// Update page info // Update page info
document.getElementById('pageInfoSignature').textContent = `${totalPages} Seite${totalPages > 1 ? 'n' : ''}`; const pageText = currentLanguage === 'de' ? 'Seite' : 'Page';
const pagesText = currentLanguage === 'de' ? 'Seiten' : 'Pages';
document.getElementById('pageInfoSignature').textContent = totalPages === 1
? `${pageText} 1 ${currentLanguage === 'de' ? 'von' : 'of'} 1`
: `${totalPages} ${pagesText}`;
// Get container // Get container
const container = document.getElementById('pdfPagesContainer'); const container = document.getElementById('pdfPagesContainer');
@@ -141,13 +145,15 @@ async function renderPdfPreview(pdfBytes, pageNum = null) {
if (pageNum > 1) { if (pageNum > 1) {
const separator = document.createElement('div'); const separator = document.createElement('div');
separator.className = 'page-separator'; separator.className = 'page-separator';
separator.textContent = `Seite ${pageNum}`; const pageText = currentLanguage === 'de' ? 'Seite' : 'Page';
separator.textContent = `${pageText} ${pageNum}`;
container.appendChild(separator); container.appendChild(separator);
} else { } else {
// First page indicator // First page indicator
const separator = document.createElement('div'); const separator = document.createElement('div');
separator.className = 'page-separator'; separator.className = 'page-separator';
separator.textContent = `Seite 1`; const pageText = currentLanguage === 'de' ? 'Seite' : 'Page';
separator.textContent = `${pageText} 1`;
container.appendChild(separator); container.appendChild(separator);
} }