Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
P
Pqooxdoo1
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
DJEBBAB Adem
Pqooxdoo1
Commits
3b4f8bf8
Commit
3b4f8bf8
authored
4 months ago
by
e3315u
Browse files
Options
Downloads
Patches
Plain Diff
ajout du tableau
parent
28bb7d1a
No related branches found
No related tags found
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
source/class/Pqooxdoo/Application.js
+77
-70
77 additions, 70 deletions
source/class/Pqooxdoo/Application.js
with
77 additions
and
70 deletions
source/class/Pqooxdoo/Application.js
+
77
−
70
View file @
3b4f8bf8
...
...
@@ -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
:
3
00
width
:
4
00
});
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
imgW
eather
=
new
qx
.
ui
.
basic
.
Image
().
set
({
let
w
eather
Icon
=
new
qx
.
ui
.
basic
.
Image
().
set
({
source
:
`https://openweathermap.org/img/wn/
${
data
.
weather
[
0
].
icon
}
@2x.png`
,
scale
:
true
,
width
:
5
0
,
height
:
5
0
width
:
6
0
,
height
:
6
0
});
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
(
imgW
eather
);
dayBox
.
add
(
w
eather
Icon
);
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
();
}
}
});
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment