initial commit
This commit is contained in:
341
frontend/js/admin.js
Normal file
341
frontend/js/admin.js
Normal file
@@ -0,0 +1,341 @@
|
||||
/* FluentGerman.ai — Admin panel logic */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (!requireAuth() || !requireAdmin()) return;
|
||||
|
||||
const user = getUser();
|
||||
document.getElementById('admin-name').textContent = user?.username || 'Admin';
|
||||
|
||||
// Tab switching
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
const panels = document.querySelectorAll('.tab-panel');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
panels.forEach(p => p.classList.add('hidden'));
|
||||
tab.classList.add('active');
|
||||
document.getElementById(tab.dataset.panel).classList.remove('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
// ── Users ──────────────────────────────────────────────────────
|
||||
const usersBody = document.getElementById('users-body');
|
||||
const userModal = document.getElementById('user-modal');
|
||||
const userForm = document.getElementById('user-form');
|
||||
let editingUserId = null;
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const users = await apiJSON('/users/');
|
||||
usersBody.innerHTML = '';
|
||||
|
||||
if (users.length === 0) {
|
||||
usersBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No clients yet</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
users.forEach(u => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${u.username}</td>
|
||||
<td class="hide-mobile">${u.email}</td>
|
||||
<td><span class="badge ${u.is_active ? 'badge-personal' : 'badge-homework'}">${u.is_active ? 'Active' : 'Inactive'}</span></td>
|
||||
<td class="hide-mobile">${new Date(u.created_at).toLocaleDateString()}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-secondary" onclick="editUser(${u.id})">Edit</button>
|
||||
<button class="btn btn-sm btn-secondary" onclick="manageInstructions(${u.id}, '${u.username}')">📝</button>
|
||||
<button class="btn btn-sm btn-danger" onclick="deleteUser(${u.id})">✕</button>
|
||||
</td>
|
||||
`;
|
||||
usersBody.appendChild(row);
|
||||
});
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
window.showUserModal = (editing = false) => {
|
||||
editingUserId = null;
|
||||
document.getElementById('user-modal-title').textContent = 'Add Client';
|
||||
userForm.reset();
|
||||
document.getElementById('user-password').required = true;
|
||||
userModal.classList.remove('hidden');
|
||||
};
|
||||
|
||||
window.closeUserModal = () => {
|
||||
userModal.classList.add('hidden');
|
||||
editingUserId = null;
|
||||
};
|
||||
|
||||
window.editUser = async (id) => {
|
||||
try {
|
||||
const users = await apiJSON('/users/');
|
||||
const u = users.find(x => x.id === id);
|
||||
if (!u) return;
|
||||
|
||||
editingUserId = id;
|
||||
document.getElementById('user-modal-title').textContent = 'Edit Client';
|
||||
document.getElementById('user-username').value = u.username;
|
||||
document.getElementById('user-email').value = u.email;
|
||||
document.getElementById('user-password').value = '';
|
||||
document.getElementById('user-password').required = false;
|
||||
userModal.classList.remove('hidden');
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
userForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const data = {
|
||||
username: document.getElementById('user-username').value.trim(),
|
||||
email: document.getElementById('user-email').value.trim(),
|
||||
};
|
||||
const password = document.getElementById('user-password').value;
|
||||
if (password) data.password = password;
|
||||
|
||||
try {
|
||||
if (editingUserId) {
|
||||
await apiJSON(`/users/${editingUserId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
showToast('Client updated');
|
||||
} else {
|
||||
data.password = password;
|
||||
await apiJSON('/users/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
showToast('Client created');
|
||||
}
|
||||
closeUserModal();
|
||||
loadUsers();
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
window.deleteUser = async (id) => {
|
||||
if (!confirm('Delete this client? This will also remove all their instructions.')) return;
|
||||
try {
|
||||
await api(`/users/${id}`, { method: 'DELETE' });
|
||||
showToast('Client deleted');
|
||||
loadUsers();
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// ── Instructions ───────────────────────────────────────────────
|
||||
const instructionsBody = document.getElementById('instructions-body');
|
||||
const instrModal = document.getElementById('instruction-modal');
|
||||
const instrForm = document.getElementById('instruction-form');
|
||||
const instrUserSelect = document.getElementById('instr-user');
|
||||
let editingInstrId = null;
|
||||
let currentFilterUserId = null;
|
||||
|
||||
async function loadInstructions(userId = null) {
|
||||
try {
|
||||
const url = userId ? `/instructions/?user_id=${userId}` : '/instructions/';
|
||||
const instructions = await apiJSON(url);
|
||||
instructionsBody.innerHTML = '';
|
||||
|
||||
if (instructions.length === 0) {
|
||||
instructionsBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No instructions yet</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
instructions.forEach(inst => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${inst.title}</td>
|
||||
<td><span class="badge badge-${inst.type}">${inst.type}</span></td>
|
||||
<td class="hide-mobile">${inst.user_id || 'Global'}</td>
|
||||
<td class="hide-mobile">${inst.content.substring(0, 60)}${inst.content.length > 60 ? '...' : ''}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-secondary" onclick="editInstruction(${inst.id})">Edit</button>
|
||||
<button class="btn btn-sm btn-danger" onclick="deleteInstruction(${inst.id})">✕</button>
|
||||
</td>
|
||||
`;
|
||||
instructionsBody.appendChild(row);
|
||||
});
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadUserOptions() {
|
||||
try {
|
||||
const users = await apiJSON('/users/');
|
||||
instrUserSelect.innerHTML = '<option value="">Global (all clients)</option>';
|
||||
users.forEach(u => {
|
||||
instrUserSelect.innerHTML += `<option value="${u.id}">${u.username}</option>`;
|
||||
});
|
||||
} catch (e) {
|
||||
// silently fail
|
||||
}
|
||||
}
|
||||
|
||||
window.manageInstructions = (userId, username) => {
|
||||
currentFilterUserId = userId;
|
||||
// Switch to instructions tab
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
panels.forEach(p => p.classList.add('hidden'));
|
||||
document.querySelector('[data-panel="instructions-panel"]').classList.add('active');
|
||||
document.getElementById('instructions-panel').classList.remove('hidden');
|
||||
loadInstructions(userId);
|
||||
};
|
||||
|
||||
window.showInstructionModal = () => {
|
||||
editingInstrId = null;
|
||||
document.getElementById('instr-modal-title').textContent = 'Add Instruction';
|
||||
instrForm.reset();
|
||||
loadUserOptions();
|
||||
instrModal.classList.remove('hidden');
|
||||
};
|
||||
|
||||
window.closeInstructionModal = () => {
|
||||
instrModal.classList.add('hidden');
|
||||
editingInstrId = null;
|
||||
};
|
||||
|
||||
window.editInstruction = async (id) => {
|
||||
try {
|
||||
const instructions = await apiJSON('/instructions/');
|
||||
const inst = instructions.find(x => x.id === id);
|
||||
if (!inst) return;
|
||||
|
||||
editingInstrId = id;
|
||||
await loadUserOptions();
|
||||
document.getElementById('instr-modal-title').textContent = 'Edit Instruction';
|
||||
document.getElementById('instr-title').value = inst.title;
|
||||
document.getElementById('instr-content').value = inst.content;
|
||||
document.getElementById('instr-type').value = inst.type;
|
||||
instrUserSelect.value = inst.user_id || '';
|
||||
instrModal.classList.remove('hidden');
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
instrForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const data = {
|
||||
title: document.getElementById('instr-title').value.trim(),
|
||||
content: document.getElementById('instr-content').value.trim(),
|
||||
type: document.getElementById('instr-type').value,
|
||||
user_id: instrUserSelect.value ? parseInt(instrUserSelect.value) : null,
|
||||
};
|
||||
|
||||
try {
|
||||
if (editingInstrId) {
|
||||
await apiJSON(`/instructions/${editingInstrId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
showToast('Instruction updated');
|
||||
} else {
|
||||
await apiJSON('/instructions/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
showToast('Instruction created');
|
||||
}
|
||||
closeInstructionModal();
|
||||
loadInstructions(currentFilterUserId);
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
window.deleteInstruction = async (id) => {
|
||||
if (!confirm('Delete this instruction?')) return;
|
||||
try {
|
||||
await api(`/instructions/${id}`, { method: 'DELETE' });
|
||||
showToast('Instruction deleted');
|
||||
loadInstructions(currentFilterUserId);
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
// ── File upload for instructions ────────────────────────────────
|
||||
window.uploadInstructionFile = () => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.txt,.md';
|
||||
input.onchange = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const text = await file.text();
|
||||
document.getElementById('instr-title').value = file.name.replace(/\.[^.]+$/, '');
|
||||
document.getElementById('instr-content').value = text;
|
||||
showInstructionModal();
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
// ── Voice instruction generation ───────────────────────────────
|
||||
const voiceGenBtn = document.getElementById('voice-gen-btn');
|
||||
const voiceGenOutput = document.getElementById('voice-gen-output');
|
||||
const voiceGenText = document.getElementById('voice-gen-text');
|
||||
const voice = new VoiceManager();
|
||||
|
||||
voice.init().then(() => {
|
||||
voice.onResult = (text) => {
|
||||
document.getElementById('voice-raw-text').value = text;
|
||||
};
|
||||
|
||||
voice.onStateChange = (recording) => {
|
||||
const btn = document.getElementById('voice-record-btn');
|
||||
btn.classList.toggle('recording', recording);
|
||||
btn.textContent = recording ? '⏹ Stop Recording' : '🎤 Start Recording';
|
||||
};
|
||||
});
|
||||
|
||||
window.toggleVoiceRecord = () => voice.toggleRecording();
|
||||
|
||||
window.generateInstruction = async () => {
|
||||
const rawText = document.getElementById('voice-raw-text').value.trim();
|
||||
if (!rawText) {
|
||||
showToast('Please record or type some text first', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
voiceGenBtn.disabled = true;
|
||||
voiceGenBtn.textContent = 'Generating...';
|
||||
|
||||
try {
|
||||
const result = await apiJSON('/voice/generate-instruction', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ raw_text: rawText }),
|
||||
});
|
||||
|
||||
voiceGenText.value = result.instruction;
|
||||
voiceGenOutput.classList.remove('hidden');
|
||||
} catch (e) {
|
||||
showToast(e.message, 'error');
|
||||
}
|
||||
|
||||
voiceGenBtn.disabled = false;
|
||||
voiceGenBtn.textContent = '✨ Generate Instruction';
|
||||
};
|
||||
|
||||
window.saveGeneratedInstruction = () => {
|
||||
const content = voiceGenText.value.trim();
|
||||
if (!content) return;
|
||||
|
||||
loadUserOptions();
|
||||
document.getElementById('instr-content').value = content;
|
||||
document.getElementById('instr-title').value = 'Voice Generated Instruction';
|
||||
showInstructionModal();
|
||||
};
|
||||
|
||||
// ── Init ───────────────────────────────────────────────────────
|
||||
loadUsers();
|
||||
loadInstructions();
|
||||
document.getElementById('logout-btn').addEventListener('click', logout);
|
||||
});
|
||||
Reference in New Issue
Block a user