Skip to content

2
2021-090 frontend
Commit fe5d897a authored by A.G.J.L.P RAJAPAKSE - IT17023610's avatar A.G.J.L.P RAJAPAKSE - IT17023610
Browse files
Options

Merge branch 'feature/auction-home-page' into 'dev' 

Feature/auction home page

See merge request !1
parents 71a17a31 a6316234
Show whitespace changes
Inline Side-by-side
Showing with 486 additions and 9 deletions
Navigations/AuctionBottomTab.js 0 → 100644
View file @ fe5d897a
import React from "react";
import {
StyleSheet,
View,
Text,
TouchableOpacity,
} from "react-native";
import { MaterialIcons, Ionicons } from "@expo/vector-icons";
import { useNavigation } from '@react-navigation/native';
import themeColors from "../assets/colors";
export function AuctionBottomTab() {
const navigation = useNavigation();
return(
<View style={styles.bottomBtn}>
<TouchableOpacity style={styles.barButtonView}
onPress={() => navigation.navigate("AuctionListScreen")}
>
<Ionicons name="cart" size={24} color={themeColors.PRIMARY_COLOR} />
<Text style={styles.iconText}>Buy</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.barButtonView}
onPress={() => navigation.navigate("UserBidScreen")}
>
<MaterialIcons name="leaderboard" size={24} color={themeColors.PRIMARY_COLOR} />
<Text style={styles.iconText}>Bids</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.barButtonView}
onPress={() => navigation.navigate("UserAuctionScreen")}
>
<MaterialIcons name="gavel" size={24} color={themeColors.PRIMARY_COLOR} />
<Text style={styles.iconText}>Auctions</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.barButtonView}
onPress={() => navigation.navigate("AuctionHomeScreen")}
>
<MaterialIcons name="home" size={24} color={themeColors.PRIMARY_COLOR} />
<Text style={styles.iconText}>Home</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
iconText: {
color: themeColors.PRIMARY_COLOR
},
bottomBtn:{
width:"100%",
height:60,
flexDirection:"row",
justifyContent:"space-between",
padding:15,
backgroundColor:"white",
alignItems:"center"
},
barButtonView:{
marginTop:5,
flexDirection:"column",
alignItems:"center"
}
})
\ No newline at end of file
Navigations/AuthStack.js
View file @ fe5d897a
import React from "react"; import React from "react";
import { createStackNavigator } from "@react-navigation/stack"; import { createStackNavigator } from "@react-navigation/stack";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { MaterialIcons } from '@expo/vector-icons';
import { SignIn } from "../screen/SignIn"; import { SignIn } from "../screen/SignIn";
import { SignUp } from "../screen/SignUp"; import { SignUp } from "../screen/SignUp";
import { HomeScreen } from "../screen/HomeScreen"; import { HomeScreen } from "../screen/HomeScreen";
...@@ -11,6 +10,10 @@ import { gamification } from "../screen/gamification"; ...@@ -11,6 +10,10 @@ import { gamification } from "../screen/gamification";
import { IotScreen } from "../screen/IotScreen"; import { IotScreen } from "../screen/IotScreen";
import { AboutUs } from "../screen/AboutUs"; import { AboutUs } from "../screen/AboutUs";
import axios from "axios"; import axios from "axios";
import HomeAuctionScreen from "../screen/Home.Auction.Screen";
import UserAuctionListScreen from "../screen/User.Auctions.Screen";
import UserBidScreen from "../screen/User.Bids.Screen";
import AuctionListScreen from "../screen/Auctions.List.Screen";
const Stack = createStackNavigator(); const Stack = createStackNavigator();
...@@ -187,6 +190,41 @@ export function AuthStack({ navigation }) { ...@@ -187,6 +190,41 @@ export function AuthStack({ navigation }) {
}, },
}} }}
/> />
<Stack.Screen
name="AuctionHomeScreen"
component={HomeAuctionScreen}
options={{
title: "Auctions",
headerTitleAlign: "center"
}}
/>
<Stack.Screen
name="UserAuctionScreen"
component={UserAuctionListScreen}
options={{
headerShown: false,
title: "My Auctions",
headerTitleAlign: "center"
}}
/>
<Stack.Screen
name="UserBidScreen"
component={UserBidScreen}
options={{
headerShown: false,
title: "My Bids",
headerTitleAlign: "center"
}}
/>
<Stack.Screen
name="AuctionListScreen"
component={AuctionListScreen}
options={{
headerShown: false,
title: "Auctions List",
headerTitleAlign: "center"
}}
/>
<Stack.Screen <Stack.Screen
name="AboutUs" name="AboutUs"
component={AboutUs} component={AboutUs}
......
assets/colors.js 0 → 100644
View file @ fe5d897a
const themeColors = {
PRIMARY_COLOR : '#11493E',
SECONDARY_COLOR : '#808080',
TERTIARY_COLOR : '#CECECE',
BLACK : '#191919',
WHITE : '#FFFFFF'
};
export default themeColors;
components/auction_item.component.js 0 → 100644
View file @ fe5d897a
import React from 'react';
import { StyleSheet, TouchableOpacity, Text } from 'react-native';
import themeColors from '../assets/colors';
export const AppAuctionItem = (props) => {
return(
<TouchableOpacity onPress={props.onPress} style={styles.button}>
<Text style={styles.label}>{props.label}</Text>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
button:{
alignItems: "center",
padding: 20,
fontSize: 16,
backgroundColor: themeColors.TERTIARY_COLOR,
borderRadius: 20,
shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 2, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
elevation: 2,
marginVertical: 10
},
label: {
fontSize: 20,
color: themeColors.WHITE
}
});
components/button.component.js 0 → 100644
View file @ fe5d897a
import React from 'react';
import { StyleSheet, TouchableOpacity, Text } from 'react-native';
import themeColors from '../assets/colors';
export const AppButton = (props) => {
return(
<TouchableOpacity onPress={props.onPress} style={styles.button}>
<Text style={styles.label}>{props.label}</Text>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
button:{
alignItems: "center",
padding: 10,
fontSize: 16,
backgroundColor: themeColors.PRIMARY_COLOR,
borderRadius: 20,
shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 2, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
elevation: 2,
marginVertical: 10
},
label: {
fontSize: 20,
color: themeColors.WHITE
}
});
components/icon_button.component.js 0 → 100644
View file @ fe5d897a
import React from 'react';
import { StyleSheet, TouchableOpacity, Text } from 'react-native';
import themeColors from '../assets/colors';
export const AppIconButton = (props) => {
return(
<TouchableOpacity onPress={props.onPress} style={styles.button}>
<Text style={styles.label}>{props.label}</Text>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
button:{
alignItems: "center",
justifyContent: 'center',
padding: 10,
fontSize: 16,
width: 150,
height: 55,
backgroundColor: themeColors.BLACK,
borderRadius: 20,
shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 2, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
elevation: 2,
marginHorizontal: 10
},
label: {
fontSize: 20,
color: themeColors.WHITE
}
});
components/text_input.component.js 0 → 100644
View file @ fe5d897a
import React from 'react';
import { StyleSheet, TextInput } from 'react-native';
import themeColors from '../assets/colors';
export const AppTextInput = (props) => {
return(
<TextInput style={styles.input}/>
)
}
const styles = StyleSheet.create({
input:{
alignItems: "center",
padding: 10,
fontSize: 16,
borderBottomColor: themeColors.SECONDARY_COLOR,
borderBottomWidth: 1,
},
Text: {
fontFamily: 'Poppins-Black',
fontSize: 22,
color: themeColors.WHITE
}
});
container/container.js 0 → 100644
View file @ fe5d897a
import React from 'react';
import { StyleSheet, View } from 'react-native';
export const AppContainer = (props) => {
return(
<View style={styles.container}>
{props.children}
</View>
)
}
const styles = StyleSheet.create({
container:{
flex: 1,
marginHorizontal: 20
}
});
screen/Auctions.List.Screen.js 0 → 100644
View file @ fe5d897a
// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/
// Import React and Component
import React from 'react';
import {View, StyleSheet, Text, ScrollView} from 'react-native';
import { AppAuctionItem } from '../components/auction_item.component';
import { AppContainer } from '../container/container';
import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
const AuctionListScreen = ({navigation}) => {
return (
<View style={styles.container}>
<AppContainer>
<Text style={styles.auctionHeading}>Auctions List</Text>
<ScrollView>
<View>
<AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/>
<AppAuctionItem label='Auction Item 2'/>
<AppAuctionItem label='Auction Item 3'/>
<AppAuctionItem label='Auction Item 4'/>
</View>
</ScrollView>
</AppContainer>
<AuctionBottomTab/>
</View>
);
};
export default AuctionListScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
header: {
height: '35%',
marginBottom: 25,
backgroundColor : themeColors.PRIMARY_COLOR
},
btnRowContainer: {
maxHeight: 100
},
contentContainer: {
flex: 1,
flexDirection: 'row',
margin: 20
},
auctionHeading: {
fontSize: 24,
fontWeight: 'bold',
color: themeColors.SECONDARY_COLOR
}
})
\ No newline at end of file
screen/Home.Auction.Screen.js 0 → 100644
View file @ fe5d897a
// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/
// Import React and Component
import React from 'react';
import {View, StyleSheet, Text, ScrollView} from 'react-native';
import { AppAuctionItem } from '../components/auction_item.component';
import { AppContainer } from '../container/container';
import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
const HomeAuctionScreen = ({navigation}) => {
return (
<View style={styles.container}>
<View style={styles.header}/>
<AppContainer>
<Text style={styles.auctionHeading}>Auctions List</Text>
<ScrollView>
<View>
<AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/>
<AppAuctionItem label='Auction Item 2'/>
<AppAuctionItem label='Auction Item 3'/>
<AppAuctionItem label='Auction Item 4'/>
</View>
</ScrollView>
</AppContainer>
<AuctionBottomTab/>
</View>
);
};
export default HomeAuctionScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
header: {
height: '35%',
marginBottom: 25,
backgroundColor : themeColors.PRIMARY_COLOR
},
btnRowContainer: {
maxHeight: 100
},
contentContainer: {
flex: 1,
flexDirection: 'row',
margin: 20
},
auctionHeading: {
fontSize: 24,
fontWeight: 'bold',
color: themeColors.SECONDARY_COLOR
}
})
\ No newline at end of file
screen/HomeScreen.js
View file @ fe5d897a
...@@ -61,7 +61,7 @@ export function HomeScreen({ navigation }) { ...@@ -61,7 +61,7 @@ export function HomeScreen({ navigation }) {
<View> <View>
<TouchableOpacity <TouchableOpacity
style={styles.Auction} style={styles.Auction}
onPress={() => navigation.navigate("gamification")} onPress={() => navigation.navigate("AuctionHomeScreen")}
> >
<Ionicons name="game-controller" size={24} color="black" /> <Ionicons name="game-controller" size={24} color="black" />
<Text style={styles.buttonText}>Auction</Text> <Text style={styles.buttonText}>Auction</Text>
......
screen/User.Auctions.Screen.js 0 → 100644
View file @ fe5d897a
// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/
// Import React and Component
import React from 'react';
import {View, StyleSheet, Text, ScrollView} from 'react-native';
import { AppAuctionItem } from '../components/auction_item.component';
import { AppContainer } from '../container/container';
import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
const UserAuctionListScreen = ({navigation}) => {
return (
<View style={styles.container}>
<AppContainer>
<Text style={styles.auctionHeading}>Auctions List</Text>
<ScrollView>
<View>
<AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/>
<AppAuctionItem label='Auction Item 2'/>
<AppAuctionItem label='Auction Item 3'/>
<AppAuctionItem label='Auction Item 4'/>
</View>
</ScrollView>
</AppContainer>
<AuctionBottomTab/>
</View>
);
};
export default UserAuctionListScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
header: {
height: '35%',
marginBottom: 25,
backgroundColor : themeColors.PRIMARY_COLOR
},
btnRowContainer: {
maxHeight: 100
},
contentContainer: {
flex: 1,
flexDirection: 'row',
margin: 20
},
auctionHeading: {
fontSize: 24,
fontWeight: 'bold',
color: themeColors.SECONDARY_COLOR
}
})
\ No newline at end of file
screen/User.Bids.Screen.js 0 → 100644
View file @ fe5d897a
// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/
// Import React and Component
import React from 'react';
import {View, StyleSheet, Text, ScrollView} from 'react-native';
import { AppAuctionItem } from '../components/auction_item.component';
import { AppContainer } from '../container/container';
import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
const UserBidScreen = ({navigation}) => {
return (
<View style={styles.container}>
<AppContainer>
<Text style={styles.auctionHeading}>Auctions List</Text>
<ScrollView>
<View>
<AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/>
<AppAuctionItem label='Auction Item 2'/>
<AppAuctionItem label='Auction Item 3'/>
<AppAuctionItem label='Auction Item 4'/>
</View>
</ScrollView>
</AppContainer>
<AuctionBottomTab/>
</View>
);
};
export default UserBidScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
header: {
height: '35%',
marginBottom: 25,
backgroundColor : themeColors.PRIMARY_COLOR
},
btnRowContainer: {
maxHeight: 100
},
contentContainer: {
flex: 1,
flexDirection: 'row',
margin: 20
},
auctionHeading: {
fontSize: 24,
fontWeight: 'bold',
color: themeColors.SECONDARY_COLOR
}
})
\ No newline at end of file
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