Skip to content

2
22_23-j 51
Commit 3d7df45c authored by Hasith Yoman's avatar Hasith Yoman
Browse files
Options

Frontend Added

parent d1884dc3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 34867 additions and 0 deletions
frontend/.gitignore 0 → 100644
View file @ 3d7df45c
node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
# macOS
.DS_Store
frontend/App.js 0 → 100644
View file @ 3d7df45c
This diff is collapsed.
frontend/Screens/Admin/Admin.js 0 → 100644
View file @ 3d7df45c
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import React from "react";
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
export default function Admin({ userid,role }) {
const navigation = useNavigation();
return (
<View style={styles.container}>
<View style={[styles.row,styles.mb5]}>
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate("Station")}>
<FontAwesome5 name="gas-pump" size={40} color="white" />
<Text style={styles.boxText}>Gas Stations</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate("Fuel")}>
<MaterialCommunityIcons name="fuel" size={45} color="white" />
<Text style={styles.boxText}>Fuel</Text>
</TouchableOpacity>
</View>
<View style={styles.row}>
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate("Userslist")}>
<Entypo name="users" size={40} color="white" />
<Text style={styles.boxText}>Users</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate("Browser",{user_id:-1,role:role})}>
<FontAwesome5 name="truck-moving" size={40} color="white" />
<Text style={styles.boxText}>Bowsers</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center'
},
row: {
flexDirection: "row",
justifyContent: "space-evenly",
},
mb5:{
marginBottom:20
},
box: {
backgroundColor: "#f05a36",
width: 150,
height: 150,
justifyContent: "center",
alignItems: "center",
borderRadius: 15,
},
boxText: {
color: "#fff",
fontSize: 18,
marginTop: 10,
},
});
frontend/Screens/Admin/Users.js 0 → 100644
View file @ 3d7df45c
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";
export default function Users({navigation}) {
const [loading, setLoading] = useState(true);
const [users, setUsers] = useState([]);
const isFocused = useIsFocused();
const fetchData = () => {
fetch("https://fuel.udarax.me/api/user/list")
.then((response) => response.json())
.then((data) => {
setUsers(data["respond"]);
setLoading(false);
});
};
useEffect(() => {
if (isFocused) {
fetchData();
console.log(users);
console.log(users.length);
}
}, [loading, isFocused]);
const Item = ({ item }) => (
<TouchableOpacity
style={styles.box}
onPress={() => navigation.navigate("Audit",{user_id:item.id,role:'user'})}
>
<View style={styles.row}>
<View style={styles.col70}>
<Text style={styles.boxTitle}>{item.name}</Text>
<Text style={styles.boxtext}>{item.email}</Text>
<Text style={styles.boxtext}>{item.phone}</Text>
</View>
<View style={[styles.col30, styles.center]}>
<Entypo name="user" size={50} 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>
)}
{users.length ==0 && <Text style={{fontSize:20}}>No Data</Text>}
{!loading && (
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={users}
renderItem={renderItem}
keyExtractor={(item) => item.id}
onRefresh={() => fetchData()}
refreshing={loading}
/>
)}
</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",
},
});
\ No newline at end of file
frontend/Screens/Audit/Audit.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
TouchableOpacity,
FlatList,
} from "react-native";
import React, { useState, useEffect } from "react";
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { Foundation } from "@expo/vector-icons";
import { useIsFocused } from "@react-navigation/native";
import { useNavigation } from "@react-navigation/native";
export default function Audit({ route, navigation }) {
const { user_id, role } = route.params;
const [audit, setAudit] = useState([]);
const [loading, setLoading] = useState(true);
const isFocused = useIsFocused();
const fetchData = () => {
fetch("https://fuel.udarax.me/api/audit/" + user_id + "/" + role)
.then((response) => response.json())
.then((data) => {
console.log(data["response"]);
setAudit(data["response"]);
setLoading(false);
});
};
useEffect(() => {
if (isFocused) {
fetchData();
console.log("aaaaaaaaaaaaa");
console.log(audit.list);
}
}, [loading, isFocused]);
const Item = ({ item }) => (
<View
style={[
styles.box,
styles.boxfull,
styles.row,
styles.auditboxes,
styles.mb5,
]}
>
<View style={styles.row}>
<View style={styles.col8}>
<Text style={styles.boxTitle}>
{item.ftyoe} - {item.qty} (L)
</Text>
<Text style={styles.boxTextlist}>
{item.vtype} - {item.vno}
</Text>
<Text style={styles.boxTextlist}>Rs. {item.amount}</Text>
<Text style={styles.boxTextlist}>
{item.created_at.split("T")[0]}{" "}
{item.created_at.split("T")[1].slice(0, 8)}
</Text>
<Text style={styles.boxTextlist}>{item.sname}</Text>
</View>
<View style={[styles.col2, styles.right]}>
<MaterialCommunityIcons name="fuel" size={50} color="black" />
</View>
</View>
</View>
);
const renderItem = ({ item }) => <Item item={item} />;
return (
<View style={styles.container}>
{!loading && !audit.list &&
<View>
<View style={[styles.row, styles.mb5]}>
<View style={[styles.box, styles.boxfull, styles.row]}>
<View style={[styles.col4, { justifyContent: "center" }]}>
<FontAwesome5 name="money-bill-alt" size={45} color="white" />
<Text style={styles.boxText}>Total Amount</Text>
</View>
<View style={styles.col6}>
<Text style={styles.quetext}>{audit.amount}</Text>
</View>
</View>
</View>
<View style={[styles.row, styles.mb5]}>
<View
style={[styles.box, styles.boxfull, styles.row, styles.yellow]}
>
<View style={[styles.col4, { justifyContent: "center" }]}>
<MaterialCommunityIcons
name="car-3-plus"
size={45}
color="white"
/>
<Text style={styles.boxText}>Filled Vehicles</Text>
</View>
<View style={styles.col6}>
<Text style={styles.quetext}>{audit.filled}</Text>
</View>
</View>
</View>
</View>
}
{!loading && role == 'user' && (
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={audit.list}
renderItem={renderItem}
keyExtractor={(item) => item.aid}
onRefresh={() => fetchData()}
refreshing={loading}
/>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
row: {
flexDirection: "row",
justifyContent: "space-between",
},
mb5: {
marginBottom: 20,
},
box: {
backgroundColor: "#f05a36",
width: "47%",
height: 150,
justifyContent: "center",
alignItems: "center",
borderRadius: 15,
},
boxfull: {
width: "100%",
backgroundColor: "#00539CFF",
padding: 20,
},
boxText: {
color: "#fff",
fontSize: 18,
marginTop: 10,
},
col4: {
width: "40%",
},
col6: {
width: "60%",
},
col8: {
width: "80%",
},
col2: {
width: "20%",
},
quetext: {
color: "#fff",
fontSize: 40,
textAlign: "right",
},
quetext2: {
color: "#fff",
fontSize: 18,
textAlign: "right",
},
yellow: {
backgroundColor: "#E49B0F",
},
boxtext: {
color: "#000",
},
auditboxes: {
backgroundColor: "#8eff78",
},
right: {
alignItems: "flex-end",
justifyContent: "center",
},
boxTitle: {
fontSize: 18,
fontWeight: "700",
},
});
frontend/Screens/Bowser/Bowseradd.js 0 → 100644
View file @ 3d7df45c
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 0 → 100644
View file @ 3d7df45c
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 0 → 100644
View file @ 3d7df45c
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 0 → 100644
View file @ 3d7df45c
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 0 → 100644
View file @ 3d7df45c
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",
},
});
frontend/Screens/Fuel/Fuel.js 0 → 100644
View file @ 3d7df45c
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";
export default function Fuel({ navigation }) {
const [loading, setLoading] = useState(true);
const [fuel, setFuel] = useState([]);
const isFocused = useIsFocused();
const fetchData = () => {
fetch("https://fuel.udarax.me/api/fuel/")
.then((response) => response.json())
.then((data) => {
setFuel(data["respond"]);
setLoading(false);
});
};
useEffect(() => {
if (isFocused) {
fetchData();
}
}, [loading, isFocused]);
function FloatButton() {
return (
<TouchableOpacity
style={[styles.floatButton, styles.center]}
onPress={() => navigation.navigate("FuelAdd")}
>
<Entypo name="plus" size={30} color="white" />
</TouchableOpacity>
);
}
const Item = ({ item }) => (
<TouchableOpacity
style={styles.box}
onPress={() => navigation.navigate("FuelEdit", { typeID: item.id })}
>
<View style={styles.row}>
<View style={styles.col70}>
<Text style={styles.boxTitle}>{item.name}</Text>
<Text style={styles.boxtext}>{item.price}</Text>
</View>
<View style={[styles.col30, styles.center]}>
<MaterialCommunityIcons name="fuel" size={50} 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={fuel}
renderItem={renderItem}
keyExtractor={(item) => item.id}
onRefresh={() => fetchData()}
refreshing={loading}
/>
)}
<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/Fuel/Fueladd.js 0 → 100644
View file @ 3d7df45c
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from "react-native";
import React, { useState } from "react";
export default function Fueladd() {
const [name, setName] = useState("");
const [price, setPrice] = useState(0.0);
const addFuelType = () => {
if(name != '' && price !=''){
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name:name, price: price}),
};
fetch("https://fuel.udarax.me/api/fuel/create", requestOptions)
.then((response) => response.json())
.then((data) => {
console.log(data);
resetInput();
alert(data['message']);
});
}else{
alert('Input fields cannot be empty. Please fill all the details and try again!');
}
}
const resetInput = () => {
setName("");
setPrice(0.00);
}
return (
<View style={styles.container}>
<View style={styles.mb5}>
<Text>Fuel Type</Text>
<TextInput
style={styles.input}
placeholder="Enter Name"
onChangeText={setName}
value={name}
/>
</View>
<View style={styles.mb5}>
<Text>Price (LKR)</Text>
<TextInput
style={styles.input}
placeholder="Enter Name"
onChangeText={setPrice}
value={price}
keyboardType="numeric"
/>
</View>
<TouchableOpacity style={styles.button} onPress={addFuelType}>
<Text style={styles.buttonText}>Add Fuel Type</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
flex:1
},
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",
},
});
frontend/Screens/Fuel/Fueledit.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Alert,
} from "react-native";
import React, { useState, useEffect } from "react";
export default function Fueledit({ route, navigation }) {
const { typeID } = route.params;
const [name, setName] = useState("");
const [price, setPrice] = useState(0.0);
const [loading, setLoading] = useState(true);
const updateFuelType = () => {
if(name != '' && price !=''){
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({name:name, price:price}),
};
fetch("https://fuel.udarax.me/api/fuel/update/"+typeID, 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/fuel/" + typeID)
.then((response) => response.json())
.then((data) => {
const res = data["respond"];
setName(res["name"]);
setPrice(res["price"]);
setLoading(false);
});
};
const deleteFuelType = () => {
Alert.alert(
//title
"Warning!",
//body
"Are you sure, Do you really wants to delete this fuel type?",
[
{
text: "Yes",
onPress: () => {
fetch("https://fuel.udarax.me/api/fuel/delete/" + typeID)
.then((response) => response.json())
.then((data) => {
console.log(data);
navigation.navigate("Fuel");
});
},
},
{
text: "No",
onPress: () => console.log("No Pressed"),
style: "cancel",
},
],
{ cancelable: false }
);
};
useEffect(() => {
fetchData();
}, [loading]);
return (
<View style={styles.container}>
<View style={styles.mb5}>
<Text>Fuel Type</Text>
<TextInput
style={styles.input}
placeholder="Enter Name"
onChangeText={setName}
value={name}
/>
</View>
<View style={styles.mb5}>
<Text>Price (LKR)</Text>
<TextInput
style={styles.input}
placeholder="Enter Name"
onChangeText={setPrice}
value={price}
keyboardType="numeric"
/>
</View>
<View style={styles.row}>
<TouchableOpacity style={styles.button} onPress={deleteFuelType}>
<Text style={styles.buttonText}>Delete</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, { backgroundColor: "#560cce" }]}
onPress={updateFuelType}
>
<Text style={styles.buttonText}>Update Fuel Type</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
flex: 1,
},
mb5: {
marginBottom: 20,
},
row: {
flexDirection: "row",
justifyContent: "space-between",
},
input: {
height: 45,
marginTop: 5,
borderWidth: 1,
padding: 10,
borderRadius: 5,
},
button: {
alignItems: "center",
backgroundColor: "#f05a36",
height: 45,
borderRadius: 5,
justifyContent: "center",
marginBottom: 20,
width: "48%",
},
buttonText: {
color: "#fff",
},
});
frontend/Screens/Home.js 0 → 100644
View file @ 3d7df45c
import { StyleSheet, Text, View, StatusBar } from 'react-native'
import React from 'react'
import Admin from './Admin/Admin'
import Stationsingle from './Station/Stationsingle'
import User from './User/User'
import BowserHome from './Bowser/Bowserhome'
export default function Home({ route,navigation }) {
const { userid,role } = route.params;
console.log(userid,role);
return (
<View style={{ flex: 1,alignContent:'center'}}>
<StatusBar barStyle = "light-content" hidden = {false} backgroundColor = "#560cce" color="#fff" translucent = {true}/>
{/* We need to specify what component need to render by user's role */}
{role == 'admin' && ( <Admin userid = {userid} role = "admin" />) }
{role == 'station' && ( <Stationsingle userid = {userid} />) }
{role == 'user' && ( <User userid = {userid} />) }
{role == 'bowser' && ( <BowserHome userid = {userid} />) }
</View>
)
}
const styles = StyleSheet.create({})
\ No newline at end of file
frontend/Screens/Login.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
TextInput,
} from "react-native";
import React, { useState } from "react";
import { FancyAlert } from "react-native-expo-fancy-alerts";
export default function Login({ navigation }) {
const [email, setEmail] = useState("admin@gt.com");
const [password, setPassword] = useState("123");
const [visible, setVisible] = React.useState(false);
const signIn = () => {
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: email, password: password }),
};
fetch("https://fuel.udarax.me/api/user/login", requestOptions)
.then((response) => response.json())
.then((data) => {
console.log(data);
if (data["status"] == "success") {
navigation.navigate("Dashboard", {
user_id: data["user"],
role:data["role"],
});
}else{
setVisible(true);
alert("Login Faild. Please check your email and password!");
}
});
};
return (
<View style={styles.container}>
<View style={styles.containersub}>
<Image style={styles.tinyLogo} source={require("../assets/logo.png")} />
</View>
<Text style={styles.title}>Gas Tracker</Text>
<Text style={styles.subtitle}>
The easiest way to manage fuel distribution in your area.
</Text>
<TextInput
style={styles.input}
onChangeText={setEmail}
value={email}
placeholder="Enter Email"
/>
<TextInput
style={styles.input}
onChangeText={setPassword}
value={password}
placeholder="Enter Password"
/>
<TouchableOpacity style={styles.button} onPress={signIn}>
<Text style={styles.buttonText}>Sign In</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button,{backgroundColor:"#f05a36"}]} onPress={()=> navigation.navigate("RegisterUser")}>
<Text style={styles.buttonText}>Don’t have an account? Sign up</Text>
</TouchableOpacity>
{/* <FancyAlert
visible={visible}
icon={
<View
style={{
flex: 1,
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "red",
borderRadius: 50,
width: "100%",
}}
>
<Text>🤓</Text>
</View>
}
style={{ backgroundColor: "white" }}
>
<Text style={{ marginTop: -16, marginBottom: 32 }}>Hello there</Text>
</FancyAlert> */}
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
flex: 1,
justifyContent: "center",
},
containersub: {
alignItems: "center",
},
tinyLogo: {
width: 100,
height: 120,
},
title: {
marginTop: 20,
fontWeight: "700",
fontSize: 30,
color: "#560cce",
textAlign: "center",
},
subtitle: {
textAlign: "center",
marginTop: 20,
fontSize: 16,
},
input: {
height: 45,
marginHorizontal: 12,
marginTop: 20,
borderWidth: 1,
padding: 10,
borderRadius: 5,
},
button: {
alignItems: "center",
backgroundColor: "#560cce",
marginHorizontal: 12,
marginTop: 20,
height: 45,
borderRadius: 5,
justifyContent: "center",
},
buttonText: {
color: "#fff",
},
});
frontend/Screens/Registeruser.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
TextInput,
Alert
} from "react-native";
import React, { useState } from "react";
export default function Registeruser({ navigation }) {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [password, setPassword] = useState("");
const redirectPopup = () => {
Alert.alert(
"Alert!",
"Account Successfully Created! Please Login",
[
{
text: "Yes",
onPress: () => {
navigation.navigate("Login");
},
},
],
{ cancelable: false }
);
}
const signup = () => {
console.log(name,email,phone,password);
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
name: name,
email: email,
phone: phone,
pwd: password,
}),
};
fetch("https://fuel.udarax.me/api/user/create", requestOptions)
.then((response) => response.json())
.then((data) => {
console.log(data);
if (data["message"] == "success") {
redirectPopup();
} else {
alert(data["message"]);
}
});
};
return (
<View style={styles.container}>
<View style={styles.containersub}>
<Image style={styles.tinyLogo} source={require("../assets/logo.png")} />
</View>
<Text style={styles.title}>Gas Tracker</Text>
<Text style={styles.subtitle}>
The easiest way to manage fuel distribution in your area.
</Text>
<TextInput
style={styles.input}
onChangeText={setName}
value={name}
placeholder="Enter name"
/>
<TextInput
style={styles.input}
onChangeText={setEmail}
value={email}
placeholder="Enter Email"
/>
<TextInput
style={styles.input}
onChangeText={setPhone}
value={phone}
placeholder="Enter Phone"
/>
<TextInput
style={styles.input}
onChangeText={setPassword}
value={password}
placeholder="Enter Password"
/>
<TouchableOpacity style={styles.button} onPress={signup}>
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, { backgroundColor: "#f05a36" }]}
onPress={() => navigation.navigate("Login")}
>
<Text style={styles.buttonText}>Already have an account ? Sign In</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
flex: 1,
justifyContent: "center",
},
containersub: {
alignItems: "center",
},
tinyLogo: {
width: 100,
height: 120,
},
title: {
marginTop: 20,
fontWeight: "700",
fontSize: 30,
color: "#560cce",
textAlign: "center",
},
subtitle: {
textAlign: "center",
marginTop: 20,
fontSize: 16,
},
input: {
height: 45,
marginHorizontal: 12,
marginTop: 20,
borderWidth: 1,
padding: 10,
borderRadius: 5,
},
button: {
alignItems: "center",
backgroundColor: "#560cce",
marginHorizontal: 12,
marginTop: 20,
height: 45,
borderRadius: 5,
justifyContent: "center",
},
buttonText: {
color: "#fff",
},
});
frontend/Screens/Settings.js 0 → 100644
View file @ 3d7df45c
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
export default function Settings() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Setting Screen</Text>
</View>
)
}
const styles = StyleSheet.create({})
\ No newline at end of file
frontend/Screens/Station/Fillingqueue.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Alert,
} from "react-native";
import React, { useState, useEffect } from "react";
export default function Fillingqueue({ route, navigation }) {
const {
user_id,
vehicle_id,
station_id,
fueltype_id,
ftype,
username,
vehicle,
no,
qid,
stuid
} = route.params;
const [qty, setQty] = useState([]);
const fillFuel = () => {
if (qty != "" && qty != null) {
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
qty: qty,
user_id: user_id,
vehicle_id: vehicle_id,
station_id: station_id,
fueltype_id: fueltype_id,
qid: qid,
}),
};
fetch("https://fuel.udarax.me/api/audit/create", requestOptions)
.then((response) => response.json())
.then((data) => {
console.log(data);
if (data["message"] == "success") {
Alert.alert(
"Alert!",
"Fuel Filled Successfully",
[
{
text: "Yes",
onPress: () => {
navigation.navigate("Queue",{
user_id:stuid
});
},
},
],
{ cancelable: false }
);
} else {
alert(data["message"]);
}
});
} else {
alert("Qty cannot empty!");
}
};
return (
<View style={styles.container}>
<View style={styles.mb5}>
<Text>Fuel Type</Text>
<TextInput style={styles.input} value={ftype} editable={false} />
</View>
<View style={styles.mb5}>
<Text>User Name</Text>
<TextInput style={styles.input} value={username} editable={false} />
</View>
<View style={styles.mb5}>
<Text>Vehicle Type</Text>
<TextInput style={styles.input} value={vehicle} editable={false} />
</View>
<View style={styles.mb5}>
<Text>Queue No</Text>
<TextInput style={styles.input} value={no} editable={false} />
</View>
<View style={styles.mb5}>
<Text>Amount of Leaters</Text>
<TextInput
style={styles.input}
onChangeText={setQty}
value={qty}
placeholder="Enter Amount of Leaters"
keyboardType="numeric"
/>
</View>
<TouchableOpacity style={styles.button} onPress={fillFuel}>
<Text style={styles.buttonText}>Fill Fuel</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 20,
paddingTop: 20,
backgroundColor: "#fff",
},
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",
},
});
frontend/Screens/Station/Gasprices.js 0 → 100644
View file @ 3d7df45c
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";
export default function Gasprices() {
const [loading, setLoading] = useState(true);
const [fuel, setFuel] = useState([]);
const isFocused = useIsFocused();
const fetchData = () => {
fetch("https://fuel.udarax.me/api/fuel/")
.then((response) => response.json())
.then((data) => {
setFuel(data["respond"]);
setLoading(false);
});
};
useEffect(() => {
if (isFocused) {
fetchData();
}
}, [loading, isFocused]);
const Item = ({ item }) => (
<View
style={styles.box}
>
<View style={styles.row}>
<View style={styles.col70}>
<Text style={styles.boxTitle}>{item.name}</Text>
<Text style={styles.boxtext}>{item.price}</Text>
</View>
<View style={[styles.col30, styles.center]}>
<MaterialCommunityIcons name="fuel" size={50} color="black" />
</View>
</View>
</View>
);
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={fuel}
renderItem={renderItem}
keyExtractor={(item) => item.id}
onRefresh={() => fetchData()}
refreshing={loading}
/>
)}
</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",
},
});
\ No newline at end of file
frontend/Screens/Station/Gasstock.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
FlatList,
} from "react-native";
import React, { useState, useEffect } from "react";
import { Entypo } from "@expo/vector-icons";
import { AntDesign } from '@expo/vector-icons';
import { useIsFocused } from "@react-navigation/native";
export default function Gasstock({ route, navigation }) {
const { user_id } = route.params;
const [loading, setLoading] = useState(true);
const [stocks, setStocks] = useState([]);
const isFocused = useIsFocused();
const fetchData = () => {
fetch("https://fuel.udarax.me/api/station/stocks/" + user_id)
.then((response) => response.json())
.then((data) => {
setStocks(data["respond"]);
setLoading(false);
});
};
function FloatButton() {
return (
<TouchableOpacity
style={[styles.floatButton, styles.center]}
onPress={() =>
navigation.navigate("GasStockAdd", {
user_id: user_id,
})
}
>
<Entypo name="plus" size={30} color="white" />
</TouchableOpacity>
);
}
useEffect(() => {
if (isFocused) {
fetchData();
}
}, [loading, isFocused]);
const Item = ({ item }) => (
<TouchableOpacity
style={styles.box}
onPress={() => navigation.navigate("GasStockEdit", { stockID: item.fcid , user_id:user_id })}
>
<View style={styles.row}>
<View style={styles.col70}>
<Text style={styles.boxTitle}>{item.name}</Text>
<Text style={styles.boxtext}>Initial Volum : {item.ini_qty}</Text>
<Text style={styles.boxtext}>Current Volum : {item.current_qty}</Text>
</View>
<View style={[styles.col30, styles.center]}>
<View style={styles.delBox}>
<AntDesign name="edit" size={20} color="white" />
</View>
</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={stocks}
renderItem={renderItem}
keyExtractor={(item) => item.fcid}
onRefresh={() => fetchData()}
refreshing={loading}
/>
)}
<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",
},
delBox:{
backgroundColor:"#f00",
borderRadius:50,
padding:15
},
});
frontend/Screens/Station/Gasstockadd.js 0 → 100644
View file @ 3d7df45c
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from "react-native";
import React, { useState, useEffect } from "react";
import DropDownPicker from "react-native-dropdown-picker";
export default function Gasstockadd({route}) {
const { user_id } = route.params;
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState();
const [qty, setQty] = useState();
const [loading, setLoading] = useState(true);
const fetchData = () => {
fetch("https://fuel.udarax.me/api/fuel/capacity/dropdown")
.then((response) => response.json())
.then((data) => {
setItems(data["respond"]);
setLoading(false);
console.log(data["respond"]);
});
};
const resetInput = () => {
console.log("aaaa");
setQty("");
setOpen(false)
setValue(null);
}
const addStocks = () =>{
if(qty != "" && qty != null && value != "" && value != null ){
console.log(value,qty,user_id);
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ fid:value,qty:qty,uid:user_id }),
};
fetch("https://fuel.udarax.me/api/fuel/capacity/create", requestOptions)
.then((response) => response.json())
.then((data) => {
console.log(data);
if(data['message'] == 'success'){
resetInput();
alert("New Stock successfully created!");
}else{
alert(data['message']);
}
});
}else{
alert('Input fields cannot be empty. Please fill all the details and try again!');
}
}
useEffect(() => {
fetchData();
}, [loading]);
return (
<View style={styles.container}>
<View style={styles.mb5}>
<Text>Fuel Quantity</Text>
<TextInput
style={styles.input}
onChangeText={setQty}
value={qty}
placeholder="Enter Amount of Leaters"
keyboardType="numeric"
/>
</View>
{!loading && (<View style={styles.mb5}>
<Text style={{ marginBottom: 5 }}>Fuel Type</Text>
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
</View>)}
<TouchableOpacity style={styles.button} onPress={addStocks}>
<Text style={styles.buttonText}>Add Station</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 20,
paddingTop: 20,
backgroundColor: "#fff",
},
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",
},
});
frontend/Screens/Station/Gasstockedit.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Alert,
Image
} from "react-native";
import React, { useState, useEffect } from "react";
export default function Gasstockedit({ route, navigation }) {
const { stockID,user_id } = route.params;
const [stock, setStock] = useState([]);
const [qty, setQty] = useState();
const [loading, setLoading] = useState(true);
const updatestock = () => {
if (qty != "" && qty != null) {
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ current_qty: qty }),
};
fetch("https://fuel.udarax.me/api/station/stocks/update/" + stockID, 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.");
}
};
const fetchData = () => {
fetch("https://fuel.udarax.me/api/station/stocks/specific/" + stockID)
.then((response) => response.json())
.then((data) => {
const res = data["respond"][0];
setStock(res);
setQty(res["current_qty"]);
setLoading(false);
console.log(res);
});
};
const deleteStock = () => {
Alert.alert(
//title
"Warning!",
//body
"Are you sure, Do you really wants to delete this Inventory?",
[
{
text: "Yes",
onPress: () => {
fetch("https://fuel.udarax.me/api/station/stocks/delete/" + stockID)
.then((response) => response.json())
.then((data) => {
console.log(data);
navigation.navigate("GasStock",{user_id:user_id});
});
},
},
{
text: "No",
onPress: () => console.log("No Pressed"),
style: "cancel",
},
],
{ cancelable: false }
);
};
useEffect(() => {
fetchData();
}, [loading]);
return (
<View style={styles.container}>
{loading && (
<View>
<Image
style={styles.tinyLogo}
source={require("../../assets/gasloading.gif")}
/>
</View>
)}
{!loading && (
<View>
<View style={styles.mb5}>
<Text>Gas Type</Text>
<TextInput
style={styles.input}
placeholder="Enter Qty"
value={stock.name}
editable={false}
/>
</View>
<View style={styles.mb5}>
<Text>Initial Oil Volum</Text>
<TextInput
style={styles.input}
placeholder="Enter Initial Qty"
value={stock.ini_qty}
editable={false}
/>
</View>
<View style={styles.mb5}>
<Text>Stocks Qty</Text>
<TextInput
style={styles.input}
placeholder="Enter Qty"
onChangeText={setQty}
value={qty}
keyboardType="numeric"
/>
</View>
<View style={styles.row}>
<TouchableOpacity style={styles.button} onPress={deleteStock}>
<Text style={styles.buttonText}>Delete</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, { backgroundColor: "#560cce" }]}
onPress={updatestock}
>
<Text style={styles.buttonText}>Update Stocks</Text>
</TouchableOpacity>
</View>
</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
flex: 1,
},
mb5: {
marginBottom: 20,
},
row: {
flexDirection: "row",
justifyContent: "space-between",
},
input: {
height: 45,
marginTop: 5,
borderWidth: 1,
padding: 10,
borderRadius: 5,
},
button: {
alignItems: "center",
backgroundColor: "#f05a36",
height: 45,
borderRadius: 5,
justifyContent: "center",
marginBottom: 20,
width: "48%",
},
buttonText: {
color: "#fff",
},
});
frontend/Screens/Station/Queue.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
FlatList,
} from "react-native";
import React, { useState, useEffect } from "react";
import { AntDesign } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useIsFocused } from "@react-navigation/native";
import { FontAwesome5 } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
export default function Queue({ route, navigation }) {
const { user_id } = route.params;
const [loading, setLoading] = useState(true);
const [queue, setQueue] = useState([]);
const isFocused = useIsFocused();
const fetchData = () => {
console.log(queue.length);
fetch("https://fuel.udarax.me/api/station/queue/" + user_id)
.then((response) => response.json())
.then((data) => {
console.log("aaa");
console.log(data["respond"]);
if (data["respond"] == "error") {
setQueue([]);
} else {
setQueue(data["respond"]);
}
setLoading(false);
});
};
useEffect(() => {
if (isFocused) {
fetchData();
}
}, [loading, isFocused]);
const Item = ({ item }) => (
<TouchableOpacity
style={styles.box}
onPress={() =>
navigation.navigate("FillingQueue", {
user_id: item.uid,
vehicle_id: item.vid,
station_id: item.sid,
fueltype_id: item.fid,
ftype: item.fname,
username: item.uname,
vehicle: item.vtype,
no: item.no,
qid: item.id,
stuid: user_id,
})
}
>
<View style={styles.row}>
<View style={styles.col70}>
<Text style={styles.boxTitle}>Queue No : {item.no}</Text>
<Text style={styles.boxtext}>Fuel Type : {item.fname}</Text>
<Text style={styles.boxtext}>User : {item.uname}</Text>
<Text style={styles.boxtext}>Vehicle Type : {item.vtype}</Text>
</View>
<View style={[styles.col30, styles.center]}>
{item.vtype == "Car" && (
<Ionicons name="car-sport" size={30} color="black" />
)}
{item.vtype == "Motorbike" && (
<MaterialCommunityIcons name="motorbike" size={30} color="black" />
)}
{item.vtype == "Bus" && (
<Ionicons name="bus" size={30} color="black" />
)}
{item.vtype == "Van" && (
<MaterialCommunityIcons
name="van-utility"
size={30}
color="black"
/>
)}
{item.vtype == "Lorry" && (
<FontAwesome5 name="truck-moving" size={30} color="black" />
)}
{item.vtype == "Threewheeler" && (
<AntDesign name="fork" size={30} 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>
)}
{queue.length == 0 && (<Text> No Details</Text>)}
{!loading && (
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={queue}
renderItem={renderItem}
keyExtractor={(item) => item.id}
onRefresh={() => fetchData()}
refreshing={loading}
/>
)}
</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/Station/Station.js 0 → 100644
View file @ 3d7df45c
import { StyleSheet, Text, View, TouchableOpacity,FlatList, Image } 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";
export default function Station({ navigation }) {
const [loading, setLoading] = useState(true);
const [stations, setStations] = useState([]);
const isFocused = useIsFocused();
const fetchData = () => {
console.log("run1");
fetch("https://fuel.udarax.me/api/station/")
.then((response) => response.json())
.then((data) =>{
setStations(data['respond']);
setLoading(false);
});
}
useEffect(() => {
if(isFocused){
fetchData();
console.log("run2");
}
}, [loading,isFocused]);
const Item = ({ item }) => (
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate("StationView",{stationID:item.id})}>
<View style={styles.row}>
<View style={styles.col70}>
<Text style={styles.boxTitle}>{item.name}</Text>
<Text style={styles.boxtext}>{item.email}</Text>
<Text style={styles.boxtext}>{item.phone}</Text>
</View>
<View style={[styles.col30,styles.center]}>
<MaterialCommunityIcons name="gas-station" size={50} color="white" />
</View>
</View>
</TouchableOpacity>
)
const renderItem = ({ item }) => (
<Item item={item} />
);
function FloatButton() {
return (
<TouchableOpacity
style={[styles.floatButton, styles.center]}
onPress={() => navigation.navigate("StationAdd")}
>
<Entypo name="plus" size={30} color="white" />
</TouchableOpacity>
);
}
return (
<View style={styles.container}>
{ loading && (
<View>
<Image style={styles.tinyLogo} source={require("../../assets/gasloading.gif")} />
</View>
)}
{ !loading && (
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={stations}
renderItem={renderItem}
keyExtractor={item => item.id}
onRefresh = {()=>fetchData()}
refreshing = {loading}
/>
)}
<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/Station/Stationadd.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
ScrollView,
TextInput,
TouchableOpacity,
} from "react-native";
import React, { useState } from "react";
export default function Stationadd() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [password, setPassword] = useState("");
const [stationName, setStationName] = useState("");
const [longitude, setLongitude] = useState("");
const [latitude, setLatitude] = useState("");
const resetInput = () => {
setName("");
setEmail("");
setPhone("");
setPassword("");
setStationName("");
setLongitude("");
setLatitude("");
}
const addStation = () => {
if(name != '' && email !='' && email !='' && phone !='' && password !='' && stationName !='' && longitude !='' && latitude !=''){
const location = latitude + ":" + longitude;
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name:name, email: email, phone:phone, pwd: password , sname:stationName,location:location }),
};
fetch("https://fuel.udarax.me/api/station/create", requestOptions)
.then((response) => response.json())
.then((data) => {
console.log(data);
if(data['message'] == 'Station successfully created'){
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>Gas Station Name</Text>
<TextInput
style={styles.input}
onChangeText={setStationName}
value={stationName}
placeholder="Enter Gas Station Name"
/>
</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={addStation}>
<Text style={styles.buttonText}>Add Station</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",
},
});
frontend/Screens/Station/Stationedit.js 0 → 100644
View file @ 3d7df45c
import {
StyleSheet,
Text,
View,
ScrollView,
TextInput,
TouchableOpacity,
Switch
} from "react-native";
import React, { useState, useEffect } from "react";
export default function Stationedit({route,navigation}) {
const { stationID } = route.params;
const [loading, setLoading] = useState(true);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [stationName, setStationName] = useState("");
const [longitude, setLongitude] = useState("");
const [latitude, setLatitude] = useState("");
const [availability, setAvailability] = useState(false);
const fetchData = () => {
fetch("https://fuel.udarax.me/api/station/"+stationID)
.then((response) => response.json())
.then((data) =>{
const res = data['respond'];
setName(res['uname']);
setEmail(res['email']);
setPhone(res['phone']);
setStationName(res['name']);
setLatitude(res['location'].split(':')[0]);
setLongitude(res['location'].split(':')[1]);
if(res['availability'] == 'open'){
setAvailability(true);
}
setLoading(false);
});
}
const updateStation = () => {
if(name != '' && email !='' && phone !='' && stationName !='' && longitude !='' && latitude !=''){
const location = latitude + ":" + longitude;
let avlStatus = 'closed';
if(availability == true){
avlStatus = "open";
}
console.log(avlStatus);
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({sname:stationName, location:location, availability: avlStatus, name: name, phone:phone }),
};
fetch("https://fuel.udarax.me/api/station/update/"+stationID, requestOptions)
.then((response) => response.json())
.then((data) => {
console.log(data);
if(data['message'] == 'success'){
alert("Station successfully Updated!");
}else{
alert(data['message']);
}
});
}else{
alert('Input fields cannot be empty. Please fill all the details and try again!');
}
}
useEffect(()=>{
fetchData();
},[loading]);
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>Contact Number</Text>
<TextInput
style={styles.input}
onChangeText={setPhone}
value={phone}
placeholder="Enter Phone Number"
/>
</View>
<View style={styles.mb5}>
<Text>Gas Station Name</Text>
<TextInput
style={styles.input}
onChangeText={setStationName}
value={stationName}
placeholder="Enter Gas Station Name"
/>
</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>
<View style={[styles.mb5,styles.row]}>
<Text>Availability</Text>
<Switch
style={{ transform: [{ scaleX: 1 }, { scaleY:1 }] }}
onValueChange={(value) => setAvailability((value))}
value={availability}
/>
</View>
<TouchableOpacity style={styles.button} onPress={updateStation}>
<Text style={styles.buttonText}>Update Station</Text>
</TouchableOpacity>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
},
row:{
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between'
},
mb5: {
marginBottom: 20,
},
input: {
height: 45,
marginTop: 5,
borderWidth: 1,
padding: 10,
borderRadius: 5,
},