bowser part finalized

frontend/Screens/Bowser/Browser.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Image,
+  FlatList,
+} from "react-native";
+import React, { useState, useEffect } from "react";
+import { Entypo } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useIsFocused } from "@react-navigation/native";
+import { FontAwesome5 } from '@expo/vector-icons';
+
+export default function Browser({ route, navigation }) {
+
+  const { user_id,role } = route.params;
+  const [loading, setLoading] = useState(true);
+  const [bowser, setBowser] = useState([]);
+  const isFocused = useIsFocused();
+
+  const fetchData = () => {
+    console.log(user_id,role)
+    fetch("https://fuel.udarax.me/api/bowser/"+user_id)
+      .then((response) => response.json())
+      .then((data) => {
+        setBowser(data["respond"]);
+        setLoading(false);
+      });
+  };
+  
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+    }
+  }, [loading, isFocused]);
+
+  function FloatButton() {
+    return (
+      <TouchableOpacity
+        style={[styles.floatButton, styles.center]}
+        onPress={() => navigation.navigate("BowserAdd",{
+          user_id:user_id
+        })}
+      >
+        <Entypo name="plus" size={30} color="white" />
+      </TouchableOpacity>
+    );
+  }
+
+  const Item = ({ item }) => (
+    <TouchableOpacity
+      style={styles.box}
+      onPress={() => navigation.navigate("BowserView", { bowserID: item.id, user_id:user_id })}
+    >
+      <View style={styles.row}>
+        <View style={styles.col70}>
+          <Text style={styles.boxTitle}>{item.name}</Text>
+          <Text style={styles.boxtext}>Capacity : {item.capacity} (L)</Text>
+        </View>
+        <View style={[styles.col30, styles.center]}>
+          <FontAwesome5 name="truck-moving" size={40} color="black" />
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+  
+  const renderItem = ({ item }) => <Item item={item} />;
+
+  
+  return (
+    <View style={styles.container}>
+      {loading && (
+        <View>
+          <Image
+            style={styles.tinyLogo}
+            source={require("../../assets/gasloading.gif")}
+          />
+        </View>
+      )}
+
+      {!loading && (
+        <FlatList
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          data={bowser}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          onRefresh={() => fetchData()}
+          refreshing={loading}
+        />
+      )}
+      {role != 'admin' && <FloatButton />}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    backgroundColor: "#fff",
+    justifyContent: "center",
+    alignItems:'center'
+  },
+  tinyLogo:{
+    backgroundColor:"#f00",
+    justifyContent:'center',
+    alignItems:'center'
+  },
+  row:{
+    flexDirection:'row'
+  },
+  col70:{
+    width:"70%"
+  },
+  col30:{
+    width:"30%"
+  },
+  center: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  floatButton: {
+    width: 65,
+    height: 65,
+    backgroundColor: "#f05a36",
+    borderRadius: 100,
+    position: "absolute",
+    right: 20,
+    bottom: 20,
+  },
+  box: {
+    backgroundColor: "#f7c469",
+    padding: 20,
+    borderRadius: 15,
+    marginBottom: 20,
+  },
+  boxTitle: {
+    color: "#000",
+    fontWeight: "700",
+    fontSize: 16,
+  },
+  boxtext: {
+    color: "#000",
+  },
+});

frontend/Screens/Bowser/Browseredit.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Alert,
+  ScrollView,
+} from "react-native";
+import React, { useState, useEffect } from "react";
+
+export default function Browseredit({ route, navigation }) {
+
+  const { bowserID } = route.params;
+
+  const [loading, setLoading] = useState(true);
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [bowserName, setBowserName] = useState("");
+  const [vehicleNo, setVehicleNo] = useState("");
+  const [capacity, setCapacity] = useState("");
+  const [latitude, setLatitude] = useState();
+  const [longitude, setLongitude] = useState();
+  const [curentLocation, setCurentLocation] = useState("");
+
+  const updateBowser = () => {
+    if (
+      name != "" &&
+      vehicleNo != "" &&
+      capacity != "" &&
+      latitude != "" &&
+      longitude != "" &&
+      bowserName != "" &&
+      phone != ""
+    ) {
+      const location = latitude + ":" + longitude;
+      const requestOptions = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: name,
+          vehicle_no: vehicleNo,
+          capacity: capacity,
+          location: location,
+          bname: bowserName,
+          phone: phone,
+        }),
+      };
+      fetch(
+        "https://fuel.udarax.me/api/bowser/update/" + bowserID,
+        requestOptions
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          console.log(data);
+          if (data["message"] == "success") {
+            alert("Fuel Type successfully Updated!");
+          } else {
+            alert(data["message"]);
+          }
+        });
+    } else {
+      alert(
+        "Input fields cannot be empty. Please fill all the details and try again!"
+      );
+    }
+  };
+
+  const fetchData = () => {
+    fetch("https://fuel.udarax.me/api/bowser/specific/" + bowserID)
+      .then((response) => response.json())
+      .then((data) => {
+        let res = data["respond"];
+        let location = data["respond"]["curent_location"];
+        console.log(location);
+        let lat = location.split(":")[0];
+        let lon = location.split(":")[1];
+        setCurentLocation(location);
+        setName(res.uname);
+        setPhone(res.phone);
+        setBowserName(res.name);
+        setVehicleNo(res.vehicle_no);
+        setCapacity(res.capacity);
+        setLatitude(lat);
+        setLongitude(lon);
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [loading]);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        paddingHorizontal: 20,
+        marginTop: 20,
+      }}
+    >
+      <ScrollView
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{
+          flexGrow: 1,
+        }}
+      >
+        <View style={styles.mb5}>
+          <Text>User Name</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setName}
+            value={name}
+            placeholder="Enter Name"
+          />
+        </View>
+        <View style={styles.mb5}>
+          <Text>Contact Number</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setPhone}
+            value={phone}
+            placeholder="Enter Phone Number"
+          />
+        </View>
+        <View style={styles.mb5}>
+          <Text>Bowser Name</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setBowserName}
+            value={bowserName}
+            placeholder="Enter Bowser Name"
+          />
+        </View>
+        <View style={styles.mb5}>
+          <Text>Vehicle No</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setVehicleNo}
+            value={vehicleNo}
+            placeholder="Enter Vehicle No"
+          />
+        </View>
+        <View style={styles.mb5}>
+          <Text>Capacity</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setCapacity}
+            value={capacity}
+            placeholder="Enter Capacity"
+            keyboardType="numeric"
+          />
+        </View>
+        <View style={styles.mb5}>
+          <Text>Latitude</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setLatitude}
+            value={latitude}
+            placeholder="Enter Latitude"
+            keyboardType="numeric"
+          />
+        </View>
+        <View style={styles.mb5}>
+          <Text>Longitute</Text>
+          <TextInput
+            style={styles.input}
+            onChangeText={setLongitude}
+            value={longitude}
+            placeholder="Enter Longitude"
+            keyboardType="numeric"
+          />
+        </View>
+        <TouchableOpacity style={styles.button} onPress={updateBowser}>
+          <Text style={styles.buttonText}>Update Bowser</Text>
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  mb5: {
+    marginBottom: 20,
+  },
+  input: {
+    height: 45,
+    marginTop: 5,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+  },
+  button: {
+    alignItems: "center",
+    backgroundColor: "#f05a36",
+    height: 45,
+    borderRadius: 5,
+    justifyContent: "center",
+    marginBottom: 20,
+  },
+  buttonText: {
+    color: "#fff",
+  },
+});