Merge branch 'it19158600' into 'main'

It19158600

See merge request !11

frontend/Screens/Bowser/Bowseradd.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  TextInput,
+  TouchableOpacity,
+} from "react-native";
+import React, { useState } from "react";
+
+export default function Bowseradd({ route, navigation }) {
+  const { user_id } = route.params;
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [password, setPassword] = useState("");
+  const [bowserName, setBowserName] = useState("");
+  const [vehicleNo, setVehicleNo] = useState("");
+  const [capacity, setCapacity] = useState("");
+
+  const resetInput = () => {
+    setName("");
+    setEmail("");
+    setPhone("");
+    setPassword("");
+    setBowserName("");
+    setVehicleNo("");
+    setCapacity("");
+  }
+
+  const addBowser = () => {
+    if(name != '' && email !='' && email !='' && phone !='' && password !='' && bowserName !='' && vehicleNo !='' && capacity !=''){
+      const requestOptions = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name:name, email: email, phone:phone, pwd: password , bname:bowserName,vehicle_no:vehicleNo,capacity:capacity,station_user_id:user_id }),
+      };
+      fetch("https://fuel.udarax.me/api/bowser/create", requestOptions)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        if(data['message'] == 'success'){
+            alert("Station successfully created!");
+            resetInput();
+        }else{
+            alert(data['message']);
+        }
+      });
+    }else{
+      alert('Input fields cannot be empty. Please fill all the details and try again!');
+    }
+  };
+
+  return (
+    <ScrollView
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      style={{
+        flex: 1,
+        paddingHorizontal: 20,
+        marginTop: 20,
+      }}
+      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>Email</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setEmail}
+          value={email}
+          placeholder="Enter Email"
+        />
+      </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>Password</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setPassword}
+          value={password}
+          placeholder="Enter Password"
+          
+        />
+      </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>
+      <TouchableOpacity style={styles.button} onPress={addBowser}>
+        <Text style={styles.buttonText}>Add Bowser</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  )
+}
+
+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",
+  },
+});
\ No newline at end of file

