Nicer route layout

strollplanner · Dec 5, 2020 · 382a1e6 · 382a1e6
1 parent bc12f4a
commit 382a1e6
Show file tree

Hide file tree

Showing 2 changed files with 168 additions and 54 deletions.
diff --git a/lib/pages/routes.dart b/lib/pages/routes.dart
@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:strollplanner_tracker/config.dart';
 import 'package:strollplanner_tracker/pages/track.dart';
 import 'package:strollplanner_tracker/services/auth.dart';
 import 'package:strollplanner_tracker/services/gql.dart';
@@ -15,19 +16,48 @@ class RoutesPage extends StatefulWidget {
 }
 
 class Route {
-  String id;
-  String title;
+  final String id;
+  final String title;
+  final String publishedAt;
+  final String canceledAt;
+  final double totalLength;
 
-  Route({this.id, this.title});
+  get published => publishedAt != null;
+
+  get canceled => canceledAt != null;
+
+  Route(
+      {this.id,
+      this.title,
+      this.publishedAt,
+      this.totalLength,
+      this.canceledAt});
 
   factory Route.fromJson(Map<String, dynamic> json) {
     return Route(
       id: json["id"],
       title: json["title"],
+      publishedAt: json["publishedAt"],
+      totalLength: json["totalLength"],
+      canceledAt: json["canceledAt"],
     );
   }
 }
 
+String formatDistance(double d) {
+  if (d == null) {
+    return '??';
+  }
+
+  const precision = 1;
+
+  if (d > 1000) {
+    return "${(d / 1000).toStringAsFixed(precision)} km";
+  }
+
+  return "${d.toStringAsFixed(precision)} m";
+}
+
 List<Route> routesFromJson(Map<String, dynamic> json) {
   List<dynamic> edges = json["organization"]["routes"]["edges"];
 
@@ -54,18 +84,10 @@ class _RoutesPageState extends State<RoutesPage> {
                   itemCount: routes.length,
                   itemBuilder: (context, index) {
                     var route = routes[index];
-                    return ListTile(
-                      title: Text(route.title),
-                      onTap: () {
-                        Navigator.push(
-                          context,
-                          MaterialPageRoute(
-                            builder: (context) =>
-                                TrackPage(this.orgId, route.id),
-                          ),
-                        );
-                      },
-                    );
+                    return RouteItem(
+                        key: ValueKey(route.id),
+                        orgId: this.orgId,
+                        route: route);
                   },
                 ),
                 onRefresh: fetchRoutes,
@@ -87,6 +109,9 @@ class _RoutesPageState extends State<RoutesPage> {
             node {
               id
               title
+              publishedAt
+              canceledAt
+              totalLength
             }
           }
         }
@@ -109,3 +134,88 @@ class _RoutesPageState extends State<RoutesPage> {
     });
   }
 }
+
+class RouteItem extends StatelessWidget {
+  final String orgId;
+  final Route route;
+
+  const RouteItem({Key key, this.orgId, this.route}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        child: Stack(children: [
+          Container(
+              child: Column(children: [
+                Container(
+                    child: Text(route.title,
+                        style: Theme.of(context).textTheme.headline6),
+                    padding: EdgeInsets.all(10)),
+                Row(
+                  children: [
+                    Image.network(
+                        "${AppConfig.of(context).apiBaseApiUrl}/orgs/$orgId/routes/${route.id}/static/simplified/150/150"),
+                    Container(
+                        child: Column(
+                          children: [
+                            Text(formatDistance(route.totalLength)),
+                            route.published
+                                ? route.canceled
+                                    ? Chip(
+                                        label: Text(
+                                          "Canceled",
+                                          style: Theme.of(context)
+                                              .textTheme
+                                              .bodyText1
+                                              .copyWith(color: Colors.white),
+                                        ),
+                                        backgroundColor: Colors.red,
+                                      )
+                                    : Chip(
+                                        label: Text(
+                                          "Published",
+                                          style: Theme.of(context)
+                                              .textTheme
+                                              .bodyText1
+                                              .copyWith(color: Colors.white),
+                                        ),
+                                        backgroundColor: Colors.green,
+                                      )
+                                : Chip(
+                                    label: Text(
+                                      "Not Published",
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .bodyText1
+                                          .copyWith(color: Colors.white),
+                                    ),
+                                    backgroundColor: Colors.grey[500],
+                                  ),
+                          ],
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        ),
+                        padding: EdgeInsets.all(10))
+                  ],
+                )
+              ], crossAxisAlignment: CrossAxisAlignment.stretch),
+              color: Colors.white),
+          Positioned.fill(
+            child: Material(
+              color: Colors.transparent,
+              child: InkWell(
+                onTap: () {
+                  Navigator.push(
+                    context,
+                    MaterialPageRoute(
+                      builder: (context) => TrackPage(this.orgId, route.id),
+                    ),
+                  );
+                },
+              ),
+            ),
+          )
+        ]),
+        margin: EdgeInsets.only(bottom: 20));
+  }
+}
diff --git a/lib/pages/track.dart b/lib/pages/track.dart
@@ -309,46 +309,50 @@ class _TrackPageState extends State<TrackPage> with WidgetsBindingObserver {
           appBar: AppBar(
             title: Text("Tracker"),
           ),
-          body: Center(
-            child: _permGranted
-                ? Column(
-                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                    children: <Widget>[
-                      Column(children: [
-                        Text(
-                          'Last position:',
-                        ),
-                        Text(
-                          _location == null
-                              ? 'N/A'
-                              : '${_location.latitude} ${_location.longitude}',
-                          style: Theme.of(context).textTheme.headline4,
+          body: Center(child: Builder(builder: (BuildContext context) {
+            if (!_permGranted) {
+              return GrantPermission();
+            }
+
+            return Column(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: <Widget>[
+                Column(children: [
+                  Text(
+                    'Last position:',
+                  ),
+                  Text(
+                    _location == null
+                        ? 'N/A'
+                        : '${_location.latitude} ${_location.longitude}',
+                    style: Theme.of(context).textTheme.headline4,
+                  ),
+                ]),
+                RaisedButton(
+                    onPressed: this.toggleTracker,
+                    color: _running ? Colors.red : Colors.green,
+                    child: Text(_running ? 'Stop' : 'Start')),
+                isAdmin
+                    ? Column(children: [
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            Checkbox(
+                                value: postLocation,
+                                onChanged: (v) {
+                                  setState(() {
+                                    this.postLocation = v;
+                                  });
+                                }),
+                            Text("Post to backend ?"),
+                          ],
                         ),
-                        isAdmin
-                            ? Row(
-                                mainAxisAlignment: MainAxisAlignment.center,
-                                children: [
-                                  Checkbox(
-                                      value: postLocation,
-                                      onChanged: (v) {
-                                        setState(() {
-                                          this.postLocation = v;
-                                        });
-                                      }),
-                                  Text("Post to backend ?"),
-                                ],
-                              )
-                            : null
-                      ]),
-                      RaisedButton(
-                          onPressed: this.toggleTracker,
-                          color: _running ? Colors.red : Colors.green,
-                          child: Text(_running ? 'Stop' : 'Start')),
-                      isAdmin ? Text("$_count") : null
-                    ],
-                  )
-                : GrantPermission(),
-          ),
+                        Text("$_count")
+                      ])
+                    : null
+              ],
+            );
+          })),
         ));
   }