Skip to content

21_22-J 38
21_22-J 38
Commit 4ab8647f authored by Lihinikaduwa D.N.R. 's avatar Lihinikaduwa D.N.R.
Browse files
Options

Merge branch 'it18257632' into 'master' 

create reusable modal for ReadModalNotice

See merge request !200
parents f8be19a7 766f415f
Hide whitespace changes
Inline Side-by-side
Showing with 295 additions and 188 deletions
frontend/src/component/reading/ReadModalNotice.js 0 → 100644
View file @ 4ab8647f
import React, {useEffect, useState} from 'react';
import {
Text,
TouchableOpacity,
StyleSheet,
View,
Modal,
Image,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {ImagePaths} from '../../assets/read/data/ReadData';
export default function ReadModalNotice(props) {
const {caption, validity, visibility, imagePath} = props;
const [modalVisible, setModalVisible] = useState(visibility);
const navigate = () => {};
return (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={modalVisible}>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
);
}
const styles = StyleSheet.create({
body: {
flex: 1,
},
image: {
width: '100%',
height: '100%',
},
blackboard: {
marginTop: -420,
marginLeft: 240,
width: '70%',
height: 500,
},
robo: {
marginTop: -70,
marginLeft: -5,
width: 150,
height: 200,
},
textBody: {
marginTop: 150,
marginLeft: 95,
backgroundColor: '#1DCE92',
width: 200,
borderRadius: 50,
padding: 5,
},
text: {
fontSize: 25,
justifyContent: 'center',
alignItems: 'center',
color: 'white',
textAlign: 'center',
fontWeight: 'bold',
},
button: {
padding: 10,
marginRight: 50,
color: '#000000',
marginLeft: 50,
},
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: -90,
marginLeft: -100,
},
modalView: {
marginRight: 20,
backgroundColor: '#00000000',
borderRadius: 20,
padding: 35,
alignItems: 'center',
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
centeredView3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: -20,
},
modalView3: {
margin: 20,
backgroundColor: '#FFFFFF',
borderRadius: 20,
padding: 20,
borderWidth: 5,
// borderColor: '#1DCE92',
alignItems: 'center',
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button3: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen3: {
backgroundColor: '#F194FF',
},
buttonClose3: {
backgroundColor: '#1DCE92',
},
textStyle3: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
headStyle3: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style3: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
modalText3: {
marginBottom: 15,
textAlign: 'center',
},
alert3: {
backgroundColor: 'rgba(255, 0, 0, 0.74)',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -65,
},
centeredView2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView2: {
marginTop: -10,
margin: 20,
backgroundColor: '#FFFFFFEF',
borderRadius: 20,
padding: 35,
borderWidth: 5,
// borderColor: '#red',
alignItems: 'center',
// shadowColor: 'red',
// shadowOffset: {
// width: 0,
// height: 2,
// },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button2: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen2: {
backgroundColor: '#F194FF',
},
buttonClose2: {
// backgroundColor: "#1DCE92",
},
textStyle2: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText2: {
marginBottom: 15,
textAlign: 'center',
},
headStyle2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 5,
},
head2Style2: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 30,
marginBottom: 20,
},
alert2: {
// backgroundColor: 'rgba(0, 181, 0, 0.45)',
borderRadius: 50,
width: 100,
height: 100,
marginBottom: 20,
marginTop: -80,
},
});
frontend/src/screen/reading/advanced/ReadActivityBird.js
View file @ 4ab8647f
......@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
import Client from '../../client/Client';
import ReadModal from '../../../component/reading/ReadModal';
import ReadModalFailed from '../../../component/reading/ReadModalFailed';
import ReadModalNotice from '../../../component/reading/ReadModalNotice';
export default function ReadActivityBird() {
const navigation = useNavigation();
......@@ -161,33 +162,7 @@ export default function ReadActivityBird() {
{modalVisible3 && (
<ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
{modalVisible && <ReadModalNotice visible="true" />}
<View style={{flexDirection: 'column'}}>
<ImageBackground
style={styles.image}
......
frontend/src/screen/reading/advanced/ReadActivityDog.js
View file @ 4ab8647f
......@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
import Client from '../../client/Client';
import ReadModal from '../../../component/reading/ReadModal';
import ReadModalFailed from '../../../component/reading/ReadModalFailed';
import ReadModalNotice from '../../../component/reading/ReadModalNotice';
export default function ReadActivityDog() {
const navigation = useNavigation();
......@@ -159,33 +160,7 @@ export default function ReadActivityDog() {
<ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
{modalVisible && <ReadModalNotice visible="true" />}
<View style={{flexDirection: 'column'}}>
<ImageBackground
......
frontend/src/screen/reading/advanced/ReadActivityFish.js
View file @ 4ab8647f
......@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
import Client from '../../client/Client';
import ReadModal from '../../../component/reading/ReadModal';
import ReadModalFailed from '../../../component/reading/ReadModalFailed';
import ReadModalNotice from '../../../component/reading/ReadModalNotice';
export default function ReadActivityFish() {
const navigation = useNavigation();
......@@ -177,33 +178,8 @@ export default function ReadActivityFish() {
<ReadModalFailed visible="true" imagePath={ImagePaths.bird1} />
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
{modalVisible && <ReadModalNotice visible="true" />}
<View style={{flexDirection: 'column'}}>
<ImageBackground
style={styles.image}
......
frontend/src/screen/reading/basic/ReadActivityGo.js
View file @ 4ab8647f
......@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
import Client from '../../client/Client';
import ReadModal from '../../../component/reading/ReadModal';
import ReadModalFailed from '../../../component/reading/ReadModalFailed';
import ReadModalNotice from '../../../component/reading/ReadModalNotice';
export default function ReadActivityGo() {
const navigation = useNavigation();
......@@ -100,29 +101,25 @@ export default function ReadActivityGo() {
};
const onSpeechError = e => {
// console.log('onSpeechError: ', e);
// const result = DummyReadResult.value;
// if (result.includes('hello')) {
// AsyncStorage.getItem('userId')
// .then(userId => {
// const data = {
// word: 'go',
// userId: userId,
// level: 1,
// triedCount: count,
// };
// getToken(data);
// })
// .catch(error => {
// console.log(error);
// });
// } else {
// setCount(count + 1);
// Voice.start('en-US');
// }
// console.log('count', count);
// console.log('count', count);
setCount(count + 1);
const result = e.value;
if (result.includes('go')) {
AsyncStorage.getItem('userId')
.then(userId => {
const data = {
word: 'Go',
userId: userId,
level: 'Basic',
triedCount: count,
};
getToken(data);
})
.catch(error => {
console.log(error);
});
} else {
setModalVisible3(true);
}
};
const getToken = data => {
......@@ -158,6 +155,8 @@ export default function ReadActivityGo() {
{modalVisible3 && (
<ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
)}
{modalVisible && <ReadModalNotice visible="true" />}
<View style={{flexDirection: 'column'}}>
<ImageBackground
style={styles.image}
......
frontend/src/screen/reading/basic/ReadActivityHe.js
View file @ 4ab8647f
......@@ -20,6 +20,7 @@ import {Authorize} from '../../auth/AuthenticateUser';
import Client from '../../client/Client';
import ReadModal from '../../../component/reading/ReadModal';
import ReadModalFailed from '../../../component/reading/ReadModalFailed';
import ReadModalNotice from '../../../component/reading/ReadModalNotice';
export default function ReadActivityHe() {
const navigation = useNavigation();
......@@ -112,7 +113,6 @@ export default function ReadActivityHe() {
console.log(error);
});
} else {
setModalVisible3(true);
}
};
......@@ -139,7 +139,6 @@ export default function ReadActivityHe() {
// Voice.start('en-US');
// }
// console.log('count', count);
// console.log('count', count);
};
......@@ -177,34 +176,9 @@ export default function ReadActivityHe() {
<ReadModalFailed visible="true" imagePath={ImagePaths.robot1} />
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
)}
<View style={{flexDirection: 'column'}}>
{modalVisible && <ReadModalNotice visible="true" />}
<View style={{ flexDirection: 'column' }}>
<ImageBackground
style={styles.image}
source={ImagePaths.backgroundBasic}>
......
frontend/src/screen/reading/basic/ReadActivityNo.js
View file @ 4ab8647f
......@@ -22,6 +22,7 @@ import CountDown from 'react-native-countdown-component';
import Client from '../../client/Client';
import ReadModal from '../../../component/reading/ReadModal';
import ReadModalFailed from '../../../component/reading/ReadModalFailed';
import ReadModalNotice from '../../../component/reading/ReadModalNotice';
export default function ReadActivityNo() {
const navigation = useNavigation();
......@@ -56,15 +57,14 @@ export default function ReadActivityNo() {
}, []);
function audioInit() {
// console.log('audioInit');
const colorAudio = {
const pronounceAudio = {
sampleRate: 16000,
channels: 1,
bitsPerSample: 16,
wavFile: 'color.wav', // thise wave file name
wavFile: 'no.wav', // thise wave file name
};
AudioRecord.init(colorAudio);
AudioRecord.init(pronounceAudio);
}
async function audioStart() {
......@@ -142,7 +142,7 @@ export default function ReadActivityNo() {
userId: 1,
token: 'f53af164ca2511ecbdc562bc611c4f50',
};
Client.post('reading/no' , JSON.stringify(datas), {
Client.post('reading/no', JSON.stringify(datas), {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
......@@ -180,36 +180,32 @@ export default function ReadActivityNo() {
console.log(error);
});
} else {
setModalVisible3(true);
}
console.log('count', count);
};
const onSpeechError = e => {
// setCount(count + 1);
// console.log('onSpeechError: ', e);
// const result = DummyReadResult.value;
// if (result.includes('hello')) {
// AsyncStorage.getItem('userId')
// .then(userId => {
// const data = {
// word: 'no',
// userId: userId,
// level: 1,
// triedCount: count,
// };
// getToken(data);
// })
// .catch(error => {
// console.log(error);
// });
// } else {
// setModalVisible3(true);
// console.log(count);
// }
setCount(count + 1);
const result = DummyReadResult.value;
if (result.includes('no')) {
AsyncStorage.getItem('userId')
.then(userId => {
const data = {
word: 'No',
userId: userId,
level: 'Basic',
triedCount: count,
};
getToken(data);
})
.catch(error => {
console.log(error);
});
} else {
setModalVisible3(true);
}
console.log('count', count);
};
const getToken = data => {
......@@ -247,31 +243,7 @@ export default function ReadActivityNo() {
)}
{modalVisible && (
<Modal
animationType="fade"
transparent={true}
hidden={true}
visible={true}
// onRequestClose={() => {
// setModalVisible2(!modalVisible2);
// }}
>
<View style={styles.centeredView2}>
<View style={styles.modalView2}>
<Text style={styles.headStyle2}>Press The Button</Text>
<Text style={styles.head2Style2}>And Pronounce</Text>
<TouchableOpacity
style={[styles.buttonClose2]}
onPress={() => setModalVisible(false)}>
<Image
source={ImagePaths.correct}
resizeMode="contain"
style={{width: 100, height: 70, marginBottom: -10}}
/>
</TouchableOpacity>
</View>
</View>
</Modal>
<ReadModalNotice visible="true" />
)}
<View style={{flexDirection: 'column'}}>
......
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