gmao/app_new/templates/planning/calendar.html

{% extends "base.html" %}
{% block title %}Planning — GMAO Collège{% endblock %}

{% block content %}
<style>
.holiday-day { background-color: #ffc107 !important; color: #212529 !important; }
</style>
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1><i class="bi bi-calendar3 me-2"></i>Planning {% if mode == 'school' %}{{ year }}–{{ year + 1 }}{% else %}{{ year }}{% endif %}</h1>
                <div>
                    <a href="{{ url_for('planning.index', year=year-1) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-chevron-left"></i> {{ year-1 }}
                    </a>
                    <a href="{{ url_for('planning.index', year=year+1) }}" class="btn btn-outline-secondary">
                        {{ year+1 }} <i class="bi bi-chevron-right"></i>
                    </a>
                    <div class="btn-group ms-2"><a href="{{ url_for('planning.index', year=year, mode='calendar') }}" class="btn btn-outline-primary {% if mode == 'calendar' %}active{% endif %}">Année civile</a><a href="{{ url_for('planning.index', year=year, mode='school') }}" class="btn btn-outline-primary {% if mode == 'school' %}active{% endif %}">Année scolaire</a></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiques -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <h3>{{ stats.preventive_tasks }}</h3>
                    <small>Tâches préventives</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body text-center">
                    <h3>{{ stats.curative_interventions }}</h3>
                    <small>Interventions curatives</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <h3>{{ stats.admin_tasks }}</h3>
                    <small>Tâches administratives</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h3>{{ stats.pending_items }}</h3>
                    <small>Éléments planifiés</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Légende -->
    <div class="card mb-4">
        <div class="card-body py-2">
            <div class="d-flex flex-wrap gap-3">
                <span><span class="badge bg-secondary">Week-end</span></span>
                <span><span class="badge bg-dark">Vacances</span></span>
                <span><span class="badge holiday-day">Jour férié</span></span>
                <span><span class="badge" style="background:#b7e4c7;color:#14532d;">Permanence</span></span>
                <span><span class="badge bg-primary">Intervention</span></span>
                <span><span class="badge bg-info text-dark">Échéance préventive</span></span>
            </div>
        </div>
    </div>

    <!-- Calendrier -->
    {% set days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'] %}
    
    <div class="row">
        {% for month in months %}
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card">
                <div class="card-header text-center">
                    <strong>{{ month.name }} {{ month.year }}</strong>
                </div>
                <div class="card-body p-1">
                    <table class="table table-sm table-bordered mb-0" style="font-size: 0.8rem;">
                        <thead>
                            <tr>
                                {% for day in days %}
                                <th class="text-center" style="width: 14.28%;">{{ day }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for week in month.weeks %}
                            <tr>
                                {% for day_info in week %}
                                {% if day_info is none %}
                                <td class="bg-light"></td>
                                {% else %}
                                    {% set td_class = '' %}
                                    {% if day_info.is_permanence %}
                                        {% set td_class = 'table-success' %}
                                    {% elif day_info.is_holiday %}
                                        {% set td_class = 'holiday-day' %}
                                    {% elif day_info.is_vacation %}
                                        {% set td_class = 'table-dark' %}
                                    {% elif day_info.is_leave %}
                                        {% set td_class = 'table-warning' %}
                                    {% elif day_info.is_weekend %}
                                        {% set td_class = 'table-secondary' %}
                                    {% endif %}
                                    <td class="{{ td_class }} text-center" title="{% if day_info.is_permanence %}Permanence{% elif day_info.is_holiday %}Jour férié{% elif day_info.vacation_name %}{{ day_info.vacation_name }}{% endif %}">
                                        {% set date_str = day_info.date.strftime('%Y-%m-%d') %}
                                        <a href="{{ url_for('planning.day', date_str=date_str) }}" 
                                           class="text-decoration-none {% if day_info.is_holiday %}text-dark{% elif td_class %}text-white{% endif %}"
                                           title="{{ day_info.vacation_name if day_info.vacation_name else '' }}">
                                            {{ day_info.day }}
                                        </a>
                                        {% if day_info.deviation_hours %}<small class="d-block text-nowrap fw-bold {{ day_info.deviation_class }}" title="Écart de la journée">{{ day_info.deviation_hours }}</small>{% endif %}
                                        {% if day_info.events %}
                                        <div class="mt-1 d-flex flex-column gap-1">
                                            {% for event in day_info.events[:3] %}
                                            <a href="{{ event.url }}" class="badge bg-{{ event.color }} text-truncate text-decoration-none" title="{{ event.title }}{% if event.room_name %} — {{ event.room_name }}{% endif %}">
                                                {% if event.start_time %}{{ event.start_time.strftime('%H:%M') }} {% endif %}{{ event.title[:18] }}
                                            </a>
                                            {% endfor %}
                                            {% if day_info.events|length > 3 %}
                                            <a href="{{ url_for('planning.day', date_str=date_str) }}" class="small text-decoration-none">+{{ day_info.events|length - 3 }} autre(s)</a>
                                            {% endif %}
                                        </div>
                                        {% endif %}
                                    </td>
                                {% endif %}
                                {% endfor %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}