Commit 977cdf79 authored by Ashan Tharuka's avatar Ashan Tharuka

Merge branch 'it19158600' into 'main'

It19158600

See merge request !11
parents 7eba9248 6846a89f
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
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",
},
});
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",
},
});
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",
},
});
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",
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment