suro/aza
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
suro
2026-04-22 22:33:46 +02:00
parent 7bf1e0dbb2
commit d4822fc8dc
5156 changed files with 829337 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
AzA march 2026/web/empfang.html
View File

@@ -8,6 +8,8 @@
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
/* rem bezieht sich auf html — muss mit Basisschrift (9pt) übereinstimmen, bis applyFontSize() läuft */
html{font-size:9pt}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#f0f4f8;color:#1a2a3a;font-size:9pt;display:flex;flex-direction:column}
/* === Header === */
@@ -16,6 +18,7 @@ header h1{font-size:1.2rem;font-weight:600;letter-spacing:.3px;white-space:nowra
.header-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hbtn{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:5px;padding:3px 9px;font-size:.78rem;cursor:pointer;transition:background .15s;white-space:nowrap}
.hbtn:hover{background:rgba(255,255,255,.15)}
.hbtn.on{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.55)}
.hbtn.muted{opacity:.5}
.hbtn.active-sort{background:rgba(255,255,255,.25)}
.badge{background:rgba(255,255,255,.2);border-radius:16px;padding:3px 12px;font-size:.8rem}
@@ -181,6 +184,21 @@ header h1{font-size:1.2rem;font-weight:600;letter-spacing:.3px;white-space:nowra
.login-btn:hover{background:#4A7A9E}
.login-error{color:#dc3545;font-size:.82rem;margin-top:8px;min-height:1.2em}
.login-switch{text-align:center;margin-top:14px;font-size:.82rem;color:#6a8a9a}
/* Neuer Chat (Popup) */
.new-chat-overlay{position:fixed;inset:0;background:rgba(26,42,58,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.new-chat-overlay.hidden{display:none!important}
.new-chat-box{background:#fff;border-radius:12px;padding:22px 24px;max-width:400px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.new-chat-box h3{font-size:1.1rem;color:#1a4d6d;margin-bottom:8px}
.new-chat-box p{font-size:.85rem;color:#6a8a9a;margin-bottom:14px;line-height:1.45}
.nc-opt{display:block;margin:8px 0;font-size:.88rem;cursor:pointer}
.nc-opt input{margin-right:8px}
#nc-peer-select{width:100%;margin-top:10px;padding:8px;border:1px solid #d0dce8;border-radius:6px;font-size:.88rem;font-family:inherit}
.nc-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.nc-btns button{padding:8px 16px;border-radius:8px;font-size:.85rem;cursor:pointer;font-family:inherit}
.nc-btns .nc-cancel{background:#eef2f6;color:#3a5a7a;border:1px solid #d0dce8}
.nc-btns .nc-go{background:#5B8DB3;color:#fff;border:none;font-weight:600}
#reply-att-hint{font-size:.72rem;color:#5B8DB3;min-height:1em;margin:4px 0 0 2px}
.login-switch a{color:#5B8DB3;cursor:pointer;text-decoration:underline}
/* Registrierung: Überschrift, Fließtext, Labels, Felder, Button, Link – alles 9pt */
@@ -259,17 +277,19 @@ header h1{font-size:1.2rem;font-weight:600;letter-spacing:.3px;white-space:nowra
<header>
<h1>AZA &ndash; Empfang</h1>
<div class="header-right">
<div class="font-ctrl" title="Schriftgr&ouml;sse">
<div class="font-ctrl" id="font-ctrl-wrap" title="Schriftgr&ouml;sse der ganzen Seite (100% = Standard). Mit Pfeilen vergr&ouml;ssern oder verkleinern.">
<span>Aa</span>
<span id="font-size-display">9</span>
<button onclick="changeFontSize(1)">&#9650;</button>
<button onclick="changeFontSize(-1)">&#9660;</button>
<span id="font-size-display">100%</span>
<button type="button" onclick="changeFontSize(1)" aria-label="Schrift gr&ouml;sser">&#9650;</button>
<button type="button" onclick="changeFontSize(-1)" aria-label="Schrift kleiner">&#9660;</button>
</div>
<button class="hbtn" onclick="openNewChatDialog()" title="Neuen Chat in eigenem Fenster">+ Neuer Chat</button>
<button class="hbtn" id="sound-btn" onclick="toggleSound()" title="Ton an/aus">&#128276; Ton</button>
<div class="vol-ctrl" title="Lautst&auml;rke">
<input type="range" id="vol-slider" min="0" max="300" step="5" oninput="setVolume(this.value)">
<span id="vol-display">100%</span>
</div>
<button type="button" class="hbtn" id="shell-pin-btn" onclick="toggleShellPin()" style="display:none" title="Immer im Vordergrund" aria-pressed="false">&#128204;</button>
<button class="hbtn" id="sort-btn" onclick="toggleSort()" title="Sortierung">&#8645;</button>
<span class="badge" id="count-badge">&ndash;</span>
<button class="hbtn" onclick="toggleSettings()" title="Einstellungen">&#9881;</button>
@@ -336,6 +356,9 @@ header h1{font-size:1.2rem;font-weight:600;letter-spacing:.3px;white-space:nowra
<div class="sb-item" data-view="archiv" onclick="setView('archiv')">
<span class="sb-icon">&#128193;</span> Archiv
</div>
<div class="sb-add" onclick="openNewChatDialog()" title="Chat in neuem Fenster oder Tab">
<span>+</span> Neuer Chat
</div>
<div class="sb-section">Benutzer</div>
<div id="sb-users"></div>
<div class="sb-add" onclick="toggleSbAddUser()">
@@ -358,7 +381,8 @@ header h1{font-size:1.2rem;font-weight:600;letter-spacing:.3px;white-space:nowra
<div class="conv-empty">Nachrichten werden geladen&hellip;</div>
</div>
<div id="chat-input-bar">
<textarea id="reply-text" placeholder="Nachricht schreiben..." rows="1" onkeydown="if(event.key==='Enter'&&!event.shiftKey){sendReply();event.preventDefault()}" oninput="autoGrowTextarea(this)"></textarea>
<textarea id="reply-text" placeholder="Nachricht schreiben… (Bild: einfügen oder hier ablegen)" rows="1" onkeydown="if(event.key==='Enter'&&!event.shiftKey){sendReply();event.preventDefault()}" oninput="autoGrowTextarea(this)"></textarea>
<div id="reply-att-hint"></div>
<div class="input-btns">
<button class="btn-dictate" id="dictate-btn" onclick="toggleDictation()">&#127908;</button>
<button class="btn-send" onclick="sendReply()">Senden</button>
@@ -380,6 +404,22 @@ header h1{font-size:1.2rem;font-weight:600;letter-spacing:.3px;white-space:nowra
</div>
<div id="new-chat-overlay" class="new-chat-overlay hidden" onclick="if(event.target===this)closeNewChatDialog()">
<div class="new-chat-box" onclick="event.stopPropagation()">
<h3>Neuer Chat</h3>
<p>W&auml;hlen Sie, wo der Chat laufen soll. Es &ouml;ffnet sich ein <strong>zus&auml;tzliches Fenster</strong> (Browser oder Desktop-H&uuml;lle) &mdash; Sie k&ouml;nnen dort in Ruhe schreiben, <strong>Bilder per Drag &amp; Drop oder Strg+V</strong> einf&uuml;gen.</p>
<label class="nc-opt"><input type="radio" name="nc-mode" value="general" checked onchange="syncNcPeerSelect()"> Allgemein (wie Kanal &bdquo;Allgemein&ldquo;)</label>
<label class="nc-opt"><input type="radio" name="nc-mode" value="dm" onchange="syncNcPeerSelect()"> Direkt mit Benutzer</label>
<select id="nc-peer-select" disabled aria-label="Benutzer w&auml;hlen">
<option value="">&mdash; Benutzer w&auml;hlen &mdash;</option>
</select>
<div class="nc-btns">
<button type="button" class="nc-cancel" onclick="closeNewChatDialog()">Abbrechen</button>
<button type="button" class="nc-go" onclick="launchNewChatWindow()">Fenster &ouml;ffnen</button>
</div>
</div>
</div>
<div class="admin-overlay" id="admin-overlay">
<div class="admin-panel">
<div class="admin-header">
@@ -399,7 +439,7 @@ header h1{font-size:1.2rem;font-weight:600;letter-spacing:.3px;white-space:nowra
<div class="status-bar">
<span>Aktualisiert alle 10 Sek.</span>
<span style="opacity:.5" id="ui-version">v2026.04.20</span>
<span style="opacity:.5" id="ui-version">v2026.04.22</span>
</div>
<script>
@@ -422,10 +462,13 @@ var previousThreadIds = new Set();
var justSentReply = false;
var pollTimer = null;
var userPollTimer = null;
var pendingReplyAttachments = [];
var REPLY_ATTACH_MAX_BYTES = 2 * 1024 * 1024;
var soundEnabled = localStorage.getItem('empfang_sound') !== 'off';
var audioCtx = null;
var currentFontSize = parseInt(localStorage.getItem('empfang_font_size'), 10) || 9;
var EMPFANG_FONT_BASE_PT = 9;
var currentFontSize = parseInt(localStorage.getItem('empfang_font_size'), 10) || EMPFANG_FONT_BASE_PT;
var volume = parseFloat(localStorage.getItem('empfang_volume') || '1.0');
var repeatMs = parseInt(localStorage.getItem('empfang_repeat_ms') || '30000', 10);
var repeatInterval = null;
@@ -692,7 +735,7 @@ function renderResetPasswordForm(resetToken) {
'<p>Bitte w\u00e4hlen Sie ein neues Passwort (min. 4 Zeichen).</p>' +
'<div class="login-field"><label>Neues Passwort</label><input type="password" id="reset-pass" autocomplete="new-password"></div>' +
'<div class="login-field"><label>Neues Passwort best\u00e4tigen</label><input type="password" id="reset-pass2" autocomplete="new-password"></div>' +
'<button class="login-btn" onclick="doResetPassword(\'' + resetToken + '\')">Neues Passwort speichern</button>' +
'<button class="login-btn" onclick="doResetPassword(\'' + resetToken + '\')">Neues Passwort festlegen</button>' +
'<div class="login-error" id="login-error"></div>';
document.getElementById('reset-pass').focus();
}
@@ -895,6 +938,8 @@ async function doLogout() {
updateSortBtn();
updateSoundBtn();
applyFontSize();
setupReplyBarDropPaste();
initShellPinUi();
var urlParams = new URLSearchParams(window.location.search);
var resetToken = urlParams.get('reset_token');
@@ -1038,9 +1083,13 @@ async function loadMessages() {
allMessages.forEach(function(m) { if (!m.thread_id) m.thread_id = m.id; });
if (currentSession) {
var myName = currentSession.display_name;
allMessages = allMessages.filter(function(m) {
var rcpt = m.extras && m.extras.recipient;
return !rcpt || rcpt === currentSession.display_name || rcpt === 'Alle';
var abs = m.absender || '';
var senderCore = abs.split('(')[0].trim();
var iAmSender = senderCore === myName;
return !rcpt || rcpt === 'Alle' || rcpt === myName || iAmSender;
});
}
@@ -1243,12 +1292,24 @@ function renderConversation(tid) {
var sortedReplies = sortNewestFirst ? t.replies.slice().reverse() : t.replies;
sortedReplies.forEach(function(r) {
var isFromEmpfang = (r.absender || '').includes('Empfang');
var attHtml = '';
var ratt = r.extras && r.extras.attachments;
if (ratt && ratt.length) {
ratt.forEach(function(a) {
if (a.data && a.name && /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(a.name)) {
var ext = a.name.split('.').pop().toLowerCase();
var mime = ext === 'png' ? 'image/png' : (ext === 'gif' ? 'image/gif' : 'image/jpeg');
attHtml += '<div style="margin-top:6px"><img src="data:' + mime + ';base64,' + a.data +
'" alt="' + esc(a.name) + '" style="max-width:100%;max-height:220px;border-radius:6px"></div>';
}
});
}
html += '<div class="conv-msg ' + (isFromEmpfang ? 'from-me' : 'from-other') + '">' +
'<div class="conv-msg-meta">' +
'<span class="conv-msg-sender">' + esc(r.absender || '') + '</span>' +
'<span>' + esc(r.zeitstempel || r.empfangen || '') + '</span>' +
'</div>' +
'<div class="conv-msg-text">' + esc(r.kommentar || '') + '</div>' +
'<div class="conv-msg-text">' + esc(r.kommentar || '') + '</div>' + attHtml +
'</div>';
});
}
@@ -1269,11 +1330,105 @@ function toggleConvField(labelEl) {
/* ===================================================================
INLINE REPLY
=================================================================== */
function updateReplyAttHint() {
var el = document.getElementById('reply-att-hint');
if (!el) return;
el.textContent = pendingReplyAttachments.length
? pendingReplyAttachments.length + ' Bild(er) angeh\u00e4ngt'
: '';
}
function queueReplyImageFiles(files) {
Array.from(files || []).forEach(function(file) {
if (!file.type || file.type.indexOf('image/') !== 0) return;
if (file.size > REPLY_ATTACH_MAX_BYTES) return;
var fr = new FileReader();
fr.onload = function() {
var s = fr.result || '';
var i = s.indexOf(',');
pendingReplyAttachments.push({
name: file.name || 'bild.png',
data: i >= 0 ? s.slice(i + 1) : s
});
updateReplyAttHint();
};
fr.readAsDataURL(file);
});
}
function setupReplyBarDropPaste() {
var ta = document.getElementById('reply-text');
var bar = document.getElementById('chat-input-bar');
if (!ta || !bar) return;
ta.addEventListener('paste', function(e) {
var items = e.clipboardData && e.clipboardData.items;
if (!items) return;
for (var i = 0; i < items.length; i++) {
if (items[i].type && items[i].type.indexOf('image/') === 0) {
e.preventDefault();
var f = items[i].getAsFile();
if (f) queueReplyImageFiles([f]);
}
}
});
bar.addEventListener('dragover', function(e) { e.preventDefault(); });
bar.addEventListener('drop', function(e) {
e.preventDefault();
if (e.dataTransfer && e.dataTransfer.files) queueReplyImageFiles(e.dataTransfer.files);
});
}
function openNewChatDialog() {
if (!currentSession) {
showLoginOverlay();
return;
}
var sel = document.getElementById('nc-peer-select');
sel.innerHTML = '<option value="">\u2014 Benutzer w\u00e4hlen \u2014</option>';
(practiceUsers || []).forEach(function(u) {
if (!u || u.display_name === currentSession.display_name) return;
var o = document.createElement('option');
o.value = u.display_name;
o.textContent = u.display_name + (u.role ? ' (' + u.role + ')' : '');
sel.appendChild(o);
});
var gr = document.querySelector('input[name="nc-mode"][value="general"]');
if (gr) gr.checked = true;
syncNcPeerSelect();
document.getElementById('new-chat-overlay').classList.remove('hidden');
}
function closeNewChatDialog() {
document.getElementById('new-chat-overlay').classList.add('hidden');
}
function syncNcPeerSelect() {
var mode = (document.querySelector('input[name="nc-mode"]:checked') || {}).value;
document.getElementById('nc-peer-select').disabled = mode !== 'dm';
}
function launchNewChatWindow() {
var mode = (document.querySelector('input[name="nc-mode"]:checked') || {}).value || 'general';
var peer = (document.getElementById('nc-peer-select').value || '').trim();
if (mode === 'dm' && !peer) {
alert('Bitte einen Benutzer ausw\u00e4hlen.');
return;
}
closeNewChatDialog();
var q = mode === 'general' ? 'mode=general' : ('mode=dm&peer=' + encodeURIComponent(peer));
var url = window.location.origin + '/empfang/chatwin.html?' + q;
var wname = 'aza_empfang_chat_' + String(peer || 'allgemein').replace(/\W/g, '_') + '_' + Date.now();
var w = window.open(url, wname, 'width=560,height=720,menubar=no,toolbar=no,scrollbars=yes,resizable=yes');
if (!w) {
alert('Das Chat-Fenster wurde blockiert. Bitte Popups f\u00fcr diese Seite erlauben, oder die Adresse manuell \u00f6ffnen:\n\n' + url);
}
}
async function sendReply() {
if (!activeThreadId || !currentSession) return;
var ta = document.getElementById('reply-text');
var text = ta.value.trim();
if (!text) return;
if (!text && !pendingReplyAttachments.length) return;
stopDictation();
var t = allThreads.find(function(th){ return th.tid === activeThreadId; });
@@ -1281,12 +1436,19 @@ async function sendReply() {
var replyToAbsender = t ? (t.root.absender || '') : '';
try {
var extras = { reply_to: activeThreadId, reply_to_absender: replyToAbsender };
if (pendingReplyAttachments.length) {
extras.attachments = pendingReplyAttachments.slice();
pendingReplyAttachments = [];
updateReplyAttHint();
}
var payload = {
medikamente: '', therapieplan: '', procedere: '',
kommentar: text, patient: '',
kommentar: text || (extras.attachments && extras.attachments.length ? '\u200b' : ''),
patient: '',
absender: absenderName,
zeitstempel: new Date().toISOString().slice(0,19).replace('T',' '),
extras: { reply_to: activeThreadId, reply_to_absender: replyToAbsender }
extras: extras
};
var r = await apiFetch(API_BASE + '/send', {
method: 'POST',
@@ -1417,6 +1579,51 @@ async function doCleanup() {
}
}
/* ===================================================================
DESKTOP-HÜLLE (pywebview): immer im Vordergrund
=================================================================== */
var shellPinBusy = false;
function initShellPinUi() {
var b = document.getElementById('shell-pin-btn');
if (!b) return;
var api = window.pywebview && pywebview.api;
if (!api || typeof api.toggle_on_top !== 'function' || typeof api.get_on_top !== 'function') {
b.style.display = 'none';
return;
}
b.style.display = '';
updateShellPinBtn();
}
async function updateShellPinBtn() {
var b = document.getElementById('shell-pin-btn');
if (!b || b.style.display === 'none') return;
try {
var v = await pywebview.api.get_on_top();
if (v) {
b.classList.add('on');
b.title = 'Immer im Vordergrund (aktiv)';
b.setAttribute('aria-pressed', 'true');
} else {
b.classList.remove('on');
b.title = 'Immer im Vordergrund';
b.setAttribute('aria-pressed', 'false');
}
} catch (e) {}
}
async function toggleShellPin() {
if (shellPinBusy) return;
var b = document.getElementById('shell-pin-btn');
if (!b || b.style.display === 'none') return;
var api = window.pywebview && pywebview.api;
if (!api || typeof api.toggle_on_top !== 'function') return;
shellPinBusy = true;
try {
await api.toggle_on_top();
await updateShellPinBtn();
} catch (e) {}
shellPinBusy = false;
}
/* ===================================================================
SOUND
=================================================================== */
@@ -1501,9 +1708,16 @@ function onRepeatChange() {
FONT / UI
=================================================================== */
function applyFontSize() {
document.body.style.fontSize = currentFontSize + 'pt';
document.getElementById('font-size-display').textContent = currentFontSize;
localStorage.setItem('empfang_font_size', currentFontSize);
var fs = currentFontSize + 'pt';
/* rem bezieht sich auf <html>: nur body zu setzen skaliert die meisten Inhalte nicht */
document.documentElement.style.fontSize = fs;
document.body.style.fontSize = fs;
var pct = Math.round((currentFontSize / EMPFANG_FONT_BASE_PT) * 100);
var disp = document.getElementById('font-size-display');
if (disp) disp.textContent = pct + '%';
var wrap = document.getElementById('font-ctrl-wrap');
if (wrap) wrap.title = 'Schriftgröße: ' + pct + '% (' + currentFontSize + ' pt, 100% = ' + EMPFANG_FONT_BASE_PT + ' pt)';
localStorage.setItem('empfang_font_size', String(currentFontSize));
}
function changeFontSize(d) {
currentFontSize = Math.max(5, Math.min(20, currentFontSize + d));
@@ -2077,6 +2291,10 @@ try {
function notifyOtherTabs() {
try { if (bc) bc.postMessage('reload'); } catch(e) {}
}
try {
window.addEventListener('pywebviewready', function() { initShellPinUi(); });
} catch (e) {}
</script>
</body>
</html>

541
AzA march 2026/web/empfang_chat_minimal.html Normal file
View File

@@ -0,0 +1,541 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AZA Empfang – Chat</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Segoe UI',system-ui,sans-serif;background:#f0f4f8;color:#1a2a3a;font-size:10pt}
body{display:flex;flex-direction:column;min-height:100%}
header{background:linear-gradient(135deg,#5B8DB3,#3a6d93);color:#fff;padding:6px 10px;flex-shrink:0;z-index:30;overflow:visible}
.hdr-row1{display:flex;flex-wrap:wrap;align-items:center;gap:8px;row-gap:6px}
header h1{font-size:.9rem;font-weight:600;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.hdr-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:flex-end;flex:0 0 auto;flex-shrink:0;margin-left:auto}
.hdr-tools .cw-ton-lbl{font-size:.65rem;opacity:.9;white-space:nowrap}
.hdr-tools input[type=range]{width:72px;min-width:64px;accent-color:#fff;cursor:pointer}
.hdr-tools span.vol-lbl{font-size:.68rem;opacity:.9;min-width:32px;text-align:right}
.hdr-tools button{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:4px;padding:3px 8px;font-size:.72rem;cursor:pointer;font-family:inherit;line-height:1.2}
.hdr-tools button:hover{background:rgba(255,255,255,.25)}
.hdr-tools button.on{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.55)}
.hdr-tools button.muted{opacity:.65}
#cw-settings{background:#fff;border-bottom:1px solid #dde8f0;padding:10px 12px;font-size:.82rem;box-shadow:0 2px 8px rgba(0,0,0,.06);flex-shrink:0}
#cw-settings.hidden{display:none!important}
#cw-settings label{display:block;margin-bottom:4px;color:#3a5a7a;font-weight:600}
#cw-settings select{width:100%;max-width:320px;padding:6px;border:1px solid #d0dce8;border-radius:6px;font-family:inherit;font-size:.85rem;margin-bottom:8px}
#cw-settings .set-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
#main-col{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#pending-strip{display:none;flex-shrink:0;padding:8px 10px;background:#e8f4fc;border-bottom:1px solid #c8dce8;gap:8px;flex-wrap:wrap;align-items:flex-start}
#pending-strip.has-items{display:flex}
.pend-item{position:relative;border:1px solid #b8cce0;border-radius:8px;overflow:hidden;background:#fff}
.pend-item img{display:block;width:72px;height:72px;object-fit:cover}
.pend-item .rm{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:#c0392b;color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
#log{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:92%;padding:8px 12px;border-radius:10px;font-size:.88rem;line-height:1.45;word-wrap:break-word}
.msg.me{align-self:flex-end;background:#d4e8f4;border:1px solid #a8cce0}
.msg.them{align-self:flex-start;background:#fff;border:1px solid #e0e4e8;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.msg .meta{font-size:.68rem;color:#8a9aaa;margin-bottom:4px}
.msg img{max-width:100%;max-height:240px;border-radius:6px;margin-top:6px;display:block}
.drop-hint{font-size:.72rem;color:#6a8a9a;text-align:center;padding:6px;background:#e8f0f8;border-top:1px dashed #c8d8e8;flex-shrink:0}
.drop-hint.drag{background:#d4e8f4}
#bar{border-top:1px solid #dde8f0;background:#fff;padding:8px;flex-shrink:0}
#bar textarea{width:100%;border:1px solid #d0dce8;border-radius:8px;padding:8px;font-family:inherit;font-size:.9rem;resize:none;min-height:44px;max-height:140px}
#bar .row{display:flex;gap:8px;margin-top:8px;align-items:center}
#bar button{background:#5B8DB3;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-weight:600;cursor:pointer;font-family:inherit;font-size:.85rem}
#bar button:disabled{opacity:.5;cursor:not-allowed}
#att-preview{font-size:.72rem;color:#5B8DB3;min-height:1.2em}
#gate{position:fixed;inset:0;background:#f0f4f8;display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
#gate .box{background:#fff;padding:24px;border-radius:12px;max-width:360px;box-shadow:0 4px 24px rgba(0,0,0,.1);text-align:center}
#gate a{color:#5B8DB3;font-weight:600}
.hidden{display:none!important}
</style>
</head>
<body>
<div id="gate" class="hidden">
<div class="box">
<p id="gate-msg">Bitte zuerst im Empfang anmelden.</p>
<p style="margin-top:12px"><a id="gate-link" href="#">Empfang öffnen</a></p>
</div>
</div>
<header>
<div class="hdr-row1">
<h1 id="hdr-title">Chat</h1>
<div class="hdr-tools" title="Ton (Benachrichtigungen)">
<span class="cw-ton-lbl" aria-hidden="true">Ton</span>
<input type="range" id="cw-vol" min="0" max="300" step="5" title="Lautstärke" aria-label="Lautstärke Benachrichtigung">
<span class="vol-lbl" id="cw-vol-disp">100%</span>
<button type="button" id="cw-sound" onclick="toggleSound()" title="Ton an/aus">&#128276;</button>
<button type="button" id="cw-gear" onclick="toggleSettings()" title="Klangsignal wählen">&#9881;</button>
<button type="button" onclick="reloadThread()" title="Aktualisieren">&#8635;</button>
</div>
</div>
</header>
<div id="cw-settings" class="hidden">
<label for="cw-tone">Signal bei neuer Nachricht</label>
<select id="cw-tone" onchange="saveToneChoice()"></select>
<div class="set-row">
<button type="button" class="btn-test" onclick="testSound()" style="background:#e8f0f8;color:#2a5a8a;border:1px solid #c8d8e8;border-radius:6px;padding:6px 12px;cursor:pointer;font-family:inherit;font-size:.8rem">Klang testen</button>
</div>
<p style="margin-top:10px;font-size:.75rem;color:#8a9aaa">Einstellungen werden wie im Haupt-Empfang gespeichert (dieser Browser).</p>
</div>
<div id="main-col">
<div id="pending-strip"></div>
<div id="log"></div>
</div>
<div class="drop-hint" id="drop-hint">Bilder hierher ziehen oder in das Textfeld einfügen (Strg+V)</div>
<div id="bar">
<textarea id="tx" placeholder="Nachricht… (Enter = senden, Umschalt+Enter = Zeile)" rows="2"></textarea>
<div id="att-preview"></div>
<div class="row">
<button type="button" id="btn-send" onclick="doSend()">Senden</button>
</div>
</div>
<script>
var API_BASE = window.location.origin + '/empfang';
var MAX_B64 = 2 * 1024 * 1024;
var mode = 'general';
var peerName = '';
var threadId = null;
var currentSession = null;
var pollTimer = null;
var pendingAttach = [];
var lastPollSig = '';
var soundEnabled = localStorage.getItem('empfang_sound') !== 'off';
var audioCtx = null;
var volume = parseFloat(localStorage.getItem('empfang_volume') || '1');
if (isNaN(volume)) volume = 1;
var currentToneIdx = parseInt(localStorage.getItem('empfang_tone_idx') || '0', 10);
var TONE_PRESETS = [
{name:'Sanftes Glockenspiel', notes:[{f:523,d:.15},{f:659,d:.15},{f:784,d:.3}], wave:'sine', vol:.12},
{name:'Zwei-Ton Harmonisch', notes:[{f:392,d:.2},{f:523,d:.3}], wave:'sine', vol:.12},
{name:'Drei-Ton Melodie', notes:[{f:523,d:.12},{f:587,d:.12},{f:659,d:.28}], wave:'sine', vol:.11},
{name:'Kristallklar', notes:[{f:1319,d:.5}], wave:'sine', vol:.07},
{name:'Warmer Akkord', notes:[{f:262,d:.4}], wave:'triangle', vol:.14},
{name:'Aufstieg', notes:[{f:262,d:.09},{f:330,d:.09},{f:392,d:.09},{f:523,d:.22}], wave:'sine', vol:.10},
{name:'Sanfte Welle', notes:[{f:440,d:.55}], wave:'sine', vol:.10},
{name:'Tropfen', notes:[{f:659,d:.12},{f:587,d:.12},{f:523,d:.28}], wave:'sine', vol:.10},
{name:'Morgengruss', notes:[{f:523,d:.14},{f:392,d:.14},{f:523,d:.28}], wave:'sine', vol:.12},
{name:'Zephyr', notes:[{f:880,d:.45}], wave:'sine', vol:.06},
{name:'Bambus', notes:[{f:330,d:.18},{f:440,d:.28}], wave:'triangle', vol:.12},
{name:'Silberglocke', notes:[{f:988,d:.45}], wave:'sine', vol:.08},
{name:'Meditation', notes:[{f:262,d:.65}], wave:'sine', vol:.12},
{name:'Horizont', notes:[{f:587,d:.18},{f:880,d:.32}], wave:'sine', vol:.10},
{name:'Stille Post', notes:[{f:784,d:.4}], wave:'sine', vol:.08},
];
function parseQs() {
var p = new URLSearchParams(window.location.search);
mode = (p.get('mode') || 'general').toLowerCase() === 'dm' ? 'dm' : 'general';
try {
peerName = decodeURIComponent((p.get('peer') || '').trim());
} catch (e) {
peerName = (p.get('peer') || '').trim();
}
if (mode === 'dm' && !peerName) mode = 'general';
}
async function checkAuth() {
try {
var r = await fetch(API_BASE + '/auth/me', { credentials: 'include' });
if (r.status === 401) return null;
var d = await r.json();
if (d.authenticated) return d;
} catch (e) {}
return null;
}
function showGate(msg) {
document.getElementById('gate').classList.remove('hidden');
document.getElementById('gate-msg').textContent = msg;
var base = window.location.origin + '/empfang/';
document.getElementById('gate-link').href = base;
document.getElementById('gate-link').onclick = function(e) {
e.preventDefault();
window.open(base, '_blank');
};
}
function setTitle() {
var t = document.getElementById('hdr-title');
if (mode === 'dm' && peerName) t.textContent = 'Chat mit ' + peerName;
else t.textContent = 'Neuer Chat – Allgemein';
}
function mimeForAttachment(name, fallbackMime) {
var fm = (fallbackMime || '').toLowerCase();
if (fm.indexOf('image/') === 0) return fm;
var n = (name || '').toLowerCase();
if (n.endsWith('.png')) return 'image/png';
if (n.endsWith('.gif')) return 'image/gif';
if (n.endsWith('.webp')) return 'image/webp';
if (n.endsWith('.bmp')) return 'image/bmp';
if (n.endsWith('.jpg') || n.endsWith('.jpeg')) return 'image/jpeg';
return 'image/png';
}
function fileToAttach(file) {
return new Promise(function(resolve, reject) {
if (file.size > MAX_B64) {
reject(new Error('Datei zu groß (max. ca. 2 MB)'));
return;
}
var fr = new FileReader();
fr.onload = function() {
var s = fr.result;
var i = s.indexOf(',');
resolve({
name: file.name || 'bild.png',
data: i >= 0 ? s.slice(i + 1) : s,
mime: file.type || mimeForAttachment(file.name, '')
});
};
fr.onerror = function() { reject(new Error('Lesefehler')); };
fr.readAsDataURL(file);
});
}
function renderPendingStrip() {
var strip = document.getElementById('pending-strip');
strip.innerHTML = '';
if (!pendingAttach.length) {
strip.classList.remove('has-items');
return;
}
strip.classList.add('has-items');
pendingAttach.forEach(function(a, idx) {
var wrap = document.createElement('div');
wrap.className = 'pend-item';
var img = document.createElement('img');
img.src = 'data:' + (a.mime || mimeForAttachment(a.name)) + ';base64,' + a.data;
img.alt = a.name || '';
var rm = document.createElement('button');
rm.type = 'button';
rm.className = 'rm';
rm.innerHTML = '\u00d7';
rm.title = 'Entfernen';
rm.onclick = function() {
pendingAttach.splice(idx, 1);
renderPendingStrip();
document.getElementById('att-preview').textContent =
pendingAttach.length ? (pendingAttach.length + ' Bild(er) werden mitgesendet') : '';
};
wrap.appendChild(img);
wrap.appendChild(rm);
strip.appendChild(wrap);
});
}
function addFiles(files) {
var arr = Array.from(files || []);
var work = arr.filter(function(f) { return f.type && f.type.indexOf('image/') === 0; });
if (!work.length) return;
Promise.all(work.map(function(f) {
return fileToAttach(f).then(function(a) { pendingAttach.push(a); });
})).then(function() {
renderPendingStrip();
document.getElementById('att-preview').textContent =
pendingAttach.length ? (pendingAttach.length + ' Bild(er) werden mitgesendet') : '';
}).catch(function(e) {
alert(e.message || String(e));
});
}
function setupDropPaste() {
var hint = document.getElementById('drop-hint');
var tx = document.getElementById('tx');
['dragenter','dragover'].forEach(function(ev) {
hint.addEventListener(ev, function(e) {
e.preventDefault();
e.stopPropagation();
hint.classList.add('drag');
});
});
hint.addEventListener('dragleave', function(e) {
hint.classList.remove('drag');
});
hint.addEventListener('drop', function(e) {
e.preventDefault();
hint.classList.remove('drag');
addFiles(e.dataTransfer && e.dataTransfer.files);
});
document.body.addEventListener('dragover', function(e) { e.preventDefault(); });
document.body.addEventListener('drop', function(e) {
if (e.target === hint || hint.contains(e.target)) return;
if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
e.preventDefault();
addFiles(e.dataTransfer.files);
}
});
tx.addEventListener('paste', function(e) {
var items = e.clipboardData && e.clipboardData.items;
if (!items) return;
for (var i = 0; i < items.length; i++) {
if (items[i].type && items[i].type.indexOf('image/') === 0) {
e.preventDefault();
var f = items[i].getAsFile();
if (f) addFiles([f]);
}
}
});
tx.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
doSend();
}
});
}
function patientLine() {
var now = new Date();
var pad = function(n) { return n < 10 ? '0' + n : '' + n; };
return 'Chat · ' + pad(now.getDate()) + '.' + pad(now.getMonth() + 1) + '. ' +
pad(now.getHours()) + ':' + pad(now.getMinutes());
}
async function doSend() {
var tx = document.getElementById('tx');
var text = (tx.value || '').trim();
if (!text && !pendingAttach.length) return;
if (!currentSession) return;
var extras = {};
if (threadId) {
extras.reply_to = threadId;
extras.reply_to_absender = '';
}
if (mode === 'dm' && peerName) extras.recipient = peerName;
if (pendingAttach.length) {
extras.attachments = pendingAttach.map(function(a) {
return { name: a.name, data: a.data };
});
}
var payload = {
medikamente: '', therapieplan: '', procedere: '',
kommentar: text || (pendingAttach.length ? '\u200b' : ''),
patient: mode === 'dm' && peerName ? ('Direkt: ' + peerName) : patientLine(),
absender: currentSession.display_name + ' (Empfang)',
zeitstempel: new Date().toISOString().slice(0, 19).replace('T', ' '),
extras: extras
};
document.getElementById('btn-send').disabled = true;
try {
var r = await fetch(API_BASE + '/send', {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
var d = await r.json().catch(function() { return {}; });
if (r.ok && d.success) {
threadId = d.thread_id || d.id || threadId;
tx.value = '';
pendingAttach = [];
renderPendingStrip();
document.getElementById('att-preview').textContent = '';
lastPollSig = '';
await loadThread();
} else {
alert(d.detail || 'Senden fehlgeschlagen');
}
} catch (e) {
alert('Verbindungsfehler');
}
document.getElementById('btn-send').disabled = false;
}
function appendImagesToEl(parent, att) {
if (!att || !att.length) return;
att.forEach(function(a) {
if (!a || !a.data) return;
var mime = mimeForAttachment(a.name, a.mime || '');
var img = document.createElement('img');
img.src = 'data:' + mime + ';base64,' + a.data;
img.alt = a.name || 'Bild';
parent.appendChild(img);
});
}
function renderOne(m, isMe) {
var div = document.createElement('div');
div.className = 'msg ' + (isMe ? 'me' : 'them');
var meta = document.createElement('div');
meta.className = 'meta';
meta.textContent = (m.absender || '') + ' · ' + (m.zeitstempel || m.empfangen || '');
div.appendChild(meta);
if (m.kommentar && m.kommentar.trim() && m.kommentar !== '\u200b') {
var t = document.createElement('div');
t.textContent = m.kommentar;
div.appendChild(t);
}
var att = m.extras && m.extras.attachments;
appendImagesToEl(div, att);
return div;
}
function playTone(idx) {
if (!soundEnabled) return;
var preset = TONE_PRESETS[idx] || TONE_PRESETS[0];
var vol = preset.vol * Math.max(0, volume);
try {
if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
if (audioCtx.state === 'suspended') audioCtx.resume();
var t0 = audioCtx.currentTime;
var t = t0;
preset.notes.forEach(function(note) {
var g = audioCtx.createGain();
g.connect(audioCtx.destination);
g.gain.setValueAtTime(vol, t);
g.gain.linearRampToValueAtTime(vol * 0.6, t + note.d * 0.4);
g.gain.exponentialRampToValueAtTime(0.001, t + note.d);
var o = audioCtx.createOscillator();
o.type = preset.wave;
o.frequency.setValueAtTime(note.f, t);
o.connect(g);
o.start(t);
o.stop(t + note.d + 0.05);
t += note.d;
});
} catch (e) {}
}
function updateSoundBtn() {
var btn = document.getElementById('cw-sound');
if (!btn) return;
if (soundEnabled) {
btn.innerHTML = '&#128276;';
btn.classList.remove('muted');
btn.title = 'Ton an (Klick = aus)';
} else {
btn.innerHTML = '&#128277;';
btn.classList.add('muted');
btn.title = 'Ton aus (Klick = an)';
}
}
function toggleSound() {
soundEnabled = !soundEnabled;
localStorage.setItem('empfang_sound', soundEnabled ? 'on' : 'off');
updateSoundBtn();
if (soundEnabled) playTone(currentToneIdx);
}
function testSound() {
var prev = soundEnabled;
soundEnabled = true;
playTone(currentToneIdx);
soundEnabled = prev;
}
function setVolFromSlider() {
var el = document.getElementById('cw-vol');
if (!el) return;
volume = Math.min(3, Math.max(0, parseInt(el.value, 10) / 100));
document.getElementById('cw-vol-disp').textContent = Math.round(volume * 100) + '%';
try {
localStorage.setItem('empfang_volume', String(volume));
} catch (e) {}
}
function initVolumeUI() {
var el = document.getElementById('cw-vol');
if (!el) return;
el.value = String(Math.round(volume * 100));
document.getElementById('cw-vol-disp').textContent = Math.round(volume * 100) + '%';
el.addEventListener('input', setVolFromSlider);
}
function initToneSelect() {
var sel = document.getElementById('cw-tone');
if (!sel) return;
sel.innerHTML = '';
TONE_PRESETS.forEach(function(t, i) {
var o = document.createElement('option');
o.value = String(i);
o.textContent = t.name;
if (i === currentToneIdx) o.selected = true;
sel.appendChild(o);
});
}
function saveToneChoice() {
var sel = document.getElementById('cw-tone');
currentToneIdx = parseInt(sel.value, 10) || 0;
localStorage.setItem('empfang_tone_idx', String(currentToneIdx));
if (soundEnabled) playTone(currentToneIdx);
}
function toggleSettings() {
var p = document.getElementById('cw-settings');
p.classList.toggle('hidden');
var g = document.getElementById('cw-gear');
if (g) g.classList.toggle('on', !p.classList.contains('hidden'));
}
async function loadThread() {
if (!threadId || !currentSession) return;
try {
var r = await fetch(API_BASE + '/messages', { credentials: 'include' });
var d = await r.json();
var msgs = (d.messages || []).filter(function(m) {
return String(m.thread_id || m.id) === String(threadId);
});
msgs.sort(function(a, b) {
return (a.empfangen || '').localeCompare(b.empfangen || '');
});
var sig = msgs.map(function(m) { return m.id; }).join(',');
if (lastPollSig && sig !== lastPollSig) {
var myName = currentSession.display_name;
var oldSet = {};
lastPollSig.split(',').forEach(function(id) { if (id) oldSet[id] = true; });
var playOnce = false;
msgs.forEach(function(m) {
if (oldSet[m.id]) return;
var isMe = (m.absender || '').indexOf(myName) === 0 ||
(m.absender || '').split('(')[0].trim() === myName;
if (!isMe) playOnce = true;
});
if (playOnce) playTone(currentToneIdx);
}
lastPollSig = sig;
var log = document.getElementById('log');
log.innerHTML = '';
var myName = currentSession.display_name;
msgs.forEach(function(m) {
var isMe = (m.absender || '').indexOf(myName) === 0 ||
(m.absender || '').split('(')[0].trim() === myName;
log.appendChild(renderOne(m, isMe));
});
log.scrollTop = log.scrollHeight;
} catch (e) {}
}
function reloadThread() {
loadThread();
}
async function init() {
parseQs();
setTitle();
initVolumeUI();
initToneSelect();
updateSoundBtn();
setupDropPaste();
currentSession = await checkAuth();
if (!currentSession) {
showGate('Melden Sie sich im Empfang an, um zu chatten. Dieses Fenster nutzt dieselbe Anmeldung.');
return;
}
pollTimer = setInterval(loadThread, 5000);
}
init();
</script>
</body>
</html>