update
This commit is contained in:
@@ -3,51 +3,69 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>AZA Empfang – Chat</title>
|
||||
<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}
|
||||
html,body{height:100%;font-family:'Segoe UI',system-ui,sans-serif;background:#eaf1f8;color:#1a2a3a;font-size:10pt}
|
||||
:root{--aza-blue:#5B8DB3;--aza-deep:#356488;--aza-rail:linear-gradient(180deg,#3d6f92 0%,#2a5472 100%);--aza-sh:0 4px 18px rgba(28,62,94,.08)}
|
||||
body{display:flex;flex-direction:column;min-height:100%;overflow:hidden}
|
||||
header{background:linear-gradient(135deg,#5B8DB3,#3a6d93);color:#fff;padding:8px 14px;flex-shrink:0;z-index:30;box-shadow:0 2px 12px rgba(40,80,110,.2)}
|
||||
.hdr-row1{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
|
||||
header h1{font-size:.95rem;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.hdr-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
|
||||
.hdr-tools .cw-ton-lbl{font-size:.62rem;opacity:.92;text-transform:uppercase;letter-spacing:.04em}
|
||||
.hdr-tools input[type=range]{width:80px;accent-color:#fff;cursor:pointer}
|
||||
.hdr-tools span.vol-lbl{font-size:.68rem;min-width:36px;text-align:right;font-weight:600}
|
||||
.hdr-tools button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);color:#fff;border-radius:8px;padding:5px 10px;font-size:.75rem;cursor:pointer;font-family:inherit}
|
||||
.hdr-tools button:hover{background:rgba(255,255,255,.24)}
|
||||
.hdr-tools button.on{background:rgba(255,255,255,.32)}
|
||||
.hdr-tools button.muted{opacity:.6}
|
||||
#cw-settings{background:#fff;border-bottom:1px solid #dde8f0;padding:12px 16px;font-size:.82rem;flex-shrink:0;box-shadow:var(--aza-sh)}
|
||||
#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}
|
||||
#cw-settings select{width:100%;max-width:340px;padding:8px;border:1px solid #d0dce8;border-radius:10px}
|
||||
#cw-settings .set-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
|
||||
.shell-body{display:flex;flex:1;min-height:0;overflow:hidden}
|
||||
#nav-mini{width:72px;min-width:72px;flex-shrink:0;background:var(--aza-rail);display:flex;flex-direction:column;align-items:center;padding:14px 0;border-right:1px solid rgba(255,255,255,.12)}
|
||||
.nr-m-logo{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;font:700 .65rem/1.1 'Segoe UI',sans-serif;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;margin-bottom:12px}
|
||||
.nr-m-btn{width:44px;height:44px;border:none;border-radius:11px;background:transparent;color:#fff;font-size:1.2rem;cursor:pointer;margin-bottom:10px;display:flex;align-items:center;justify-content:center}
|
||||
.nr-m-btn:hover{background:rgba(255,255,255,.12)}
|
||||
#main-col-wrap{flex:1;display:flex;flex-direction:column;min-width:0;background:#f0f6fb}
|
||||
.chat-strip{padding:10px 20px;background:#fafcfe;border-bottom:1px solid #e2ebf5;font-size:.72rem;font-weight:700;color:#62809a;text-transform:uppercase;letter-spacing:.07em}
|
||||
#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{display:none;flex-shrink:0;padding:10px 16px;background:#e8f2fa;border-bottom:1px solid #d2e4f4;gap:10px;flex-wrap:wrap}
|
||||
#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}
|
||||
.pend-item{position:relative;border:1px solid #b8cce0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--aza-sh)}
|
||||
.pend-item img{display:block;width:76px;height:76px;object-fit:cover}
|
||||
.pend-item .rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border:none;border-radius:50%;background:#c0392b;color:#fff;font-size:12px;cursor:pointer}
|
||||
#log{flex:1;overflow-y:auto;padding:20px clamp(16px,4vw,40px);display:flex;flex-direction:column;gap:12px}
|
||||
#log::-webkit-scrollbar{width:10px}
|
||||
#log::-webkit-scrollbar-thumb{background:#bfd5e8;border-radius:999px;border:2px solid #f0f6fb}
|
||||
.msg{max-width:min(92%,640px);padding:13px 16px;border-radius:16px;font-size:.89rem;line-height:1.55;word-wrap:break-word;border:1px solid transparent;box-shadow:0 1px 3px rgba(28,62,94,.06)}
|
||||
.msg.me{align-self:flex-end;background:linear-gradient(165deg,#d9ebf8,#cae3f5);border-color:#aecfe4;border-bottom-right-radius:5px}
|
||||
.msg.them{align-self:flex-start;background:#fff;border-color:#e4ebf4;border-bottom-left-radius:5px;box-shadow:0 4px 14px rgba(28,62,94,.06)}
|
||||
.msg .meta{font-size:.66rem;color:#7693ab;margin-bottom:6px;font-weight:600}
|
||||
.msg img{max-width:100%;max-height:260px;border-radius:12px;margin-top:8px;border:1px solid #e8eef4}
|
||||
.drop-hint{font-size:.72rem;color:#6a8499;text-align:center;padding:10px;background:#eef4fa;border-top:1px dashed #cddfea;flex-shrink:0}
|
||||
.drop-hint.drag{background:#e0eef8}
|
||||
#bar{flex-shrink:0;background:#fafcfe;border-top:1px solid #dfe8ef;padding:14px clamp(14px,3vw,28px) 18px;box-shadow:0 -6px 24px rgba(40,76,103,.07)}
|
||||
#bar-inner{max-width:720px;margin:0 auto;display:flex;gap:12px;align-items:flex-end}
|
||||
#bar .grow-inp{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
|
||||
#bar textarea{width:100%;border:1px solid #d0dde9;border-radius:16px;padding:14px 16px;font-family:inherit;font-size:.92rem;resize:none;min-height:52px;max-height:148px;background:#fff;outline:none}
|
||||
#bar textarea:focus{border-color:#8eb8d6;box-shadow:0 0 0 3px rgba(91,141,179,.13)}
|
||||
#bar .row{display:flex;gap:10px;flex-shrink:0;align-items:center}
|
||||
#bar button{background:linear-gradient(180deg,var(--aza-blue),#4a86ad);color:#fff;border:none;border-radius:13px;padding:14px 22px;font-weight:700;font-size:.82rem;font-family:inherit;cursor:pointer;box-shadow:0 4px 12px rgba(61,118,157,.32)}
|
||||
#bar button:hover{transform:translateY(-1px)}
|
||||
#bar button:disabled{opacity:.52;cursor:not-allowed;transform:none}
|
||||
#bar button.btn-dictate{background:#eef5fb;color:#356488;border:1px solid #c8dae8;box-shadow:none}
|
||||
#bar button.btn-dictate:hover{background:#e4eef6}
|
||||
#bar button.btn-dictate.recording{background:#fde8e8;border-color:#e8bcbc;color:#943535}
|
||||
#att-preview{font-size:.72rem;color:var(--aza-deep);font-weight:600;min-height:1.15em}
|
||||
#gate{position:fixed;inset:0;background:#eaf1f8;display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
|
||||
#gate .box{background:#fff;padding:28px;border-radius:16px;max-width:380px;border:1px solid #e6eef6;text-align:center;box-shadow:var(--aza-sh)}
|
||||
#gate a{color:#5B8DB3;font-weight:700}
|
||||
.hidden{display:none!important}
|
||||
@media (max-width:640px){#nav-mini{width:56px;min-width:56px}.nr-m-btn,.nr-m-logo{width:40px;height:40px;font-size:1rem}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -78,16 +96,31 @@ header h1{font-size:.9rem;font-weight:600;flex:1 1 auto;overflow:hidden;text-ove
|
||||
</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 class="shell-body">
|
||||
<nav id="nav-mini" aria-label="Kurzbefehle">
|
||||
<div class="nr-m-logo" title="AzA-Empfang">AzA</div>
|
||||
<button type="button" class="nr-m-btn" onclick="reloadThread()" title="Aktualisieren">↻</button>
|
||||
<button type="button" class="nr-m-btn" onclick="toggleSettings()" title="Einstellungen">⚙</button>
|
||||
</nav>
|
||||
<div id="main-col-wrap">
|
||||
<div class="chat-strip" id="chat-context-strip">Nachrichten</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">
|
||||
<div id="bar-inner">
|
||||
<div class="grow-inp">
|
||||
<textarea id="tx" placeholder="Nachricht… (Enter = senden, Umschalt+Enter = Zeile)" rows="2"></textarea>
|
||||
<div id="att-preview"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button type="button" id="btn-dictate" class="btn-dictate" onclick="toggleDictate()">Diktieren</button>
|
||||
<button type="button" id="btn-send" onclick="doSend()">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
@@ -101,6 +134,83 @@ var pollTimer = null;
|
||||
var pendingAttach = [];
|
||||
var lastPollSig = '';
|
||||
|
||||
var dictateRec = null;
|
||||
var dictateListening = false;
|
||||
|
||||
function stopDictateIfActive() {
|
||||
if (!dictateListening) return;
|
||||
dictateListening = false;
|
||||
try {
|
||||
if (dictateRec) dictateRec.stop();
|
||||
} catch (e) {}
|
||||
dictateRec = null;
|
||||
var b = document.getElementById('btn-dictate');
|
||||
if (b) {
|
||||
b.textContent = 'Diktieren';
|
||||
b.classList.remove('recording');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDictate() {
|
||||
var SR = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||
var btn = document.getElementById('btn-dictate');
|
||||
if (!SR) {
|
||||
alert('Spracherkennung wird in diesem Browser nicht unterstützt.');
|
||||
return;
|
||||
}
|
||||
if (dictateListening) {
|
||||
stopDictateIfActive();
|
||||
return;
|
||||
}
|
||||
dictateRec = new SR();
|
||||
dictateRec.lang = 'de-DE';
|
||||
dictateRec.continuous = true;
|
||||
dictateRec.interimResults = true;
|
||||
dictateListening = true;
|
||||
btn.textContent = 'Stoppen';
|
||||
btn.classList.add('recording');
|
||||
var tx = document.getElementById('tx');
|
||||
try {
|
||||
tx.focus();
|
||||
} catch (e0) {}
|
||||
dictateRec.onresult = function(ev) {
|
||||
var finalChunk = '';
|
||||
for (var i = ev.resultIndex; i < ev.results.length; i++) {
|
||||
if (ev.results[i].isFinal) finalChunk += ev.results[i][0].transcript;
|
||||
}
|
||||
if (!finalChunk) return;
|
||||
var t = (tx.value || '');
|
||||
var add = finalChunk.trim();
|
||||
if (!add) return;
|
||||
if (t && !/\s$/.test(t)) tx.value = t + ' ';
|
||||
tx.value += add + ' ';
|
||||
try {
|
||||
tx.scrollTop = tx.scrollHeight;
|
||||
} catch (e1) {}
|
||||
};
|
||||
dictateRec.onerror = function(ev) {
|
||||
var code = ev && ev.error ? String(ev.error) : '';
|
||||
if (code === 'no-speech' || code === 'aborted') return;
|
||||
stopDictateIfActive();
|
||||
if (code === 'not-allowed') alert('Mikrofonzugriff wurde verweigert.');
|
||||
};
|
||||
dictateRec.onend = function() {
|
||||
if (dictateListening) {
|
||||
try {
|
||||
dictateRec.start();
|
||||
} catch (e2) {}
|
||||
}
|
||||
};
|
||||
try {
|
||||
dictateRec.start();
|
||||
} catch (e3) {
|
||||
dictateListening = false;
|
||||
btn.textContent = 'Diktieren';
|
||||
btn.classList.remove('recording');
|
||||
alert('Diktieren konnte nicht gestartet werden.');
|
||||
}
|
||||
}
|
||||
|
||||
var soundEnabled = localStorage.getItem('empfang_sound') !== 'off';
|
||||
var audioCtx = null;
|
||||
var volume = parseFloat(localStorage.getItem('empfang_volume') || '1');
|
||||
@@ -161,6 +271,8 @@ function setTitle() {
|
||||
var t = document.getElementById('hdr-title');
|
||||
if (mode === 'dm' && peerName) t.textContent = 'Chat mit ' + peerName;
|
||||
else t.textContent = 'Neuer Chat – Allgemein';
|
||||
var cs = document.getElementById('chat-context-strip');
|
||||
if (cs) cs.textContent = mode === 'dm' && peerName ? 'Direkt · ' + peerName : 'Praxis-Posteingang · Allgemein';
|
||||
}
|
||||
|
||||
function mimeForAttachment(name, fallbackMime) {
|
||||
@@ -198,6 +310,7 @@ function fileToAttach(file) {
|
||||
|
||||
function renderPendingStrip() {
|
||||
var strip = document.getElementById('pending-strip');
|
||||
if (!strip) return;
|
||||
strip.innerHTML = '';
|
||||
if (!pendingAttach.length) {
|
||||
strip.classList.remove('has-items');
|
||||
@@ -245,6 +358,7 @@ function addFiles(files) {
|
||||
function setupDropPaste() {
|
||||
var hint = document.getElementById('drop-hint');
|
||||
var tx = document.getElementById('tx');
|
||||
if (!hint || !tx) return;
|
||||
['dragenter','dragover'].forEach(function(ev) {
|
||||
hint.addEventListener(ev, function(e) {
|
||||
e.preventDefault();
|
||||
@@ -295,6 +409,7 @@ function patientLine() {
|
||||
}
|
||||
|
||||
async function doSend() {
|
||||
stopDictateIfActive();
|
||||
var tx = document.getElementById('tx');
|
||||
var text = (tx.value || '').trim();
|
||||
if (!text && !pendingAttach.length) return;
|
||||
@@ -470,6 +585,7 @@ function saveToneChoice() {
|
||||
|
||||
function toggleSettings() {
|
||||
var p = document.getElementById('cw-settings');
|
||||
if (!p) return;
|
||||
p.classList.toggle('hidden');
|
||||
var g = document.getElementById('cw-gear');
|
||||
if (g) g.classList.toggle('on', !p.classList.contains('hidden'));
|
||||
@@ -478,11 +594,16 @@ function toggleSettings() {
|
||||
async function loadThread() {
|
||||
if (!threadId || !currentSession) return;
|
||||
try {
|
||||
var r = await fetch(API_BASE + '/messages', { credentials: 'include' });
|
||||
var r = await fetch(
|
||||
API_BASE + '/thread/' + encodeURIComponent(String(threadId)),
|
||||
{ credentials: 'include' }
|
||||
);
|
||||
if (r.status === 401) {
|
||||
document.getElementById('gate').classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
var d = await r.json();
|
||||
var msgs = (d.messages || []).filter(function(m) {
|
||||
return String(m.thread_id || m.id) === String(threadId);
|
||||
});
|
||||
var msgs = (d.messages || []).slice();
|
||||
msgs.sort(function(a, b) {
|
||||
return (a.empfangen || '').localeCompare(b.empfangen || '');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user