Maxim Dolgolyov
44ab5e045e
Ученик на странице «Мои уроки» может сохранить к себе страницу доски (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>
137 lines
7.0 KiB
HTML
137 lines
7.0 KiB
HTML
<!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>
|