From 28bb7d1aa9f3284e9c80f7dddbdb049eb648cf4b Mon Sep 17 00:00:00 2001 From: e3315u <e3315u@etu.univ-lorraine.fr> Date: Fri, 21 Feb 2025 20:47:35 +0100 Subject: [PATCH] Second commit --- source/class/Pqooxdoo/Application.js | 221 ++++++++++++++++++++------- testGit.txt | 0 2 files changed, 163 insertions(+), 58 deletions(-) delete mode 100644 testGit.txt diff --git a/source/class/Pqooxdoo/Application.js b/source/class/Pqooxdoo/Application.js index fe0be43..0b2d41b 100644 --- a/source/class/Pqooxdoo/Application.js +++ b/source/class/Pqooxdoo/Application.js @@ -1,72 +1,177 @@ -/* ************************************************************************ +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(); } } }); diff --git a/testGit.txt b/testGit.txt deleted file mode 100644 index e69de29..0000000 -- GitLab