Second commit

source/class/Pqooxdoo/Application.js

-/* ************************************************************************
+qx.Class.define("Pqooxdoo.Application", {
+  extend: qx.application.Standalone,
 
-   Copyright: 2025 
+  members: {
+    main() {
+      super.main();
+      
+      let root = this.getRoot();
+      root.setBackgroundColor("#87CEEB");
+
+      // Conteneur principal avec mise en page en HBox pour aligner la recherche et la météo
+      let container = new qx.ui.container.Composite(new qx.ui.layout.HBox(20)).set({
+        padding: 20,
+        width: 900,
+        height: 600
+      });
+
+      // Conteneur de la recherche à gauche
+      let searchContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
+        width: 300,
+        padding: 10
+      });
 
-   License: MIT license
+      let title = new qx.ui.basic.Label("Application Météo").set({
+        font: new qx.bom.Font(24, ["Arial", "sans-serif"]).set({ bold: true }),
+        textColor: "#FFFFFF"
+      });
 
-   Authors: 
+      let dateLabel = new qx.ui.basic.Label(this._getFormattedDate()).set({
+        font: new qx.bom.Font(18, ["Arial", "sans-serif"]),
+        textColor: "#FFFFFF"
+      });
 
-************************************************************************ */
+      let txtVille = new qx.ui.form.TextField().set({ placeholder: "Entrez une ville", width: 200 });
+      let btnAfficher = new qx.ui.form.Button("Obtenir la météo");
 
-/**
- * This is the main application class of "Pqooxdoo"
- *
- * @asset(Pqooxdoo/*)
- */
-qx.Class.define("Pqooxdoo.Application",
-{
-  extend : qx.application.Standalone,
+      searchContainer.add(title);
+      searchContainer.add(dateLabel);
+      searchContainer.add(txtVille);
+      searchContainer.add(btnAfficher);
 
+      // Conteneur pour la météo du jour à gauche
+      let weatherContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
+        padding: 10,
+        width: 300
+      });
 
+      let imgWeather = new qx.ui.basic.Image().set({ scale: true, width: 150, height: 150 });
+      let lblResultat = new qx.ui.basic.Label("Veuillez entrer une ville").set({
+        font: new qx.bom.Font(18, ["Arial", "sans-serif"]),
+        textColor: "#FFFFFF"
+      });
 
-  /*
-  *****************************************************************************
-     MEMBERS
-  *****************************************************************************
-  */
+      let lblTempMinMax = new qx.ui.basic.Label("");
+      let lblHumidity = new qx.ui.basic.Label("");
+      let lblWind = new qx.ui.basic.Label("");
+      let lblPressure = new qx.ui.basic.Label("");
 
