Added Km Badge colour

- separated KmBadge
- added colour for different types of events

lib/main.dart

@@ -2,6 +2,7 @@ import 'dart:io' show Platform;
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:info_tren/models/train_data.dart';
 import 'package:info_tren/train_info_page/train_info.dart';
 import 'package:info_tren/train_info_page/train_info_cupertino.dart';
 import 'package:info_tren/train_info_page/train_info_material.dart';
@@ -32,10 +33,14 @@ class StartPoint extends StatelessWidget {
             return TrainInfoPromptMaterial();
           },
           TrainInfo.routeName: (context) {
+            return TrainDataWebViewAdapter(
+              builder: (context) {
                 return TrainInfoMaterial(
                   trainNumber: ModalRoute.of(context).settings.arguments as int,
                 );
               },
+            );
+          },
         },
       );
     }
@@ -55,10 +60,14 @@ class StartPoint extends StatelessWidget {
             return TrainInfoPromptCupertino();
           },
           TrainInfo.routeName: (context) {
+            return TrainDataWebViewAdapter(
+              builder: (context) {
                 return TrainInfoCupertino(
                   trainNumber: ModalRoute.of(context).settings.arguments as int,
                 );
               },
+            );
+          },
         }
       );
     }

lib/train_info_page/train_info_cupertino_DisplayTrainStation.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/cupertino.dart';
 import 'package:info_tren/models/train_data.dart';
+import 'package:info_tren/train_info_page/train_info.dart';
+import 'package:info_tren/train_info_page/train_info_constants.dart';
 
 class DisplayTrainStation extends StatelessWidget {
   final OnDemandStation station;
@@ -15,46 +17,24 @@ class DisplayTrainStation extends StatelessWidget {
         Row(
           mainAxisSize: MainAxisSize.max,
           children: <Widget>[
-            Padding(
+            FutureDisplay(
-              padding: const EdgeInsets.all(8),
+              future: Future.wait([
-              child: Container(
+                station.delay,
-                decoration: BoxDecoration(
+                station.realOrEstimate,
-                  borderRadius: BorderRadius.circular(10),
+                station.observations,
-                  border: Border.all(
+              ]),
-                    width: 2,
+              builder: (context, data) {
-                    color: FOREGROUND_WHITE,
+                final isDelayed = (data[0] as int) > 0;
-                  ),
+                final isOnTime = !isDelayed && (data[1] as RealOrEstimate) == RealOrEstimate.real;
-                  // color: CupertinoColors.activeOrange,
+                final isNotScheduled = data[2] == "ONI";
-                ),
+
-                width: 48,
+                return KmBadge(
-                height: 48,
+                  station: station,
-                child: Column(
+                  isNotScheduled: isNotScheduled,
-                  mainAxisSize: MainAxisSize.min,
+                  isDelayed: isDelayed,
-                  children: <Widget>[
+                  isOnTime: isOnTime,
-                    Expanded(
-                      child: Center(
-                        child: FutureDisplay<int>(
-                          future: station.km,
-                          builder: (context, value) {
-                            return Text(
-                              value.toString(),
-                              style: CupertinoTheme.of(context).textTheme.textStyle.copyWith(
-                                fontSize: 18,
-                                fontWeight: FontWeight.w100,
-                              ),
-                              textAlign: TextAlign.center,
                 );
-                          },
+              }
-                        ),
-                      ),
-                    ),
-                    Text(
-                      "km",
-                      style: CupertinoTheme.of(context).textTheme.textStyle.copyWith(fontSize: 10),
-                    ),
-                  ],
-                ),
-              ),
             ),
             Expanded(
               child: FutureDisplay<List<String>>(
@@ -217,3 +197,83 @@ class DisplayTrainStation extends StatelessWidget {
     );
   }
 }
+
+class KmBadge extends StatelessWidget {
+  final OnDemandStation station;
+  final bool isNotScheduled;
+  final bool isOnTime;
+  final bool isDelayed;
+
+  KmBadge({
+    @required this.station,
+    this.isNotScheduled = false,
+    this.isOnTime = false,
+    this.isDelayed = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Color foregroundColor = FOREGROUND_WHITE;
+    Color backgroundColor;
+
+    if (isNotScheduled) {
+      foregroundColor = Color.fromRGBO(225, 175, 30, 1);
+      backgroundColor = Color.fromRGBO(80, 40, 10, 1);
+    }
+    else if (isOnTime) {
+      foregroundColor = Color.fromRGBO(130, 175, 65, 1);
+      backgroundColor = Color.fromRGBO(40, 80, 10, 1);
+    }
+    else if (isDelayed) {
+      foregroundColor = Color.fromRGBO(225, 75, 30, 1);
+      backgroundColor = Color.fromRGBO(80, 20, 10, 1);
+    }
+
+    return Padding(
+      padding: const EdgeInsets.all(8),
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(10),
+          border: Border.all(
+            width: 2,
+            color: foregroundColor,
+          ),
+          color: backgroundColor,
+          // color: CupertinoColors.activeOrange,
+        ),
+        width: 48,
+        height: 48,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Expanded(
+              child: Center(
+                child: FutureDisplay<int>(
+                  future: station.km,
+                  builder: (context, value) {
+                    return Text(
+                      value.toString(),
+                      style: CupertinoTheme.of(context).textTheme.textStyle.copyWith(
+                        fontSize: 18,
+                        fontWeight: FontWeight.w100,
+                        color: foregroundColor
+                      ),
+                      textAlign: TextAlign.center,
+                    );
+                  },
+                ),
+              ),
+            ),
+            Text(
+              "km",
+              style: CupertinoTheme.of(context).textTheme.textStyle.copyWith(
+                fontSize: 10,
+                color: foregroundColor,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}