frontend/Screens/Bowser/Bowserhome.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  Alert,
+  ScrollView,
+} from "react-native";
+import React, { useState,useEffect,useRef } from 'react';
+import MapView, { Marker } from "react-native-maps";
+import { FontAwesome } from "@expo/vector-icons";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useIsFocused } from "@react-navigation/native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
+
+import { initializeApp } from 'firebase/app';
+import { getDatabase, ref, onValue, set , push ,update   } from 'firebase/database';
+import * as Location from 'expo-location';
+
+export default function Bowserview({ userid }) {
+
+  const navigation = useNavigation();
+
+  const [loading, setLoading] = useState(true);
+  const [bowser, setBowser] = useState([]);
+  const isFocused = useIsFocused();
+  const [localLocation, setLocalLocation] = useState([]);
+  const [fbLocation, setFBLocation] = useState([]);
+
+  const [mapRegion, setmapRegion] = useState({
+    latitude: 37.78825,
+    longitude: -122.4324,
+    latitudeDelta: 0.01,
+    longitudeDelta: 0.01,
+  });
+
+  const firebaseConfig = {
+    apiKey: "AIzaSyDxEmKoQCU12aT8CFPUfHrfXVGDOQOMwRw",
+    authDomain: "fuel-project-fdc73.firebaseapp.com",
+    databaseURL: "https://fuel-project-fdc73-default-rtdb.firebaseio.com",
+    projectId: "fuel-project-fdc73",
+    storageBucket: "fuel-project-fdc73.appspot.com",
+    messagingSenderId: "432462265706",
+    appId: "1:432462265706:web:9130f32bc3834e4e8eb913",
+    measurementId: "G-Q2RMT4C2S9"
+  };
+  
+  initializeApp(firebaseConfig);
+
+  
+  const fetchData = () => {
+    const db = getDatabase();
+    const reference = ref(db, 'bowserLocation/'+bowser.id+'/');
+
+    fetch("https://fuel.udarax.me/api/bowser/home/" + userid)
+      .then((response) => response.json())
+      .then((data) => {
+        setBowser(data["respond"][0]);
+        let location = data["respond"][0]["curent_location"];
+        let lat = parseFloat(location.split(":")[0]);
+        let lon = parseFloat(location.split(":")[1]);
+        console.log("eee");
+        setmapRegion({
+          latitude: lat,
+          longitude: lon,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421,
+        });
+        onValue(reference, (snapshot) => {
+          let locationDBVal = snapshot.val();
+          console.log("aaaaaaaaaa");
+          console.log(bowser.id);
+          console.log(locationDBVal);
+          setFBLocation(locationDBVal);
+          if(locationDBVal != null){
+            setmapRegion({
+              latitude:  locationDBVal.latitudeDelta,
+              longitude:  locationDBVal.longitudeDelta,
+              latitudeDelta: 0.01,
+              longitudeDelta: 0.01,
+            });
+          }
+          setLoading(false);
+        });
+    });
+
+   
+
+    (async () => {
+    
+      let { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== 'granted') {
+        setErrorMsg('Permission to access location was denied');
+        return;
+      }
+
+      let location = await Location.getCurrentPositionAsync({});
+      setLocalLocation(location.coords);
+      // setmapRegion({
+      //   latitude: localLocation.latitude,
+      //   longitude: localLocation.longitude,
+      //   latitudeDelta: 0.0922,
+      //   longitudeDelta: 0.0421,
+      // });
+    })();
+
+   
+
+   
+  };
+
+  const deleteBowser = () => {
+    console.log(bowser.id);
+    Alert.alert(
+      //title
+      "Warning!",
+      //body
+      "Are you sure, Do you really wants to delete this bowser ?",
+      [
+        {
+          text: "Yes",
+          onPress: () => {
+            fetch("https://fuel.udarax.me/api/bowser/delete/" + bowser.id)
+              .then((response) => response.json())
+              .then((data) => {
+                console.log(data);
+                navigation.navigate("Browser", { user_id: user_id });
+              });
+          },
+        },
+        {
+          text: "No",
+          onPress: () => console.log("No Pressed"),
+          style: "cancel",
+        },
+      ],
+      { cancelable: false }
+    );
+  };
+
+
+
+
+
+  const shareBowser = () => {
+    let currentdatetime = new Date();
+    let times =  currentdatetime.toTimeString().split(' ')[0].slice(0, -3);
+    let dates =  currentdatetime.toISOString().slice(0, 10);
+    let now = dates + " "+times ;
+    const db = getDatabase();
+    const referenceFuel = ref(db, 'bowserLocation/'+bowser.id);
+    update(referenceFuel, {
+      latitudeDelta:localLocation.latitude,
+      longitudeDelta:localLocation.longitude,
+    });
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+    }
+  }, [loading]);
+
+  return (
+    <View style={styles.container2}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      >
+        {!loading && (
+          <View>
+            <View style={styles.row}>
+              <View style={styles.col7}>
+                <View style={[styles.row, styles.center]}>
+                  <Text style={styles.title}>{bowser.name}</Text>
+                </View>
+              </View>
+              <View style={styles.col3}>
+                <TouchableOpacity
+                  style={styles.editbox}
+                  onPress={() =>
+                    navigation.navigate("BowserEdit", { bowserID: bowser.id })
+                  }
+                >
+                  <FontAwesome name="pencil" size={24} color="white" />
+                </TouchableOpacity>
+              </View>
+            </View>
+            <MapView style={styles.map} region={mapRegion}>
+              <Marker coordinate={mapRegion} title="Marker" />
+            </MapView>
+            <View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <FontAwesome5 name="user-secret" size={24} color="black" />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>{bowser.uname}</Text>
+                </View>
+              </View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <MaterialIcons name="email" size={24} color="black" />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>{bowser.email}</Text>
+                </View>
+              </View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <FontAwesome name="phone-square" size={24} color="black" />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>{bowser.phone}</Text>
+                </View>
+              </View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <FontAwesome5 name="truck-moving" size={24} color="black" />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>
+                    {bowser.vehicle_no} ( Vehicle No )
+                  </Text>
+                </View>
+              </View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <MaterialCommunityIcons
+                    name="diving-scuba-tank"
+                    size={24}
+                    color="black"
+                  />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>{bowser.capacity} (L)</Text>
+                </View>
+              </View>
+            </View>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={() => shareBowser()}
+            >
+              <Text style={styles.buttonText}>Share Location</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={() => deleteBowser()}
+            >
+              <Text style={styles.buttonText}>Delete</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {loading && (
+          <View style={styles.container}>
+            <Image
+              style={styles.tinyLogo}
+              source={require("../../assets/gasloading.gif")}
+            />
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    backgroundColor: "#fff",
+    justifyContent: "center",
+    alignItems: "center",
+    flex: 1,
+  },
+  container2: {
+    padding: 20,
+    backgroundColor: "#fff",
+    flex: 1,
+  },
+  row: {
+    flexDirection: "row",
+  },
+  col7: {
+    width: "70%",
+    justifyContent: "center",
+  },
+  col3: {
+    width: "30%",
+    alignItems: "flex-end",
+    justifyContent: "center",
+  },
+  col7only: {
+    width: "70%",
+  },
+  col3only: {
+    width: "30%",
+  },
+  editbox: {
+    width: 40,
+    height: 40,
+    backgroundColor: "#f05a36",
+    borderRadius: 10,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+  },
+  map: {
+    width: "100%",
+    marginTop: 20,
+    height: 400,
+  },
+  online: {
+    width: 15,
+    height: 15,
+    borderRadius: 50,
+    backgroundColor: "#0f0",
+    marginLeft: 10,
+  },
+  offline: {
+    width: 15,
+    height: 15,
+    borderRadius: 50,
+    backgroundColor: "#f00",
+    marginLeft: 10,
+  },
+  center: {
+    alignItems: "center",
+  },
+  button: {
+    alignItems: "center",
+    backgroundColor: "#f05a36",
+    marginTop: 20,
+    height: 45,
+    borderRadius: 5,
+    justifyContent: "center",
+  },
+  buttonText: {
+    color: "#fff",
+  },
+});

frontend/Screens/Bowser/Bowserview.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  Alert,
+  ScrollView,
+} from "react-native";
+import React, { useState, useEffect } from "react";
+import MapView, { Marker } from "react-native-maps";
+import { FontAwesome } from "@expo/vector-icons";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useIsFocused } from "@react-navigation/native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+import { initializeApp } from 'firebase/app';
+import { getDatabase, ref, onValue, set , push ,update   } from 'firebase/database';
+import * as Location from 'expo-location';
+
+export default function Bowserview({ route, navigation }) {
+  const { bowserID, user_id } = route.params;
+
+  const firebaseConfig = {
+    apiKey: "AIzaSyDxEmKoQCU12aT8CFPUfHrfXVGDOQOMwRw",
+    authDomain: "fuel-project-fdc73.firebaseapp.com",
+    databaseURL: "https://fuel-project-fdc73-default-rtdb.firebaseio.com",
+    projectId: "fuel-project-fdc73",
+    storageBucket: "fuel-project-fdc73.appspot.com",
+    messagingSenderId: "432462265706",
+    appId: "1:432462265706:web:9130f32bc3834e4e8eb913",
+    measurementId: "G-Q2RMT4C2S9"
+  };
+  
+  initializeApp(firebaseConfig);
+
+  const [loading, setLoading] = useState(true);
+  const [bowser, setBowser] = useState([]);
+  const isFocused = useIsFocused();
+  const [fbLocation, setFBLocation] = useState([]);
+  const [mapRegion, setmapRegion] = useState({
+    latitude: 37.78825,
+    longitude: -122.4324,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  });
+
+  const fetchData = () => {
+
+    const db = getDatabase();
+    const reference = ref(db, 'bowserLocation/'+bowser.id+'/');
+
+    fetch("https://fuel.udarax.me/api/bowser/specific/" + bowserID)
+      .then((response) => response.json())
+      .then((data) => {
+        setBowser(data["respond"]);
+        let location = data["respond"]["curent_location"];
+        console.log(location);
+        let lat = parseFloat(location.split(":")[0]);
+        let lon = parseFloat(location.split(":")[1]);
+
+        setmapRegion({
+          latitude: lat,
+          longitude: lon,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421,
+        });
+        onValue(reference, (snapshot) => {
+          let locationDBVal = snapshot.val();
+          console.log("aaaaaaaaaa");
+          console.log(bowser.id);
+          console.log(locationDBVal);
+          setFBLocation(locationDBVal);
+          if(locationDBVal != null){
+            setmapRegion({
+              latitude:  locationDBVal.latitudeDelta,
+              longitude:  locationDBVal.longitudeDelta,
+              latitudeDelta: 0.01,
+              longitudeDelta: 0.01,
+            });
+          }
+          setLoading(false);
+        });
+      });
+  };
+
+  const deleteBowser = () => {
+    console.log(bowserID);
+    Alert.alert(
+      //title
+      "Warning!",
+      //body
+      "Are you sure, Do you really wants to delete this bowser ?",
+      [
+        {
+          text: "Yes",
+          onPress: () => {
+            fetch("https://fuel.udarax.me/api/bowser/delete/" + bowserID)
+              .then((response) => response.json())
+              .then((data) => {
+                console.log(data);
+                navigation.navigate("Browser", { user_id: user_id });
+              });
+          },
+        },
+        {
+          text: "No",
+          onPress: () => console.log("No Pressed"),
+          style: "cancel",
+        },
+      ],
+      { cancelable: false }
+    );
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+    }
+  }, [loading, isFocused]);
+
+  return (
+    <View  style={styles.container2}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      >
+        {!loading && (
+          <View>
+            <View style={styles.row}>
+              <View style={styles.col7}>
+                <View style={[styles.row, styles.center]}>
+                  <Text style={styles.title}>{bowser.name}</Text>
+                </View>
+              </View>
+              <View style={styles.col3}>
+                <TouchableOpacity
+                  style={styles.editbox}
+                  onPress={() =>
+                    navigation.navigate("BowserEdit", { bowserID: bowserID })
+                  }
+                >
+                  <FontAwesome name="pencil" size={24} color="white" />
+                </TouchableOpacity>
+              </View>
+            </View>
+            <MapView style={styles.map} region={mapRegion}>
+              <Marker coordinate={mapRegion} title="Marker" />
+            </MapView>
+            <View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <FontAwesome5 name="user-secret" size={24} color="black" />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>{bowser.uname}</Text>
+                </View>
+              </View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <MaterialIcons name="email" size={24} color="black" />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>{bowser.email}</Text>
+                </View>
+              </View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <FontAwesome name="phone-square" size={24} color="black" />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>{bowser.phone}</Text>
+                </View>
+              </View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <FontAwesome5 name="truck-moving" size={24} color="black" />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>{bowser.vehicle_no} ( Vehicle No )</Text>
+                </View>
+              </View>
+              <View style={[styles.row, { marginTop: 20 }]}>
+                <View>
+                  <MaterialCommunityIcons
+                    name="diving-scuba-tank"
+                    size={24}
+                    color="black"
+                  />
+                </View>
+                <View style={{ marginLeft: 20, justifyContent: "center" }}>
+                  <Text style={{ fontSize: 16 }}>{bowser.capacity} (L)</Text>
+                </View>
+              </View>
+            </View>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={() => deleteBowser()}
+            >
+              <Text style={styles.buttonText}>Delete</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {loading && (
+          <View style={styles.container}>
+            <Image
+              style={styles.tinyLogo}
+              source={require("../../assets/gasloading.gif")}
+            />
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    backgroundColor: "#fff",
+    justifyContent: "center",
+    alignItems: "center",
+    flex:1
+  },
+  container2: {
+    padding: 20,
+    backgroundColor: "#fff",
+    flex:1
+  },
+  row: {
+    flexDirection: "row",
+  },
+  col7: {
+    width: "70%",
+    justifyContent: "center",
+  },
+  col3: {
+    width: "30%",
+    alignItems: "flex-end",
+    justifyContent: "center",
+  },
+  col7only: {
+    width: "70%",
+  },
+  col3only: {
+    width: "30%",
+  },
+  editbox: {
+    width: 40,
+    height: 40,
+    backgroundColor: "#f05a36",
+    borderRadius: 10,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+  },
+  map: {
+    width: "100%",
+    marginTop: 20,
+    height: 400,
+  },
+  online: {
+    width: 15,
+    height: 15,
+    borderRadius: 50,
+    backgroundColor: "#0f0",
+    marginLeft: 10,
+  },
+  offline: {
+    width: 15,
+    height: 15,
+    borderRadius: 50,
+    backgroundColor: "#f00",
+    marginLeft: 10,
+  },
+  center: {
+    alignItems: "center",
+  },
+  button: {
+    alignItems: "center",
+    backgroundColor: "#f05a36",
+    marginTop: 20,
+    height: 45,
+    borderRadius: 5,
+    justifyContent: "center",
+  },
+  buttonText: {
+    color: "#fff",
+  },
+});

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",
+  },
+});