Use weather icons in a WeatherDetailsCard

This commit is contained in:
Nebojsa Vuksic 2025-07-25 14:47:31 +02:00
parent 74d388a813
commit 74db9cd93b
2 changed files with 53 additions and 34 deletions

View File

@ -1,5 +1,7 @@
package org.jetbrains.plugins.template.weatherApp.model package org.jetbrains.plugins.template.weatherApp.model
import org.jetbrains.jewel.ui.icon.IconKey
import org.jetbrains.plugins.template.weatherApp.ui.WeatherIcons
import java.time.LocalDateTime import java.time.LocalDateTime
/** /**
@ -22,7 +24,7 @@ internal data class WeatherForecastData(
0f, 0f,
WindDirection.NORTH, WindDirection.NORTH,
0, 0,
WeatherType.SUNNY WeatherType.CLEAR
) )
} }
} }
@ -30,13 +32,26 @@ internal data class WeatherForecastData(
/** /**
* Enum representing different weather types. * Enum representing different weather types.
*/ */
enum class WeatherType(val label: String) { enum class WeatherType(val label: String, val dayIconKey: IconKey, val nightIconKey: IconKey) {
SUNNY("Sunny"), CLEAR("Sunny", WeatherIcons.dayClear, WeatherIcons.nightHalfMoonClear),
CLOUDY("Cloudy"), CLOUDY("Cloudy", dayIconKey = WeatherIcons.cloudy, nightIconKey = WeatherIcons.cloudy),
PARTLY_CLOUDY("Partly Cloudy"), PARTLY_CLOUDY(
RAINY("Rainy"), "Partly Cloudy",
SNOWY("Snowy"), dayIconKey = WeatherIcons.dayPartialCloud,
STORMY("Stormy"); nightIconKey = WeatherIcons.nightHalfMoonPartialCloud
),
RAINY("Rainy", dayIconKey = WeatherIcons.dayRain, nightIconKey = WeatherIcons.nightHalfMoonRain),
RAINY_AND_THUNDER(
"Rainy and Thunder",
dayIconKey = WeatherIcons.dayRainThunder,
nightIconKey = WeatherIcons.nightHalfMoonRainThunder
),
THUNDER("Thunder", dayIconKey = WeatherIcons.thunder, nightIconKey = WeatherIcons.thunder),
SNOWY("Snowy", dayIconKey = WeatherIcons.daySnow, nightIconKey = WeatherIcons.nightHalfMoonSnow),
TORNADO("Stormy", dayIconKey = WeatherIcons.tornado, nightIconKey = WeatherIcons.tornado),
FOG("Fog", dayIconKey = WeatherIcons.fog, nightIconKey = WeatherIcons.fog),
MIST("Mist", dayIconKey = WeatherIcons.mist, nightIconKey = WeatherIcons.mist);
companion object { companion object {
fun random(): WeatherType = entries.toTypedArray().random() fun random(): WeatherType = entries.toTypedArray().random()

View File

@ -12,12 +12,15 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import org.jetbrains.jewel.ui.component.* import org.jetbrains.jewel.foundation.theme.JewelTheme
import org.jetbrains.jewel.ui.component.ActionButton
import org.jetbrains.jewel.ui.component.Icon
import org.jetbrains.jewel.ui.component.Text
import org.jetbrains.jewel.ui.icons.AllIconsKeys import org.jetbrains.jewel.ui.icons.AllIconsKeys
import org.jetbrains.plugins.template.weatherApp.model.WeatherForecastData import org.jetbrains.plugins.template.weatherApp.model.WeatherForecastData
import org.jetbrains.plugins.template.weatherApp.model.WeatherType import org.jetbrains.plugins.template.weatherApp.model.WeatherType
import org.jetbrains.plugins.template.weatherApp.ui.WeatherIcons
import java.time.LocalDateTime import java.time.LocalDateTime
import java.time.LocalTime
import java.time.format.DateTimeFormatter import java.time.format.DateTimeFormatter
import kotlin.random.Random import kotlin.random.Random
@ -58,11 +61,11 @@ internal fun WeatherDetailsCard(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween horizontalArrangement = Arrangement.SpaceBetween
) { ) {
// City name // Current Time
Text( Text(
text = weatherForecastData.location.id, text = "Time: ${formatDateTime(weatherForecastData.currentTime)}",
color = textColor, color = textColor,
fontSize = 28.sp, fontSize = JewelTheme.defaultTextStyle.fontSize,
fontWeight = FontWeight.Bold fontWeight = FontWeight.Bold
) )
@ -81,6 +84,7 @@ internal fun WeatherDetailsCard(
) )
} }
} }
Spacer(modifier = Modifier.height(16.dp)) Spacer(modifier = Modifier.height(16.dp))
// Temperature and weather type column (vertically aligned) // Temperature and weather type column (vertically aligned)
@ -88,42 +92,37 @@ internal fun WeatherDetailsCard(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Icon(
key = WeatherIcons.cloudy,
// key = if (isNightTime) weatherForecastData.weatherType.nightIconKey else weatherForecastData.weatherType.dayIconKey,
contentDescription = weatherForecastData.weatherType.label,
hint = CssStyleInlinerSvgPatchHint
)
Spacer(modifier = Modifier.height(8.dp))
// Temperature (emphasized) // Temperature (emphasized)
Text( Text(
text = "${weatherForecastData.temperature.toInt()}°C", text = "${weatherForecastData.temperature.toInt()}°C",
color = textColor, color = textColor,
fontSize = 48.sp, fontSize = 32.sp,
fontWeight = FontWeight.ExtraBold fontWeight = FontWeight.ExtraBold
) )
Spacer(modifier = Modifier.height(8.dp)) Spacer(modifier = Modifier.height(8.dp))
// Weather type // City name
Text( Text(
text = weatherForecastData.weatherType.label, text = weatherForecastData.location.label,
color = textColor, color = textColor,
fontSize = 24.sp, fontSize = 18.sp,
fontWeight = FontWeight.Bold fontWeight = FontWeight.Bold
) )
} }
Spacer(modifier = Modifier.height(16.dp)) Spacer(modifier = Modifier.height(16.dp))
// Current time
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Center
) {
// Simple text for time
Text(
text = "Time: ${formatDateTime(weatherForecastData.currentTime)}",
color = textColor,
fontSize = 16.sp
)
}
Spacer(modifier = Modifier.height(16.dp))
// Wind and humidity info // Wind and humidity info
Row( Row(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
@ -152,12 +151,17 @@ internal fun WeatherDetailsCard(
*/ */
fun getWeatherTypeColor(weatherType: WeatherType, baseColor: Color): Color { fun getWeatherTypeColor(weatherType: WeatherType, baseColor: Color): Color {
return when (weatherType) { return when (weatherType) {
WeatherType.SUNNY -> Color.Yellow.copy(alpha = 0.2f) WeatherType.CLEAR -> Color.Yellow.copy(alpha = 0.2f)
WeatherType.CLOUDY -> Color.Gray.copy(alpha = 0.2f) WeatherType.CLOUDY -> Color.Gray.copy(alpha = 0.2f)
WeatherType.PARTLY_CLOUDY -> Color.LightGray.copy(alpha = 0.2f) WeatherType.PARTLY_CLOUDY -> Color.LightGray.copy(alpha = 0.2f)
WeatherType.RAINY_AND_THUNDER,
WeatherType.RAINY -> Color.Blue.copy(alpha = 0.2f) WeatherType.RAINY -> Color.Blue.copy(alpha = 0.2f)
WeatherType.SNOWY -> Color.White.copy(alpha = 0.3f) WeatherType.SNOWY -> Color.White.copy(alpha = 0.3f)
WeatherType.STORMY -> Color.DarkGray.copy(alpha = 0.2f) WeatherType.TORNADO -> Color.DarkGray.copy(alpha = 0.2f)
WeatherType.THUNDER -> Color.DarkGray.copy(alpha = 0.2f)
WeatherType.FOG -> Color.LightGray.copy(alpha = 0.2f)
WeatherType.MIST -> Color.LightGray.copy(alpha = 0.2f)
} }
} }