Maxim Dolgolyov
fd3e5c47e8
- PATCH /api/materials/:id (title, body) с проверкой владельца (@public-by-design) + LS.updateMaterial. - /my-materials: кнопка «+ Заметка» (личный блокнот с нуля), «Изменить» на карточках (заголовок; для заметок — и текст) через LS.modal. - Добавлен план развития «Мои материалы»: plans/my-materials/PLAN.md (6 фаз). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
180 lines
9.5 KiB
HTML
180 lines
9.5 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>
|
|
<button class="mm-btn" style="margin-left:auto" onclick="createNote()"><i data-lucide="plus"></i> Заметка</button>
|
|
</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: 'Изображение' };
|
|
let _mats = [];
|
|
|
|
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>`;
|
|
const edit = `<button class="mm-btn" onclick="editMaterial(${m.id})" title="Изменить"><i data-lucide="pencil"></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>
|
|
${edit}${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">${edit}${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();
|
|
_mats = materials || [];
|
|
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;
|
|
|
|
const FLD = 'padding:9px 12px;border:1px solid var(--border);border-radius:9px;font:inherit;width:100%;box-sizing:border-box';
|
|
function createNote() {
|
|
const content = `<div style="display:flex;flex-direction:column;gap:10px">
|
|
<input id="mm-nt-title" placeholder="Заголовок (необязательно)" style="${FLD}" />
|
|
<textarea id="mm-nt-body" rows="7" placeholder="Текст заметки…" style="${FLD};resize:vertical"></textarea>
|
|
</div>`;
|
|
const m = LS.modal({ title: 'Новая заметка', content, size: 'sm', actions: [
|
|
{ label: 'Отмена', onClick: () => m.close() },
|
|
{ label: 'Создать', primary: true, onClick: async () => {
|
|
const title = m.body.querySelector('#mm-nt-title').value.trim();
|
|
const text = m.body.querySelector('#mm-nt-body').value.trim();
|
|
if (!text && !title) { LS.toast('Введите текст заметки', 'warn'); return; }
|
|
try { await LS.saveMaterial({ kind: 'note', title, body: text }); m.close(); load(); }
|
|
catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
|
|
} },
|
|
] });
|
|
}
|
|
window.createNote = createNote;
|
|
|
|
function editMaterial(id) {
|
|
const mt = _mats.find(x => x.id === id);
|
|
if (!mt) return;
|
|
const isNote = mt.kind === 'note';
|
|
const content = `<div style="display:flex;flex-direction:column;gap:10px">
|
|
<input id="mm-ed-title" value="${esc(mt.title || '')}" placeholder="Заголовок" style="${FLD}" />
|
|
${isNote ? `<textarea id="mm-ed-body" rows="7" style="${FLD};resize:vertical">${esc(mt.body || '')}</textarea>` : ''}
|
|
</div>`;
|
|
const m = LS.modal({ title: 'Изменить', content, size: 'sm', actions: [
|
|
{ label: 'Отмена', onClick: () => m.close() },
|
|
{ label: 'Сохранить', primary: true, onClick: async () => {
|
|
const data = { title: m.body.querySelector('#mm-ed-title').value.trim() };
|
|
if (isNote) data.body = m.body.querySelector('#mm-ed-body').value;
|
|
try { await LS.updateMaterial(id, data); m.close(); load(); }
|
|
catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
|
|
} },
|
|
] });
|
|
}
|
|
window.editMaterial = editMaterial;
|
|
|
|
load();
|
|
</script>
|
|
</body>
|
|
</html>
|