-  members :
-  {
-    /**
-     * This method contains the initial application code and gets called
-     * during startup of the application
-     *
-     * @lint ignoreDeprecated(alert)
-     */
-    main()
-    {
-      // Call super class
-      super.main();
+      weatherContainer.add(lblResultat);
+      weatherContainer.add(imgWeather);
+      weatherContainer.add(lblTempMinMax);
+      weatherContainer.add(lblHumidity);
+      weatherContainer.add(lblWind);
+      weatherContainer.add(lblPressure);
 
-      // Enable logging in debug variant
-      if (qx.core.Environment.get("qx.debug"))
-      {
-        // support native logging capabilities, e.g. Firebug for Firefox
-        qx.log.appender.Native;
-        // support additional cross-browser console. Press F7 to toggle visibility
-        qx.log.appender.Console;
-      }
-
-      /*
-      -------------------------------------------------------------------------
-        Below is your actual application code...
-      -------------------------------------------------------------------------
-      */
-
-      // Create a button
-      const button1 = new qx.ui.form.Button("Click me", "Pqooxdoo/test.png");
-
-      // Document is the application root
-      const doc = this.getRoot();
-
-      // Add button to document at fixed coordinates
-      doc.add(button1, {left: 100, top: 50});
-
-      // Add an event listener
-      button1.addListener("execute", function() {
-        /* eslint no-alert: "off" */
-        alert("Hello World!");
+      // Ajouter les conteneurs dans le container principal
+      container.add(searchContainer);
+      container.add(weatherContainer);
+
+      // Tableau horizontal pour les 5 prochains jours (ajouté en bas)
+      let daysContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(20)).set({
+        alignX: "center",
+        marginTop: 30,
+        width: 900
+      });
+
+      container.add(daysContainer); // Ajoute le tableau sous la météo actuelle
+
+      let doc = this.getRoot();
+      doc.add(container, { edge: 0 });
+
+      btnAfficher.addListener("execute", () => {
+        let ville = txtVille.getValue();
+        if (ville) {
+          this._fetchWeatherData(ville, lblResultat, imgWeather, lblHumidity, lblWind, lblPressure, lblTempMinMax, daysContainer);
+        } else {
+          lblResultat.setValue("Veuillez entrer une ville");
+        }
       });
+    },
+
+    _getFormattedDate(dayOffset = 0) {
+      let today = new Date();
+      today.setDate(today.getDate() + dayOffset);  // Ajuste la date selon le jour actuel ou le jour demandé
+      return today.toLocaleDateString("fr-FR", {
+        weekday: "long",  // Jour de la semaine
+        year: "numeric",  // Année
+        month: "long",    // Mois
+        day: "numeric"    // Jour du mois
+      });
+    },
+
+    _fetchWeatherData(ville, lblResultat, imgWeather, lblHumidity, lblWind, lblPressure, lblTempMinMax, daysContainer) {
+      let apiKey = "49862134e34fcce7bb7435c5d6ef0265";
+      let url = `https://api.openweathermap.org/data/2.5/forecast?q=${ville}&appid=${apiKey}&units=metric&lang=fr`;
+      
+      let req = new qx.io.request.Xhr(url);
+      req.addListener("success", function(e) {
+        let response = e.getTarget().getResponse();
+        
+        // Prend la première entrée de la liste pour afficher la météo du jour
+        let todayData = response.list[0]; // Première entrée pour la météo actuelle
+        
+        // Affichage des informations du jour
+        let description = todayData.weather[0].description;
+        let temperature = todayData.main.temp;
+        let tempMin = todayData.main.temp_min;
+        let tempMax = todayData.main.temp_max;
+        let icon = todayData.weather[0].icon;
+        let humidity = todayData.main.humidity;
+        let windSpeed = todayData.wind.speed;
+        let pressure = todayData.main.pressure;
+
+        lblResultat.setValue(`Météo de ${ville} : ${description}, ${temperature}°C`);
+        lblTempMinMax.setValue(`Min: ${tempMin}°C / Max: ${tempMax}°C`);
+        imgWeather.setSource(`https://openweathermap.org/img/wn/${icon}@2x.png`);
+        lblHumidity.setValue(`Humidité : ${humidity}%`);
+        lblWind.setValue(`Vitesse du vent : ${windSpeed} m/s`);
+        lblPressure.setValue(`Pression : ${pressure} hPa`);
+        
+        // Récupère les données pour les 5 prochains jours
+        let forecastData = response.list.filter((data, index) => index % 8 === 0);  // Filtre pour prendre 1 entrée toutes les 8 heures
+        
+        // Efface le tableau des jours précédents
+        daysContainer.removeAll();
+        
+        forecastData.slice(0, 5).forEach((data) => {
+          // Crée un conteneur pour chaque jour
+          let dayBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({
+            alignX: "center",
+           
+          });
+
+          let date = new Date(data.dt * 1000);  // Convertir le timestamp
+          let dateLabel = new qx.ui.basic.Label(this._getFormattedDate(date)).set({
+            font: new qx.bom.Font(16, ["Arial", "sans-serif"]),
+            textColor: "#FFFFFF"
+          });
+          
+          let imgWeather = new qx.ui.basic.Image().set({
+            source: `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`,
+            scale: true,
+            width: 50,
+            height: 50
+          });
+          
+          let tempLabel = new qx.ui.basic.Label(`${data.main.temp}°C`).set({
+            font: new qx.bom.Font(14, ["Arial", "sans-serif"]),
+            textColor: "#FFFFFF"
+          });
+          
+          dayBox.add(dateLabel);
+          dayBox.add(imgWeather);
+          dayBox.add(tempLabel);
+          
+          daysContainer.add(dayBox);
+        });
+      }, this);
+      
+      req.addListener("fail", function() {
+        lblResultat.setValue("Impossible de récupérer la météo");
+      }, this);
+      
+      req.send();
     }
   }
 });