1- import { Component , Input } from '@angular/core' ;
2- import { CommonModule } from '@angular/common' ;
1+ import { ChangeDetectionStrategy , Component , computed , input } from '@angular/core' ;
32import { WeatherData } from '../types/weather.types' ;
43import { WeatherUtils } from '../utils/weather.utils' ;
54
65@Component ( {
76 selector : 'app-current-weather' ,
87 standalone : true ,
9- imports : [ CommonModule ] ,
8+ imports : [ ] ,
9+ changeDetection : ChangeDetectionStrategy . OnPush ,
1010 template : `
11- <section class="current-section" *ngIf="weatherData">
11+ @if (weatherData(); as weatherData) {
12+ <section class="current-section">
1213 <h2 class="section-title">Current Weather</h2>
1314 <div class="weather-card" data-testid="current-weather">
1415 <div class="current-weather">
1516 <h3 class="current-weather__location" data-testid="current-location">
16- {{ weatherData.locationName }}{{ weatherData.country ? ', ' + weatherData.country : '' }}
17+ {{ locationLabel() }}
1718 </h3>
1819 <div class="current-weather__main">
1920 <div class="current-weather__icon" data-testid="current-icon">
20- {{ getWeatherIcon(weatherData.current.weather_code, weatherData.current.is_day ) }}
21+ {{ weatherIcon( ) }}
2122 </div>
2223 <div class="current-weather__temp-group">
2324 <div class="current-weather__temp" data-testid="current-temperature">
24- {{ formatTemperature(weatherData.current.temperature_2m ) }}
25+ {{ currentTemperature( ) }}
2526 </div>
2627 <div
27- class="current-weather__condition {{ getConditionClass(weatherData.current.weather_code ) }}"
28+ class="current-weather__condition {{ conditionClass( ) }}"
2829 data-testid="current-condition"
2930 >
30- {{ getWeatherDescription(weatherData.current.weather_code ) }}
31+ {{ weatherDescription( ) }}
3132 </div>
3233 </div>
3334 </div>
@@ -36,54 +37,107 @@ import { WeatherUtils } from '../utils/weather.utils';
3637 <div class="weather-detail">
3738 <div class="weather-detail__label">Feels like</div>
3839 <div class="weather-detail__value" data-testid="feels-like">
39- {{ formatTemperature(weatherData.current.apparent_temperature ) }}
40+ {{ apparentTemperature( ) }}
4041 </div>
4142 </div>
4243 <div class="weather-detail">
4344 <div class="weather-detail__label">Humidity</div>
4445 <div class="weather-detail__value" data-testid="humidity">
45- {{ formatPercentage(weatherData.current.relative_humidity_2m ) }}
46+ {{ humidity( ) }}
4647 </div>
4748 </div>
4849 <div class="weather-detail">
4950 <div class="weather-detail__label">Wind Speed</div>
5051 <div class="weather-detail__value" data-testid="wind-speed">
51- {{ formatWindSpeed(weatherData.current.wind_speed_10m ) }}
52+ {{ windSpeed( ) }}
5253 </div>
5354 </div>
5455 <div class="weather-detail">
5556 <div class="weather-detail__label">Pressure</div>
5657 <div class="weather-detail__value" data-testid="pressure">
57- {{ formatPressure(weatherData.current.pressure_msl ) }}
58+ {{ pressure( ) }}
5859 </div>
5960 </div>
6061 <div class="weather-detail">
6162 <div class="weather-detail__label">Cloud Cover</div>
6263 <div class="weather-detail__value" data-testid="cloud-cover">
63- {{ formatPercentage(weatherData.current.cloud_cover ) }}
64+ {{ cloudCover( ) }}
6465 </div>
6566 </div>
6667 <div class="weather-detail">
6768 <div class="weather-detail__label">Wind Direction</div>
6869 <div class="weather-detail__value" data-testid="wind-direction">
69- {{ getWindDirection(weatherData.current.wind_direction_10m ) }}
70+ {{ windDirection( ) }}
7071 </div>
7172 </div>
7273 </div>
7374 </div>
7475 </div>
75- </section>
76+ </section>
77+ }
7678 `
7779} )
7880export class CurrentWeatherComponent {
79- @ Input ( ) weatherData : WeatherData | null = null ;
81+ readonly weatherData = input < WeatherData | null > ( null ) ;
8082
81- formatTemperature = WeatherUtils . formatTemperature ;
82- formatPercentage = WeatherUtils . formatPercentage ;
83- formatWindSpeed = WeatherUtils . formatWindSpeed ;
84- formatPressure = WeatherUtils . formatPressure ;
85- getWindDirection = WeatherUtils . getWindDirection ;
86- getWeatherDescription = WeatherUtils . getWeatherDescription ;
87- getWeatherIcon = WeatherUtils . getWeatherIcon ;
88- getConditionClass = WeatherUtils . getConditionClass ;
83+ readonly locationLabel = computed ( ( ) => {
84+ const weatherData = this . weatherData ( ) ;
85+ if ( ! weatherData ) {
86+ return '' ;
87+ }
88+
89+ return weatherData . country
90+ ? `${ weatherData . locationName } ${ weatherData . country }
91+ : ( weatherData . locationName ?? '' ) ;
92+ } ) ;
93+
94+ readonly weatherIcon = computed ( ( ) => {
95+ const current = this . weatherData ( ) ?. current ;
96+ return current ? WeatherUtils . getWeatherIcon ( current . weather_code , current . is_day ) : '' ;
97+ } ) ;
98+
99+ readonly currentTemperature = computed ( ( ) => {
100+ const current = this . weatherData ( ) ?. current ;
101+ return current ? WeatherUtils . formatTemperature ( current . temperature_2m ) : '' ;
102+ } ) ;
103+
104+ readonly conditionClass = computed ( ( ) => {
105+ const current = this . weatherData ( ) ?. current ;
106+ return current ? WeatherUtils . getConditionClass ( current . weather_code ) : '' ;
107+ } ) ;
108+
109+ readonly weatherDescription = computed ( ( ) => {
110+ const current = this . weatherData ( ) ?. current ;
111+ return current ? WeatherUtils . getWeatherDescription ( current . weather_code ) : '' ;
112+ } ) ;
113+
114+ readonly apparentTemperature = computed ( ( ) => {
115+ const current = this . weatherData ( ) ?. current ;
116+ return current ? WeatherUtils . formatTemperature ( current . apparent_temperature ) : '' ;
117+ } ) ;
118+
119+ readonly humidity = computed ( ( ) => {
120+ const current = this . weatherData ( ) ?. current ;
121+ return current ? WeatherUtils . formatPercentage ( current . relative_humidity_2m ) : '' ;
122+ } ) ;
123+
124+ readonly windSpeed = computed ( ( ) => {
125+ const current = this . weatherData ( ) ?. current ;
126+ return current ? WeatherUtils . formatWindSpeed ( current . wind_speed_10m ) : '' ;
127+ } ) ;
128+
129+ readonly pressure = computed ( ( ) => {
130+ const current = this . weatherData ( ) ?. current ;
131+ return current ? WeatherUtils . formatPressure ( current . pressure_msl ) : '' ;
132+ } ) ;
133+
134+ readonly cloudCover = computed ( ( ) => {
135+ const current = this . weatherData ( ) ?. current ;
136+ return current ? WeatherUtils . formatPercentage ( current . cloud_cover ) : '' ;
137+ } ) ;
138+
139+ readonly windDirection = computed ( ( ) => {
140+ const current = this . weatherData ( ) ?. current ;
141+ return current ? WeatherUtils . getWindDirection ( current . wind_direction_10m ) : '' ;
142+ } ) ;
89143}
0 commit comments