160 lines
8.4 KiB
HTML
160 lines
8.4 KiB
HTML
@include(snippets/header)
|
|
<div class="pagewrapper">
|
|
<div id="main" class="admin-container">
|
|
<div class="container">
|
|
<h2>Meme Manager</h2>
|
|
|
|
<div class="admin-form-container"
|
|
style="margin-bottom: 20px; text-align: left; background: var(--dropdown-bg); padding: 15px; border: 1px solid var(--nav-border-color);">
|
|
<h4>Add New Meme Template</h4>
|
|
<div style="display: flex; flex-direction: column; gap: 10px; max-width: 500px;">
|
|
<input type="text" id="meme-id" placeholder="Template ID (e.g. surprised-pikachu)" style="background: var(--bg); border: 1px solid var(--black); padding: 8px; color: var(--white);">
|
|
<input type="text" id="meme-name" placeholder="Display Name (e.g. Surprised Pikachu)" style="background: var(--bg); border: 1px solid var(--black); padding: 8px; color: var(--white);">
|
|
<input type="text" id="meme-url" placeholder="Image URL (Alternative to upload)" style="background: var(--bg); border: 1px solid var(--black); padding: 8px; color: var(--white);">
|
|
<div style="margin: 5px 0; color: #888; font-size: 0.8em; text-align: center;">- OR -</div>
|
|
<input type="file" id="meme-file" accept="image/*" style="background: var(--bg); border: 1px solid var(--black); padding: 8px; color: var(--white);">
|
|
<input type="text" id="meme-category" placeholder="Category (e.g. Classic, Reaction)" style="background: var(--bg); border: 1px solid var(--black); padding: 8px; color: var(--white);">
|
|
<button id="add-meme" class="btn-upload" style="width: auto; padding: 10px 20px; border: 1px solid var(--nav-border-color); background: var(--bg); color: var(--white); cursor: pointer; align-self: flex-start;">Add Template</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-table-container" style="overflow-x: auto;">
|
|
<table style="width: 100%; border-collapse: collapse; color: var(--white);">
|
|
<thead>
|
|
<tr style="border-bottom: 1px solid var(--nav-border-color); text-align: left;">
|
|
<th style="padding: 10px;">Preview</th>
|
|
<th style="padding: 10px;">Name</th>
|
|
<th style="padding: 10px;">Category</th>
|
|
<th style="padding: 10px;">Template ID</th>
|
|
<th style="padding: 10px;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="meme-list">
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(() => {
|
|
var i18n = window.f0ckI18n || {};
|
|
console.log('[MEME_ADMIN] Initializing');
|
|
const esc = (s) => (s || '').toString().replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
|
const loadMemes = async () => {
|
|
try {
|
|
const res = await fetch('/api/v2/memes');
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
const tbody = document.getElementById('meme-list');
|
|
if (!tbody) return;
|
|
tbody.innerHTML = data.memes.map(m =>
|
|
'<tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">' +
|
|
'<td style="padding: 10px;"><img src="' + m.url + '" style="height: 60px; width: 60px; object-fit: contain; border-radius: 4px; background: #000;"></td>' +
|
|
'<td style="padding: 10px;">' + esc(m.name) + '</td>' +
|
|
'<td style="padding: 10px;"><span style="background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 10px; font-size: 0.85em;">' + esc(m.category || 'General') + '</span></td>' +
|
|
'<td style="padding: 10px; font-family: monospace; opacity: 0.7;">' + esc(m.template_id) + '</td>' +
|
|
'<td style="padding: 10px;">' +
|
|
'<button onclick="window.memeAdmin.deleteMeme(' + m.id + ')" class="btn-remove" style="padding: 5px 15px; font-size: 0.8em; background: #c00; color: white; border: none; cursor: pointer; border-radius: 2px;">Delete</button>' +
|
|
'</td>' +
|
|
'</tr>'
|
|
).join('');
|
|
}
|
|
} catch (err) { console.error('[MEME_ADMIN] Load Error:', err); }
|
|
};
|
|
|
|
const addMeme = async (e) => {
|
|
if (e) e.preventDefault();
|
|
console.log('[MEME_ADMIN] addMeme triggered');
|
|
|
|
const template_id = document.getElementById('meme-id').value;
|
|
const name = document.getElementById('meme-name').value;
|
|
const url = document.getElementById('meme-url').value;
|
|
const category = document.getElementById('meme-category').value;
|
|
const fileInput = document.getElementById('meme-file');
|
|
|
|
if (!template_id || !name || (!url && !fileInput.files[0])) {
|
|
return alert('Fill all fields (ID, Name, and either URL or File)');
|
|
}
|
|
|
|
const btn = document.getElementById('add-meme');
|
|
const oldText = btn.textContent;
|
|
btn.disabled = true;
|
|
btn.textContent = i18n.uploading || 'Uploading...';
|
|
|
|
const formData = new FormData();
|
|
formData.append('template_id', template_id);
|
|
formData.append('name', name);
|
|
formData.append('url', url);
|
|
formData.append('category', category);
|
|
if (fileInput.files[0]) {
|
|
formData.append('file', fileInput.files[0]);
|
|
}
|
|
|
|
try {
|
|
const headers = {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
};
|
|
const csrf = '{{ csrf_token }}';
|
|
if (csrf) headers['X-CSRF-Token'] = csrf;
|
|
|
|
const res = await fetch('/api/v2/admin/memes', {
|
|
method: 'POST',
|
|
headers: headers,
|
|
body: formData
|
|
});
|
|
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
document.getElementById('meme-id').value = '';
|
|
document.getElementById('meme-name').value = '';
|
|
document.getElementById('meme-url').value = '';
|
|
document.getElementById('meme-category').value = '';
|
|
document.getElementById('meme-file').value = '';
|
|
loadMemes();
|
|
} else {
|
|
alert('Server Error: ' + (data.message || data.msg || 'Unknown error'));
|
|
}
|
|
} catch (e) {
|
|
console.error('[MEME_ADMIN] Post Error:', e);
|
|
alert('Submission failed: ' + e.message);
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = oldText;
|
|
}
|
|
};
|
|
|
|
const deleteMeme = async (id) => {
|
|
if (!confirm('Delete this template?')) return;
|
|
try {
|
|
const res = await fetch('/api/v2/admin/memes/' + id + '/delete', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-Token': '{{ csrf_token }}' }
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
loadMemes();
|
|
} else {
|
|
alert('Delete failed');
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
};
|
|
|
|
// Global scope for onclick handlers
|
|
window.memeAdmin = { deleteMeme };
|
|
|
|
const btnAddMeme = document.getElementById('add-meme');
|
|
if (btnAddMeme) {
|
|
console.log('[MEME_ADMIN] Registering click listener');
|
|
btnAddMeme.addEventListener('click', addMeme);
|
|
} else {
|
|
console.error('[MEME_ADMIN] Add button not found!');
|
|
}
|
|
|
|
loadMemes();
|
|
})();
|
|
</script>
|
|
</div>
|
|
</div>
|
|
@include(snippets/footer)
|