Spaces:

gtkh
/

agenda

Running

File size: 19,119 Bytes

3c1d38c

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Agenda</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideInLeft {
      from { transform: translateX(-100%); }
      to { transform: translateX(0); }
    }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
      animation: fadeIn 0.2s ease-out forwards;
    }
    .slide-in {
      animation: slideInLeft 0.3s ease-out forwards;
    }
    .agenda-event:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    }
    .day-header {
      background: linear-gradient(to bottom, #1e3a8a, #1e40af);
      color: white;
    }
    .day-header-today {
      background: linear-gradient(to bottom, #3b82f6, #2563eb);
    }
    .agenda-event {
      transition: all 0.2s ease;
    }
    .week-navigation {
      background: linear-gradient(to right, #1e3a8a, #1e40af);
    }
    .time-display {
      backdrop-filter: blur(2px);
    }
    
    /* Responsive adjustments */
    @media (max-width: 1024px) {
      #agenda-grid {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        border-top: none;
      }
      #agenda-grid > div {
        border-bottom: 1px solid #374151;
        min-height: 60px;
      }
      .day-body {
        min-height: auto;
        padding: 0.5rem;
      }
      .agenda-event {
        margin: 0.25rem 0;
        aspect-ratio: auto;
      }
    }
    
    @media (min-width: 1025px) {
      #agenda-grid {
        min-width: 80rem;
        display: grid;
        grid-template-columns: repeat(7, minmax(11rem, 1fr));
        border-top: 1px solid #374151;
      }
      .day-body {
        min-height: 100vh;
        padding: 0.5rem;
        border-right: 1px solid #e5e7eb;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .day-body:last-child {
        border-right: none;
      }
      .agenda-event {
        aspect-ratio: auto;
        min-height: 5rem;
      }
    }
  </style>
