UI rework: modal dialogs, inline lab editing, manual creation, content management
- Dashboard: real stats (groups, students, labs, average grade), labs/groups summary lists, no placeholder tile - Lab page: view + edit combined — metadata form in modal, condition rendered as markdown, per-level variant tables with add/edit/delete dialogs, level rename/delete, student level/variant selectors with group filter - Labs list: create-lab dialog with manual level entry (code; title lines) - Groups: create-group dialog, add-student dialog (auto password, toast card) - Content: public /learn reader is the single place; admin buttons (new article with chapter/section create-or-select, rename/delete chapters and sections, move articles between sections, import zip) appear for admins; removed separate 'Контент' admin section - Buttons use btn classes instead of nav-link - Favicon: generated SVG book icon - Security: CSRF synchronizer token interceptor (replaced spring-security in web which broke logback under nested jars), session regenerated on login, hardened session cookie, gateway actuator limited to health,info - Jackson 3: nullable-safe request DTOs for labs (FAIL_ON_NULL_FOR_PRIMITIVES) - academic: POST /labs (manual create with levels), level add/rename/delete, content chapters/sections CRUD, article create/move/delete endpoints
This commit is contained in:
195
web/src/main/resources/templates/learn/index.html
Normal file
195
web/src/main/resources/templates/learn/index.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/base :: layout(~{::title}, ~{::#content})}">
|
||||
<head><title>Материалы — LMS</title></head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div class="flex items-center justify-between gap-4 mb-6">
|
||||
<h1 class="page-title">Учебные материалы</h1>
|
||||
<div th:if="${currentUser != null and currentUser.admin}" class="flex gap-2">
|
||||
<button class="btn btn-primary" type="button" onclick="openModal('modal-new-article')">+ Статья</button>
|
||||
<button class="btn btn-secondary" type="button" onclick="openModal('modal-import')">Импорт zip</button>
|
||||
<button class="btn btn-secondary" type="button" onclick="openModal('modal-manage')">Главы и разделы</button>
|
||||
</div>
|
||||
</div>
|
||||
<div th:if="${notice}" class="alert alert-success" th:text="${notice}"></div>
|
||||
<div th:if="${error}" class="alert alert-error" th:text="${error}"></div>
|
||||
|
||||
<div th:if="${tree == null || #lists.isEmpty(tree.chapters)}" class="card card-body text-muted">
|
||||
Материалы ещё не добавлены.
|
||||
</div>
|
||||
<div th:each="chapter : ${tree.chapters}" class="card mb-4" th:id="|chapter-${chapter.id}|">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between gap-4 mb-4">
|
||||
<h2 class="section-title" th:text="${chapter.title}">Глава</h2>
|
||||
<div th:if="${currentUser != null and currentUser.admin}" class="flex gap-2">
|
||||
<button class="btn btn-secondary btn-sm" type="button"
|
||||
th:onclick="openModal('modal-rename-chapter-'+${chapter.id})">Переименовать</button>
|
||||
<form th:action="@{/admin/content/chapters/{id}/delete(id=${chapter.id})}" method="post"
|
||||
onsubmit="return confirm('Удалить главу со всеми разделами и статьями?')">
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}">
|
||||
<button class="btn btn-danger btn-sm" type="submit">Удалить</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div th:each="section : ${chapter.sections}" class="mt-4"
|
||||
th:id="|section-${section.id}|">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<h3 class="group-title">
|
||||
<a th:href="@{/learn/{c}/{s}(c=${chapter.slug}, s=${section.slug})}" th:text="${section.title}">Раздел</a>
|
||||
</h3>
|
||||
<div th:if="${currentUser != null and currentUser.admin}" class="flex gap-2">
|
||||
<button class="btn btn-secondary btn-sm" type="button"
|
||||
th:onclick="openModal('modal-rename-section-'+${section.id})">Переименовать</button>
|
||||
<button class="btn btn-secondary btn-sm" type="button"
|
||||
th:onclick="openModal('modal-move-'+${section.id})">Перенести статьи</button>
|
||||
<form th:action="@{/admin/content/sections/{id}/delete(id=${section.id})}" method="post"
|
||||
onsubmit="return confirm('Удалить раздел со всеми статьями?')">
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}">
|
||||
<button class="btn btn-danger btn-sm" type="submit">Удалить</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-pad text-sm">
|
||||
<li th:each="article : ${section.articles}" class="flex items-center gap-2">
|
||||
<a th:href="@{/learn/{c}/{s}/{a}(c=${chapter.slug}, s=${section.slug}, a=${article.slug})}"
|
||||
th:text="${article.title}">Статья</a>
|
||||
<th:block th:if="${currentUser != null and currentUser.admin}">
|
||||
<button class="btn btn-secondary btn-sm" type="button"
|
||||
th:onclick="openModal('modal-edit-article-'+${article.id})">Править</button>
|
||||
<form class="inline-form" th:action="@{/admin/content/articles/{id}/delete(id=${article.id})}" method="post"
|
||||
onsubmit="return confirm('Удалить статью?')">
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}">
|
||||
<button class="btn btn-danger btn-sm" type="submit">✕</button>
|
||||
</form>
|
||||
</th:block>
|
||||
</li>
|
||||
<li th:if="${#lists.isEmpty(section.articles)}" class="text-muted">Статей пока нет</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p th:if="${#lists.isEmpty(chapter.sections)}" class="text-sm text-muted">Разделов пока нет</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog id="modal-import" class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Импорт материалов (zip)</h2>
|
||||
<button class="modal-close" type="button" onclick="closeModal('modal-import')">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-stack" th:action="@{/admin/content/import}" method="post" enctype="multipart/form-data">
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}">
|
||||
<p class="text-sm text-muted">
|
||||
Структура: <code class="code">chapters/01-глава/01-раздел/01-статья.md</code>, картинки в <code class="code">assets/</code>.
|
||||
</p>
|
||||
<div><label class="label" for="file">Архив</label>
|
||||
<input class="input" id="file" name="file" type="file" accept=".zip" required></div>
|
||||
<button class="btn btn-primary" type="submit">Импортировать</button>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="modal-new-article" class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Новая статья</h2>
|
||||
<button class="modal-close" type="button" onclick="closeModal('modal-new-article')">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-stack" th:action="@{/admin/content/articles/create}" method="post">
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}">
|
||||
<div><label class="label" for="naChapter">Глава (можно создать новую)</label>
|
||||
<div class="inline-form w-full">
|
||||
<select class="input" id="naChapter" name="chapterId" th:if="${tree != null}">
|
||||
<option th:each="chapter : ${tree.chapters}" th:value="${chapter.id}" th:text="${chapter.title}">—</option>
|
||||
</select>
|
||||
<span class="text-muted">или</span>
|
||||
<input class="input" name="newChapterTitle" placeholder="Новая глава">
|
||||
</div>
|
||||
</div>
|
||||
<div><label class="label" for="naSection">Раздел (можно создать новый)</label>
|
||||
<input class="input" id="naSection" name="newSectionTitle" placeholder="Новый раздел"></div>
|
||||
<div><label class="label" for="naTitle">Заголовок статьи</label>
|
||||
<input class="input" id="naTitle" name="title" required></div>
|
||||
<div><label class="label" for="naBody">Текст (markdown)</label>
|
||||
<textarea class="input" id="naBody" name="bodyMd" rows="10"></textarea></div>
|
||||
<button class="btn btn-primary" type="submit">Создать</button>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<th:block th:each="chapter : ${tree?.chapters ?: {}}">
|
||||
<dialog th:id="|modal-rename-chapter-${chapter.id}|" class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Переименовать главу</h2>
|
||||
<button class="modal-close" type="button" th:onclick="closeModal('modal-rename-chapter-'+[[${chapter.id}]])">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-stack" th:action="@{/admin/content/chapters/{id}/rename(id=${chapter.id})}" method="post">
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}">
|
||||
<div><label class="label">Название</label>
|
||||
<input class="input" name="title" th:value="${chapter.title}" required></div>
|
||||
<button class="btn btn-primary" type="submit">Сохранить</button>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
<th:block th:each="section : ${chapter.sections}">
|
||||
<dialog th:id="|modal-rename-section-${section.id}|" class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Переименовать раздел</h2>
|
||||
<button class="modal-close" type="button" th:onclick="closeModal('modal-rename-section-'+[[${section.id}]])">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-stack" th:action="@{/admin/content/sections/{id}/rename(id=${section.id})}" method="post">
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}">
|
||||
<div><label class="label">Название</label>
|
||||
<input class="input" name="title" th:value="${section.title}" required></div>
|
||||
<button class="btn btn-primary" type="submit">Сохранить</button>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog th:id="|modal-move-${section.id}|" class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Перенести статьи из раздела</h2>
|
||||
<button class="modal-close" type="button" th:onclick="closeModal('modal-move-'+[[${section.id}]])">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-stack" th:action="@{/admin/content/sections/{id}/delete(id=${section.id})}" method="post">
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}">
|
||||
<p class="text-sm text-muted">Укажите раздел, в который перенести статьи, затем подтвердите удаление раздела.</p>
|
||||
<div><label class="label">Перенести в раздел</label>
|
||||
<select class="input" name="moveTo" th:if="${tree != null}">
|
||||
<th:block th:each="ch2 : ${tree.chapters}">
|
||||
<optgroup th:label="${ch2.title}">
|
||||
<option th:each="s2 : ${ch2.sections}"
|
||||
th:if="${s2.id != section.id}"
|
||||
th:value="${s2.id}" th:text="${ch2.title} / ${s2.title}">—</option>
|
||||
</optgroup>
|
||||
</th:block>
|
||||
</select></div>
|
||||
<button class="btn btn-primary" type="submit">Перенести и удалить раздел</button>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
<th:block th:each="a : ${articles}">
|
||||
<dialog th:id="|modal-edit-article-${a.id}|" class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Правка статьи</h2>
|
||||
<button class="modal-close" type="button" th:onclick="closeModal('modal-edit-article-'+[[${a.id}]])">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-stack" th:action="@{/admin/content/articles/{id}/save(id=${a.id})}" method="post">
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}">
|
||||
<div><label class="label">Заголовок</label>
|
||||
<input class="input" name="title" th:value="${a.title}" required></div>
|
||||
<div><label class="label">Текст (markdown)</label>
|
||||
<textarea class="input" name="bodyMd" rows="14" th:text="${a.bodyMd}"></textarea></div>
|
||||
<button class="btn btn-primary" type="submit">Сохранить</button>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user