select.html

<!DOCTYPE html>
<html lang="fa" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Assignment</title>
<style>
:root[data-theme="dark"]{--bg:#0d1117;--panel:#161b22;--text:#e6edf3;--border:#30363d;--blue:#58a6ff;--yellow:#dbab09;--red:#ff7b72;--green:#3fb950;--muted:#8b949e;}
:root[data-theme="light"]{--bg:#f6f8fa;--panel:#ffffff;--text:#1f2328;--border:#d0d7de;--blue:#0969da;--yellow:#b08800;--red:#d73a49;--green:#28a745;--muted:#6a737d;}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Vazirmatn',Tahoma,sans-serif;}
body{background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s;}
.theme-fab{position:fixed;top:12px;right:12px;background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px 12px;cursor:pointer;font-size:16px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:24px;width:460px;display:flex;flex-direction:column;gap:14px;}
.head{display:flex;justify-content:space-between;align-items:center;}
h1{font-size:19px;}
.controls{display:flex;gap:6px;}
.icon-btn{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;}
.icon-btn.active{border-color:var(--blue);color:var(--blue);}
.list{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:6px;padding:8px;}
.item{padding:10px;border:1px solid var(--border);border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.item:hover{border-color:var(--blue);}
.item.last{border-color:var(--green);}
.item .sub{font-size:11px;color:var(--muted);}
.row{display:flex;gap:8px;}
input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px;border-radius:6px;font-family:inherit;}
button.primary{background:var(--blue);color:#fff;border:none;border-radius:6px;padding:10px 16px;cursor:pointer;font-weight:bold;font-family:inherit;}
.msg{padding:10px;border-radius:6px;display:none;font-size:13px;line-height:1.6;}
.msg.err{display:block;background:rgba(255,123,114,.12);color:var(--red);}
.msg.ok{display:block;background:rgba(63,185,80,.12);color:var(--green);}
.empty{color:var(--muted);text-align:center;padding:20px 0;}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:10;}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:20px;width:460px;display:flex;flex-direction:column;gap:14px;max-height:85vh;overflow-y:auto;}
.setup-row{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:6px;padding:10px;}
.editor{display:none;flex-direction:column;gap:8px;}
.editor textarea{width:100%;height:160px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px;border-radius:6px;font-family:monospace;font-size:12px;resize:vertical;}

* { -webkit-font-smoothing: antialiased; }
body {
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(88,166,255,.08), transparent 60%),
        var(--bg);
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

.card, .modal {
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    animation: pop .25s ease;
}
@keyframes pop { from { transform: scale(.97); opacity: .6; } to { transform: scale(1); opacity: 1; } }

.item { transition: .15s ease; }
.item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }

