JSFiddle - React, Tailwind, and code Playground

by Yahiko

HTML

<h1>Horaires de Départ des Trains</h1>

    <!-- Sélecteur pour gare SNCF -->
    <label for="garesSncf">Choisir la gare de départ :</label>
    <select name="garesSncf" id="garesSncf">
      <option value="87757724">Grasse</option>
      <option value="87756403">Monaco</option>
    </select>

    <!-- Sélecteur pour la date et l'heure -->
    <label for="dateHeure">Choisir la date et l'heure :</label>
    <input type="datetime-local" id="dateHeure" value="2024-03-04T18:00" />

    <input type="button" value="Rechercher" id="searchDepartures" />

    <!-- Zone d'affichage de la météo -->
    <div id="meteo">
        <!-- La météo à l'endroit et au moment choisis seroa affiché ici -->
    </div>

    <!-- Zone d'affichage des horaires de départ -->
    <div id="horairesDepart">
        <!-- Les horaires de départ des trains seront affichés ici -->
    </div>

    <!-- Script JavaScript pour simuler les données fictives -->
    <script>
        // Fonction pour afficher des horaires de départ de trains fictifs
        function afficherHorairesFictifs() {
            const horairesDepart = document.getElementById('horairesDepart');

            // Données fictives des horaires de départ des trains
            const horairesFictifs = [
                { heureDepart: '08:00', destination: 'Paris', heureDepartEst: '10:30', retard: 'Aucun', meteo: 'Ensoleillé' },
                { heureDepart: '09:15', destination: 'Lyon', heureDepartEst: '12:00', retard: '20 minutes', meteo: 'Nuageux' },
                { heureDepart: '11:30', destination: 'Marseille', heureDepartEst: '14:45', retard: 'Aucun', meteo: 'Pluvieux' }
            ];

            // Construire le HTML pour afficher les horaires de départ
            let html = '<h2>Horaires de Départ</h2>';
            html += '<table border="1">';
            html += '<tr><th>Heure de départ</th><th>Destination</th><th>Heure d\'arrivée</th><th>Retard</th><th>Météo</th></tr>';
            
            // Boucle à travers les...

JavaScript

// Calcule la différence en minute entre deux Date
const diffMinutes = (datetime2, datetime1) => {
  const diff = (datetime2.getTime() - datetime1.getTime()) / 1000 / 60;
  return Math.abs(Math.round(diff));
};

// Extrait l'heure (HH:MM) d'un timestamp
const extractTime = (timestamp) => {
  const myTime = timestamp.substring(9, 13);
  return myTime.substring(0, 2) + ':' + myTime.substring(2, 4);
};

const getDepartures = (station_departure, direction, datetime) => {
  const username = '55846ba9-88ec-454f-a053-621b8c6413c6';
  const password = '';

  const url = `https://api.sncf.com/v1/coverage/sncf/stop_areas/stop_area%3ASNCF%3A${station_departure}/departures?from_datetime=${datetime}&count=10&data_freshness=realtime`;

  // Encodage des identifiants en base64
  const base64Credentials = btoa(`${username}:${password}`);

  // Options de la requête
  const requestOptions = {
    method: 'GET',
    headers: {
      'Authorization': `Basic ${base64Credentials}`,
      'Content-Type': 'application/json'
    }
  };

  // Effectuer la requête
  const result = fetch(url, requestOptions)
    .then(response => {
      if (!response.ok) {
        throw new Error('Erreur lors de la requête HTTPS.');
      }
      return response.json();
    })
    .then(data => {
      let filterDirection = null;
      if (direction === '') {
        filterDirection = item => true;
      } else {
        filterDirection = item => item.display_informations.direction === direction;
      }

			// Traitement des données reçues
      const result = data.departures.filter(filterDirection).map(item => {
      	//const base_departure_date_time = newDate(item.stop_date_time.base_departure_date_time);
      	//const departure_date_time = newDate(item.stop_date_time.departure_date_time);
        return {
          direction: item.display_informations.direction,
          base_departure_time: extractTime(item.stop_date_time.base_departure_date_time),
          departure_time:...