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
f2b74c1b
Commit
f2b74c1b
authored
4 months ago
by
e3315u
Browse files
Options
Downloads
Patches
Plain Diff
historique et background
parent
3b4f8bf8
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
+169
-4
169 additions, 4 deletions
source/class/Pqooxdoo/Application.js
with
169 additions
and
4 deletions
source/class/Pqooxdoo/Application.js
+
169
−
4
View file @
f2b74c1b
...
...
@@ -6,7 +6,7 @@ qx.Class.define("Pqooxdoo.Application", {
super
.
main
();
let
root
=
this
.
getRoot
();
root
.
setBackgroundColor
(
"
#87CEEB
"
);
root
.
setBackgroundColor
(
"
#87CEEB
"
);
// Couleur de fond par défaut
let
container
=
new
qx
.
ui
.
container
.
Composite
(
new
qx
.
ui
.
layout
.
VBox
(
10
)).
set
({
padding
:
20
,
...
...
@@ -36,10 +36,28 @@ qx.Class.define("Pqooxdoo.Application", {
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
"
);
// Historique de recherche
let
historyContainer
=
new
qx
.
ui
.
container
.
Composite
(
new
qx
.
ui
.
layout
.
VBox
(
5
)).
set
({
padding
:
10
,
width
:
200
});
let
historyLabel
=
new
qx
.
ui
.
basic
.
Label
(
"
Historique de recherche
"
).
set
({
font
:
new
qx
.
bom
.
Font
(
14
,
[
"
Arial
"
,
"
sans-serif
"
]),
textColor
:
"
#FFFFFF
"
,
visibility
:
"
hidden
"
// Masqué par défaut
});
let
historyComboBox
=
new
qx
.
ui
.
form
.
ComboBox
().
set
({
width
:
200
,
visibility
:
"
hidden
"
});
// Masqué par défaut
historyContainer
.
add
(
historyLabel
);
historyContainer
.
add
(
historyComboBox
);
searchContainer
.
add
(
title
);
searchContainer
.
add
(
dateLabel
);
searchContainer
.
add
(
txtVille
);
searchContainer
.
add
(
btnAfficher
);
searchContainer
.
add
(
historyContainer
);
let
weatherContainer
=
new
qx
.
ui
.
container
.
Composite
(
new
qx
.
ui
.
layout
.
VBox
(
10
)).
set
({
padding
:
10
,
...
...
@@ -96,14 +114,36 @@ qx.Class.define("Pqooxdoo.Application", {
let
doc
=
this
.
getRoot
();
doc
.
add
(
container
,
{
edge
:
0
});
let
searchHistory
=
[];
btnAfficher
.
addListener
(
"
execute
"
,
()
=>
{
let
ville
=
txtVille
.
getValue
();
if
(
ville
)
{
this
.
_fetchWeatherData
(
ville
,
lblResultat
,
lblResultat1
,
imgWeather
,
lblHumidity
,
lblWind
,
lblPressure
,
lblTempMinMax
,
daysContainer
);
if
(
!
searchHistory
.
includes
(
ville
))
{
searchHistory
.
push
(
ville
);
historyComboBox
.
add
(
new
qx
.
ui
.
form
.
ListItem
(
ville
));
}
// Afficher l'historique après la première recherche
if
(
historyComboBox
.
getVisibility
()
===
"
hidden
"
)
{
historyLabel
.
setVisibility
(
"
visible
"
);
historyComboBox
.
setVisibility
(
"
visible
"
);
}
}
else
{
lblResultat
.
setValue
(
"
Veuillez entrer une ville
"
);
}
});
historyComboBox
.
addListener
(
"
changeSelection
"
,
(
e
)
=>
{
let
selectedItem
=
e
.
getData
()[
0
];
if
(
selectedItem
)
{
txtVille
.
setValue
(
selectedItem
.
getLabel
());
this
.
_fetchWeatherData
(
selectedItem
.
getLabel
(),
lblResultat
,
lblResultat1
,
imgWeather
,
lblHumidity
,
lblWind
,
lblPressure
,
lblTempMinMax
,
daysContainer
);
}
});
this
.
_getLocationAndFetchWeather
(
lblResultat
,
lblResultat1
,
imgWeather
,
lblHumidity
,
lblWind
,
lblPressure
,
lblTempMinMax
,
daysContainer
);
},
_getFormattedDate
(
dayOffset
=
0
)
{
...
...
@@ -130,6 +170,12 @@ qx.Class.define("Pqooxdoo.Application", {
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`
);
// Changer la couleur du fond en fonction de la météo
this
.
_setBackgroundColorBasedOnWeather
(
response
.
weather
[
0
].
main
);
},
this
);
req
.
addListener
(
"
error
"
,
function
(
e
)
{
lblResultat
.
setValue
(
"
Erreur lors de la récupération des données
"
);
},
this
);
req
.
send
();
...
...
@@ -163,8 +209,8 @@ qx.Class.define("Pqooxdoo.Application", {
let
weatherIcon
=
new
qx
.
ui
.
basic
.
Image
().
set
({
source
:
`https://openweathermap.org/img/wn/
${
data
.
weather
[
0
].
icon
}
@2x.png`
,
scale
:
true
,
width
:
6
0
,
height
:
6
0
width
:
7
0
,
height
:
7
0
});
let
tempLabel
=
new
qx
.
ui
.
basic
.
Label
(
`
${
data
.
main
.
temp
}
°C`
).
set
({
...
...
@@ -178,7 +224,126 @@ qx.Class.define("Pqooxdoo.Application", {
daysContainer
.
add
(
dayBox
);
});
},
this
);
forecastReq
.
addListener
(
"
error
"
,
function
(
e
)
{
lblResultat
.
setValue
(
"
Erreur lors de la récupération des prévisions
"
);
},
this
);
forecastReq
.
send
();
},
_setBackgroundColorBasedOnWeather
(
weatherCondition
)
{
let
root
=
this
.
getRoot
();
let
backgroundColor
=
""
;
switch
(
weatherCondition
)
{
case
"
Clear
"
:
backgroundColor
=
"
#87CEEB
"
;
// Bleu clair pour le soleil
break
;
case
"
Clouds
"
:
backgroundColor
=
"
#778899
"
;
// Gris pour les nuages
break
;
case
"
Rain
"
:
backgroundColor
=
"
#4682B4
"
;
// Bleu plus sombre pour la pluie
break
;
case
"
Snow
"
:
backgroundColor
=
"
#F0F8FF
"
;
// Blanc pour la neige
break
;
case
"
Thunderstorm
"
:
backgroundColor
=
"
#2F4F4F
"
;
// Gris foncé pour l'orage
break
;
default
:
backgroundColor
=
"
#87CEEB
"
;
// Par défaut, bleu clair
}
root
.
setBackgroundColor
(
backgroundColor
);
},
_getLocationAndFetchWeather
(
lblResultat
,
lblResultat1
,
imgWeather
,
lblHumidity
,
lblWind
,
lblPressure
,
lblTempMinMax
,
daysContainer
)
{
if
(
navigator
.
geolocation
)
{
navigator
.
geolocation
.
getCurrentPosition
((
position
)
=>
{
let
lat
=
position
.
coords
.
latitude
;
let
lon
=
position
.
coords
.
longitude
;
this
.
_fetchWeatherByCoords
(
lat
,
lon
,
lblResultat
,
lblResultat1
,
imgWeather
,
lblHumidity
,
lblWind
,
lblPressure
,
lblTempMinMax
,
daysContainer
);
},
(
error
)
=>
{
lblResultat
.
setValue
(
"
Impossible de récupérer la localisation
"
);
});
}
else
{
lblResultat
.
setValue
(
"
La géolocalisation n'est pas supportée par ce navigateur
"
);
}
},
_fetchWeatherByCoords
(
lat
,
lon
,
lblResultat
,
lblResultat1
,
imgWeather
,
lblHumidity
,
lblWind
,
lblPressure
,
lblTempMinMax
,
daysContainer
)
{
let
apiKey
=
"
49862134e34fcce7bb7435c5d6ef0265
"
;
let
url
=
`https://api.openweathermap.org/data/2.5/weather?lat=
${
lat
}
&lon=
${
lon
}
&appid=
${
apiKey
}
&units=metric&lang=fr`
;
let
forecastUrl
=
`https://api.openweathermap.org/data/2.5/forecast?lat=
${
lat
}
&lon=
${
lon
}
&appid=
${
apiKey
}
&units=metric&lang=fr`
;
let
req
=
new
qx
.
io
.
request
.
Xhr
(
url
);
req
.
addListener
(
"
success
"
,
function
(
e
)
{
let
response
=
e
.
getTarget
().
getResponse
();
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`
);
// Changer la couleur du fond en fonction de la météo
this
.
_setBackgroundColorBasedOnWeather
(
response
.
weather
[
0
].
main
);
},
this
);
req
.
addListener
(
"
error
"
,
function
(
e
)
{
lblResultat
.
setValue
(
"
Erreur lors de la récupération des données
"
);
},
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
,
index
)
=>
{
let
dayBox
=
new
qx
.
ui
.
container
.
Composite
(
new
qx
.
ui
.
layout
.
VBox
(
5
)).
set
({
alignX
:
"
center
"
,
width
:
130
,
height
:
160
,
backgroundColor
:
"
#ADD8E6
"
});
let
dateLabel
=
new
qx
.
ui
.
basic
.
Label
(
this
.
_getFormattedDate
(
index
+
1
)).
set
({
font
:
new
qx
.
bom
.
Font
(
16
,
[
"
Arial
"
,
"
sans-serif
"
]),
textColor
:
"
#FFFFFF
"
});
let
weatherIcon
=
new
qx
.
ui
.
basic
.
Image
().
set
({
source
:
`https://openweathermap.org/img/wn/
${
data
.
weather
[
0
].
icon
}
@2x.png`
,
scale
:
true
,
width
:
70
,
height
:
70
});
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
(
weatherIcon
);
dayBox
.
add
(
tempLabel
);
daysContainer
.
add
(
dayBox
);
});
},
this
);
forecastReq
.
addListener
(
"
error
"
,
function
(
e
)
{
lblResultat
.
setValue
(
"
Erreur lors de la récupération des prévisions
"
);
},
this
);
forecastReq
.
send
();
}
}
});
});
\ No newline at end of file
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