Minor usability improvements with button adjustments

daveajlee · Apr 22, 2023 · b4d8f0c · b4d8f0c
1 parent 7c347bc
commit b4d8f0c
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 22 deletions.
diff --git a/app/App.js b/app/App.js
@@ -106,7 +106,8 @@ export default function App() {
           title: 'Search by Fleet Number'
         }}/>
         <Stack.Screen name="RouteScreen" component={RouteScreen} options={{
-          title: 'Route Details'
+          title: 'Route Details',
+          headerBackVisible: false,
         }}/>
         <Stack.Screen name="VehicleScreen" component={VehicleScreen} options={{
           title: 'Vehicle Details',

diff --git a/app/components/AssignmentList.js b/app/components/AssignmentList.js
@@ -1,7 +1,7 @@
 import { View, Text, FlatList, StyleSheet } from "react-native";
 import { AssignContext } from "../store/context/assign-context";
 import { useContext } from "react";
-import { Button } from "react-native";
+import { TouchableOpacity } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { deleteAssignment } from "../utilities/sqlite";
 
@@ -23,10 +23,10 @@ function AssignmentList({items, companyName, scenarioName}) {
     function renderAssignmentItem(itemData) {
         return (
             <View style={styles.details}>
-                <Text style={styles.details}>Route Number: {itemData.item.routeNumber}</Text>
-                <Text style={styles.details}>Tour Number: {itemData.item.tourNumber}</Text>
-                <Text style={styles.details}>Fleet Number: {itemData.item.fleetNumber}</Text>
-                <Button title="Delete" onPress={deleteAssignmentFromDB.bind(null, itemData.item.routeNumber, itemData.item.tourNumber, companyName)}/>
+                <Text style={styles.heading}>{itemData.item.routeNumber}/{itemData.item.tourNumber} assigned to vehicle {itemData.item.fleetNumber}</Text>
+                <TouchableOpacity style={styles.button} onPress={deleteAssignmentFromDB.bind(null, itemData.item.routeNumber, itemData.item.tourNumber, companyName)}>
+                    <Text style={styles.buttonText}>Delete</Text>
+                </TouchableOpacity>
                 <View style={styles.lineStyle}/>
             </View>
         )
@@ -56,5 +56,23 @@ const styles = StyleSheet.create({
         borderWidth: 0.5,
         borderColor:'black',
         width: '100%',
-   }
+    },
+    heading: {
+        fontSize: 20,
+        fontWeight: "bold",
+        marginBottom: 15
+    },
+    button: {
+        alignItems: "center",
+        backgroundColor: "#5e7947",
+        width: '90%',
+        padding: 10,
+        marginBottom: 15,
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 20,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    }
 })
diff --git a/app/components/FleetList.js b/app/components/FleetList.js
@@ -4,11 +4,11 @@ function FleetList({items}) {
     function renderFleetItem(itemData) {
         return (
             <View style={styles.details}>
-                <Text style={styles.details}>{itemData.item.fleetNumber} - {itemData.item.registrationNumber}</Text>
-                <Text style={styles.details}>Chassis Type: {itemData.item.chassisType}</Text>
-                <Text style={styles.details}>Body Type: {itemData.item.bodyType}</Text>
-                <Text style={styles.details}>Special Features: {itemData.item.specialFeatures}</Text>
-                <Text style={styles.details}>Livery: {itemData.item.livery}</Text>
+                <Text style={styles.heading}>{itemData.item.fleetNumber} - {itemData.item.registrationNumber}</Text>
+                <Text style={styles.detailText}>Chassis Type: {itemData.item.chassisType}</Text>
+                <Text style={styles.detailText}>Body Type: {itemData.item.bodyType}</Text>
+                <Text style={styles.detailText}>Special Features: {itemData.item.specialFeatures}</Text>
+                <Text style={styles.detailText}>Livery: {itemData.item.livery}</Text>
                 <View style={styles.lineStyle}/>
             </View>
         )
@@ -34,9 +34,22 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         padding: 8
     },
+    heading: {
+        fontSize: 20,
+        fontWeight: "bold",
+        marginBottom: 5
+    },
+    detailText: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: 14,
+        fontStyle: "italic",
+    },
     lineStyle:{
         borderWidth: 0.5,
         borderColor:'black',
         width: '100%',
+        marginTop: 10,
+        marginBottom: 10
    }
 })