button.primary { background: linear-gradient(180deg, #4c9aff, var(--blue)); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
button.primary:hover { filter: brightness(1.1); }

.icon-btn, .theme-fab { transition: .15s ease; }
.icon-btn:hover, .theme-fab:hover { transform: translateY(-1px); }

input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(88,166,255,.25); outline: none; }


</style>
</head>
<body>
<button class="theme-fab" id="btnTheme" onclick="toggleTheme()">☀️</button>
<div class="card">
  <div class="head">
    <h1>📚 Assignments</h1>
    <div class="controls">
      <button class="icon-btn" id="sortName" onclick="setSortKey('name')">Name</button>
      <button class="icon-btn" id="sortCreated" onclick="setSortKey('created')">Created</button>
      <button class="icon-btn" id="sortModified" onclick="setSortKey('modified')">Modified</button>
      <button class="icon-btn" id="sortDir" onclick="toggleSortDir()">↑</button>
    </div>
  </div>
  <input id="search" placeholder="🔍 Search..." oninput="render()">
  <div class="list" id="list"></div>
  <div class="row">
    <input id="newName" placeholder="New assignment (e.g. HW1)" onkeydown="if(event.key==='Enter')createNew()">
    <button class="primary" onclick="createNew()">Create</button>
  </div>
  <div class="msg" id="msg"></div>
</div>

<div class="overlay" id="setupOverlay">
  <div class="modal">
    <div class="head">
      <h2 id="setupTitle">Setup</h2>
      <button class="icon-btn" onclick="closeSetup()">✕</button>
    </div>
    <div class="setup-row">
      <span>📋 Rubric (Question,Max Grade)</span>
      <div class="row">
        <button class="icon-btn" onclick="document.getElementById('rubricFile').click()">⬆️ Upload</button>
        <button class="icon-btn" onclick="editKind('rubric')">✏️ Edit</button>
      </div>
      <input type="file" id="rubricFile" accept=".csv" style="display:none" onchange="uploadKind('rubric', this)">
    </div>
    <div class="setup-row">
      <span>👥 Students (نام,نام خانوادگی,نام کاربری)</span>
      <div class="row">
        <button class="icon-btn" onclick="document.getElementById('studentsFile').click()">⬆️ Upload</button>
        <button class="icon-btn" onclick="editKind('students')">✏️ Edit</button>
      </div>
      <input type="file" id="studentsFile" accept=".csv" style="display:none" onchange="uploadKind('students', this)">
    </div>
    <div class="setup-row">
      <span>📄 PDFs (a zip or multiple PDFs)</span>
      <div class="row">
        <button class="icon-btn" onclick="document.getElementById('pdfFiles').click()">⬆️ Upload</button>
      </div>
      <input type="file" id="pdfFiles" accept=".zip,.pdf" multiple style="display:none" onchange="uploadPDFs(this)">
    </div>
    <div class="editor" id="editorBox">
      <div id="editorLabel" style="font-weight:bold;margin-bottom:6px;"></div>
      <textarea id="editorText"></textarea>
      <div class="row">
        <button class="primary" onclick="saveEditor()">Save</button>
        <button class="icon-btn" onclick="closeEditor()">Cancel</button>
      </div>
    </div>
  </div>
</div>

<script>
let assignments = [];
let sortKey = localStorage.getItem('grader-sort-key') || 'name';
let sortDir = localStorage.getItem('grader-sort-dir') || 'asc';
let lastSelected = localStorage.getItem('grader-last-assignment') || '';
let setupName = '';
let editorKind = '';

function applySavedTheme() {
    const saved = localStorage.getItem('grader-theme') || 'dark';
    document.documentElement.setAttribute('data-theme', saved);
    document.getElementById('btnTheme').innerText = saved === 'dark' ? '☀️' : '🌙';
}
function toggleTheme() {
    const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    localStorage.setItem('grader-theme', next);
    document.getElementById('btnTheme').innerText = next === 'dark' ? '☀️' : '🌙';
}

function naturalCompare(a, b) {
    const pa = a.split(/(\d+)/);
    const pb = b.split(/(\d+)/);
    const len = Math.min(pa.length, pb.length);
    for (let i = 0; i < len; i++) {
        let cmp;
        if (i % 2 === 1) {
            cmp = (parseInt(pa[i], 10) || 0) - (parseInt(pb[i], 10) || 0);
        } else {
            cmp = pa[i].localeCompare(pb[i]);
        }
        if (cmp !== 0) return cmp;
    }
    return pa.length - pb.length;
}

function updateSortUI() {
    document.getElementById('sortName').classList.toggle('active', sortKey === 'name');
    document.getElementById('sortCreated').classList.toggle('active', sortKey === 'created');
    document.getElementById('sortModified').classList.toggle('active', sortKey === 'modified');
    document.getElementById('sortDir').innerText = sortDir === 'asc' ? '↑' : '↓';
}
function setSortKey(k) { sortKey = k; localStorage.setItem('grader-sort-key', k); updateSortUI(); render(); }
function toggleSortDir() { sortDir = sortDir === 'asc' ? 'desc' : 'asc'; localStorage.setItem('grader-sort-dir', sortDir); updateSortUI(); render(); }

function sortAssignments(arr) {
    const copy = [...arr];
    copy.sort((a, b) => {
        let cmp;
        if (sortKey === 'name') cmp = naturalCompare(a.name, b.name);
        else if (sortKey === 'created') cmp = (a.created_at || '').localeCompare(b.created_at || '');
        else cmp = (a.modified_at || a.created_at || '').localeCompare(b.modified_at || b.created_at || '');
        return sortDir === 'asc' ? cmp : -cmp;
    });
    return copy;
}

function log(msg, type) {
    const m = document.getElementById('msg');
    m.className = 'msg ' + type;
    m.innerText = msg;
}

async function load() {
    const res = await fetch('/api/assignments');
    const data = await res.json();
    assignments = data.assignments || [];
    render();
}

function render() {
    const list = document.getElementById('list');
    const q = (document.getElementById('search').value || '').toLowerCase();
    const filtered = assignments.filter(a => a.name.toLowerCase().includes(q));
    list.innerHTML = '';
    if (filtered.length === 0) {
        list.innerHTML = '<div class="empty">' + (assignments.length === 0 ? 'No assignments yet. Create one below.' : 'No match found.') + '</div>';
        return;
    }
    sortAssignments(filtered).forEach(a => {
        const d = document.createElement('div');
        d.className = 'item' + (a.name === lastSelected ? ' last' : '');
        const star = a.name === lastSelected ? ' ⭐' : '';
        const c = a.created_at ? new Date(a.created_at).toLocaleDateString() : '';
        const m = (a.modified_at || a.created_at) ? new Date(a.modified_at || a.created_at).toLocaleDateString() : '';

        const left = document.createElement('div');
        left.innerHTML = '<div>' + a.name + star + '</div><div class="sub">🎂 ' + c + ' · ✏️ ' + m + '</div>';

        const right = document.createElement('div');
        right.style.cssText = 'display:flex;gap:6px;align-items:center;';

        const ren = document.createElement('button');
        ren.className = 'icon-btn'; ren.innerText = '✏️'; ren.title = 'Rename';
        ren.onclick = (e) => { e.stopPropagation(); renameAssignment(a.name); };

        const del = document.createElement('button');
        del.className = 'icon-btn'; del.innerText = '🗑️'; del.title = 'Delete';
        del.onclick = (e) => { e.stopPropagation(); deleteAssignment(a.name); };

        const gear = document.createElement('button');
        gear.className = 'icon-btn'; gear.innerText = '⚙️';
        gear.onclick = (e) => { e.stopPropagation(); openSetup(a.name); };

        const arrow = document.createElement('span');
        arrow.innerText = '→';

        right.appendChild(ren);
        right.appendChild(del);
        right.appendChild(gear);
        right.appendChild(arrow);

        d.appendChild(left);
        d.appendChild(right);
        d.onclick = () => select(a.name);
        list.appendChild(d);
    });
}

async function select(name) {
    const res = await fetch('/api/select', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }) });
    const data = await res.json();
    if (data.status === 'needs_setup') {
        log('Files missing for "' + name + '". Use ⚙️ to upload/edit rubric & students, then select again.', 'err');
    } else {
        localStorage.setItem('grader-last-assignment', name);
        lastSelected = name;
        location.href = '/';
    }
}

