build: S02 locations and S03 search
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,237 @@
|
||||
package app.wetter.ui.screens
|
||||
|
||||
import androidx.compose.animation.animateColorAsState
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.automirrored.rounded.ArrowBack
|
||||
import androidx.compose.material.icons.rounded.Close
|
||||
import androidx.compose.material.icons.rounded.Delete
|
||||
import androidx.compose.material.icons.rounded.LocationOn
|
||||
import androidx.compose.material.icons.rounded.Search
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.LinearProgressIndicator
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.OutlinedTextField
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.SnackbarDuration
|
||||
import androidx.compose.material3.SnackbarHost
|
||||
import androidx.compose.material3.SnackbarHostState
|
||||
import androidx.compose.material3.SnackbarResult
|
||||
import androidx.compose.material3.SwipeToDismissBox
|
||||
import androidx.compose.material3.SwipeToDismissBoxValue
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TextButton
|
||||
import androidx.compose.material3.TopAppBar
|
||||
import androidx.compose.material3.rememberSwipeToDismissBoxState
|
||||
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.runtime.rememberCoroutineScope
|
||||
import androidx.compose.runtime.saveable.rememberSaveable
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.semantics.CustomAccessibilityAction
|
||||
import androidx.compose.ui.semantics.customActions
|
||||
import androidx.compose.ui.semantics.semantics
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.unit.dp
|
||||
import app.wetter.R
|
||||
import app.wetter.data.Graph
|
||||
import app.wetter.data.LocationEntity
|
||||
import app.wetter.data.Place
|
||||
import app.wetter.data.Settings
|
||||
import app.wetter.data.Units
|
||||
import app.wetter.data.conditionOf
|
||||
import app.wetter.ui.components.conditionLabel
|
||||
import app.wetter.ui.scene.SceneSpec
|
||||
import app.wetter.ui.scene.WeatherIcon
|
||||
import app.wetter.ui.theme.WRadius
|
||||
import app.wetter.ui.theme.WSpace
|
||||
import app.wetter.ui.theme.WType
|
||||
import kotlinx.coroutines.delay
|
||||
import kotlinx.coroutines.launch
|
||||
|
||||
private sealed interface SearchState {
|
||||
data object Idle : SearchState
|
||||
data object Loading : SearchState
|
||||
data class Results(val places: List<Place>) : SearchState
|
||||
data object Error : SearchState
|
||||
}
|
||||
|
||||
/** S02 saved locations + S03 search in one screen: typing swaps the list for results. */
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun LocationsScreen(settings: Settings, onBack: () -> Unit, onOpen: (Long) -> Unit, onPreview: (Place) -> Unit) {
|
||||
val repo = Graph.repo
|
||||
val locations by repo.locations.collectAsState(initial = emptyList())
|
||||
var query by rememberSaveable { mutableStateOf("") }
|
||||
var state by remember { mutableStateOf<SearchState>(SearchState.Idle) }
|
||||
var attempt by remember { mutableStateOf(0) }
|
||||
val snackbar = remember { SnackbarHostState() }
|
||||
val scope = rememberCoroutineScope()
|
||||
val units = remember(settings) { Units(settings) }
|
||||
val deletedText = stringResource(R.string.deleted, "%s")
|
||||
val undoText = stringResource(R.string.undo)
|
||||
|
||||
LaunchedEffect(query, attempt) {
|
||||
if (query.trim().length < 2) { state = SearchState.Idle; return@LaunchedEffect }
|
||||
delay(300)
|
||||
state = SearchState.Loading
|
||||
state = runCatching { SearchState.Results(repo.search(query)) }.getOrElse { SearchState.Error }
|
||||
}
|
||||
|
||||
Scaffold(
|
||||
topBar = {
|
||||
TopAppBar(
|
||||
title = { Text(stringResource(R.string.locations)) },
|
||||
navigationIcon = { IconButton(onClick = onBack) { Icon(Icons.AutoMirrored.Rounded.ArrowBack, stringResource(R.string.back)) } },
|
||||
)
|
||||
},
|
||||
snackbarHost = { SnackbarHost(snackbar) },
|
||||
) { pad ->
|
||||
Column(Modifier.padding(pad).fillMaxSize()) {
|
||||
OutlinedTextField(
|
||||
value = query,
|
||||
onValueChange = { query = it },
|
||||
modifier = Modifier.fillMaxWidth().padding(horizontal = WSpace.s16),
|
||||
placeholder = { Text(stringResource(R.string.search_hint)) },
|
||||
leadingIcon = { Icon(Icons.Rounded.Search, null) },
|
||||
trailingIcon = {
|
||||
if (query.isNotEmpty()) IconButton(onClick = { query = "" }) { Icon(Icons.Rounded.Close, null) }
|
||||
},
|
||||
singleLine = true,
|
||||
shape = RoundedCornerShape(WRadius.pill),
|
||||
)
|
||||
if (state == SearchState.Loading) LinearProgressIndicator(Modifier.fillMaxWidth().padding(horizontal = WSpace.s32, vertical = WSpace.s4))
|
||||
else Spacer(Modifier.height(WSpace.s12))
|
||||
|
||||
when (val s = state) {
|
||||
is SearchState.Results -> if (s.places.isEmpty()) {
|
||||
Text(stringResource(R.string.search_empty), Modifier.padding(WSpace.s24), style = WType.body)
|
||||
} else LazyColumn(contentPadding = PaddingValues(bottom = WSpace.s24)) {
|
||||
items(s.places, key = { "${it.lat},${it.lon}" }) { p ->
|
||||
Column(
|
||||
Modifier.fillMaxWidth().clickable { onPreview(p) }.padding(horizontal = WSpace.s24, vertical = WSpace.s12)
|
||||
) {
|
||||
Text(p.name, style = WType.body)
|
||||
Text(listOfNotNull(p.admin, p.countryCode).joinToString(", "), style = WType.bodySm, color = MaterialTheme.colorScheme.onSurfaceVariant)
|
||||
}
|
||||
}
|
||||
}
|
||||
SearchState.Error -> Column(Modifier.padding(WSpace.s24)) {
|
||||
Text(stringResource(R.string.search_error), style = WType.body)
|
||||
TextButton(onClick = { attempt++ }) { Text(stringResource(R.string.retry)) }
|
||||
}
|
||||
else -> LazyColumn(
|
||||
contentPadding = PaddingValues(start = WSpace.s16, end = WSpace.s16, bottom = WSpace.s24),
|
||||
verticalArrangement = Arrangement.spacedBy(WSpace.s8),
|
||||
) {
|
||||
items(locations, key = { it.id }) { loc ->
|
||||
val name = loc.name.ifBlank { stringResource(R.string.current_location) }
|
||||
val delete = {
|
||||
scope.launch {
|
||||
repo.delete(loc.id)
|
||||
val r = snackbar.showSnackbar(deletedText.format(name), undoText, duration = SnackbarDuration.Short)
|
||||
if (r == SnackbarResult.ActionPerformed) repo.save(Place(loc.name, loc.admin, loc.countryCode, loc.lat, loc.lon, loc.timezone))
|
||||
}
|
||||
Unit
|
||||
}
|
||||
if (loc.isCurrent) CityRow(loc, name, units) { onOpen(loc.id) }
|
||||
else SwipeRow(onDelete = delete) {
|
||||
val deleteLabel = stringResource(R.string.delete)
|
||||
CityRow(loc, name, units, Modifier.semantics {
|
||||
customActions = listOf(CustomAccessibilityAction(deleteLabel) { delete(); true })
|
||||
}) { onOpen(loc.id) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
private fun SwipeRow(onDelete: () -> Unit, content: @Composable () -> Unit) {
|
||||
val state = rememberSwipeToDismissBoxState()
|
||||
LaunchedEffect(state.currentValue) {
|
||||
if (state.currentValue != SwipeToDismissBoxValue.Settled) {
|
||||
onDelete()
|
||||
state.snapTo(SwipeToDismissBoxValue.Settled)
|
||||
}
|
||||
}
|
||||
SwipeToDismissBox(
|
||||
state = state,
|
||||
backgroundContent = {
|
||||
val color by animateColorAsState(
|
||||
if (state.targetValue == SwipeToDismissBoxValue.Settled) MaterialTheme.colorScheme.surfaceContainer else MaterialTheme.colorScheme.error,
|
||||
label = "swipe",
|
||||
)
|
||||
Box(
|
||||
Modifier.fillMaxSize().clip(RoundedCornerShape(WRadius.lg)).background(color).padding(horizontal = WSpace.s24),
|
||||
contentAlignment = Alignment.CenterEnd,
|
||||
) { Icon(Icons.Rounded.Delete, null, tint = MaterialTheme.colorScheme.onError) }
|
||||
},
|
||||
) { content() }
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun CityRow(loc: LocationEntity, name: String, units: Units, modifier: Modifier = Modifier, onClick: () -> Unit) {
|
||||
val forecast by remember(loc.id) { Graph.repo.forecast(loc.id) }.collectAsState(initial = null)
|
||||
val f = forecast
|
||||
val spec = f?.let { SceneSpec(conditionOf(it.current.code), it.current.isDay) } ?: SceneSpec(app.wetter.data.Condition.CLOUDY, true)
|
||||
val fg = spec.onScene
|
||||
Row(
|
||||
modifier
|
||||
.fillMaxWidth()
|
||||
.clip(RoundedCornerShape(WRadius.lg))
|
||||
.background(Brush.horizontalGradient(listOf(spec.top, spec.bottom)))
|
||||
.clickable(onClick = onClick)
|
||||
.padding(horizontal = WSpace.s20, vertical = WSpace.s16),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Column(Modifier.weight(1f)) {
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
if (loc.isCurrent) { Icon(Icons.Rounded.LocationOn, null, Modifier.size(16.dp), tint = fg); Spacer(Modifier.width(4.dp)) }
|
||||
Text(name, style = WType.title, color = fg, maxLines = 1, overflow = TextOverflow.Ellipsis)
|
||||
}
|
||||
if (f != null) {
|
||||
Text(
|
||||
stringResource(conditionLabel(conditionOf(f.current.code), f.current.isDay)) +
|
||||
(f.today?.let { " · ${units.temp(it.tMax)} / ${units.temp(it.tMin)}" } ?: ""),
|
||||
style = WType.bodySm, color = fg,
|
||||
)
|
||||
}
|
||||
}
|
||||
if (f != null) {
|
||||
WeatherIcon(conditionOf(f.current.code), f.current.isDay, 36.dp)
|
||||
Spacer(Modifier.width(WSpace.s8))
|
||||
Text(units.temp(f.current.temp), style = WType.metric, color = fg)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user