{% extends "sco_page.j2" %} {% import 'wtf.j2' as wtf %} {% block styles %} {{super()}} <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/tui.calendar/toastui-calendar.min.css"/> <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/bootstrap-multiselect-1.1.2/bootstrap-multiselect.min.css"/> <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/edt.css"> {% endblock %} {% block app_content %} <div class="tab-content"> <h2>Expérimental: emploi du temps</h2> {{ form_groups_choice|safe }} <form id="show_modules_titles_form" method="GET"> <input type="checkbox" name="show_modules_titles" {{ 'checked' if show_modules_titles else ''}} onchange="this.form.submit()"/> noms complets des modules</input> </form> <div> <span id="menu-navi"> <button type="button" class="btn btn-default btn-sm move-today" data-action="move-today">Aujourd'hui</button> <button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev"> <i class="calendar-icon ic-arrow-line-left" data-action="move-prev"><</i> </button> <button type="button" class="btn btn-default btn-sm move-day" data-action="move-next"> <i class="calendar-icon ic-arrow-line-right" data-action="move-next">></i> </button> </span> <span id="renderRange" class="render-range"></span> </div> <div id="calendar" style="height: calc(100vh - 180px);"></div> <div class="help"> <ul> <li>Les heures sont toujours affichées dans le fuseau horaire du serveur, qui est en principe celui des étudiants. </li> <li>Si vous filtrez par groupe, les évènements dont le groupe n'est pas reconnu seront affichés. </li> {% if formsemestre.can_be_edited_by(current_user) %} <li><a class="stdlink" href="{{ url_for('notes.formsemestre_edt_help_config', scodoc_dept=g.scodoc_dept, formsemestre_id= formsemestre.id) }}">Aide à la configuration de l'emploi du temps</a> {% endif %} </ul> </div> </div> {% endblock app_content %} {% block scripts %} {{ super() }} <script src="{{scu.STATIC_DIR}}/libjs/bootstrap-multiselect-1.1.2/bootstrap-multiselect.min.js"></script> <script src="{{scu.STATIC_DIR}}/libjs/purl.js"></script> <script src="{{scu.STATIC_DIR}}/libjs/tui.calendar/toastui-calendar.min.js"></script> <script src="{{scu.STATIC_DIR}}/js/groups_view.js"></script> <script> let hm_formatter = new Intl.DateTimeFormat('default', { hour: '2-digit', minute: '2-digit', hour12: false }); function getDataAction(target) { return target.dataset ? target.dataset.action : target.getAttribute('data-action'); } document.addEventListener('DOMContentLoaded', function() { document.getElementById('menu-navi').addEventListener('click', onClickNavi); const Calendar = tui.Calendar; const container = document.getElementById('calendar'); const options = { defaultView: 'week', calendars: [ { id: 'cal1', name: 'Personal', backgroundColor: '#03bd9e', borderColor: 'white', }, ], isReadOnly: true, // timezone: { zones: [ { timezoneName: 'Europe/Paris' } ] }, template: { // ce template nous permet d'avoir du HTML dans le title de l'event time: function(event) { const date_start = new Date(event.start); const start = hm_formatter.format(date_start); return `<strong>${start}</strong> <span>${event.title}</span>`; }, }, timezone: { zones: [ { timezoneName: 'CET', // TODO récupérer timezone serveur }, ], }, usageStatistics: false, week: { dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"], eventView: ['time'], hourStart: {{ hour_start }}, hourEnd: {{ hour_end }}, showNowIndicator: true, startDayOfWeek: 1, taskView: false, useDetailPopup:false, // on va pouvoir placer les liens scodoc workweek: true, // TODO voir samedi travaillé }, }; const calendar = new Calendar(container, options); fetch(`${SCO_URL}/../api/formsemestre/{{formsemestre.id}}/edt?{{groups_query_args|safe}}&show_modules_titles={{show_modules_titles}}`) .then(r=>{return r.json()}) .then(events=>{ if (typeof events == 'string') { // error ! alert("error: " + events) } else { calendar.createEvents(events); } }); function formatDate(date) { let year = date.getFullYear(); let month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-indexed in JavaScript let day = date.getDate().toString().padStart(2, '0'); return `${day}/${month}/${year}`; } function setRenderRangeText() { var renderRange = document.getElementById('renderRange'); var options = calendar.getOptions(); var viewName = calendar.getViewName(); var html = []; if (viewName === 'day') { html.push(currentCalendarDate('YYYY.MM.DD')); } else if (viewName === 'month' && (!options.month.visibleWeeksCount || options.month.visibleWeeksCount > 4)) { html.push(currentCalendarDate('YYYY.MM')); } else { html.push(formatDate(calendar.getDateRangeStart())); html.push(' - '); html.push(formatDate(calendar.getDateRangeEnd())); } renderRange.innerHTML = html.join(''); } function onClickNavi(e) { var action = getDataAction(e.target); switch (action) { case 'move-prev': calendar.prev(); break; case 'move-next': calendar.next(); break; case 'move-today': calendar.today(); break; default: return; } setRenderRangeText(); // setSchedules(); } }); </script> {% endblock scripts %}