88 lines
4.6 KiB
JavaScript
88 lines
4.6 KiB
JavaScript
/**
|
|
* Wiederverwendbares Meldungs-Modul.
|
|
* Bietet openMeldungDialog(zielTyp, zielId) und renderMeldenBtn(zielTyp, zielId).
|
|
*/
|
|
(function () {
|
|
// Dialog einmalig in den DOM einfügen
|
|
if (!document.getElementById('meldungDialog')) {
|
|
document.body.insertAdjacentHTML('beforeend', `
|
|
<div id="meldungDialog" style="
|
|
display:none; position:fixed; inset:0; z-index:9999;
|
|
background:rgba(0,0,0,0.6); align-items:center; justify-content:center;">
|
|
<div style="background:var(--color-card);border:1px solid var(--color-secondary);
|
|
border-radius:12px;padding:1.5rem;width:min(420px,90vw);position:relative;">
|
|
<h3 style="margin:0 0 1rem 0;color:var(--color-primary)">Inhalt melden</h3>
|
|
<p id="meldungDialogLabel" style="color:var(--color-muted);font-size:0.9rem;margin:0 0 0.75rem 0;"></p>
|
|
<textarea id="meldungGrund" placeholder="Grund (optional)"
|
|
style="width:100%;box-sizing:border-box;padding:0.5rem;border-radius:6px;
|
|
border:1px solid var(--color-secondary);background:var(--color-card);
|
|
color:var(--color-text);resize:vertical;min-height:80px;font-family:inherit;"></textarea>
|
|
<div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:1rem;">
|
|
<button id="meldungAbbrechen" style="padding:0.45rem 1rem;border-radius:6px;
|
|
border:1px solid var(--color-secondary);background:transparent;
|
|
color:var(--color-text);cursor:pointer;">Abbrechen</button>
|
|
<button id="meldungSenden" style="padding:0.45rem 1rem;border-radius:6px;
|
|
border:none;background:var(--color-primary);color:#fff;cursor:pointer;font-weight:600;">
|
|
Melden</button>
|
|
</div>
|
|
<p id="meldungMsg" style="margin:0.5rem 0 0 0;font-size:0.85rem;color:var(--color-primary);display:none;"></p>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
document.getElementById('meldungAbbrechen').addEventListener('click', () => closeMeldungDialog());
|
|
document.getElementById('meldungDialog').addEventListener('click', function (e) {
|
|
if (e.target === this) closeMeldungDialog();
|
|
});
|
|
}
|
|
|
|
let _zielTyp = null, _zielId = null;
|
|
|
|
window.openMeldungDialog = function (zielTyp, zielId) {
|
|
_zielTyp = zielTyp;
|
|
_zielId = zielId;
|
|
document.getElementById('meldungGrund').value = '';
|
|
document.getElementById('meldungMsg').style.display = 'none';
|
|
document.getElementById('meldungDialogLabel').textContent =
|
|
zielTyp === 'PROFIL' ? 'Profil melden' : 'Post melden';
|
|
document.getElementById('meldungDialog').style.display = 'flex';
|
|
|
|
document.getElementById('meldungSenden').onclick = async function () {
|
|
const grund = document.getElementById('meldungGrund').value.trim();
|
|
const r = await fetch('/meldung', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ zielTyp: _zielTyp, zielId: _zielId, grund: grund || null })
|
|
});
|
|
const msg = document.getElementById('meldungMsg');
|
|
msg.style.display = 'block';
|
|
if (r.status === 201) {
|
|
msg.style.color = 'var(--color-success, #2ecc71)';
|
|
msg.textContent = 'Meldung wurde übermittelt.';
|
|
setTimeout(closeMeldungDialog, 1500);
|
|
} else if (r.status === 409) {
|
|
msg.style.color = 'var(--color-primary)';
|
|
msg.textContent = 'Du hast diesen Inhalt bereits gemeldet.';
|
|
} else {
|
|
msg.style.color = 'var(--color-primary)';
|
|
msg.textContent = 'Fehler beim Senden.';
|
|
}
|
|
};
|
|
};
|
|
|
|
window.closeMeldungDialog = function () {
|
|
document.getElementById('meldungDialog').style.display = 'none';
|
|
};
|
|
|
|
/**
|
|
* Erzeugt einen kleinen "Melden"-Button-HTML-String.
|
|
* Verwendung: in innerHTML-Templates, wo onclick genutzt werden kann.
|
|
*/
|
|
window.renderMeldenBtn = function (zielTyp, zielId) {
|
|
return `<button onclick="openMeldungDialog('${zielTyp}','${zielId}')"
|
|
style="background:none;border:none;color:var(--color-muted,#888);
|
|
font-size:0.8rem;cursor:pointer;padding:0.2rem 0.4rem;border-radius:4px;"
|
|
title="Melden">⚑ Melden</button>`;
|
|
};
|
|
})();
|