async function createNew() {
    const name = document.getElementById('newName').value.trim();
    if (!name) { log('Please enter a name first.', 'err'); return; }
    const res = await fetch('/api/assignments', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }) });
    if (res.status === 409) { log('⚠️ "' + name + '" already exists. Pick a different name.', 'err'); return; }
    document.getElementById('newName').value = '';
    log('✅ "' + name + '" created. Select it to start grading.', 'ok');
    load();
}

function openSetup(name) {
    setupName = name;
    document.getElementById('setupTitle').innerText = 'Setup: ' + name;
    document.getElementById('setupOverlay').style.display = 'flex';
    closeEditor();
}
function closeSetup() { document.getElementById('setupOverlay').style.display = 'none'; }
function closeEditor() { document.getElementById('editorBox').style.display = 'none'; }

function uploadKind(kind, input) {
    const file = input.files[0];
    if (!file) return;
    const fd = new FormData();
    fd.append('file', file);
    fetch(`/api/assignment/${setupName}/files/${kind}`, { method: 'POST', body: fd })
        .then(() => { log('✅ ' + kind + '.csv uploaded for "' + setupName + '".', 'ok'); input.value = ''; });
}

async function editKind(kind) {
    editorKind = kind;
    const res = await fetch(`/api/assignment/${setupName}/files/${kind}`);
    const data = await res.json();
    document.getElementById('editorLabel').innerText = kind + '.csv';
    document.getElementById('editorText').value = data.content || '';
    document.getElementById('editorBox').style.display = 'flex';
}

async function saveEditor() {
    const content = document.getElementById('editorText').value;
    await fetch(`/api/assignment/${setupName}/files/${editorKind}/text`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content })
    });
    log('✅ ' + editorKind + '.csv saved for "' + setupName + '".', 'ok');
    closeEditor();
}

function uploadPDFs(input) {
    if (!input.files.length) return;
    const fd = new FormData();
    for (const f of input.files) fd.append('files', f);
    fetch(`/api/assignment/${setupName}/pdfs`, { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => { log('✅ ' + (d.added || 0) + ' PDF(s) added to "' + setupName + '".', 'ok'); input.value = ''; });
}

async function renameAssignment(name) {
    const newName = prompt('Rename "' + name + '" to:', name);
    if (!newName || newName.trim() === '' || newName.trim() === name) return;
    const res = await fetch(`/api/assignment/${encodeURIComponent(name)}/rename`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newName.trim() })
    });
    if (res.status === 409) { log('⚠️ "' + newName.trim() + '" already exists.', 'err'); return; }
    log('✅ Renamed to "' + newName.trim() + '".', 'ok');
    load();
}

async function deleteAssignment(name) {
    if (!confirm('Delete "' + name + '" and ALL its files (PDFs, Data, output)? This cannot be undone.')) return;
    await fetch(`/api/assignment/${encodeURIComponent(name)}/delete`, { method: 'POST' });
    if (lastSelected === name) { localStorage.removeItem('grader-last-assignment'); lastSelected = ''; }
    log('🗑️ "' + name + '" deleted.', 'ok');
    load();
}

applySavedTheme();
updateSortUI();
load();
</script>
</body>
</html>