Skip to content

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

Merge branch 'it18218640' into 'master' 

add activity type

See merge request !129
parents ed9a9023 4389c895
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 43 deletions
frontend/src/component/TableList.js
View file @ 6b4cb5ce
......@@ -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 @ 6b4cb5ce
......@@ -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 @ 6b4cb5ce
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 @ 6b4cb5ce
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 @ 6b4cb5ce
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 @ 6b4cb5ce
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