MonScoDocEssai/app/templates/formsemestre/edt.j2

155 lines
5.0 KiB
Django/Jinja

{% extends "sco_page.j2" %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block styles %}
{{super()}}
<link href="{{scu.STATIC_DIR}}/libjs/tui.calendar/toastui-calendar.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{ scu.STATIC_DIR }}/css/edt.css" type="text/css">
{% endblock %}
{% block app_content %}
<div class="tab-content">
<h2>Expérimental: emploi du temps</h2>
<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">&lt;</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">&gt;</i>
</button>
</span>
<span id="renderRange" class="render-range"></span>
</div>
<div id="calendar" style="height: calc(100vh - 180px);"></div>
</div>
{% endblock app_content %}
{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/libjs/tui.calendar/toastui-calendar.min.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`)
.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 %}