Create a Parking Management application in React Native where the application will:
~ Parking manager can create a lot: App will ask for the number of lots in the parking area, it will
then show the number of lots on the page for the parking area.
~ Each lot will be allotted a unique number.
~ App will ask for a car registration number while entering into the parking area and allot any
random parking lot to the car, If available.
~ If no lot is empty then show a toast message that Parking is full.
-
On exit, parking charges should be paid by the car and the parking lot will also be marked
empty for other cars, Calculations for parking charges are: -
First 2 hour
-
$10 will be changed for every hour then after
this is my task and i did this
my mainpage code
export default class mainPage extends React.Component<any, any> {
addValues: any
parkingLot: any
constructor(props: any) {
super(props)
this.state = {
text: ”,
slots: [],
screen: ‘screen1’,
vehicleNumber: ”,
parkingLot: [],
selectedSlot: ”,
}
}createSlot() { let tempdata: any[] = [] for (let i = 0; i < parseInt(this.state.text); i++) { tempdata.push({ allocated: false, timestamp: new Date(), }) } this.setState( { slots: [ ...this.state.slots, { id: (Math.random() + 1).toString(36).substring(7), count: parseInt(this.state.text), data: tempdata, }, ], text: '', screen: 'screen2', }, () => { this.props.navigation.navigate('floor', { slots: this.state.slots, }) }, ) } park = () => { console.log('jcjhj', this.state.parkingLot) var item = this.state.slots[ Math.floor(Math.random() * this.state.slots.length) ] console.log('Parkinglot', this.state.parkingLot, item) console.log('Slots', this.state.slots) if (this.state.slots) { } } renderItem(item: any) { return ( <TouchableOpacity style={styles.Slotinput} onPress={() => this.setState({ screen: 'screen3', selectedSlot: item.id }) } > <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}> Slot ID:-{item.id} </Text> <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}> Slot Count:-{item.count} </Text> </TouchableOpacity> ) } renderItem1(item: any) { return ( <View style={styles.Slotinput}> <Text>{item.allocated ? 'Allocated' : 'Available'}</Text> {this.state.parkingLot.map((e: any) => { return <Text>{e.carnumber}</Text> })} </View> ) // ) // } // return demo } render() { return ( <View> {this.state.screen === 'screen1' && ( <View style={styles.form}> <TextInput style={styles.input} placeholder="Enter A value for slot" onChangeText={(text: any) => this.setState({ text })} value={this.state.text} /> <TouchableOpacity style={ this.state.text && this.state.text ? styles.addItemButton : styles.BlurItemButton } disabled={this.state.text == ''} onPress={() => this.createSlot()} > <Text style={styles.buttonText}>Submit</Text> </TouchableOpacity> </View> )} </View> ) }}
my 2nd page code
export default class floor extends Component<any, any> {
handleslot: any
constructor(props: any) {
super(props)this.state = { text: '', space: props.route.params.slots, screen: 'screen1', selectedSlot: '', } } sendArray = () => { let tempdata: any[] = [] for (let i = 0; i < parseInt(this.state.text); i++) { tempdata.push({ allocated: false, timestamp: new Date(), }) } this.setState( this.props.navigation.navigate('parkingSlot', { space: this.props.route.params.slots, }), ) // alert(this.state.space.length) } renderItem = (item: any) => { console.log(item.item) return ( <TouchableOpacity style={styles.Slotinput} onPress={this.sendArray}> <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}> Slot ID:-{item.item.id} </Text> <Text style={{ fontSize: 12, color: 'white', fontWeight: 'bold' }}> Slot Count:-{item.item.count} </Text> </TouchableOpacity> ) } render() { return ( <View> <Text onPress={() => this.props.navigation.navigate('MainPage')}> Back </Text> <FlatList data={this.props.route.params.slots} renderItem={this.renderItem} keyExtractor={(item) => item.id} /> </View> ) } }
my 3rd page
export default class parkingSlot extends Component<any, any> {
constructor(props: any) {
super(props)
// console.log('parkingSlots::--', this.props.route.params.space[0].data)
this.state = {
text: '',
parkingLots: [] = this.props.route.params.space[0].data,
screen: 'screen1',
selectedSlot: '',
vehicleNumber: '',
}
}
park() {
// console.log('this.state.parkinglot', this.state.parkingLots)
this.state.parkingLots?.every((vehicleNumber: any) => {
console.log(vehicleNumber)
if (vehicleNumber.isAllocated !== true) {
vehicleNumber.isAllocated == true
return false
}
return true
})
this.setState([...this.state.parkingLots])
}
renderItem = (item: any) => {
console.log('Data', item)
return (
<TouchableOpacity style={styles.Slotinput}>
<Text>{item.allocated}</Text>
</TouchableOpacity>
)
}
render() {
return (
<View>
<Text onPress={() => this.props.navigation.goBack()}>Back</Text>
<TextInput
placeholder="Vechicle Number"
style={styles.input}
value={this.state.vehicleNumber}
onChangeText={(vehicleNumber: any) =>
this.setState({ vehicleNumber })
}
// onChangeText={data => this.setState({ vehicleNumber: data })}
></TextInput>
<TouchableOpacity
style={styles.addItemButton}
onPress={() => this.park()}
>
<Text>Park Vechicle</Text>
</TouchableOpacity>
<FlatList
data={this.props.route.params.space[0].data}
renderItem={this.renderItem}
keyExtractor={(item) => item.id}
/>
</View>
)
}
}
