From 10ce6cc889658c327db918e4e3c9e3f43e8bfe8e Mon Sep 17 00:00:00 2001
From: John O'Reilly <oreillyj@gmail.com>
Date: Sat, 8 Jun 2024 16:57:26 +0100
Subject: [PATCH] UI updates

---
 .../bikeshare/ui/StationsScreen.kt            | 21 +++++-----
 ios/BikeShare/BikeShare/ContentView.swift     | 38 ++++++++++++-------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/androidApp/src/main/java/dev/johnoreilly/bikeshare/ui/StationsScreen.kt b/androidApp/src/main/java/dev/johnoreilly/bikeshare/ui/StationsScreen.kt
index d5d0c02a..012db711 100644
--- a/androidApp/src/main/java/dev/johnoreilly/bikeshare/ui/StationsScreen.kt
+++ b/androidApp/src/main/java/dev/johnoreilly/bikeshare/ui/StationsScreen.kt
@@ -50,7 +50,7 @@ fun StationsScreen(networkId: String, popBack: (() -> Unit)?) {
             TopAppBar(title = { Text(networkId) }, navigationIcon = navigationIcon!!)
         }) { paddingValues ->
             LazyColumn(Modifier.padding(paddingValues)) {
-                items(stations) { station ->
+                items(stations.sortedBy { it.name }) { station ->
                     StationView(station)
                 }
             }
@@ -64,6 +64,15 @@ fun StationView(station: Station) {
     Row(modifier = Modifier.padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp).fillMaxWidth(),
         verticalAlignment = Alignment.CenterVertically) {
 
+        Column {
+            Image(
+                painterResource(R.drawable.ic_bike),
+                colorFilter = ColorFilter.tint(if (station.freeBikes() < 2) lowAvailabilityColor else highAvailabilityColor),
+                modifier = Modifier.size(32.dp), contentDescription = station.freeBikes().toString())
+        }
+
+        Spacer(modifier = Modifier.width(16.dp))
+
         Column(modifier = Modifier.weight(1.0f)) {
             Text(text = station.name, style = MaterialTheme.typography.bodyLarge, fontWeight = FontWeight.Bold)
 
@@ -72,24 +81,18 @@ fun StationView(station: Station) {
                     Column(modifier = Modifier.width(100.dp)) {
                         Text("Bikes")
                         Text(station.freeBikes().toString(),
-                            color = if (station.freeBikes() < 5) lowAvailabilityColor else highAvailabilityColor)
+                            color = if (station.freeBikes() < 2) lowAvailabilityColor else highAvailabilityColor)
                     }
 
                     Column {
                         Text("Stands")
                         Text(station.empty_slots.toString(),
-                            color = if (station.freeBikes() < 5) lowAvailabilityColor else highAvailabilityColor)
+                            color = if (station.freeBikes() < 2) lowAvailabilityColor else highAvailabilityColor)
                     }
                 }
             }
         }
 
-        Column {
-            Image(
-                painterResource(R.drawable.ic_bike),
-                colorFilter = ColorFilter.tint(if (station.freeBikes() < 5) lowAvailabilityColor else highAvailabilityColor),
-                modifier = Modifier.size(32.dp), contentDescription = station.freeBikes().toString())
-        }
     }
 }
 
diff --git a/ios/BikeShare/BikeShare/ContentView.swift b/ios/BikeShare/BikeShare/ContentView.swift
index d8b0af80..1917cb6b 100644
--- a/ios/BikeShare/BikeShare/ContentView.swift
+++ b/ios/BikeShare/BikeShare/ContentView.swift
@@ -62,7 +62,7 @@ struct StationListTabView: View {
                     Label("Map", systemImage: "location")
                 }
         }
-        .navigationTitle(network.name)
+        .navigationTitle(network.id)
         .onAppear {
             viewModel.setNetwork(networkId: network.id)
         }
@@ -75,7 +75,7 @@ struct StationListView: View {
     var network: Network
     
     var body: some View {
-        List(stations) { station in
+        List(stations.sorted { $0.name < $1.name }) { station in
             StationView(station: station)
         }
         .navigationTitle(network.name)
@@ -86,25 +86,35 @@ struct StationView : View {
     var station: Station
 
     var body: some View {
+        
         HStack {
-            Image("ic_bike").resizable()
-                .renderingMode(.template)
-                .foregroundColor(station.freeBikes() < 5 ? .orange : .green)
-                .frame(width: 32.0, height: 32.0)
             
+            VStack(alignment: .trailing) {
+                Image("ic_bike").resizable()
+                    .renderingMode(.template)
+                    .foregroundColor(station.freeBikes() < 2 ? .orange : .green)
+                    .frame(width: 32.0, height: 32.0)
+            }
+
             Spacer().frame(width: 16)
-            
+
             VStack(alignment: .leading) {
-                Text(station.name).font(.headline)
+                Text(station.name).bold()
+                
                 HStack {
-                    Text("Free:").font(.subheadline).frame(width: 80, alignment: .leading)
-                    Text("\(station.freeBikes())").font(.subheadline)
-                }
-                HStack {
-                    Text("Slots:").font(.subheadline).frame(width: 80, alignment: .leading)
-                    Text("\(station.slots())").font(.subheadline)
+                    VStack(alignment: .leading) {
+                        Text("Bikes")
+                        Text("\(station.freeBikes())").font(.subheadline).foregroundColor(station.freeBikes() < 2 ? .orange : .green)
+                    }
+                    
+                    VStack(alignment: .leading) {
+                        Text("Stands")
+                        Text("\(station.slots())").font(.subheadline).foregroundColor(station.freeBikes() < 2 ? .orange : .green)
+                    }
                 }
+
             }
+            
         }
         .navigationTitle(station.name)
     }