diff --git a/app/components/RouteDetails.js b/app/components/RouteDetails.js
@@ -2,8 +2,8 @@ import { View, Text, StyleSheet } from "react-native"
 
 function RouteDetails(props) {
     return <View style={styles.details}>
-        <Text style={styles.details}>{props.number} - {props.outwardTerminus} &lt;&gt; {props.returnTerminus}</Text>
-        <Text style={styles.details}>Number of buses required: {props.numberTours}</Text>
+        <Text style={styles.heading}>{props.number} - {props.outwardTerminus} &lt;&gt; {props.returnTerminus}</Text>
+        <Text style={styles.tours}>Number of tours/vehicles required: {props.numberTours}</Text>
     </View>
 }
 
@@ -14,7 +14,15 @@ const styles = StyleSheet.create({
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        padding: 8
+        padding: 8,
+    },
+    heading: {
+        fontSize: 20,
+        fontWeight: "bold",
+    },
+    tours: {
+        fontSize: 14,
+        fontStyle: "italic",
     },
     detailItem: {
         marginHorizontal: 4,

diff --git a/app/components/VehicleDetails.js b/app/components/VehicleDetails.js
@@ -2,11 +2,11 @@ import { View, Text, StyleSheet } from "react-native"
 
 function VehicleDetails(props) {
     return <View style={styles.details}>
-        <Text style={styles.details}>{props.fleetNumber} - {props.registrationNumber}</Text>
-        <Text style={styles.details}>Chassis Type: {props.chassisType}</Text>
-        <Text style={styles.details}>Body Type: {props.bodyType}</Text>
-        <Text style={styles.details}>Special Features: {props.specialFeatures}</Text>
-        <Text style={styles.details}>Livery: {props.livery}</Text>
+        <Text style={styles.heading}>{props.fleetNumber} - {props.registrationNumber}</Text>
+        <Text style={styles.detailText}>Chassis Type: {props.chassisType}</Text>
+        <Text style={styles.detailText}>Body Type: {props.bodyType}</Text>
+        <Text style={styles.detailText}>Special Features: {props.specialFeatures}</Text>
+        <Text style={styles.detailText}>Livery: {props.livery}</Text>
     </View>
 }
 
@@ -19,6 +19,15 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         padding: 8
     },
+    heading: {
+        fontSize: 20,
+        fontWeight: "bold",
+        marginBottom: 5
+    },
+    detailText: {
+        fontSize: 14,
+        fontStyle: "italic",
+    },
     detailItem: {
         marginHorizontal: 4,
         fontSize: 12

diff --git a/app/screens/SearchFleetScreen.js b/app/screens/SearchFleetScreen.js
@@ -13,7 +13,8 @@ function SearchFleetScreen({route, navigation}) {
     function onSearchFleetPress() {
         navigation.navigate("VehicleScreen", {
             fleetNumber: enteredFleetNumber,
-            scenarioName: route.params.scenarioName
+            scenarioName: route.params.scenarioName,
+            company: route.params.company
         });
     }
 

diff --git a/app/screens/SearchRouteScreen.js b/app/screens/SearchRouteScreen.js
@@ -13,7 +13,8 @@ function SearchRouteScreen({route, navigation}) {
     function onSearchRoutePress() {
         navigation.navigate("RouteScreen", {
             routeNumber: enteredRouteNumber,
-            scenarioName: route.params.scenarioName
+            scenarioName: route.params.scenarioName,
+            company: route.params.company
         });
     }