306 lines
16 KiB
HTML
306 lines
16 KiB
HTML
<div class="academic-calendar-tabs" role="tablist" aria-label="Разделы календарных учебных графиков">
|
||
<button type="button" class="academic-calendar-tab active" data-calendar-tab="manage" role="tab" aria-selected="true" aria-controls="academic-calendar-tab-manage">Графики</button>
|
||
<button type="button" class="academic-calendar-tab" data-calendar-tab="grid" role="tab" aria-selected="false" aria-controls="academic-calendar-tab-grid">Сетки</button>
|
||
<button type="button" class="academic-calendar-tab" data-calendar-tab="subjects" role="tab" aria-selected="false" aria-controls="academic-calendar-tab-subjects">Дисциплины</button>
|
||
</div>
|
||
|
||
<section class="academic-calendar-tab-panel active" id="academic-calendar-tab-manage" data-calendar-tab-panel="manage" role="tabpanel">
|
||
<div class="card create-card academic-year-builder-card">
|
||
<div class="card-header-row">
|
||
<div>
|
||
<h2 id="academic-year-form-title">Учебный год и семестры</h2>
|
||
<p class="muted academic-year-builder-description">Учебный год создаётся сразу с осенним и весенним семестрами.</p>
|
||
</div>
|
||
<button type="button" class="btn btn-md btn-ghost" id="academic-year-reset">Очистить</button>
|
||
</div>
|
||
<form id="academic-year-form" novalidate>
|
||
<input type="hidden" id="academic-year-id">
|
||
<div class="academic-year-period-grid">
|
||
<div class="form-group">
|
||
<label for="academic-year-start">Год начала учебного года</label>
|
||
<input type="text" id="academic-year-start" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" placeholder="2026" autocomplete="off" aria-describedby="academic-year-start-hint" required>
|
||
<small class="muted academic-year-field-hint" id="academic-year-start-hint">Введите четыре цифры — дата начала будет 1 сентября.</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="academic-year-end">Год окончания учебного года</label>
|
||
<input type="text" id="academic-year-end" inputmode="numeric" maxlength="4" placeholder="2027" readonly aria-readonly="true" required>
|
||
<small class="muted academic-year-field-hint">Подставляется автоматически и формирует название учебного года.</small>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="academic-year-semester-builder" aria-labelledby="academic-year-semesters-title">
|
||
<div class="academic-year-semester-builder-head">
|
||
<div>
|
||
<h3 id="academic-year-semesters-title">Семестры</h3>
|
||
<p class="muted">Проверьте даты: оба семестра будут сохранены вместе с учебным годом.</p>
|
||
</div>
|
||
<span class="academic-year-required-badge">Обязательно</span>
|
||
</div>
|
||
<div class="academic-year-semester-grid">
|
||
<article class="academic-year-semester-card" data-academic-year-semester="autumn">
|
||
<input type="hidden" id="academic-year-autumn-id">
|
||
<div class="academic-year-semester-card-title">
|
||
<span class="academic-year-semester-dot academic-year-semester-dot-autumn" aria-hidden="true"></span>
|
||
<strong>Осенний семестр</strong>
|
||
</div>
|
||
<div class="academic-year-semester-dates">
|
||
<div class="form-group">
|
||
<label for="academic-year-autumn-start">Начало</label>
|
||
<input type="text" id="academic-year-autumn-start" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="academic-year-autumn-end">Окончание</label>
|
||
<input type="text" id="academic-year-autumn-end" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="academic-year-semester-card" data-academic-year-semester="spring">
|
||
<input type="hidden" id="academic-year-spring-id">
|
||
<div class="academic-year-semester-card-title">
|
||
<span class="academic-year-semester-dot academic-year-semester-dot-spring" aria-hidden="true"></span>
|
||
<strong>Весенний семестр</strong>
|
||
</div>
|
||
<div class="academic-year-semester-dates">
|
||
<div class="form-group">
|
||
<label for="academic-year-spring-start">Начало</label>
|
||
<input type="text" id="academic-year-spring-start" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="academic-year-spring-end">Окончание</label>
|
||
<input type="text" id="academic-year-spring-end" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="academic-year-form-actions">
|
||
<button type="submit" class="btn btn-md btn-primary">Сохранить учебный год и семестры</button>
|
||
</div>
|
||
<div class="form-alert" id="academic-year-alert" role="alert"></div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header-row">
|
||
<h2>Учебные годы</h2>
|
||
<button class="btn btn-md btn-secondary" id="academic-years-refresh">Обновить</button>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Название</th>
|
||
<th>Период</th>
|
||
<th>Семестры</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="academic-years-tbody">
|
||
<tr>
|
||
<td colspan="4" class="loading-row">Загрузка...</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card create-card">
|
||
<div class="card-header-row">
|
||
<h2 id="academic-calendar-form-title">Календарный учебный график</h2>
|
||
<button type="button" class="btn btn-md btn-ghost" id="academic-calendar-reset">Очистить</button>
|
||
</div>
|
||
<form id="academic-calendar-form" novalidate>
|
||
<input type="hidden" id="academic-calendar-id">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="academic-calendar-year">Учебный год</label>
|
||
<select id="academic-calendar-year" required>
|
||
<option value="">Загрузка...</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="academic-calendar-specialty">Специальность</label>
|
||
<select id="academic-calendar-specialty" required>
|
||
<option value="">Загрузка...</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="academic-calendar-profile">Профиль</label>
|
||
<select id="academic-calendar-profile" required>
|
||
<option value="">Выберите специальность</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="academic-calendar-study-form">Форма обучения</label>
|
||
<select id="academic-calendar-study-form" required>
|
||
<option value="">Загрузка...</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="academic-calendar-course-count">Курсов</label>
|
||
<input type="number" id="academic-calendar-course-count" min="1" max="8" value="4" required>
|
||
</div>
|
||
<button type="submit" class="btn btn-md btn-primary">Сохранить график</button>
|
||
</div>
|
||
<div class="form-alert" id="academic-calendar-alert" role="alert"></div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header-row">
|
||
<h2>Календарные графики</h2>
|
||
<button class="btn btn-md btn-secondary" id="academic-calendars-refresh">Обновить</button>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Учебный год</th>
|
||
<th>Специальность</th>
|
||
<th>Профиль</th>
|
||
<th>Форма</th>
|
||
<th>Курсов</th>
|
||
<th>Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="academic-calendars-tbody">
|
||
<tr>
|
||
<td colspan="6" class="loading-row">Загрузка...</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="academic-calendar-tab-panel" id="academic-calendar-tab-grid" data-calendar-tab-panel="grid" role="tabpanel" hidden>
|
||
<div class="card create-card">
|
||
<h2>Редактор годового графика</h2>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="calendar-editor-calendar">График</label>
|
||
<select id="calendar-editor-calendar">
|
||
<option value="">Загрузка...</option>
|
||
</select>
|
||
</div>
|
||
<button type="button" class="btn btn-md btn-secondary" id="calendar-editor-load">Загрузить сетку</button>
|
||
<button type="button" class="btn btn-md btn-primary" id="calendar-editor-save">Сохранить сетку</button>
|
||
</div>
|
||
<div class="calendar-fill-panel">
|
||
<div class="form-group">
|
||
<label for="calendar-fill-course">Курс</label>
|
||
<select id="calendar-fill-course">
|
||
<option value="">Все курсы</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="calendar-fill-start">С даты</label>
|
||
<input type="text" id="calendar-fill-start" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="calendar-fill-end">По дату</label>
|
||
<input type="text" id="calendar-fill-end" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="calendar-fill-activity">Код</label>
|
||
<select id="calendar-fill-activity">
|
||
<option value="">Загрузка...</option>
|
||
</select>
|
||
</div>
|
||
<button type="button" class="btn btn-md btn-secondary" id="calendar-fill-apply">Заполнить диапазон</button>
|
||
</div>
|
||
<div class="form-alert" id="calendar-editor-alert" role="alert"></div>
|
||
<div id="calendar-totals" class="calendar-totals"></div>
|
||
<div id="calendar-grid" class="academic-calendar-grid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="academic-calendar-tab-panel" id="academic-calendar-tab-subjects" data-calendar-tab-panel="subjects" role="tabpanel" hidden>
|
||
<div class="card create-card">
|
||
<div class="card-header-row">
|
||
<h2>Дисциплины графика</h2>
|
||
<button type="button" class="btn btn-md btn-secondary" id="calendar-subject-refresh">Обновить</button>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="calendar-subject-calendar">График</label>
|
||
<select id="calendar-subject-calendar">
|
||
<option value="">Загрузка...</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="calendar-subject-semester">Семестр</label>
|
||
<select id="calendar-subject-semester">
|
||
<option value="">Выберите график</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="calendar-subject-id">Дисциплина</label>
|
||
<select id="calendar-subject-id">
|
||
<option value="">Загрузка...</option>
|
||
</select>
|
||
</div>
|
||
<button type="button" class="btn btn-md btn-secondary" id="calendar-subject-add">Добавить</button>
|
||
<button type="button" class="btn btn-md btn-primary" id="calendar-subject-save">Сохранить</button>
|
||
</div>
|
||
<div class="form-alert" id="calendar-subject-alert" role="alert"></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header-row">
|
||
<h2>Привязки по семестрам</h2>
|
||
<span id="calendar-subject-count" class="muted"></span>
|
||
</div>
|
||
<div id="calendar-subject-summary" class="calendar-subject-summary">
|
||
<div class="loading-row">Выберите календарный график</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="modal-overlay" id="calendar-day-dialog">
|
||
<div class="modal-content card calendar-day-dialog-card">
|
||
<h2>Ячейка графика</h2>
|
||
<button class="modal-close" id="calendar-day-dialog-close">×</button>
|
||
<div class="calendar-day-dialog-grid">
|
||
<div>
|
||
<span>Дата</span>
|
||
<strong id="calendar-day-dialog-date">-</strong>
|
||
</div>
|
||
<div>
|
||
<span>Курс</span>
|
||
<strong id="calendar-day-dialog-course">-</strong>
|
||
</div>
|
||
<div>
|
||
<span>Неделя</span>
|
||
<strong id="calendar-day-dialog-week">-</strong>
|
||
</div>
|
||
<div>
|
||
<span>День</span>
|
||
<strong id="calendar-day-dialog-day">-</strong>
|
||
</div>
|
||
</div>
|
||
<div class="calendar-day-dialog-activity" id="calendar-day-dialog-activity-summary"></div>
|
||
<div class="form-group">
|
||
<label for="calendar-day-dialog-activity">Код активности</label>
|
||
<select id="calendar-day-dialog-activity">
|
||
<option value="">Выберите код</option>
|
||
</select>
|
||
</div>
|
||
<div class="calendar-day-dialog-time-grid">
|
||
<div class="form-group">
|
||
<label for="calendar-day-dialog-time-scope">Временная сетка даты</label>
|
||
<select id="calendar-day-dialog-time-scope">
|
||
<option value="">По правилу даты</option>
|
||
</select>
|
||
</div>
|
||
<div class="calendar-day-dialog-actions">
|
||
<button type="button" class="btn btn-md btn-primary" id="calendar-day-dialog-time-save">Применить</button>
|
||
<button type="button" class="btn btn-md btn-danger-subtle" id="calendar-day-dialog-time-clear">Убрать ручную сетку</button>
|
||
</div>
|
||
<div class="form-alert" id="calendar-day-dialog-time-alert" role="alert"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|