updating meme manager to update memes
This commit is contained in:
@@ -34,6 +34,49 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Edit Meme Modal -->
|
||||
<div id="edit-meme-modal" class="modal-overlay" style="display: none;">
|
||||
<div class="modal-content" style="max-width: 500px; background: var(--dropdown-bg, #222); border: 1px solid var(--nav-border-color, #444); border-radius: 8px; padding: 20px;">
|
||||
<h3 style="margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid var(--nav-border-color, rgba(255,255,255,0.1)); padding-bottom: 10px; color: var(--white);">Edit Meme Template</h3>
|
||||
|
||||
<input type="hidden" id="edit-meme-id-db">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 12px; text-align: left;">
|
||||
<div>
|
||||
<label style="display: block; font-size: 0.85em; margin-bottom: 4px; color: rgba(255,255,255,0.7);">Template ID (lowercase a-z, 0-9, - only)</label>
|
||||
<input type="text" id="edit-meme-template-id" style="width: 100%; background: var(--bg, #111); border: 1px solid var(--black, #000); padding: 8px; color: var(--white); border-radius: 4px;">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style="display: block; font-size: 0.85em; margin-bottom: 4px; color: rgba(255,255,255,0.7);">Display Name</label>
|
||||
<input type="text" id="edit-meme-name" style="width: 100%; background: var(--bg, #111); border: 1px solid var(--black, #000); padding: 8px; color: var(--white); border-radius: 4px;">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style="display: block; font-size: 0.85em; margin-bottom: 4px; color: rgba(255,255,255,0.7);">Category</label>
|
||||
<input type="text" id="edit-meme-category" style="width: 100%; background: var(--bg, #111); border: 1px solid var(--black, #000); padding: 8px; color: var(--white); border-radius: 4px;">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style="display: block; font-size: 0.85em; margin-bottom: 4px; color: rgba(255,255,255,0.7);">Image URL</label>
|
||||
<input type="text" id="edit-meme-url" style="width: 100%; background: var(--bg, #111); border: 1px solid var(--black, #000); padding: 8px; color: var(--white); border-radius: 4px;">
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin: 4px 0; font-size: 0.8em; opacity: 0.5; color: var(--white);">- OR -</div>
|
||||
|
||||
<div>
|
||||
<label style="display: block; font-size: 0.85em; margin-bottom: 4px; color: rgba(255,255,255,0.7);">Upload New Image File</label>
|
||||
<input type="file" id="edit-meme-file" accept="image/*" style="width: 100%; background: var(--bg, #111); border: 1px solid var(--black, #000); padding: 8px; color: var(--white); border-radius: 4px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions" style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px;">
|
||||
<button onclick="window.memeAdmin.closeEditModal()" class="btn-cancel" style="padding: 8px 16px; background: rgba(255,255,255,0.1); color: var(--white); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; cursor: pointer;">Cancel</button>
|
||||
<button onclick="window.memeAdmin.saveMeme()" class="btn-save" style="padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -47,6 +90,7 @@
|
||||
const res = await fetch('/api/v2/memes');
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
window.memeAdmin.memes = data.memes;
|
||||
const tbody = document.getElementById('meme-list');
|
||||
if (!tbody) return;
|
||||
tbody.innerHTML = data.memes.map(m =>
|
||||
@@ -56,6 +100,7 @@
|
||||
'<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.openEditModal(' + m.id + ')" class="btn-edit" style="padding: 5px 15px; font-size: 0.8em; background: #28a745; color: white; border: none; cursor: pointer; border-radius: 2px; margin-right: 5px;">Edit</button>' +
|
||||
'<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>'
|
||||
@@ -141,8 +186,88 @@
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const openEditModal = (id) => {
|
||||
const meme = (window.memeAdmin.memes || []).find(m => m.id === id);
|
||||
if (!meme) return;
|
||||
|
||||
document.getElementById('edit-meme-id-db').value = meme.id;
|
||||
document.getElementById('edit-meme-template-id').value = meme.template_id;
|
||||
document.getElementById('edit-meme-name').value = meme.name;
|
||||
document.getElementById('edit-meme-category').value = meme.category || 'General';
|
||||
document.getElementById('edit-meme-url').value = meme.url;
|
||||
document.getElementById('edit-meme-file').value = '';
|
||||
|
||||
const modal = document.getElementById('edit-meme-modal');
|
||||
if (modal) modal.style.display = 'flex';
|
||||
};
|
||||
|
||||
const closeEditModal = () => {
|
||||
const modal = document.getElementById('edit-meme-modal');
|
||||
if (modal) modal.style.display = 'none';
|
||||
document.getElementById('edit-meme-file').value = '';
|
||||
};
|
||||
|
||||
const saveMeme = async () => {
|
||||
const id = document.getElementById('edit-meme-id-db').value;
|
||||
const template_id = document.getElementById('edit-meme-template-id').value.trim().toLowerCase();
|
||||
const name = document.getElementById('edit-meme-name').value.trim();
|
||||
const category = document.getElementById('edit-meme-category').value.trim() || 'General';
|
||||
const url = document.getElementById('edit-meme-url').value.trim();
|
||||
const fileInput = document.getElementById('edit-meme-file');
|
||||
|
||||
if (!template_id || !name) {
|
||||
return alert('Template ID and Display Name are required');
|
||||
}
|
||||
|
||||
if (!/^[a-z0-9-]+$/.test(template_id)) {
|
||||
return alert('Invalid ID. Use lowercase a-z, 0-9, - only.');
|
||||
}
|
||||
|
||||
const btn = document.querySelector('#edit-meme-modal .btn-save');
|
||||
const oldText = btn.textContent;
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Saving...';
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('template_id', template_id);
|
||||
formData.append('name', name);
|
||||
formData.append('category', category);
|
||||
formData.append('url', url);
|
||||
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/' + id + '/edit', {
|
||||
method: 'POST',
|
||||
headers: headers,
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
closeEditModal();
|
||||
loadMemes();
|
||||
} else {
|
||||
alert('Server Error: ' + (data.message || 'Unknown error'));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[MEME_ADMIN] Edit Error:', e);
|
||||
alert('Save failed: ' + e.message);
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = oldText;
|
||||
}
|
||||
};
|
||||
|
||||
// Global scope for onclick handlers
|
||||
window.memeAdmin = { deleteMeme };
|
||||
window.memeAdmin = { deleteMeme, openEditModal, closeEditModal, saveMeme, memes: [] };
|
||||
|
||||
const btnAddMeme = document.getElementById('add-meme');
|
||||
if (btnAddMeme) {
|
||||
|
||||
Reference in New Issue
Block a user