MonScoDocEssai/app/templates/formsemestre/edt.j2

{% 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 %}