feat(lessons): «Мои материалы» — ученик сохраняет материалы урока к себе

Ученик на странице «Мои уроки» может сохранить к себе страницу доски (PNG) и свою заметку из прошлой онлайн-сессии. Копия хранится у ученика и переживает удаление сессии учителем. - Миграция 060: student_materials (kind board/note/link/image, denormalized source_title, source_session_id ON DELETE SET NULL). - API /api/materials (GET/POST/DELETE, авторизация + проверка владельца) + helpers в js/api.js. - my-lessons.html: кнопки «К себе» на доске и заметке (Whiteboard.exportBlob → /api/files → saveMaterial). - Новая страница /my-materials (просмотр/открыть/скачать/удалить) + пункт сайдбара (ученик). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-04 11:33:01 +03:00
parent 6be8a505eb
commit 44ab5e045e
9 changed files with 305 additions and 1 deletions
@@ -0,0 +1,57 @@
+'use strict';
+/* Student-owned personal materials ("Мои материалы").
+ * A user keeps copies of items saved from live lessons; the copies are
+ * independent of the session lifecycle. */
+const db = require('../db/db');
+
+const KINDS = ['board', 'note', 'link', 'image'];
+
+/* GET /api/materials — list the current user's saved materials */
+function list(req, res) {
+  const rows = db.prepare(`
+    SELECT id, kind, title, body, url, source_session_id, source_title, created_at
+      FROM student_materials
+     WHERE user_id = ?
+     ORDER BY created_at DESC, id DESC
+  `).all(req.user.id);
+  res.json({ materials: rows });
+}
+
+/* POST /api/materials — save a new item to the current user's collection.
+   Body: { kind, title?, body?, url?, sourceSessionId?, sourceTitle? } */
+function create(req, res) {
+  const b = req.body || {};
+  const kind = String(b.kind || '');
+  if (!KINDS.includes(kind)) return res.status(400).json({ error: 'invalid kind' });
+
+  const title = String(b.title || '').slice(0, 300);
+  const body  = b.body != null ? String(b.body).slice(0, 60000) : null;
+  const url   = b.url != null ? String(b.url).slice(0, 2000) : null;
+  if ((kind === 'note') && !body) return res.status(400).json({ error: 'body required for note' });
+  if ((kind === 'board' || kind === 'image' || kind === 'link') && !url)
+    return res.status(400).json({ error: 'url required' });
+
+  // Soft reference to the source session (kept readable via source_title even
+  // after the session is deleted). Only store the id if the session exists.
+  let sourceSessionId = Number(b.sourceSessionId);
+  if (!Number.isFinite(sourceSessionId)) sourceSessionId = null;
+  else if (!db.prepare('SELECT 1 FROM classroom_sessions WHERE id = ?').get(sourceSessionId)) sourceSessionId = null;
+  const sourceTitle = b.sourceTitle != null ? String(b.sourceTitle).slice(0, 300) : null;
+
+  const r = db.prepare(`
+    INSERT INTO student_materials (user_id, kind, title, body, url, source_session_id, source_title)
+    VALUES (?, ?, ?, ?, ?, ?, ?)
+  `).run(req.user.id, kind, title, body, url, sourceSessionId, sourceTitle);
+  res.status(201).json({ id: Number(r.lastInsertRowid) });
+}
+
+/* DELETE /api/materials/:id — remove one of the current user's items */
+function remove(req, res) {
+  const row = db.prepare('SELECT user_id FROM student_materials WHERE id = ?').get(req.params.id);
+  if (!row) return res.status(404).json({ error: 'not found' });
+  if (row.user_id !== req.user.id) return res.status(403).json({ error: 'forbidden' });
+  db.prepare('DELETE FROM student_materials WHERE id = ?').run(req.params.id);
+  res.json({ ok: true });
+}
+
+module.exports = { list, create, remove };
@@ -0,0 +1,23 @@
+-- ═══════════════════════════════════════════════════════════════
+-- 060: Student-owned personal materials ("Мои материалы")
+--
+-- A student can save items from a live lesson (a board page image, their
+-- note, a chat attachment/link) into their OWN collection. The copy is
+-- independent of the session: it survives even if the teacher later deletes
+-- the session history. source_session_id is a soft reference (SET NULL on
+-- delete); source_title is denormalized so it stays readable afterwards.
+-- ═══════════════════════════════════════════════════════════════
+
+CREATE TABLE student_materials (
+  id                INTEGER PRIMARY KEY AUTOINCREMENT,
+  user_id           INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  kind              TEXT NOT NULL CHECK (kind IN ('board','note','link','image')),
+  title             TEXT NOT NULL DEFAULT '',
+  body              TEXT,                       -- note text (kind='note')
+  url               TEXT,                       -- file/image/link url (board/image/link)
+  source_session_id INTEGER REFERENCES classroom_sessions(id) ON DELETE SET NULL,
+  source_title      TEXT,                       -- denormalized session title (survives deletion)
+  created_at        TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE INDEX idx_student_materials_user ON student_materials(user_id, created_at DESC);
@@ -0,0 +1,14 @@
+'use strict';
+const express = require('express');
+const router  = express.Router();
+const { authMiddleware } = require('../middleware/auth');
+const c = require('../controllers/studentMaterialsController');
+
+router.use(authMiddleware);
+
+router.get('/',  c.list);
+router.post('/', c.create);
+// @public-by-design: router-level authMiddleware (above) + per-row ownership check in handler
+router.delete('/:id', c.remove);
+
+module.exports = router;
@@ -193,6 +193,7 @@ app.use('/api/textbooks',    textbookRoutes);
 app.use('/api/access',       accessRoutes);
 app.use('/api/teacher-students', teacherStudentsRoutes);
 app.use('/api/lab',          labRoutes);
+app.use('/api/materials',    require('./routes/materials'));

 /* ── Public features endpoint (merges global + per-class for authenticated students) ── */
 const _featDb = require('./db/db');
@@ -3595,6 +3595,22 @@ class Whiteboard {
    }, 'image/png');
  }

