feat: add cluster screen for displaying recommendation
This commit introduces the `ClusterScreen.kt` composable, which displays plant care recommendations. The screen includes: - A top app bar with the title "Rekomendasi Perawatan". - Pull-to-refresh functionality to update recommendations. - Display of an image based on the cluster number (1, 2, or 3). - "Diperbarui Pada" (Updated On) timestamp, formatted to Indonesian locale. - A "Rekomendasi" section showing general advice and specific care instructions. - An image of a plant. - `ListItemClustering` to display humidity, temperature, and pH values. - Loading and error states handling. A private `formatDate` utility function is included to format timestamps to "dd MMMM yyyy, HH:mm" in Indonesian.
This commit is contained in:
Cutiful
parent
acc732871f
commit
e274873e43
|
|
@ -0,0 +1,222 @@
|
||||||
|
package com.syaroful.agrilinkvocpro.growth_recipe_feature.presentation.recomendation
|
||||||
|
|
||||||
|
import androidx.compose.foundation.Image
|
||||||
|
import androidx.compose.foundation.background
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.Box
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.Row
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.rememberScrollState
|
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
|
import androidx.compose.foundation.verticalScroll
|
||||||
|
import androidx.compose.material3.CircularProgressIndicator
|
||||||
|
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.Scaffold
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.material3.TopAppBar
|
||||||
|
import androidx.compose.material3.pulltorefresh.PullToRefreshBox
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.LaunchedEffect
|
||||||
|
import androidx.compose.runtime.collectAsState
|
||||||
|
import androidx.compose.runtime.getValue
|
||||||
|
import androidx.compose.runtime.mutableStateOf
|
||||||
|
import androidx.compose.runtime.remember
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.draw.alpha
|
||||||
|
import androidx.compose.ui.layout.ContentScale
|
||||||
|
import androidx.compose.ui.res.painterResource
|
||||||
|
import androidx.compose.ui.text.font.FontStyle
|
||||||
|
import androidx.compose.ui.text.style.TextAlign
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import androidx.navigation.NavController
|
||||||
|
import com.syaroful.agrilinkvocpro.core.components.DefaultErrorComponent
|
||||||
|
import com.syaroful.agrilinkvocpro.core.utils.ResultState
|
||||||
|
import com.syaroful.agrilinkvocpro.growth_recipe_feature.R
|
||||||
|
import com.syaroful.agrilinkvocpro.growth_recipe_feature.core.component.ListItemClustering
|
||||||
|
import com.syaroful.agrilinkvocpro.presentation.theme.MainGreen
|
||||||
|
import org.koin.androidx.compose.koinViewModel
|
||||||
|
import java.time.ZoneId
|
||||||
|
import java.time.ZonedDateTime
|
||||||
|
import java.time.format.DateTimeFormatter
|
||||||
|
import java.util.Locale
|
||||||
|
|
||||||
|
@OptIn(ExperimentalMaterial3Api::class)
|
||||||
|
@Composable
|
||||||
|
fun ClusterScreen(
|
||||||
|
navController: NavController,
|
||||||
|
viewModel: ClusterViewModel = koinViewModel()
|
||||||
|
) {
|
||||||
|
val state by viewModel.state.collectAsState()
|
||||||
|
val isRefreshing = remember { mutableStateOf(false) }
|
||||||
|
|
||||||
|
LaunchedEffect(state) {
|
||||||
|
if (state == ResultState.Idle) {
|
||||||
|
viewModel.getRecommendation()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Scaffold(
|
||||||
|
topBar = {
|
||||||
|
TopAppBar(
|
||||||
|
title = {
|
||||||
|
Column(
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally,
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxWidth()
|
||||||
|
) {
|
||||||
|
Text(
|
||||||
|
"Rekomendasi Perawatan",
|
||||||
|
style = MaterialTheme.typography.titleMedium
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
navigationIcon = {
|
||||||
|
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
) { innerPadding ->
|
||||||
|
PullToRefreshBox(
|
||||||
|
isRefreshing = isRefreshing.value,
|
||||||
|
onRefresh = {
|
||||||
|
isRefreshing.value = true
|
||||||
|
viewModel.getRecommendation()
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
Column(
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxWidth()
|
||||||
|
.padding(innerPadding)
|
||||||
|
.padding(horizontal = 16.dp)
|
||||||
|
.verticalScroll(rememberScrollState()),
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally,
|
||||||
|
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||||
|
) {
|
||||||
|
when (state) {
|
||||||
|
is ResultState.Loading -> {
|
||||||
|
CircularProgressIndicator(
|
||||||
|
color = MainGreen
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
is ResultState.Error -> {
|
||||||
|
isRefreshing.value = false
|
||||||
|
DefaultErrorComponent(
|
||||||
|
label = "Oops!",
|
||||||
|
message = (state as ResultState.Error).message
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
is ResultState.Success -> {
|
||||||
|
isRefreshing.value = false
|
||||||
|
val data = (state as ResultState.Success).data
|
||||||
|
Image(
|
||||||
|
modifier = Modifier.fillMaxWidth(0.7f),
|
||||||
|
painter = painterResource(
|
||||||
|
id =
|
||||||
|
when (data?.cluster) {
|
||||||
|
1 -> R.drawable.cluster_1
|
||||||
|
2 -> R.drawable.cluster_2
|
||||||
|
3 -> R.drawable.cluster_3
|
||||||
|
else -> R.drawable.cluster_2
|
||||||
|
}
|
||||||
|
),
|
||||||
|
contentScale = ContentScale.FillWidth,
|
||||||
|
contentDescription = "Recommendation action"
|
||||||
|
)
|
||||||
|
Row(
|
||||||
|
modifier = Modifier.fillMaxWidth(),
|
||||||
|
horizontalArrangement = Arrangement.SpaceBetween
|
||||||
|
) {
|
||||||
|
Text(
|
||||||
|
"Diperbarui Pada",
|
||||||
|
modifier = Modifier
|
||||||
|
.alpha(0.6f),
|
||||||
|
style = MaterialTheme.typography.labelMedium,
|
||||||
|
textAlign = TextAlign.Start
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
formatDate(data?.createdAt ?: "-"),
|
||||||
|
style = MaterialTheme.typography.bodySmall.copy(fontStyle = FontStyle.Italic),
|
||||||
|
textAlign = TextAlign.Start
|
||||||
|
)
|
||||||
|
}
|
||||||
|
Box(
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxWidth()
|
||||||
|
.background(
|
||||||
|
color = MaterialTheme.colorScheme.surfaceContainer,
|
||||||
|
shape = RoundedCornerShape(8.dp)
|
||||||
|
)
|
||||||
|
.padding(16.dp)
|
||||||
|
) {
|
||||||
|
Row(
|
||||||
|
modifier = Modifier.fillMaxWidth(),
|
||||||
|
horizontalArrangement = Arrangement.SpaceBetween,
|
||||||
|
verticalAlignment = Alignment.CenterVertically
|
||||||
|
|
||||||
|
) {
|
||||||
|
Column(
|
||||||
|
modifier = Modifier.fillMaxWidth(0.7f),
|
||||||
|
verticalArrangement = Arrangement.spacedBy(12.dp)
|
||||||
|
) {
|
||||||
|
Text(
|
||||||
|
"Rekomendasi:",
|
||||||
|
modifier = Modifier.alpha(0.6f),
|
||||||
|
style = MaterialTheme.typography.labelMedium
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
data?.rekomendasi ?: "-",
|
||||||
|
style = MaterialTheme.typography.headlineSmall
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
"Rekomendasi Perawatan:",
|
||||||
|
modifier = Modifier.alpha(0.6f),
|
||||||
|
style = MaterialTheme.typography.labelMedium
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
data?.rekomendasiPerawatan ?: "-",
|
||||||
|
style = MaterialTheme.typography.titleMedium
|
||||||
|
)
|
||||||
|
}
|
||||||
|
Image(
|
||||||
|
modifier = Modifier.fillMaxWidth(),
|
||||||
|
painter = painterResource(id = R.drawable.vegeatatif),
|
||||||
|
contentDescription = "plant"
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ListItemClustering(
|
||||||
|
humidity = data?.humidity ?: 0.0,
|
||||||
|
temp = data?.temperature ?: 0.0,
|
||||||
|
pH = data?.ph ?: 0.0
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
else -> {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private fun formatDate(time: String): String {
|
||||||
|
val inputFormatter = DateTimeFormatter.RFC_1123_DATE_TIME
|
||||||
|
val zonedDateTime = ZonedDateTime.parse(time, inputFormatter)
|
||||||
|
.withZoneSameInstant(ZoneId.of("Asia/Jakarta"))
|
||||||
|
|
||||||
|
val dateFormatter = DateTimeFormatter.ofPattern("dd MMMM yyyy", Locale("id", "ID"))
|
||||||
|
val timeFormatter = DateTimeFormatter.ofPattern("HH:mm")
|
||||||
|
|
||||||
|
val date = zonedDateTime.format(dateFormatter)
|
||||||
|
val jam = zonedDateTime.format(timeFormatter)
|
||||||
|
|
||||||
|
return "$date, $jam"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user