</head>
<body class="font-sans">
  <!-- Agenda Panel -->
  <div id="agendaPanel" class="fixed inset-0 z-50 hidden overflow-hidden">
    <div class="modal-backdrop"></div>
    <div class="fixed inset-y-0 left-0 bg-white shadow-2xl slide-in flex flex-col w-full sm:w-4/5 xl:w-2/3">
      <!-- Header -->
      <div class="flex items-center justify-between week-navigation px-6 py-4">
        <h2 class="text-white text-2xl sm:text-3xl font-bold tracking-tight">Mon Agenda</h2>
        <button id="closeAgenda" class="text-white hover:bg-blue-700 rounded-full p-1 transition-colors">
          <span class="material-icons text-2xl">close</span>
        </button>
      </div>
      
      <!-- Week Navigation -->
      <div class="flex items-center justify-between px-4 py-3 bg-blue-800">
        <button id="agenda-prev" class="text-white hover:bg-blue-700 rounded-full p-2 transition-colors">
          <span class="material-icons">chevron_left</span>
        </button>
        <h3 id="agenda-date" class="flex-1 text-center text-white text-lg sm:text-xl font-medium"></h3>
        <button id="agenda-next" class="text-white hover:bg-blue-700 rounded-full p-2 transition-colors">
          <span class="material-icons">chevron_right</span>
        </button>
      </div>
      
      <!-- Agenda Grid -->
      <div id="agenda-scroll" class="relative flex-1 overflow-y-auto bg-gray-100">
        <div id="agenda-grid" class="min-h-full bg-white"></div>
        
        <!-- Add Event Button -->
        <button id="agenda-add" class="fixed bottom-6 right-6 w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center shadow-xl transition-all hover:scale-110">
          <span class="material-icons text-3xl">add</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Event Modal -->
  <div id="agendaEventModal" class="fixed inset-0 z-50 hidden">
    <div class="modal-backdrop"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4 sm:p-6">
      <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden">
        <!-- Modal Header -->
        <div class="bg-blue-600 px-6 py-4">
          <h3 id="agendaModalTitle" class="text-lg font-semibold text-white">Nouvel événement</h3>
        </div>
        
        <!-- Modal Content -->
        <div class="p-6 space-y-5">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Titre</label>
            <input id="agenda-event-title" type="text" class="w-full border-gray-300 rounded-lg px-3 py-2 border focus:ring-blue-500 focus:border-blue-500 transition-all">
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Date</label>
            <input id="agenda-event-date" type="date" class="w-full border-gray-300 rounded-lg px-3 py-2 border focus:ring-blue-500 focus:border-blue-500 transition-all">
          </div>
          
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Début</label>
              <input id="agenda-event-start" type="time" class="w-full border-gray-300 rounded-lg px-3 py-2 border focus:ring-blue-500 focus:border-blue-500 transition-all">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Fin</label>
              <input id="agenda-event-end" type="time" class="w-full border-gray-300 rounded-lg px-3 py-2 border focus:ring-blue-500 focus:border-blue-500 transition-all">
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
            <textarea id="agenda-event-desc" rows="3" class="w-full border-gray-300 rounded-lg px-3 py-2 border focus:ring-blue-500 focus:border-blue-500 transition-all"></textarea>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Couleur</label>
            <div id="agenda-color-picker" class="flex flex-wrap gap-2"></div>
          </div>
        </div>
        
        <!-- Modal Footer -->
        <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
          <button id="cancelAgendaEvent" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors">
            Annuler
          </button>
          <button id="deleteAgendaEvent" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors hidden">
            Supprimer
          </button>
          <button id="saveAgendaEvent" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
            Enregistrer
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    let agendaWeekStart = '';
    let agendaEditingId = null;
    const agendaColors = ['#60a5fa', '#34d399', '#f87171', '#a78bfa', '#fbbf24', '#f472b6', '#38bdf8'];
    let agendaSelectedColor = agendaColors[0];
    
    // Attach initAgenda to the global window object so it is accessible when the
    // sidebar button callback tries to invoke it. This avoids "initAgenda is not
    // defined" errors that can happen if the function is not evaluated in the
    // global scope when the page is embedded inside the Apps Script iframe.
    window.initAgenda = function() {
      const today = new Date();
      agendaWeekStart = formatDateISO(getWeekStart(today));
      buildAgendaGrid();
      updateAgendaDate();
      loadAgenda();
      
      // Event listeners
      document.getElementById('agenda-prev').onclick = () => changeAgendaDate(-1);
      document.getElementById('agenda-next').onclick = () => changeAgendaDate(1);
      document.getElementById('agenda-add').onclick = () => openAgendaModal(false, {
        date: agendaWeekStart,
        start: '08:00',
        end: '09:00'
      });
      document.getElementById('cancelAgendaEvent').onclick = () => document.getElementById('agendaEventModal').classList.add('hidden');
      document.getElementById('saveAgendaEvent').onclick = saveAgendaEvent;
      document.getElementById('deleteAgendaEvent').onclick = deleteAgendaEvent;
      
      // Color picker setup
      const picker = document.getElementById('agenda-color-picker');
      picker.innerHTML = '';
      agendaColors.forEach(c => {
        const s = document.createElement('button');
        s.className = 'w-8 h-8 rounded-full border-2 border-white cursor-pointer shadow hover:scale-110 transition-transform';
        s.style.backgroundColor = c;
        s.dataset.color = c;
        s.title = c;
        s.addEventListener('click', () => {
          agendaSelectedColor = c;
          updateColorPicker();
        });
        picker.appendChild(s);
      });
      updateColorPicker();
    };

    function buildAgendaGrid() {
      const grid = document.getElementById('agenda-grid');
      grid.innerHTML = '';
      const dates = getWeekDates(agendaWeekStart);
      const todayFmt = formatDateISO(new Date());
      
      dates.forEach(d => {
        const col = document.createElement('div');
        col.className = 'border-l border-r border-gray-200 flex flex-col h-full';
        
        // Day header
        const head = document.createElement('div');
        head.className = `day-header sticky top-0 text-center py-2 sm:py-3 border-b border-gray-200 z-10 ${
          d === todayFmt ? 'day-header-today' : ''
        }`;
        
        const dt = new Date(d);
        const dayName = dt.toLocaleDateString('fr-FR', { weekday: 'long' }).substring(0,3).toUpperCase();
        const dayNum = dt.getDate();
        
        head.innerHTML = `
          <div class="text-sm font-medium tracking-wider">${dayName}</div>
          <div class="text-xl font-bold mt-1">${dayNum}</div>
        `;
        col.appendChild(head);
        
        // Day body
        const body = document.createElement('div');
        body.className = 'day-body bg-white flex-1';
        body.dataset.date = d;
        col.appendChild(body);
        
        grid.appendChild(col);
      });
    }

    function updateAgendaDate() {
      const start = new Date(agendaWeekStart);
      const end = new Date(start);
      end.setDate(start.getDate() + 6);
      
      const startStr = start.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' });
      const endStr = end.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
      
      document.getElementById('agenda-date').textContent = `Semaine du ${startStr} au ${endStr}`;
    }

    function changeAgendaDate(delta) {
      const d = new Date(agendaWeekStart);
      d.setDate(d.getDate() + delta * 7);
      agendaWeekStart = formatDateISO(d);
      buildAgendaGrid();
      updateAgendaDate();
      loadAgenda();
    }

    function loadAgenda() {
      const start = agendaWeekStart;
      const end = formatDateISO(addDays(start, 6));
      google.script.run.withSuccessHandler(renderAgenda).getAgendaRange(start, end);
    }

    function renderAgenda(list) {
      if (!Array.isArray(list)) list = [];
      const grid = document.getElementById('agenda-grid');
      if (!grid) return;
      
      grid.querySelectorAll('.agenda-event').forEach(e => e.remove());
      
      // Sort events by start time
      list.sort((a, b) => {
        const timeA = a.start || '00:00';
        const timeB = b.start || '00:00';
        return timeA.localeCompare(timeB);
      });
      
      list.forEach(ev => {
        const container = grid.querySelector(`.day-body[data-date="${ev.date}"]`);
        if (!container) return;
        
        const div = document.createElement('div');
        div.className = 'agenda-event rounded-lg shadow-md p-3 mb-2 text-sm relative overflow-hidden hover:z-10 border border-white/50';
        div.style.backgroundColor = ev.color || agendaColors[0];
        div.style.minHeight = '5rem';
        
        const title = document.createElement('div');
        title.className = 'font-bold mb-1 truncate';
        title.textContent = ev.title || 'Sans titre';
        div.appendChild(title);
        
        const desc = document.createElement('div');
        desc.className = 'text-sm line-clamp-2 mb-4';
        desc.textContent = ev.description || '';
        div.appendChild(desc);
        
        const time = document.createElement('div');
        time.className = 'time-display absolute bottom-2 right-2 text-xs px-2 py-1 rounded';
        time.textContent = `${ev.start} - ${ev.end}`;
        time.style.backgroundColor = `${ev.color || agendaColors[0]}CC`;
        div.appendChild(time);
        
        div.onclick = () => openAgendaModal(true, ev);
        container.appendChild(div);
      });
      
      // Check if today is visible and scroll to it
      const today = formatDateISO(new Date());
      const todayColumn = grid.querySelector(`.day-body[data-date="${today}"]`);
      if (todayColumn) {
        grid.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      }
    }

    function openAgendaModal(isEdit, data) {
      agendaEditingId = isEdit ? data.row : null;
      document.getElementById('agendaModalTitle').textContent = isEdit ? 'Modifier l\'événement' : 'Nouvel événement';
      document.getElementById('agenda-event-title').value = data.title || '';
      document.getElementById('agenda-event-date').value = data.date || agendaWeekStart;
      document.getElementById('agenda-event-start').value = data.start || '08:00';
      document.getElementById('agenda-event-end').value = data.end || '09:00';
      document.getElementById('agenda-event-desc').value = data.description || '';
      agendaSelectedColor = data.color || agendaColors[0];
      updateColorPicker();
      document.getElementById('deleteAgendaEvent').classList.toggle('hidden', !isEdit);
      document.getElementById('agendaEventModal').classList.remove('hidden');
    }

    function saveAgendaEvent() {
      const obj = {
        row: agendaEditingId,
        date: document.getElementById('agenda-event-date').value,
        title: document.getElementById('agenda-event-title').value.trim(),
        start: document.getElementById('agenda-event-start').value,
        end: document.getElementById('agenda-event-end').value,
        description: document.getElementById('agenda-event-desc').value.trim(),
        color: agendaSelectedColor
      };
      
      // Validate required fields
      if (!obj.title) {
        alert('Veuillez entrer un titre pour l\'événement');
        return;
      }
      
      const afterSave = () => {
        document.getElementById('agendaEventModal').classList.add('hidden');
        const start = formatDateISO(getWeekStart(obj.date));
        if (start !== agendaWeekStart) {
          agendaWeekStart = start;
          buildAgendaGrid();
          updateAgendaDate();
        }
        loadAgenda();
      };
      
      const runner = google.script.run.withSuccessHandler(afterSave);
      if (agendaEditingId) runner.updateAgendaItem(obj);
      else runner.createAgendaItem(obj);
    }

    function deleteAgendaEvent() {
      if (!agendaEditingId) return;
      if (!confirm('Voulez-vous vraiment supprimer cet événement ? Cette action est irréversible.')) return;
      google.script.run.withSuccessHandler(() => {
        document.getElementById('agendaEventModal').classList.add('hidden');
        loadAgenda();
      }).deleteAgendaItem(agendaEditingId);
    }

    function updateColorPicker() {
      document.querySelectorAll('#agenda-color-picker button').forEach(s => {
        const active = s.dataset.color === agendaSelectedColor;
        s.classList.toggle('ring-2', active);
        s.classList.toggle('ring-offset-2', active);
        s.classList.toggle('ring-blue-500', active);
        s.classList.toggle('scale-110', active);
      });
    }

    function formatDateISO(d) {
      if (d === undefined || d === null || d === '') return '';
      let dt;
      if (d instanceof Date) {
        dt = d;
      } else if (typeof d === 'number') {
        dt = new Date(Math.round((d - 25569) * 86400000));
      } else {
        dt = new Date(d);
      }
      if (isNaN(dt)) return '';
      const y = dt.getFullYear();
      const m = String(dt.getMonth() + 1).padStart(2, '0');
      const day = String(dt.getDate()).padStart(2, '0');
      return `${y}-${m}-${day}`;
    }

    function getWeekStart(date) {
      const d = new Date(date);
      const day = d.getDay();
      const diff = day === 0 ? -6 : (day === 1 ? 0 : 1 - day);
      d.setDate(d.getDate() + diff);
      d.setHours(0, 0, 0, 0);
      return d;
    }

    function getWeekDates(start) {
      const dates = [];
      const d = new Date(start);
      // Lundi (0) à Dimanche (+6)
      for (let i = 0; i < 7; i++) {
        dates.push(formatDateISO(addDays(d, i)));
      }
      return dates;
    }

    function addDays(date, n) {
      const d = new Date(date);
      d.setDate(d.getDate() + n);
      return d;
    }

    // Setup open/close handlers when the sidebar button is clicked
    (function() {
      const openBtn = document.getElementById('sidebar-agenda');
      if (openBtn) {
        openBtn.addEventListener('click', () => {
          activateSidebarButton('sidebar-agenda');
          if (typeof window.initAgenda === 'function') window.initAgenda();
          document.getElementById('agendaPanel').classList.remove('hidden');
        });
      }
      
      document.getElementById('closeAgenda').addEventListener('click', () => {
        document.getElementById('agendaPanel').classList.add('hidden');
      });
      
      document.getElementById('agendaPanel').addEventListener('click', e => {
        if (e.target.id === 'agendaPanel') e.target.classList.add('hidden');
      });
    })();
  </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gtkh/agenda" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>