+  /* Same composite as exportPNG, but hands the PNG Blob to a callback
+     (used to save a board page into the student's personal materials). */
+  exportBlob(cb) {
+    const off = document.createElement('canvas');
+    off.width = Whiteboard.VW; off.height = Whiteboard.VH;
+    const ctx = off.getContext('2d');
+    const [sw, sh, sz, spx, spy] = [this._cssW, this._cssH, this._zoom, this._panVX, this._panVY];
+    this._cssW = Whiteboard.VW; this._cssH = Whiteboard.VH;
+    this._zoom = 1; this._panVX = 0; this._panVY = 0;
+    this._renderBg(ctx);
+    if (this._template && this._template !== 'blank') this._renderTemplate(ctx);
+    for (const s of this._strokes) this._renderStroke(ctx, s);
+    this._cssW = sw; this._cssH = sh; this._zoom = sz; this._panVX = spx; this._panVY = spy;
+    off.toBlob(cb, 'image/png');
+  }
+
  _renderMinimap() {
    if (!this._mmCanvas) return;
    const visible = this._zoom > 1.04;
@@ -585,6 +585,10 @@
                      <span>Загрузка доски...</span>
                    </div>
                    <div class="lh-board-export">
+                      <button class="lh-export-btn" onclick="saveBoardToMaterials(this)" title="Сохранить страницу в «Мои материалы»">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+                        К себе
+                      </button>
                      <button class="lh-export-btn" onclick="exportBoardPage()">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                        PNG
@@ -1023,6 +1027,51 @@ function lhZoom(delta) {
 function lhZoomFit() { if (_wb) _wb.zoomFitStrokes(); }
 function exportBoardPage() { if (_wb) _wb.exportPNG(); }

+/* ─── Сохранить материалы урока к себе («Мои материалы») ─── */
+let _myNoteText = '';
+function _matSource() {
+  const s = _activeSession && _activeSession.session;
+  return { sourceSessionId: s ? s.id : null, sourceTitle: s ? (s.title || 'Урок') : null };
+}
+async function saveBoardToMaterials(btn) {
+  if (!_wb) { LS.toast('Откройте страницу доски', 'warn'); return; }
+  if (btn) btn.disabled = true;
+  try {
+    const blob = await new Promise(res => _wb.exportBlob(res));
+    if (!blob) throw new Error('Не удалось сделать снимок страницы');
+    const fd = new FormData();
+    fd.append('file', blob, 'board-p' + (_wbCurrentPage || 1) + '.png');
+    const up = await LS.uploadFile(fd);
+    const src = _matSource();
+    await LS.saveMaterial({
+      kind: 'board',
+      title: (src.sourceTitle || 'Доска') + ' · стр. ' + (_wbCurrentPage || 1),
+      url: LS.downloadFileUrl(up.id),
+      sourceSessionId: src.sourceSessionId, sourceTitle: src.sourceTitle,
+    });
+    LS.toast('Страница сохранена в «Мои материалы»', 'success');
+  } catch (e) {
+    LS.toast(e.message || 'Ошибка сохранения', 'error');
+  } finally { if (btn) btn.disabled = false; }
+}
+async function saveNoteToMaterials(btn) {
+  const text = (_myNoteText || '').trim();
+  if (!text) { LS.toast('Заметка пустая', 'warn'); return; }
+  if (btn) btn.disabled = true;
+  try {
+    const src = _matSource();
+    await LS.saveMaterial({
+      kind: 'note',
+      title: 'Заметка · ' + (src.sourceTitle || 'Урок'),
+      body: text,
+      sourceSessionId: src.sourceSessionId, sourceTitle: src.sourceTitle,
+    });
+    LS.toast('Заметка сохранена в «Мои материалы»', 'success');
+  } catch (e) {
+    LS.toast(e.message || 'Ошибка сохранения', 'error');
+  } finally { if (btn) btn.disabled = false; }
+}
+
 /* ─── Chat ─── */
 async function loadChat() {
  _chatLoaded = true;
@@ -1073,12 +1122,15 @@ async function loadNotes() {
  try {
    const data    = await LS.get(`/api/classroom/${sessionId}/notes`);
    const content = data.content || '';
+    _myNoteText = content;
    if (!content.trim()) {
      container.innerHTML = `<div class="ml-empty"><p>Вы не оставили заметок к этому уроку</p></div>`;
      return;
    }
    container.innerHTML = `<div class="lh-own-note-box">
-      <div class="lh-own-note-lbl">Мои заметки</div>
+      <div class="lh-own-note-lbl">Мои заметки
+        <button class="lh-export-btn" style="float:right" onclick="saveNoteToMaterials(this)" title="Сохранить в «Мои материалы»">К себе</button>
+      </div>
      <div class="lh-note-text">${LS.escapeHtml(content)}</div>
    </div>`;
  } catch {
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Мои материалы — LearnSpace</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .mm-main { padding: 28px 24px; max-width: 1100px; margin: 0 auto; width: 100%; }
+    .mm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+    .mm-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--text); }
+    .mm-sub { color: var(--text-3); font-size: 0.9rem; margin-bottom: 22px; }
+    .mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
+    .mm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
+    .mm-card-media { background: #f1f5f9; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+    .mm-card-media img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
+    .mm-card-note { padding: 14px 16px; font-size: 0.84rem; color: var(--text-2); white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; line-height: 1.55; flex: 1; }
+    .mm-card-body { padding: 12px 14px; border-top: 1px solid var(--border); }
+    .mm-card-title { font-weight: 700; font-size: 0.86rem; color: var(--text); margin-bottom: 3px; }
+    .mm-card-meta { font-size: 0.74rem; color: var(--text-3); }
+    .mm-card-actions { display: flex; gap: 8px; margin-top: 10px; }
+    .mm-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 0.76rem; font-weight: 600; color: var(--text-2); text-decoration: none; transition: border-color .12s, color .12s; }
+    .mm-btn:hover { border-color: var(--violet); color: var(--violet); }
+    .mm-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
+    .mm-btn svg { width: 13px; height: 13px; }
+    .mm-kind { position: absolute; top: 8px; left: 8px; font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(155,93,229,0.12); color: var(--violet); }
+    .mm-empty { padding: 60px 20px; text-align: center; color: var(--text-3); }
+    .mm-empty svg { width: 38px; height: 38px; opacity: 0.4; margin-bottom: 12px; }
+    @media (max-width: 640px) { .mm-grid { grid-template-columns: 1fr 1fr; } .mm-main { padding: 18px 14px; } }
+  </style>
+</head>
+<body>
+<div class="app-layout">
+  <aside class="sidebar" id="app-sidebar"></aside>
+  <main class="sb-content">
+    <div class="mm-main">
+      <div class="mm-head">
+        <span class="mm-title">Мои материалы</span>
+      </div>
+      <div class="mm-sub">Сохранённые с уроков: страницы доски, заметки и вложения. Хранятся у вас и не пропадают, даже если урок удалят.</div>
+      <div class="mm-grid" id="mm-grid"><div class="mm-empty">Загрузка…</div></div>
+    </div>
+  </main>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="/js/sidebar.js"></script>
+<script src="/js/notifications.js"></script>
+<script src="/js/mobile.js"></script>
+<script>
+  LS.initPage();
+
+  function esc(s) { return LS.escapeHtml(String(s || '')); }
+  function fmtDate(s) {
+    if (!s) return '';
+    try { const d = new Date(s.replace(' ', 'T') + (s.includes('Z') ? '' : 'Z'));
+      return d.toLocaleDateString('ru', { day: 'numeric', month: 'short', year: 'numeric' }); } catch (e) { return ''; }
+  }
+
+  const KIND_LABEL = { board: 'Доска', note: 'Заметка', link: 'Ссылка', image: 'Изображение' };
+
+  function card(m) {
+    const kind = KIND_LABEL[m.kind] || m.kind;
+    const meta = `${esc(m.source_title || '')}${m.source_title ? ' · ' : ''}${fmtDate(m.created_at)}`;
+    const del = `<button class="mm-btn danger" onclick="delMaterial(${m.id})"><i data-lucide="trash-2"></i> Удалить</button>`;
+    if (m.kind === 'board' || m.kind === 'image') {
+      return `<div class="mm-card">
+        <span class="mm-kind">${kind}</span>
+        <a class="mm-card-media" href="${esc(m.url)}" target="_blank" rel="noopener"><img src="${esc(m.url)}" alt="" loading="lazy"/></a>
+        <div class="mm-card-body">
+          <div class="mm-card-title">${esc(m.title || kind)}</div>
+          <div class="mm-card-meta">${meta}</div>
+          <div class="mm-card-actions">
+            <a class="mm-btn" href="${esc(m.url)}" target="_blank" rel="noopener"><i data-lucide="external-link"></i> Открыть</a>
+            <a class="mm-btn" href="${esc(m.url)}" download><i data-lucide="download"></i></a>
+            ${del}
+          </div>
+        </div>
+      </div>`;
+    }
+    if (m.kind === 'link') {
+      return `<div class="mm-card">
+        <span class="mm-kind">${kind}</span>
+        <div class="mm-card-note"><a href="${esc(m.url)}" target="_blank" rel="noopener" style="color:var(--violet)">${esc(m.url)}</a></div>
+        <div class="mm-card-body">
+          <div class="mm-card-title">${esc(m.title || kind)}</div>
+          <div class="mm-card-meta">${meta}</div>
+          <div class="mm-card-actions">${del}</div>
+        </div>
+      </div>`;
+    }
+    // note
+    return `<div class="mm-card">
+      <span class="mm-kind">${kind}</span>
+      <div class="mm-card-note">${esc(m.body || '')}</div>
+      <div class="mm-card-body">
+        <div class="mm-card-title">${esc(m.title || kind)}</div>
+        <div class="mm-card-meta">${meta}</div>
+        <div class="mm-card-actions">${del}</div>
+      </div>
+    </div>`;
+  }
+
+  async function load() {
+    const grid = document.getElementById('mm-grid');
+    try {
+      const { materials } = await LS.listMaterials();
+      if (!materials || !materials.length) {
+        grid.innerHTML = `<div class="mm-empty" style="grid-column:1/-1">
+          <i data-lucide="folder-open"></i>
+          <p>Пока пусто. На странице «Мои уроки» откройте прошлый урок и нажмите «К себе» на странице доски или заметке.</p>
+        </div>`;
+        lucide.createIcons();
+        return;
+      }
+      grid.innerHTML = materials.map(card).join('');
+      lucide.createIcons();
+    } catch (e) {
+      grid.innerHTML = `<div class="mm-empty" style="grid-column:1/-1">Ошибка загрузки</div>`;
+    }
+  }
+
+  async function delMaterial(id) {
+    if (!confirm('Удалить этот материал?')) return;
+    try { await LS.deleteMaterial(id); load(); }
+    catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+  window.delMaterial = delMaterial;
+
+  load();
+</script>
+</body>
+</html>
@@ -1048,6 +1048,7 @@ window.LS = {
  crJoin, crLeave, crSendChat, crGetChat, crGetAttendance, crSignal, crGetOnlineStudents, crGetMySession,
  crGetMyHistory, crGetClassHistory, crGetSessionSummary, crExportChatUrl, crGetAllNotes, crDeleteHistory,
  crAdminGetAllHistory, crAdminGetTeachersList,
+  listMaterials, saveMaterial, deleteMaterial,
  escapeHtml, esc,
  parseDate, fmtRelTime, safeHref,
  initPage,
@@ -1242,6 +1243,9 @@ async function uploadFile(formData) {
  return data;
 }
 function downloadFileUrl(id) { return `${API}/files/${id}/download`; }
+async function listMaterials()    { return req('GET',    '/materials'); }
+async function saveMaterial(data) { return req('POST',   '/materials', data); }
+async function deleteMaterial(id) { return req('DELETE', `/materials/${id}`); }
 async function deleteFile(id)                        { return req('DELETE', `/files/${id}`); }
 async function getFileAccess(id)                     { return req('GET',    `/files/${id}/access`); }
 async function assignFile(id, data)                  { return req('POST',   `/files/${id}/assign`, data); }
@@ -69,6 +69,7 @@
        ${L('/my-students',   'user-plus',        'Мои ученики',   { cls: 'sb-teacher-only', hidden: !isTch })}
        ${L('/classroom',     'presentation',     'Онлайн-урок', { id: 'btn-classroom', cls: 'sb-link-cr' })}
        ${L('/lesson-history','archive',          'Архив уроков')}
+        ${L('/my-materials',  'bookmark',         'Мои материалы', { hidden: !isStu })}
        ${L('/live-quiz',     'radio',            'Live-квиз',     { cls: 'sb-teacher-only', hidden: !isTch })}
        ${L('/board',         'layout-dashboard', 'Доска',         { id: 'btn-board',   hidden: true })}
      `)}