Skip to content

21_22-J 38
21_22-J 38
Commit 4389c895 authored by W.D.R.P. Sandeepa's avatar W.D.R.P. Sandeepa
Browse files
Options

add activity type

parent ed9a9023
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 43 deletions
frontend/src/component/TableList.js
View file @ 4389c895
......@@ -11,8 +11,8 @@ const CONTENT = {
['4 jan 2022', '2s', 'White', 'Good'],
['5 jan 2022', '2s', 'Blue', 'Good'],
['6 jan 2022', '2s', 'Yellow', 'Good'],
],
};
......@@ -45,7 +45,7 @@ export default function App() {
const styles = StyleSheet.create({
container: { flex: 0, paddingTop: 20, paddingLeft: 60, paddingRight: 60, marginTop: 0, },
head: { height: 60,},
head: { height: 60, },
wrapper: { flexDirection: 'row' },
title: { flex: 1, },
row: { height: 40 },
......
frontend/src/router/router.js
View file @ 4389c895
......@@ -11,7 +11,11 @@ import Color from '../screen/Color';
import Blue from '../screen/activity/Blue';
import Read from '../screen/Read';
import ReadActivity from '../screen/activity/readActivity';
import ReadActivity2 from '../screen/activity/readActivity2';
import ReadActivity2 from '../screen/activity/readActivity2'
import ColorResult from '../screen/result/ColorResult';;
import PrimaryType from '../screen/activity/PrimaryType'
import SecondaryType from '../screen/activity/SecondaryType'
const Stack = createNativeStackNavigator();
const AppRouter = () => {
......@@ -68,6 +72,21 @@ const AppRouter = () => {
name="ReadActivity2"
component={ReadActivity2}
/>
<Stack.Screen
options={{headerShown: false}}
name="ColorResult"
component={ColorResult}
/>
<Stack.Screen
options={{headerShown: false}}
name="PrimaryType"
component={PrimaryType}
/>
<Stack.Screen
options={{headerShown: false}}
name="SecondaryType"
component={SecondaryType}
/>
</Stack.Navigator>
</NavigationContainer>
);
......
frontend/src/screen/Color.js
View file @ 4389c895
import { useNavigation } from "@react-navigation/native";
import axios from "axios";
import React, {useState, useEffect} from "react";
import React, { useState, useEffect } from "react";
import Orientation from 'react-native-orientation-locker';
import { StyleSheet, View, Text, Pressable, SafeAreaView, ScrollView, Image, ImageBackground, Dimensions, Animated, Easing, NativeModules } from 'react-native';
import { StyleSheet, TouchableOpacity, View, Text, Pressable, SafeAreaView, ScrollView, Image, ImageBackground, Dimensions, Animated, Easing, NativeModules } from 'react-native';
import ImageButton from "../component/ImageButton";
import ColorActivity from "../component/colorActivity";
import Client from "./client/Client";
const webUrel = "http://192.168.8.101:5000/getColorActivities";
export default function Color(){
const[datas,setData] = useState([]);
export default function Color() {
const navigation = useNavigation();
function getColorActivities() {
axios
.get(webUrel)
.then((response) => {
setData(response.data);
// console.log(response.data);
})
.catch((err) => {
setNotify({
isOpen: true,
message: err.message,
type: "warning",
});
});
}
React.useEffect(() => {
getColorActivities()
const unsubscribe = navigation.addListener("focus", () => {
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
});
return unsubscribe;
}, [navigation]);
}, [navigation]);
return (
......@@ -49,25 +27,95 @@ export default function Color(){
<View>
<View>
<ImageBackground source={require("../assets/color/background.png")}
style={styles.image}>
<ImageBackground source={require("../assets/color/background.png")}
style={styles.image}>
<Text style={styles.title}>Color Activity</Text>
</ImageBackground>
</View>
</View>
{datas.map((data, index) =>{
<View style={{ marginTop: 40 }}>
<TouchableOpacity onPress={() => { navigation.navigate("PrimaryType", { title: 'Primary Activities', id: 1 }) }}
style={styles.card}>
<View style={[{ flexDirection: "row" }]}>
<View style={styles.cardImage}>
<Image source={require("../assets/type/navo1.png")}
style={{ width: 200, height: 200, borderRadius: 30 }}></Image>
</View>
<View style={{ flex: 0.6 }}>
{/* <Text style={styles.cardDescription}>{id}</Text> */}
<Text style={styles.cardTitle}>Primary</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{ marginTop: 20 }}>
<TouchableOpacity onPress={() => { navigation.navigate("SecondaryType", { title: 'Secondary Activities', id: 2 }) }}
style={styles.card2}>
<View style={[{ flexDirection: "row" }]}>
<View style={{ flex: 0.6 }}>
{/* <Text style={styles.cardDescription}>{id}</Text> */}
<Text style={styles.cardTitle}>Secondary</Text>
</View>
<View style={styles.cardImage}>
<Image source={require("../assets/type/navo2.png")}
style={{ width: 200, height: 200, borderRadius: 30 }}></Image>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{ marginTop: 20, marginBottom: 40 }}>
<TouchableOpacity onPress={() => { navigation.navigate("ColorResult") }}
style={styles.card}>
<View style={[{ flexDirection: "row" }]}>
<View style={styles.cardImage}>
<Image source={require("../assets/type/pro.png")}
style={{ width: 190, height: 200, borderRadius: 30 }}></Image>
</View>
<View style={{ flex: 0.6 }}>
{/* <Text style={styles.cardDescription}>{id}</Text> */}
<Text style={styles.cardTitle3}>Result</Text>
</View>
</View>
</TouchableOpacity>
</View>
{/* {datas.map((data, index) =>{
return(<ColorActivity key={index} title={data.name} image={data.image} id={data.idcolorActivities} des={data.des} color={data.color}/>)
})}
})} */}
</ScrollView>
</SafeAreaView>
)
)
}
const styles = StyleSheet.create({
imageContainer:{
imageContainer: {
flexDirection: "row",
marginTop: 70,
},
......@@ -90,6 +138,60 @@ const styles = StyleSheet.create({
position: "absolute",
left: 50,
bottom: 50
},
card : {
borderWidth: 5,
borderColor: "lightblue",
marginVertical: 20,
backgroundColor: "#FFD700",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
},
card2 : {
borderWidth: 5,
borderColor: "orange",
marginVertical: 20,
backgroundColor: "lightblue",
paddingVertical: 8,
paddingHorizontal: 15,
padding: 15,
width: 380,
marginHorizontal: 20,
borderRadius: 30,
shadowColor: "#000",
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: 0.3,
shadowRadius: 1.5,
},cardTitle: {
fontWeight: "bold",
color: "white",
fontSize: 35,
marginLeft: 10,
marginTop: 80,
},cardTitle3: {
fontWeight: "bold",
color: "white",
fontSize: 35,
marginLeft: 35,
marginTop: 80,
}
,cardImage: {
padding: 0,
flex: 0.7,
},
})
\ No newline at end of file
frontend/src/screen/activity/PrimaryType.js 0 → 100644
View file @ 4389c895
import { useNavigation } from "@react-navigation/native";
import React, { useState, useEffect } from "react";
import Orientation from 'react-native-orientation-locker';
import { Text, TouchableOpacity, StyleSheet, View, Image, SafeAreaView, ScrollView, ImageBackground } from 'react-native';
import ColorActivity from "../../component/colorActivity";
import client from "../client/Client";
export default function PrimaryType(title) {
// const { id, title } = props;
const title1 = title.route.params.title;
const id = title.route.params.id;
const navigation = useNavigation();
const [names, setNames] = useState([]);
function getColorActivity1() {
client
.get('getColorActivities1')
.then((response) => {
setNames(response.data);
// console.log(response.data);
})
.catch((err) => {
console.log(err);
});
}
React.useEffect(() => {
getColorActivity1();
const unsubscribe = navigation.addListener("focus", () => {
// The screen is focused
// Call any action
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
});
// Return the function to unsubscribe from the event so it gets removed on unmount
return unsubscribe;
}, [navigation]);
return (
<SafeAreaView>
<ScrollView>
<View style={{marginBottom:50}}>
<View>
<ImageBackground source={require("../../assets/color/background.png")}
style={styles.image}>
<Text style={styles.title}>{title1}</Text>
</ImageBackground>
</View>
</View>
{names.map((data, index) => {
return (<ColorActivity key={index} title={data.name} image={data.image} id={data.idcolorActivities} des={data.des} color={data.color} />)
})}
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
imageContainer: {
flexDirection: "row",
marginTop: 70,
},
imageView: {
flex: 1,
width: "90%",
height: 200,
// borderWidth:1,
// borderColor: "#000",
marginHorizontal: 15,
borderRadius: 50
},
image: {
width: "100%",
height: 250,
},
title: {
color: "white",
fontSize: 40,
position: "absolute",
left: 50,
bottom: 50
}
})
frontend/src/screen/activity/SecondaryType.js 0 → 100644
View file @ 4389c895
import { useNavigation } from "@react-navigation/native";
import Orientation from 'react-native-orientation-locker';
import React, { useState, useEffect } from "react";
import { Text, TouchableOpacity, StyleSheet, View, Image, SafeAreaView, ScrollView, ImageBackground } from 'react-native'
import ColorActivity from "../../component/colorActivity";
import client from "../client/Client";
export default function SecondaryType(title) {
// const { id, title } = props;
const title1 = title.route.params.title;
const id = title.route.params.id;
const navigation = useNavigation();
const[names, setNames] = useState([]);
function getColorActivity2() {
client
.get('getColorActivities2')
.then((response) => {
setNames(response.data);
// console.log(response.data);
})
.catch((err) => {
console.log(err);
});
}
React.useEffect(() => {
getColorActivity2();
const unsubscribe = navigation.addListener("focus", () => {
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
});
return unsubscribe;
}, [navigation]);
return (
<SafeAreaView>
<ScrollView>
<View style={{marginBottom:50}}>
<View>
<ImageBackground source={require("../../assets/color/background.png")}
style={styles.image}>
<Text style={styles.title}>{title1}</Text>
</ImageBackground>
</View>
</View>
{names.map((data, index) => {
return (<ColorActivity key={index} title={data.name} image={data.image} id={data.idcolorActivities} des={data.des} color={data.color} />)
})}
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
imageContainer: {
flexDirection: "row",
marginTop: 70,
},
imageView: {
flex: 1,
width: "90%",
height: 200,
// borderWidth:1,
// borderColor: "#000",
marginHorizontal: 15,
borderRadius: 50
},
image: {
width: "100%",
height: 250,
},
title: {
color: "white",
fontSize: 40,
position: "absolute",
left: 50,
bottom: 50
}
})
frontend/src/screen/result/ColorResult.js
View file @ 4389c895
import React, { useEffect, useState } from "react";
import { StyleSheet, View, Text, Pressable, ImageBackground, TouchableOpacity, Image, StatusBar } from 'react-native';
import { StyleSheet, View, Text, ScrollView, Pressable, ImageBackground, TouchableOpacity, Image, StatusBar } from 'react-native';
import { SafeAreaView } from "react-native-safe-area-context";
import Orientation from 'react-native-orientation-locker';
......@@ -32,7 +32,7 @@ export default function ColorResult() {
StatusBar.setHidden(true);
getColorResult();
// getColorResult();
const unsubscribe = navigation.addListener("focus", () => {
// The screen is focused
......@@ -50,7 +50,7 @@ export default function ColorResult() {
<View>
<ImageBackground style={styles.image} source={require("../../assets/result/21.jpg")}>
<View>
<BackButton path="Home" />
<BackButton path="Color" />
</View>
<View style={styles.container}>
<Image
......@@ -59,7 +59,7 @@ export default function ColorResult() {
/>
</View>
<View style={{ marginTop: -90 }}>
<TableList />
{/* <TableList /> */}
</View>
</ImageBackground>
</View>
......
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