bowser create and view part added

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