Andras/BoundlessFlowCampus2K

Fork 0

570-Add-weather-symbols #633

Closed

c24danli wants to merge 0 commits from 570-Add-weather-symbols into team_2_week_3

c24danli commented

2026-04-28 15:29:57 +00:00

Collaborator

Added weather symbols and changed the api to be the same as in SMHIForcastView as it was uppdated more frequently and suported weather_codes.
The symbols and background change depending on temprature and weather_code that come from the API.
Saw that more backgrounds where created during the day, those might be implimented in the future.

Added weather symbols and changed the api to be the same as in SMHIForcastView as it was uppdated more frequently and suported weather_codes. The symbols and background change depending on temprature and weather_code that come from the API. Saw that more backgrounds where created during the day, those might be implimented in the future.

c24danli added 5 commits

2026-04-28 15:29:58 +00:00

Changed css to be more dynamic 9dda860478

have changed the css file to have the option of being more dynamic in the future/easier to add more backgrounds and symbols. it also made it so its less repetition of code. No changes in functiuality exept that a temporary symbol is displayed in the top right that will be changed to an appropriate symbol later

works to dynamicly choose symbol 5250b17128

works to choose weater background and symbol dynamicly. Now the 27 symbols needs to be created and annded to the css and assets files

Added weater symbols dee662edf1

alot of symbols added for weater

adding css url links to pictures 8b5e828819

Changed api and uppdate fix 1288f9fb0d

Changes:
- I Have chaged api to the one used in SMHIForecastView as its uppdated often compared to the previus that uppdated once a day.
- changes in SMHITemperatureView to match the new object from changing api.
- added the rest of the symbols in the css file.
- As the URL never change it gets cached and doesnt uppdate on the site, i have changed the hook to not cache the API call
- added an option to sharedFetures witch is there to accept the no cache from the hook

c24danli added the

needs review

label

2026-04-28 15:31:42 +00:00

c24danli commented

2026-04-28 15:35:39 +00:00

Author

Collaborator

To test diffrent backgrounds and symbols you can change temp and symbol in the fuction call in SMHITemperatureView.

	const temp = current.data.air_temperature;
	const bgImg = getImageBg(temp);
	// choose background symbol
	const symbol = current.data.symbol_code;
	const bgSymbol = SMHICodeToText(symbol).replace(/\s+/g, '');

to ex.

	const temp = current.data.air_temperature;
	const bgImg = getImageBg(18);
	// choose background symbol
	const symbol = current.data.symbol_code;
	const bgSymbol = SMHICodeToText(18).replace(/\s+/g, '');

temp have three backgrounds less the 0, more then 16 and inbetween.
symbol can be 1-27

To test diffrent backgrounds and symbols you can change temp and symbol in the fuction call in SMHITemperatureView. ``` const temp = current.data.air_temperature; const bgImg = getImageBg(temp); // choose background symbol const symbol = current.data.symbol_code; const bgSymbol = SMHICodeToText(symbol).replace(/\s+/g, ''); ``` to ex. ``` const temp = current.data.air_temperature; const bgImg = getImageBg(18); // choose background symbol const symbol = current.data.symbol_code; const bgSymbol = SMHICodeToText(18).replace(/\s+/g, ''); ``` temp have three backgrounds less the 0, more then 16 and inbetween. symbol can be 1-27

b24erika added the

frontEnd

backEnd

Team 2

labels

2026-04-29 06:48:35 +00:00

a24vinla requested review from b23albst

2026-04-29 07:04:56 +00:00

b23albst approved these changes

2026-04-29 07:37:12 +00:00

b23albst left a comment

Collaborator

Review on #633

Checked that changes did not break anything and that different backgrounds and weather symbols work

[Review following things]

Tested on ubuntu using firefox

App starts
- Everything works as intended. When changed manually, all backgrounds worked. I did not test all weather symbols, but the ones I tested worked.
- Nothing else broke

Inspected following files SMHITemperatureView.js, SMHITemperatureView.module.css, useSMHIForecast.js, sharedFeatures.js

Indentation/code styling
- Indentation is correct
Naming convention
- Naming conventions are followed
Comments
- Correctly commented
General code quality
- In the standards for css, it says that declarations in css rule sets should be in alphabetical order, which is not followed in SMHITemperatureView.module.css, in the tempBackground rule set, among others.

What needs to be done

frontend/src/features/smhi/SMHITemperatureView.module.css
- If css standards are to be followed to a t, the order of some declarations has to be changed in rule sets tempBackground and pTemp

Conclusion

Given that we are allowed to use the images for the symbol codes (where are they taken from?) this is ready to be merged.
There is a discussion to be had about the api switch, since now the view gives the forecast temperature for the current hour, and not actual observed temperatures, as previously, but I'll let the team leaders decide whether is an issue or not

# Review on #633 ## Checked that changes did not break anything and that different backgrounds and weather symbols work [Review following things] ### Tested on ubuntu using firefox + App starts + Everything works as intended. When changed manually, all backgrounds worked. I did not test all weather symbols, but the ones I tested worked. + Nothing else broke ### Inspected following files SMHITemperatureView.js, SMHITemperatureView.module.css, useSMHIForecast.js, sharedFeatures.js + Indentation/code styling + Indentation is correct + Naming convention + Naming conventions are followed + Comments + Correctly commented + General code quality + In the standards for css, it says that declarations in css rule sets should be in alphabetical order, which is not followed in SMHITemperatureView.module.css, in the tempBackground rule set, among others. ## What needs to be done + frontend/src/features/smhi/SMHITemperatureView.module.css + If css standards are to be followed to a t, the order of some declarations has to be changed in rule sets tempBackground and pTemp ## Conclusion + Given that we are allowed to use the images for the symbol codes (where are they taken from?) this is ready to be merged. + There is a discussion to be had about the api switch, since now the view gives the forecast temperature for the current hour, and not actual observed temperatures, as previously, but I'll let the team leaders decide whether is an issue or not