rollcall-classroom-assets 0.0.0-stage → 1.0.0

package/c-app.js

@@ -0,0 +1,321 @@
+/* 教室页 c.19860103.xyz —— 只为老旧教室电脑
+ *
+ * 需求（用户原话）：「教室端上课打开的时候不需要扫码，不需要 excel，甚至不需要拼音，只需两项：
+ *   点名页完成当堂点名、作业批改的汇总页当堂完善现场交作业的同学，还有跟踪页。」
+ *
+ * 所以这里**刻意什么都不引**：无 pinyin-pro、无 xlsx、无 zxing/wasm、不加载 dm-app.js(92KB) 与
+ * zuoye-app.js(544KB)。整站只有本文件 + c.html。目标：首访线上不到 15KB（3KB/s 的链路上也就几秒）。
+ *
+ * 三个页签：
+ *   📋 点名  —— 到/缺/假 + 课堂回答（答对/答错各记一条），走 /api/absent 与 /api/record-qa-batch
+ *   ✅ 收缴  —— 逐个点「已交/未交」，走 /api/submit（PUT 覆盖式，与课代表那套同一条数据）
+ *   📉 跟踪  —— 未交跟踪，走 /api/track
+ * 离线：同一套「先落本机、联网补传」的队列（absent / qa / submit 三种操作）。
+ */
+(function () {
+	'use strict';
+	var $ = function (id) { return document.getElementById(id); };
+	var NL = String.fromCharCode(10);
+
+	// ---------- 小工具 ----------
+	function lsGet(k, d) { try { var v = JSON.parse(localStorage.getItem(k) || ''); return v === null || v === undefined ? d : v; } catch (e) { return d; } }
+	function lsSet(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch (e) { } }
+	function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]; }); }
+	function today() { var d = new Date(Date.now() + 8 * 3600e3); return d.toISOString().slice(0, 10); }
+	var toastT = 0;
+	function showLogin(msg) { $('login').style.display = 'block'; if (msg) $('le').textContent = msg; }
+	function toast(m) { var t = $('toast'); t.textContent = m; t.classList.add('on'); clearTimeout(toastT); toastT = setTimeout(function () { t.classList.remove('on'); }, 2200); }
+
+	// ---------- 状态 ----------
+	var S = {
+		user: null, classes: [], cls: '', date: today(), tab: 'roll',
+		roster: [], absent: {},             // 姓名 -> 'n'(缺) | 'l'(假)；不在表里=到
+		subjects: [], subject: '', marks: {}, // 收缴：姓名 -> 'y'|'n'
+		qa: {}                              // 姓名 -> {ok:0, no:0}（本页累计，用于显示）
+	};
+
+	// ---------- 离线补传队列（三种操作共用一条） ----------
+	var OB = 'c_outbox';
+	function obLoad() { var a = lsGet(OB, []); return a && a.length !== undefined ? a : []; }
+	function obSave(a) { try { a.length ? localStorage.setItem(OB, JSON.stringify(a)) : localStorage.removeItem(OB); } catch (e) { } paintStatus(); }
+	function obKey(it) { return it.kind === 'qa' ? ('qa' + (it.body[0] ? it.body[0].class + it.body[0].name + it.body[0].result : '')) : (it.kind + '|' + it.cls + '|' + it.date + '|' + (it.subj || '')); }
+	function obPush(kind, cls, date, body, subj) {
+		var a = obLoad();
+		if (kind !== 'qa') {                     // absent / submit 都是「整表覆盖」→ 同目标旧条目作废                                  // absent / submit 都是「整表覆盖」→ 同目标旧条目作废
+			for (var i = a.length - 1; i >= 0; i--) if (obKey(a[i]) === obKey({ kind: kind, cls: cls, date: date, subj: subj })) a.splice(i, 1);
+		}
+		if (kind === 'qa') { for (var j = 0; j < body.length; j++) a.push({ kind: 'qa', cls: cls, date: date, body: [body[j]], tries: 0 }); }
+		else a.push({ kind: kind, cls: cls, date: date, subj: subj || '', body: body, tries: 0 });
+		while (a.length > 400) a.shift();
+		obSave(a);
+		toast('📴 网络不通，已存本机，联网后自动补传（待传 ' + a.length + ' 条）');
+	}
+	var obBusy = false;
+	function obFlush() {
+		if (obBusy) return Promise.resolve();
+		var a = obLoad(); if (!a.length) return Promise.resolve();
+		obBusy = true;
+		return (function next() {
+			var cur = obLoad(); if (!cur.length) { obBusy = false; paintStatus(); return; }
+			var it = cur[0];
+			var url = it.kind === 'absent' ? '/api/absent' : (it.kind === 'qa' ? '/api/record-qa-batch' : '/api/submit');
+			var method = it.kind === 'submit' ? 'PUT' : 'POST';
+			return fetch(url, { method: method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(it.body) })
+				.then(function (r) { return r.json().catch(function () { return {}; }); })
+				.then(function (d) {
+					if (d && d.ok) { var b = obLoad(); b.shift(); obSave(b); if (it.kind === 'submit') S.saved = true; return next(); }
+					it.tries = (it.tries || 0) + 1;
+					if (it.tries >= 8 || (d && d.error === 'forbidden')) {   // 硬拒/试太多次 → 丢弃并说明，不无限重试
+						var b2 = obLoad(); b2.shift(); obSave(b2);
+						toast('⚠ 一条补传被服务器拒绝已丢弃：' + (it.kind === 'qa' ? '答题记录' : it.kind + ' ' + it.cls));
+						return next();
+					}
+					var b3 = obLoad(); b3[0] = it; obSave(b3);
+					obBusy = false; paintStatus();
+				})
+				.catch(function () { obBusy = false; paintStatus(); });      // 网络不通 → 停下等下次
+		})();
+	}
+	window.addEventListener('online', function () { $('off').style.display = 'none'; obFlush(); });
+
+	// ---------- 状态栏 ----------
+	function paintStatus() {
+		var n = obLoad().length;
+		$('status').textContent = n ? ('📴 待补传 ' + n + ' 条') : '';
+		$('off').style.display = (navigator.onLine === false) ? 'block' : 'none';
+	}
+
+	// ---------- 通用取数（带本机兜底快照） ----------
+	function snap(k, v) { if (v !== undefined) lsSet('c_snap_' + k, { v: v, t: Date.now() }); return (lsGet('c_snap_' + k, null) || {}).v; }
+	function getJSON(url, snapKey) {
+		return fetch(url, { credentials: 'same-origin' }).then(function (r) { return r.json(); })
+			.then(function (d) { if (d && d.ok && snapKey) snap(snapKey, d); return d; })
+			.catch(function () { var v = snapKey ? snap(snapKey) : null; return v ? Object.assign({ __offline: true }, v) : null; });
+	}
+
+	// ================= 点名 =================
+	function paintRoll() {
+		var h = '';
+		S.roster.forEach(function (nm) {
+			var st = S.absent[nm] || '';
+			var q = S.qa[nm] || { ok: 0, no: 0 };
+			h += '<div class="row' + (st ? ' miss' : '') + '" data-nm="' + esc(nm) + '">' +
+				'<span class="nm">' + esc(nm) + '</span>' +
+				(q.ok || q.no ? '<span class="cnt">✔' + q.ok + ' ✘' + q.no + '</span>' : '') +
+				'<button class="btn sm' + (st === '' ? ' y' : '') + '" data-a="here">到</button>' +
+				'<button class="btn sm' + (st === 'n' ? ' n' : '') + '" data-a="miss">缺</button>' +
+				'<button class="btn sm' + (st === 'l' ? ' a' : '') + '" data-a="leave">假</button>' +
+				'<button class="btn sm" data-a="ok">✔答对</button>' +
+				'<button class="btn sm" data-a="no">✘答错</button>' +
+				'</div>';
+		});
+		$('rollList').innerHTML = h || '<div class="hint">这个班还没有名单。</div>';
+		var un = S.roster.filter(function (n) { return !S.absent[n]; }).length;
+		$('footNote').textContent = S.roster.length ? ('共 ' + S.roster.length + ' 人 · 缺/假 ' + (S.roster.length - un) + ' 人') : '';
+	}
+	function saveAbsent() {
+		if (!S.cls) return;
+		var names = Object.keys(S.absent);
+		var body = { cls: S.cls, date: S.date, names: names };
+		fetch('/api/absent', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+			.then(function (r) { return r.json().catch(function () { return {}; }); })
+			.then(function (d) {
+				if (d && d.ok) { toast('✅ 点名已保存（缺/假 ' + names.length + ' 人）'); return; }
+				if (d && d.error === 'forbidden') { toast('这个账号没有「缺勤报备」权限（只有老师/班主任/管理员可报）'); return; }
+				obPush('absent', S.cls, S.date, body, '');
+			})
+			.catch(function () { obPush('absent', S.cls, S.date, body, ''); });
+	}
+	function pushQA(nm, result) {
+		S.qa[nm] = S.qa[nm] || { ok: 0, no: 0 };
+		if (result === 'correct') S.qa[nm].ok++; else S.qa[nm].no++;
+		paintRoll();
+		var row = { class: S.cls, name: nm, result: result, time: new Date().toISOString() };
+		fetch('/api/record-qa-batch', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify([row]) })
+			.then(function (r) { return r.json().catch(function () { return {}; }); })
+			.then(function (d) { if (!d || !d.ok) obPush('qa', S.cls, S.date, [row], ''); })
+			.catch(function () { obPush('qa', S.cls, S.date, [row], ''); });
+	}
+
+	// ================= 收缴 =================
+	function paintRep() {
+		var h = '';
+		S.roster.forEach(function (nm) {
+			var mk = S.marks[nm] || '';
+			h += '<div class="row" data-mark="' + mk + '" data-nm="' + esc(nm) + '">' +
+				'<span class="nm">' + esc(nm) + '</span>' +
+				'<button class="btn sm' + (mk === 'y' ? ' y' : '') + '" data-m="y">已交</button>' +
+				'<button class="btn sm' + (mk === 'n' ? ' n' : '') + '" data-m="n">未交</button>' +
+				'</div>';
+		});
+		$('repList').innerHTML = h || '<div class="hint">这个班还没有名单。</div>';
+		var cy = 0, cn = 0;
+		Object.keys(S.marks).forEach(function (k) { if (S.marks[k] === 'y') cy++; else if (S.marks[k] === 'n') cn++; });
+		$('footNote').textContent = S.roster.length ? ('已交 ' + cy + ' · 未交 ' + cn + ' · 未标记 ' + (S.roster.length - cy - cn)) : '';
+	}
+	var repTimer = 0;
+	function saveRep(quiet) {
+		if (!S.cls || !S.subject) { if (!quiet) toast('请先选科目'); return; }
+		var body = { cls: S.cls, date: S.date, subject: S.subject, marks: S.marks, notes: {}, noPush: true };
+		fetch('/api/submit', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+			.then(function (r) { return r.json().catch(function () { return {}; }); })
+			.then(function (d) {
+				if (d && d.ok) { if (!quiet) toast('✅ 已保存「' + S.subject + '」'); return; }
+				if (d && d.error === 'forbidden') { toast('没有登记该班的权限'); return; }
+				obPush('submit', S.cls, S.date, body, S.subject);
+			})
+			.catch(function () { obPush('submit', S.cls, S.date, body, S.subject); });
+	}
+	function repTouch() { paintRep(); clearTimeout(repTimer); repTimer = setTimeout(function () { saveRep(true); }, 1200); }
+
+	// ================= 跟踪 =================
+	function paintTrack(d) {
+		if (!d || !d.ok) { $('trackBox').innerHTML = '<div class="hint">读取失败' + (d && d.error === 'forbidden' ? '：没有该班权限' : '（网络？）') + '</div>'; return; }
+		var rows = (d.rows || []).slice().sort(function (a, b) { return (b.miss + b.bad) - (a.miss + a.bad) || a.name.localeCompare(b.name); });
+		var h = '<table><thead><tr><th>姓名</th><th>未交</th><th>不合格</th><th>提问不合格</th><th>最近</th></tr></thead><tbody>';
+		rows.forEach(function (r) {
+			var bad = (r.miss + r.bad) > 0 ? ((r.miss + r.bad) >= 3 ? 'bad0' : 'bad1') : '';
+			h += '<tr class="' + bad + '"><td>' + esc(r.name) + '</td><td class="n">' + r.miss + '</td><td class="n">' + r.bad + '</td><td class="n">' + r.qa + '</td><td>' + esc(r.last || '') + '</td></tr>';
+		});
+		h += '</tbody></table>';
+		$('trackBox').innerHTML = h;
+		$('trackNote').textContent = (d.from && d.to) ? (d.from + ' ~ ' + d.to + ' · 名单 ' + d.roster + ' 人' + (d.scoped ? '（只看' + d.scoped + '）' : '')) : '';
+	}
+	function loadTrack() {
+		if (!S.cls) return;
+		var days = $('days').value;
+		$('trackNote').textContent = '读取中…';
+		getJSON('/api/track?cls=' + encodeURIComponent(S.cls) + '&days=' + days, 'track_' + S.cls + '_' + days).then(paintTrack);
+	}
+
+	// ================= 载入与切换 =================
+	function loadRoll() {
+		if (!S.cls) return;
+		$('rollList').innerHTML = '<div class="hint">读取中…</div>';
+		Promise.all([
+			getJSON('/api/roster?cls=' + encodeURIComponent(S.cls), 'roster_' + S.cls),
+			getJSON('/api/absent?cls=' + encodeURIComponent(S.cls) + '&date=' + S.date, 'absent_' + S.cls + '_' + S.date)
+		]).then(function (rs) {
+			var rn = rs[0] && rs[0].ok ? (rs[0].names || []) : [];
+			S.roster = rn.length ? rn : (snap('roster_' + S.cls) || []);
+			var ab = (rs[1] && rs[1].ok) ? (rs[1].names || []) : (snap('absent_' + S.cls + '_' + S.date) || []);
+			S.absent = {};
+			ab.forEach(function (n) { S.absent[n] = 'n'; });
+			paintRoll();
+			if (rs[1] && rs[1].__offline) toast('📴 离线：用本机缓存的点名结果');
+		});
+	}
+	function loadRep() {
+		if (!S.cls) return;
+		$('repList').innerHTML = '<div class="hint">读取中…</div>';
+		getJSON('/api/submit?cls=' + encodeURIComponent(S.cls) + '&date=' + S.date, 'submit_' + S.cls + '_' + S.date).then(function (d) {
+			var roster = (d && d.ok && d.roster) ? d.roster : (snap('roster_' + S.cls) || S.roster);
+			S.roster = roster.length ? roster : S.roster;
+			var subs = (d && d.ok && d.subjects) ? d.subjects : [];
+			// 科目默认值优先级：本机上次用的 → 自己的任教科目 → 服务端候选 → 兜底。
+			//   ⚠️ 断网首次进来时拿不到候选，绝不能凭空造一个科目名写进服务器（会落到别的科目键上）。
+			if (!S.subject) S.subject = lsGet('c_subj', '') || (S.user && S.user.subject) || subs[0] || '作业';
+			S.subjects = subs.length ? subs : [S.subject];
+			var sel = $('subj');
+			var all = S.subjects.indexOf(S.subject) < 0 ? [S.subject].concat(S.subjects) : S.subjects;
+			sel.innerHTML = all.map(function (s) { return '<option' + (s === S.subject ? ' selected' : '') + '>' + esc(s) + '</option>'; }).join('');
+			var it = (d && d.ok && d.items || []).filter(function (x) { return x.subject === S.subject; })[0];
+			S.marks = (it && it.marks) ? Object.assign({}, it.marks) : {};
+			paintRep();
+			if (d && d.__offline) toast('📴 离线：用本机缓存的登记结果');
+		});
+	}
+	function showTab(t) {
+		S.tab = t;
+		Array.prototype.forEach.call(document.querySelectorAll('#tabs button'), function (b) { b.classList.toggle('on', b.dataset.t === t); });
+		['roll', 'rep', 'track'].forEach(function (k) { $('pane-' + k).classList.toggle('on', k === t); });
+		$('foot').style.display = t === 'track' ? 'none' : 'flex';
+		$('allHere').textContent = t === 'rep' ? '全班已交' : '全部到齐';
+		if (t === 'roll') loadRoll(); else if (t === 'rep') loadRep(); else loadTrack();
+	}
+
+	// ---------- 事件 ----------
+	$('cls').addEventListener('change', function () { S.cls = this.value; lsSet('c_cls', S.cls); S.subject = ''; S.absent = {}; S.marks = {}; showTab(S.tab); });
+	$('date').addEventListener('change', function () { S.date = this.value || today(); lsSet('c_date', S.date); showTab(S.tab); });
+	$('subj').addEventListener('change', function () {
+		S.subject = this.value;
+		lsSet('c_subj', S.subject);
+		getJSON('/api/submit?cls=' + encodeURIComponent(S.cls) + '&date=' + S.date, 'submit_' + S.cls + '_' + S.date).then(function (d) {
+			var it = (d && d.ok && d.items || []).filter(function (x) { return x.subject === S.subject; })[0];
+			S.marks = (it && it.marks) ? Object.assign({}, it.marks) : {};
+			paintRep();
+		});
+	});
+	Array.prototype.forEach.call(document.querySelectorAll('#tabs button'), function (b) { b.addEventListener('click', function () { showTab(b.dataset.t); }); });
+	$('rollList').addEventListener('click', function (e) {
+		var btn = e.target.closest('button'); if (!btn) return;
+		var nm = btn.closest('.row').dataset.nm, a = btn.dataset.a;
+		if (a === 'ok') return pushQA(nm, 'correct');
+		if (a === 'no') return pushQA(nm, 'incorrect');
+		if (a === 'here') delete S.absent[nm]; else if (a === 'miss') S.absent[nm] = 'n'; else S.absent[nm] = 'l';
+		paintRoll();
+	});
+	$('repList').addEventListener('click', function (e) {
+		var btn = e.target.closest('button'); if (!btn) return;
+		var nm = btn.closest('.row').dataset.nm, m = btn.dataset.m, cur = S.marks[nm] || '';
+		if (cur === m) delete S.marks[nm]; else S.marks[nm] = m;      // 再点一次 = 取消
+		repTouch();
+	});
+	$('allHere').addEventListener('click', function () {
+		if (S.tab === 'rep') { S.roster.forEach(function (n) { S.marks[n] = 'y'; }); repTouch(); return; }
+		S.absent = {}; paintRoll();
+	});
+	$('repAllY').addEventListener('click', function () { S.roster.forEach(function (n) { S.marks[n] = 'y'; }); repTouch(); });
+	$('repAllN').addEventListener('click', function () { S.roster.forEach(function (n) { S.marks[n] = 'n'; }); repTouch(); });
+	$('repClear').addEventListener('click', function () { S.marks = {}; repTouch(); });
+	$('save').addEventListener('click', function () { if (S.tab === 'track') return loadTrack(); if (S.tab === 'rep') { clearTimeout(repTimer); saveRep(false); } else saveAbsent(); });
+	$('trackGo').addEventListener('click', loadTrack);
+
+	// ---------- 启动 ----------
+	$('lb').addEventListener('click', function () {
+		var u = $('lu').value.trim(), p = $('lp').value;
+		if (!u || !p) { $('le').textContent = '请输入用户名和密码'; return; }
+		$('lb').disabled = true; $('lb').textContent = '登录中…'; $('le').textContent = '';
+		fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: u, password: p }) })
+			.then(function (r) { return r.json(); })
+			.then(function (d) { if (d && d.ok) { location.reload(); return; } $('le').textContent = (d && d.error) || '登录失败'; $('lb').disabled = false; $('lb').textContent = '登 录'; })
+			.catch(function () { $('le').textContent = '网络错误，请重试'; $('lb').disabled = false; $('lb').textContent = '登 录'; });
+	});
+	function boot() {
+		if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(function () { });
+		$('date').value = S.date = lsGet('c_date', today()) || today();
+		if (navigator.onLine === false) $('off').style.display = 'block';
+		paintStatus();
+		fetch('/api/me', { credentials: 'same-origin' }).then(function (r) { return r.json(); }).then(function (me) {
+			if (!me || !me.ok || !me.username) { showLogin(''); return; }   // 未登录 → 本页自己登录（c 域独立签票）
+			S.user = me;
+			// 记住账号与班级：断网开机时用它把页面起起来（首次仍必须联网登录一次）
+			lsSet('c_me', { ok: true, username: me.username, role: me.role, classes: (me.classes || []).slice(), headClass: me.headClass || '', repClass: me.repClass || '', subject: me.subject || '' });
+			try { if (navigator.serviceWorker && navigator.serviceWorker.controller) navigator.serviceWorker.controller.postMessage({ type: 'who', user: me.username }); } catch (e) { }
+			var cls = (me.classes || []).slice();
+			if (me.headClass) cls.push(me.headClass);
+			if (me.repClass) cls.push(me.repClass);
+			S.classes = cls.filter(function (v, i) { return v && cls.indexOf(v) === i; });
+			if (me.role === 'admin') S.classes = ['35', '36', '37', '38'];
+			$('cls').innerHTML = S.classes.map(function (c) { return '<option>' + esc(c) + '</option>'; }).join('');
+			S.cls = lsGet('c_cls', '') || S.classes[0] || '';
+			if (S.classes.indexOf(S.cls) < 0) S.cls = S.classes[0] || '';
+			$('cls').value = S.cls;
+			if (!S.classes.length) { $('rollList').innerHTML = '<div class="hint">这个账号还没有班级。</div>'; return; }
+			showTab('roll');
+			obFlush();
+		}).catch(function () {
+			var cached = lsGet('c_me', null);
+			if (cached && cached.classes) {
+				$('off').style.display = 'block';
+				S.user = cached; S.classes = cached.classes;
+				$('cls').innerHTML = S.classes.map(function (c) { return '<option>' + esc(c) + '</option>'; }).join('');
+				S.cls = lsGet('c_cls', '') || S.classes[0]; $('cls').value = S.cls;
+				showTab('roll'); obFlush();
+			} else {
+				$('rollList').innerHTML = '<div class="hint">📵 无法连接服务器，且本机没有缓存账号（首次使用需联网登录一次）</div>';
+			}
+		});
+	}
+	boot();
+})();