Skip to content
Snippets Groups Projects
Commit 3b4f8bf8 authored by e3315u's avatar e3315u
Browse files

ajout du tableau

parent 28bb7d1a
No related branches found
No related tags found
No related merge requests found
......@@ -4,18 +4,20 @@ qx.Class.define("Pqooxdoo.Application", {
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({
let container = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
padding: 20,
width: 900,
height: 600
});
// Conteneur de la recherche à gauche
let topContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(20)).set({
width: 900
});
let searchContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
width: 300,
padding: 10
......@@ -39,10 +41,9 @@ qx.Class.define("Pqooxdoo.Application", {
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
width: 400
});
let imgWeather = new qx.ui.basic.Image().set({ scale: true, width: 150, height: 150 });
......@@ -50,31 +51,47 @@ qx.Class.define("Pqooxdoo.Application", {
font: new qx.bom.Font(18, ["Arial", "sans-serif"]),
textColor: "#FFFFFF"
});
let lblResultat1 = new qx.ui.basic.Label("").set({
font: new qx.bom.Font(18, ["Arial", "sans-serif"]),
textColor: "#FFFFFF"
});
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("");
weatherContainer.add(lblResultat);
weatherContainer.add(lblResultat1);
weatherContainer.add(imgWeather);
weatherContainer.add(lblTempMinMax);
weatherContainer.add(lblHumidity);
weatherContainer.add(lblWind);
weatherContainer.add(lblPressure);
// Ajouter les conteneurs dans le container principal
container.add(searchContainer);
container.add(weatherContainer);
topContainer.add(searchContainer);
topContainer.add(weatherContainer);
let forecastContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
alignX: "left",
width: 900
});
let previsionLabel = new qx.ui.basic.Label("Prévision des 5 prochains jours").set({
font: new qx.bom.Font(16, ["Arial", "sans-serif"]).set({ bold: true }),
textColor: "#FFFFFF",
marginBottom: 10
});
// 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,
let daysContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({
alignX: "left",
width: 900
});
container.add(daysContainer); // Ajoute le tableau sous la météo actuelle
forecastContainer.add(previsionLabel);
forecastContainer.add(daysContainer);
container.add(topContainer);
container.add(forecastContainer);
let doc = this.getRoot();
doc.add(container, { edge: 0 });
......@@ -82,7 +99,7 @@ qx.Class.define("Pqooxdoo.Application", {
btnAfficher.addListener("execute", () => {
let ville = txtVille.getValue();
if (ville) {
this._fetchWeatherData(ville, lblResultat, imgWeather, lblHumidity, lblWind, lblPressure, lblTempMinMax, daysContainer);
this._fetchWeatherData(ville, lblResultat, lblResultat1, imgWeather, lblHumidity, lblWind, lblPressure, lblTempMinMax, daysContainer);
} else {
lblResultat.setValue("Veuillez entrer une ville");
}
......@@ -91,87 +108,77 @@ qx.Class.define("Pqooxdoo.Application", {
_getFormattedDate(dayOffset = 0) {
let today = new Date();
today.setDate(today.getDate() + dayOffset); // Ajuste la date selon le jour actuel ou le jour demandé
today.setDate(today.getDate() + dayOffset);
return today.toLocaleDateString("fr-FR", {
weekday: "long", // Jour de la semaine
year: "numeric", // Année
month: "long", // Mois
day: "numeric" // Jour du mois
weekday: "long",
day: "numeric"
});
},
_fetchWeatherData(ville, lblResultat, imgWeather, lblHumidity, lblWind, lblPressure, lblTempMinMax, daysContainer) {
_fetchWeatherData(ville, lblResultat, lblResultat1, 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 url = `https://api.openweathermap.org/data/2.5/weather?q=${ville}&appid=${apiKey}&units=metric&lang=fr`;
let forecastUrl = `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) {
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
lblResultat.setValue(`${response.name}, ${response.sys.country}`);
lblResultat1.setValue(`${response.weather[0].description}`);
lblTempMinMax.setValue(`Temp: ${response.main.temp}°C (min: ${response.main.temp_min}°C, max: ${response.main.temp_max}°C)`);
lblHumidity.setValue(`Humidité: ${response.main.humidity}%`);
lblWind.setValue(`Vent: ${response.wind.speed} m/s`);
lblPressure.setValue(`Pression: ${response.main.pressure} hPa`);
imgWeather.setSource(`https://openweathermap.org/img/wn/${response.weather[0].icon}@2x.png`);
}, this);
req.send();
let forecastReq = new qx.io.request.Xhr(forecastUrl);
forecastReq.addListener("success", function (e) {
let response = e.getTarget().getResponse();
let uniqueDays = {};
let forecastData = response.list.filter(data => {
let date = new Date(data.dt * 1000).getDate();
if (!uniqueDays[date]) {
uniqueDays[date] = true;
return true;
}
return false;
});
daysContainer.removeAll();
forecastData.slice(0, 5).forEach((data) => {
// Crée un conteneur pour chaque jour
forecastData.slice(0, 5).forEach((data, index) => {
let dayBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({
alignX: "center",
width: 130,
height: 160,
backgroundColor: "#ADD8E6"
});
let date = new Date(data.dt * 1000); // Convertir le timestamp
let dateLabel = new qx.ui.basic.Label(this._getFormattedDate(date)).set({
let dateLabel = new qx.ui.basic.Label(this._getFormattedDate(index + 1)).set({
font: new qx.bom.Font(16, ["Arial", "sans-serif"]),
textColor: "#FFFFFF"
});
let imgWeather = new qx.ui.basic.Image().set({
let weatherIcon = new qx.ui.basic.Image().set({
source: `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`,
scale: true,
width: 50,
height: 50
width: 60,
height: 60
});
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(weatherIcon);
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();
forecastReq.send();
}
}
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment