Skip to content

P
pianoApp
Commit d9d76629 authored by norhalimah's avatar norhalimah
Browse files
Options

still updating

parent e4d95712
Hide whitespace changes
Inline Side-by-side
Showing with 912 additions and 426 deletions
App.js
View file @ d9d76629
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
//import {ImageBackground} from 'react-native';
import {Image} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Icon} from 'react-native-elements';
import Settings from './screens/settings';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
//import Settings from './screens/settings';
import SettingsScale from './screens/settingScale';
import SettingsListen from './screens/settingListen';
import Listen from './screens/listening';
import LogBook from './screens/logbook';
import LogBookScale from './screens/logbookScale';
import LogBookListen from './screens/logbookListen';
import Home from './screens/home';
import Quiz from './screens/quiz';
import Orientation from 'react-native-orientation';
const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
function LogBook() {
return (
<Tab.Navigator
activeColor="white"
inactiveColor="black"
barStyle={{backgroundColor: '#7eb9db', fontSize: 10}}>
<Tab.Screen
name="Scale"
component={LogBookScale}
options={{
tabBarLabel: 'Scale',
tabBarIcon: ({color, size}) => (
<Image
style={{height: 20, width: 30}}
source={require('./media/img/1piano.png')}
/>
),
}}
/>
<Tab.Screen
name="Listen Scale"
component={LogBookListen}
options={{
tabBarLabel: 'Listen Skill',
tabBarIcon: ({color, size}) => (
<Image
style={{height: 23, width: 30}}
source={require('./media/img/listening.png')}
/>
),
}}
/>
</Tab.Navigator>
);
}
function Settings() {
return (
<Tab.Navigator
activeColor="white"
inactiveColor="black"
barStyle={{backgroundColor: '#7eb9db', fontSize: 10}}>
<Tab.Screen
name="Scale"
component={SettingsScale}
options={{
tabBarLabel: 'Scale',
tabBarIcon: ({color, size}) => (
<Image
style={{height: 20, width: 30}}
source={require('./media/img/1piano.png')}
/>
),
}}
/>
<Tab.Screen
name="Listen Scale"
component={SettingsListen}
options={{
tabBarLabel: 'Listen Skill',
tabBarIcon: ({color, size}) => (
<Image
style={{height: 23, width: 30}}
source={require('./media/img/listening.png')}
/>
),
}}
/>
</Tab.Navigator>
);
}
class App extends React.PureComponent {
componentDidMount() {
......
media/img/settings.png
View replaced file @ e4d95712 View file @ d9d76629
media/img/settings.png

56.2 KB | W: | H:

media/img/settings.png

63.1 KB | W: | H:

media/img/settings.png
media/img/settings.png
media/img/settings.png
media/img/settings.png
  • 2-up
  • Swipe
  • Onion skin
package.json
View file @ d9d76629
......@@ -12,8 +12,9 @@
"dependencies": {
"@react-native-async-storage/async-storage": "^1.13.2",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/bottom-tabs": "^5.11.7",
"@react-navigation/drawer": "^5.11.4",
"@react-navigation/material-bottom-tabs": "^5.3.13",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"moment": "^2.29.1",
......@@ -26,6 +27,7 @@
"react-native-grid-list": "^1.1.0",
"react-native-numeric-input": "^1.8.3",
"react-native-orientation": "^3.1.3",
"react-native-paper": "^4.7.1",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.15.0",
......
screens/home.js
View file @ d9d76629
......@@ -76,7 +76,7 @@ class Home extends React.PureComponent {
style={styles.menu}
onPress={() => this.props.navigation.navigate('5')}>
<Image
style={styles.image2}
style={styles.image3}
source={require('../media/img/settings.png')}
/>
<Text style={styles.textmenu}>{'\n'}Settings</Text>
......
screens/listening.js
View file @ d9d76629
......@@ -10,31 +10,30 @@ import {
StatusBar,
TouchableHighlight,
Button,
//Image,
//Alert,
Modal,
TouchableOpacity,
Dimensions,
BackHandler,
ScrollView,
StyleSheet,
} from 'react-native';
import styles from '../style/styleListen';
import {Stopwatch} from 'react-native-stopwatch-timer';
import Orientation from 'react-native-orientation';
//import * as RNFS from 'react-native-fs';
import * as RNFS from 'react-native-fs';
import Listennotes from './dataListen';
//import OtherClass from './saveRecords';
import Sound from 'react-native-sound';
//import moment from 'moment';
//import AsyncStorage from '@react-native-async-storage/async-storage';
import moment from 'moment';
import AsyncStorage from '@react-native-async-storage/async-storage';
const path1 = RNFS.DocumentDirectoryPath + '/counterlisten.txt';
const config = {
deviceWidth: Dimensions.get('window').height,
deviceHeight: Dimensions.get('window').width,
};
//const date = moment().utcOffset('+08:00').format('D MMM');
//const time = moment().utcOffset('+08:00').format('h:mm a');
//const day = moment().utcOffset('+08:00').format('ddd');
const date = moment().utcOffset('+08:00').format('D MMM');
const time = moment().utcOffset('+08:00').format('h:mm a');
const day = moment().utcOffset('+08:00').format('ddd');
const NOTESWHITE = [{name: 'A0'},{name: 'B0'},
{name: 'C1'},{name: 'D1'},{name: 'E1'},{name: 'F1'},{name: 'G1'},{name: 'A1'},{name: 'B1'},
......@@ -99,6 +98,8 @@ class Listen extends React.Component {
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({correct : this.state.correct + 1});
this.setState({showDone: true});
this.listenRecord(this.state.correct, (this.state.wrong + 1), stime);
//console.log('finish');
}
else {
this.setState({correct : this.state.correct + 1, count:this.state.count + 1, showC: true});
......@@ -109,6 +110,8 @@ class Listen extends React.Component {
if ( (this.state.count + 1) > this.state.maxCount) {
this.setState({wrong : this.state.wrong + 1});
this.setState({showDone: true});
this.listenRecord(this.state.correct, (this.state.wrong + 1), stime);
//console.log('finish');
}
else {
this.setState({showW: true});
......@@ -119,17 +122,62 @@ class Listen extends React.Component {
};
listenRecord = async(correct, wrong, timer) => {
var listR = [];
let obj = {
correct: correct,
wrong: wrong,
timer: timer,
date: date,
time: time,
day : day,
};
this.setState({records : obj});
try {
var value = await AsyncStorage.getItem('@listening_key');
if (value !== null) {
value = JSON.parse(value);
value.push(obj);
// console.log(value);
// console.log('We have data!!');
AsyncStorage.setItem('@listening_key', JSON.stringify(value), (err)=> {
if (err){
console.log('an error');
throw err;
}
// console.log('success');
}).catch((err)=> {
console.log('error is: ' + err);
});
}
else {
listR.push(obj);
AsyncStorage.setItem('@listening_key', JSON.stringify(listR), (err)=> {
if (err){
console.log('an error');
throw err;
}
// console.log('success'); //console.log(JSON.stringify(this.state.listN));
}).catch((err)=> {
console.log('error is: ' + err);
});
}
} catch (error) {
// Error retrieving data
}
};
homeExit = async () => {
this.setState({showQuit: true});
};
playButton = () => {
console.log('play');
console.log(soundN);
console.log(Listennotes[soundN]);
this.setState({name : Listennotes[soundN].name});
//this.setState({name : Listennotes[soundN].name});
var playSound = new Sound(keySound[soundN].url, (error) => {
if (error) {
console.log('failed to load the sound', error);
......@@ -148,26 +196,6 @@ class Listen extends React.Component {
};
replayButton = () => {
console.log('replay');
console.log(soundN);
var playSound = new Sound(keySound[soundN].url, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
playSound.play((success) => {
if (success) {
// console.log('successfully finished playing');
} else {
// console.log('playback failed due to audio decoding errors');
playSound.release();
}
});
});
};
reset = () => {
this.setState({count:1});
};
......@@ -214,9 +242,6 @@ class Listen extends React.Component {
});
};
randomSound = () =>{
soundN = Math.floor(Math.random() * keySound.length);
};
componentDidMount() {
//this.removeArray();
......@@ -234,105 +259,101 @@ class Listen extends React.Component {
}
';';
randomSound= async () => {
this.setState({records: []});
try {
const value = await AsyncStorage.getItem('@setlisten_key');
console.log(JSON.parse(value));
if (value !== null) {
// We have data!!
this.setState({
logbook: JSON.parse(value),
});
// console.log(this.state.logbook);
RNFS.readFile(path1, 'ascii')
.then((ccc) => {
console.log('has notes has counter');
// console.log(ccc);
soundN = Math.floor(Math.random() * keySound.length);
console.log(Listennotes[soundN]);
this.setState({
maxCount : ccc,
});
indexS = Listennotes.findIndex(item=> item.name === this.state.name);
// console.log(this.state.name);
})
.catch((err) => {
console.log(err.message, err.code);
console.log('has notes no counter');
soundN = Math.floor(Math.random() * keySound.length);
console.log(Listennotes[soundN]);
this.setState({
maxCount : 10,
});
});
}
else {
RNFS.readFile(path1, 'ascii')
.then((res) => {
console.log('no notes has counter');
soundN = Math.floor(Math.random() * keySound.length);
console.log(Listennotes[soundN]);
this.setState({
maxCount : res,
});
//console.log(res);
})
.catch(() => {
// console.log(err.message, err.code);
console.log('no notes no counter');
soundN = Math.floor(Math.random() * keySound.length);
console.log(Listennotes[soundN]);
this.setState({
maxCount : 5,
});
});
}
} catch (error) {
// Error retrieving data
}
};
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={{
width: '100%',
height: '100%',
}}>
<Modal transparent={true} visible={this.state.showQuit} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.35,
width : Dimensions.get('window').width * 0.4,
height : Dimensions.get('window').height * 0.4,
marginTop : Dimensions.get('window').height * 0.25,
alignItems: 'center',
backgroundColor:'white',
borderRadius: 10,
borderColor: 'black',
borderWidth: 5,
}}>
style={styles.imagebackground}>
<Text style={{fontSize: 25,textAlign: 'center', marginTop: 5, color:'black'}}>Quit?</Text>
{/* Modal Quit the Scale*/}
<Modal transparent={true} visible={this.state.showQuit} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalQ}>
<Text style={styles.textquit}>Quit?</Text>
<View
style={{
alignItems: 'center',
flexDirection: 'row',
marginTop:15,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
padding: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderTopColor:'black',
borderRightColor:'black',
borderWidth: 3,
marginRight:5,
}}
style={styles.viewmodalQQ}>
<TouchableOpacity style={styles.buttonyes}
onPress={() => this.backAction()}>
<Text style={{color: 'black'}}>YES</Text>
<Text style={styles.textqq}>YES</Text>
</TouchableOpacity>
<TouchableOpacity style={{
backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderWidth: 3,
borderTopColor:'black',
marginLeft:5,
}}
<TouchableOpacity style={styles.buttonno}
onPress={() => this.setState({showQuit: false})}>
<Text style={{color: 'black'}}>NO</Text>
<Text style={styles.textqq}>NO</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
{/* Modal Correct*/}
<Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
}}>
<ImageBackground
source={require('../media/img/correctAlert.png')}
style={{
width: '130%',
height: '95%',
}}>
<Text style={{fontSize: 25,textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Correct</Text>
<View
style={{
alignItems: 'center',
marginLeft:120,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.setState({showC: false})}>
<Text style={{color: 'black'}}>OK</Text>
<View style={styles.modalbackground}>
<View style={styles.viewmodalCW}>
<ImageBackground source={require('../media/img/correctAlert.png')} style={styles.imagecw}>
<Text style={styles.textcw}>Correct</Text>
<View style={styles.viewbutton}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showC: false})}>
<Text style={styles.buttonok}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
......@@ -340,37 +361,15 @@ class Listen extends React.Component {
</View>
</Modal>
{/* Modal Wrong*/}
<Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
}}>
<ImageBackground
source={require('../media/img/wrongAlert.png')}
style={{
width: '130%',
height: '95%',
}}>
<Text style={{fontSize: 25,fontFamily: 'sans-serif', textAlign: 'center', marginTop:Dimensions.get('window').height * 0.43, marginLeft:120, color:'white'}}>Wrong</Text>
<Text style={{fontSize: 15,fontFamily: 'sans-serif', textAlign: 'center', marginLeft:120, color:'white'}}>Answer: {this.state.name}</Text>
<View
style={{
alignItems: 'center',
marginLeft:120,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:10,
marginBottom:10,
}}
onPress={() => this.setState({showW: false})}>
<Text style={{color: 'black',fontFamily: 'sans-serif'}}>OK</Text>
<View style={styles.modalbackground}>
<View style={styles.viewmodalCW}>
<ImageBackground source={require('../media/img/wrongAlert.png')} style={styles.imagecw}>
<Text style={styles.textcw}>Wrong</Text>
<View style={styles.viewbutton}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.setState({showW: false})}>
<Text style={styles.buttonok}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
......@@ -378,38 +377,18 @@ class Listen extends React.Component {
</View>
</Modal>
<Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={{backgroundColor: '#000000aa', flex: 1}}>
<View
style={{
marginLeft: Dimensions.get('window').width * 0.3,
width : Dimensions.get('window').width * 0.4,
alignItems: 'center',
}}>
<ImageBackground
source={require('../media/img/doneAlert.png')}
style={{
width: '120%',
height: '98%',
}}>
<Text style={{fontSize: 25,fontFamily: 'sans-serif', textAlign: 'center', marginTop:Dimensions.get('window').height * 0.42, marginLeft:65, color:'white'}}>Well Done</Text>
<Text style={{fontSize: 15, fontFamily: 'sans-serif', marginLeft:65, textAlign: 'center', color: 'green'}}>Correct : {this.state.correct}</Text>
<Text style={{fontSize: 15, fontFamily: 'sans-serif', marginLeft:65, textAlign: 'center', color:'red'}}>Wrong: {this.state.wrong}</Text>
{/* Modal Done*/}
<Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={styles.modalbackground}>
<View style={styles.viewmodalD}>
<ImageBackground source={require('../media/img/doneAlert.png')} style={styles.imagedone}>
<Text style={styles.textwelldone}>Well Done</Text>
<Text style={styles.modaltextcorrect}>Correct : {this.state.correct}</Text>
<Text style={styles.modaltextwrong}>Wrong: {this.state.wrong}</Text>
<View
style={{
alignItems: 'center',
marginLeft:70,
}}>
<TouchableOpacity style={{
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:5,
marginBottom:10,
}}
onPress={() => this.backAction()}>
<Text style={{color: 'black', fontFamily: 'sans-serif'}}>OK</Text>
style={styles.viewmodalDD}>
<TouchableOpacity style={styles.buttonc} onPress={() => this.backAction()}>
<Text style={styles.buttonok}>OK</Text>
</TouchableOpacity>
</View>
</ImageBackground>
......@@ -429,26 +408,25 @@ class Listen extends React.Component {
//console.log(tt);
stime = tt;
}}
options={{ container: {
backgroundColor: 'black',
padding: 5,
borderRadius: 10,
borderColor:'white',
borderWidth:3,
width: 200,
alignItems: 'center',
},
text: {
fontSize: 25,
color: '#FFF',
textAlign: 'center',
paddingTop: 5,
alignItems: 'center',
fontFamily: 'sans-serif',
},
}}
// Options for the styling
/>
options={{//timer
container: {
backgroundColor: 'black',
padding: 5,
borderRadius: 10,
borderColor:'white',
borderWidth:3,
width: 200,
alignItems: 'center',
},
text: {
fontSize: 25,
color: '#FFF',
textAlign: 'center',
paddingTop: 5,
alignItems: 'center',
fontFamily: 'sans-serif',
}}}/>
</View>
<View>
<View style={styles.submit}>
......@@ -500,174 +478,3 @@ class Listen extends React.Component {
}
export default Listen;
const styles = StyleSheet.create({
c1: {
height: '55%',
alignItems: 'center',
borderColor: 'black',
marginTop:5,
},
cc1: {
flexDirection: 'row',
marginLeft: 5,
},
t: {
fontSize: 25,
fontFamily: 'sans-serif',
},
c2: {
flexDirection: 'row',
height: '35%',
},
t1: {
color: 'black',
paddingTop: 120,
},
button: {
flex: 7,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
b1: {
marginBottom: 25,
width: 200,
height: 50,
borderRadius: 15,
alignItems: 'center',
backgroundColor: 'purple',
},
buttonText: {
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 15,
fontFamily: 'sans-serif',
},
logo: {
height: config.deviceWidth * 0.22,
width: config.deviceHeight * 0.5,
borderColor: 'black',
borderWidth: 3,
borderRadius: 10,
position: 'absolute',
marginTop: config.deviceWidth * 0.11,
backgroundColor:'white',
},
correct: {
width: 100,
textAlign: 'center',
paddingTop: 15,
color: 'white',
height: 60,
borderRadius: 10,
alignItems: 'center',
fontSize: 25,
marginRight: 10,
backgroundColor:'green',
borderColor:'white',
borderWidth: 2,
fontFamily: 'sans-serif',
},
wrong: {
width: 100,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 25,
marginRight: 10,
backgroundColor:'red',
borderWidth: 2,
fontFamily: 'sans-serif',
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 16,
color: 'white',
fontSize: 25,
backgroundColor:'black',
borderWidth: 2,
fontFamily: 'sans-serif',
},
submit: {
width: '40%',
marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
},
viewMain: {
width: '20%',
alignContent: 'flex-end',
marginLeft: 180,
marginTop: '173%',
position: 'absolute',
},
container: {
flex: 1,
},
textStyle: {
fontSize: 16,
padding: 8,
paddingTop:100,
textAlign: 'center',
fontFamily: 'sans-serif',
},
textStyleB: {
fontSize: 16,
padding: 8,
paddingTop:5,
textAlign: 'center',
color:'white',
fontFamily: 'sans-serif',
},
buttonView: {
flexDirection: 'column',
marginLeft: config.deviceHeight * 1.0,
},
buttonStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
width: '1.5%',
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '1.5%',
position: 'absolute',
},
});
screens/logbookListen.js 0 → 100644
View file @ d9d76629
/* eslint-disable prettier/prettier */
import React from 'react';
import {
SafeAreaView,
ImageBackground,
Text,
View,
ScrollView,
BackHandler,
} from 'react-native';
import styles from '../style/styleLogbook';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Orientation from 'react-native-orientation';
class LogBookListen extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
logbook: [],
};
}
displayData = async () => {
try {
const value = await AsyncStorage.getItem('@listening_key');
if (value !== null) {
this.setState({ logbook: JSON.parse(value)});
console.log(this.state.logbook);
}
} catch (error) {
// Error retrieving data
}
};
componentDidMount() {
Orientation.lockToPortrait();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
this.displayData();
}
homeExit = async () => {
this.props.navigation.navigate('1');
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//Orientation.lockToPortrait();
};
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={styles.imagebackground}>
<SafeAreaView>
<ScrollView
style={styles.scroll}>
{this.state.logbook && this.state.logbook.map((item, id) => (
<View
key ={id}
style={styles.view1}>
<View style={styles.datedays}>
<View>
<Text style={styles.textdate1}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
<Text style={styles.textdate2}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
</View>
<View>
<Text style={styles.textday}>{item.day}</Text>
</View>
</View>
<View style={styles.border}/>
<View style={styles.details}>
<Text style={styles.textcorrect}>Correct:{item.correct}</Text>
<Text style={styles.textwrong}>Wrong: {item.wrong}</Text>
<Text style={styles.texttime}>Timer: {item.timer}</Text>
<Text style={styles.texttime}>Time: {item.time}</Text>
</View>
</View>
)).reverse()}
</ScrollView>
</SafeAreaView>
</ImageBackground>
</View>
);
}
}
export default LogBookListen;
screens/logbook.js → screens/logbookScale.js
View file @ d9d76629
......@@ -12,7 +12,7 @@ import styles from '../style/styleLogbook';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Orientation from 'react-native-orientation';
class LogBook extends React.PureComponent {
class LogBookScale extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
......@@ -84,6 +84,6 @@ class LogBook extends React.PureComponent {
);
}
}
export default LogBook;
export default LogBookScale;
screens/quiz.js
View file @ d9d76629
......@@ -49,15 +49,14 @@ const NOTESWHITE = [
const NOTESBLACK = [
{name: 'C#1', url: require('../media/sound/c_c.mp3'), left:0.048},
{name: 'D#1', url: require('../media/sound/d_d.mp3'),left:0.123},
{name: 'D#1', url: require('../media/sound/d_d.mp3'),left:0.275},
{name: 'F#1', url: require('../media/sound/f_f.mp3'),left:0.348},
{name: 'G#1', url: require('../media/sound/g_g.mp3'), left:0.423},
{name: 'A#1', url: require('../media/sound/a_a.mp3'), left:0.575},
{name: 'C#2', url: require('../media/sound/c_cc.mp3'), left:0.65},
{name: 'D#2', url: require('../media/sound/d_dd.mp3'), left:0.798},
{name: 'F#2', url: require('../media/sound/f_ff.mp3'), left:0.872},
{name: 'G#2', url: require('../media/sound/g_gg.mp3'), left:0.95},
{name: 'A#2', url: require('../media/sound/a_aa.mp3'), left:0.575},
{name: 'F#1', url: require('../media/sound/d_d.mp3'),left:0.275},
{name: 'G#1', url: require('../media/sound/f_f.mp3'),left:0.348},
{name: 'A#1', url: require('../media/sound/g_g.mp3'), left:0.423},
{name: 'C#1', url: require('../media/sound/a_a.mp3'), left:0.575},
{name: 'D#2', url: require('../media/sound/c_cc.mp3'), left:0.65},
{name: 'F#2', url: require('../media/sound/d_dd.mp3'), left:0.798},
{name: 'G#2', url: require('../media/sound/f_ff.mp3'), left:0.872},
{name: 'A#2', url: require('../media/sound/g_gg.mp3'), left:0.95},
];
const keywordsList = [];
const corSound = require('../media/sound/correct.mp3');
......@@ -811,7 +810,7 @@ class Quiz extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.container}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={styles.imagebackground}>
......@@ -900,7 +899,24 @@ class Quiz extends React.Component {
stime = tt;
}}
// Options for the styling
options={[styles.optcontainer, styles.opttext]}/>
options={{//timer
container: {
backgroundColor: 'black',
padding: 5,
borderRadius: 10,
borderColor:'white',
borderWidth:3,
width: 200,
alignItems: 'center',
},
text: {
fontSize: 25,
color: '#FFF',
textAlign: 'center',
paddingTop: 5,
alignItems: 'center',
fontFamily: 'sans-serif',
}}}/>
</View>
<View style={styles.buttonView}>
<View style={styles.submit}>
......
screens/settingListen.js 0 → 100644
View file @ d9d76629
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React from 'react';
import {
SafeAreaView,
ImageBackground,
Text,
View,
Image,
ScrollView,
BackHandler,
Pressable,
} from 'react-native';
import styles from '../style/styleSettings';
import Orientation from 'react-native-orientation';
import Notes from './data';
import * as RNFS from 'react-native-fs';
import NumericInput from 'react-native-numeric-input';
import AsyncStorage from '@react-native-async-storage/async-storage';
import notesData from './dataNotes';
var path1 = RNFS.DocumentDirectoryPath + '/counterlisten.txt';
var counter = 0;
var notes = notesData;
export default class SettingsListen extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0,
listN : [],
};
}
toggleKeyword = (keyword) => {
// console.log(notes.indexOf(keyword));
let list = notes;
let index = -1;
if ((index = notes.indexOf(keyword)) !== -1) {
list.splice(index, 1);
} else {
list.push(keyword);
}
this.setState({listN: list});
if (this.state.listN !== null){
this.setState({listN: list});
this.saveData(this.state.listN);
}
else {
this.setState({listN: notes});
this.saveData2(this.state.listN);
}
this._retrieveData();
// console.log(notes);
};
saveData = async () => {
AsyncStorage.setItem('@setisten_key', JSON.stringify(this.state.listN), (err)=> {
if (err){
console.log('an error');
throw err;
}
console.log('success'); //console.log(JSON.stringify(this.state.listN));
}).catch((err)=> {
console.log('error is: ' + err);
});
};
saveData = async () => {
AsyncStorage.setItem('@notes_key', JSON.stringify(this.state.listN), (err)=> {
if (err){
console.log('an error');
throw err;
}
console.log('success'); //console.log(JSON.stringify(this.state.listN));
}).catch((err)=> {
console.log('error is: ' + err);
});
};
_retrieveData = async () => {
try {
const value = await AsyncStorage.getItem('@notes_key');
if (value !== null) {
// We have data!!
console.log(value);
}
} catch (error) {
// Error retrieving data
}
};
saveData1 = async () => {
RNFS.writeFile(path1,JSON.stringify(counter),'utf8',)
.then((success) => {
//console.log(JSON.stringify(counter));
})
.catch((err) => {
console.log(err.message);
});
};
displayData1 = async () => {
RNFS.readFile(path1, 'ascii')
.then((res) => {
console.log(JSON.stringify(res));
})
.catch((err) => {
console.log(err.message, err.code);
});
};
componentWillUnmount() {
Orientation.lockToPortrait();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
}
componentDidMount() {
// notes.splice(0, notes.length);
// console.log(notes);
Orientation.lockToPortrait();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
// console.log(notes.length);
counter = 0;
RNFS.unlink(path1).then(res => {
console.log('delete');
RNFS.scanFile(path1);
})
.catch(err => {
console.log(err.message, err.code);
});
}
onChange(number, type) {
//console.log(number, type); // 1, + or -
counter = number;
if (counter > 0) {
this.saveData1(counter);
console.log(number);
this.displayData1();
}
}
homeExit = async () => {
this.props.navigation.navigate('1');
//Orientation.lockToPortrait();
};
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={styles.imagebackground}>
<SafeAreaView>
<View style={styles.view1}>
<Text style={styles.textques}>No. of Questions : </Text>
<NumericInput
value={this.state.value}
minValue={0}
maxValue={100}
onChange={this.onChange.bind(this)}
onLimitReached={(isMax,msg) => console.log(isMax,msg)}
totalWidth={150}
totalHeight={40}
iconSize={25}
step={1}
valueType="real"
rounded
textColor="black"
iconStyle={{ color: 'white' }}
rightButtonBackgroundColor="black"
leftButtonBackgroundColor="black"/>
</View>
</SafeAreaView>
</ImageBackground>
</View>
);
}
}
screens/settings.js → screens/settingScale.js
View file @ d9d76629
......@@ -24,7 +24,7 @@ var counter = 0;
var notes = notesData;
export default class Settings extends React.Component {
export default class SettingsScale extends React.Component {
constructor(props) {
super(props);
this.state = {
......
style/styleHome.js
View file @ d9d76629
......@@ -39,4 +39,8 @@ export default StyleSheet.create({
height:150,
width:150,
},
image3:{
height:150,
width:200,
},
});
style/styleListen.js 0 → 100644
View file @ d9d76629
/* eslint-disable prettier/prettier */
import {StyleSheet, Dimensions} from 'react-native';
import config from './config';
export default StyleSheet.create({
imagebackground: {
width: '100%',
height: '100%',
},
//Modal Quit
modalbackground: {
backgroundColor: '#000000aa',
flex: 1,
},
viewmodalQ: {
marginLeft: Dimensions.get('window').height * 0.3,
width : Dimensions.get('window').height * 0.4,
height : Dimensions.get('window').width * 0.35,
marginTop : Dimensions.get('window').width * 0.25,
alignItems: 'center',
backgroundColor:'white',
borderRadius: 10,
borderColor: 'black',
borderWidth: 5,
},
textquit: {
fontSize: 25,
fontFamily: 'sans-serif',
textAlign: 'center',
marginTop: 5,
color:'black',
},
viewmodalQQ : {
alignItems: 'center',
flexDirection: 'row',
marginTop:15,
},
buttonyes: {
backgroundColor: 'white',
padding: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderTopColor:'black',
borderRightColor:'black',
borderWidth: 3,
marginRight:5,
},
buttonno: {
backgroundColor: 'white',
paddingLeft: 18,
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 10,
marginTop:10,
marginBottom:10,
borderWidth: 3,
borderTopColor:'black',
marginLeft:5,
},
textqq: {
color: 'black',
fontFamily: 'sans-serif',
},
// Modal Correct and Wrong
viewmodalCW: {
marginLeft: Dimensions.get('window').height * 0.25,
width : Dimensions.get('window').height * 0.4,
alignItems: 'center',
},
imagecw: {
width: '130%',
height: '95%',
},
textcw: {
fontSize: 25,
fontFamily: 'sans-serif',
textAlign: 'center',
marginTop:Dimensions.get('window').width * 0.43,
marginLeft:120,
color:'white',
},
viewbutton: {
alignItems: 'center',
marginLeft:120,
},
buttonc: {
backgroundColor: 'white',
borderColor: 'black',
padding: 15,
borderRadius: 5,
marginTop:10,
marginBottom:10,
},
buttonok: {
color: 'black',
},
// Modal Done
viewmodalD: {
marginLeft: Dimensions.get('window').height * 0.3,
width : Dimensions.get('window').height * 0.4,
alignItems: 'center',
},
imagedone :{
width: '120%',
height: '98%',
},
viewmodalDD: {
alignItems: 'center',
marginLeft:70,
},
textwelldone: {
fontSize: 25,
fontFamily: 'sans-serif',
textAlign: 'center',
marginTop:Dimensions.get('window').width * 0.42,
marginLeft:65,
color:'white',
},
modaltextcorrect: {
fontSize: 15,
fontFamily: 'sans-serif',
marginLeft:65,
textAlign: 'center',
color: 'green',
},
modaltextwrong: {
fontSize: 15,
fontFamily: 'sans-serif',
marginLeft:65,
textAlign: 'center',
color: 'red',
},
c1: {
height: '55%',
alignItems: 'center',
borderColor: 'black',
marginTop:5,
},
cc1: {
flexDirection: 'row',
marginLeft: 5,
},
t: {
fontSize: 25,
fontFamily: 'sans-serif',
},
c2: {
flexDirection: 'row',
height: '35%',
},
t1: {
color: 'black',
paddingTop: 120,
},
button: {
flex: 7,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
b1: {
marginBottom: 25,
width: 200,
height: 50,
borderRadius: 15,
alignItems: 'center',
backgroundColor: 'purple',
},
buttonText: {
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 15,
fontFamily: 'sans-serif',
},
logo: {
height: config.deviceWidth * 0.22,
width: config.deviceHeight * 0.5,
borderColor: 'black',
borderWidth: 3,
borderRadius: 10,
position: 'absolute',
marginTop: config.deviceWidth * 0.11,
backgroundColor:'white',
},
correct: {
width: 100,
textAlign: 'center',
paddingTop: 15,
color: 'white',
height: 60,
borderRadius: 10,
alignItems: 'center',
fontSize: 25,
marginRight: 10,
backgroundColor:'green',
borderColor:'white',
borderWidth: 2,
fontFamily: 'sans-serif',
},
wrong: {
width: 100,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 15,
color: 'white',
fontSize: 25,
marginRight: 10,
backgroundColor:'red',
borderWidth: 2,
fontFamily: 'sans-serif',
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center',
textAlign: 'center',
paddingTop: 16,
color: 'white',
fontSize: 25,
backgroundColor:'black',
borderWidth: 2,
fontFamily: 'sans-serif',
},
submit: {
width: '40%',
marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
},
viewMain: {
width: '20%',
alignContent: 'flex-end',
marginLeft: 180,
marginTop: '173%',
position: 'absolute',
},
container: {
flex: 1,
},
textStyle: {
fontSize: 16,
padding: 8,
paddingTop:100,
textAlign: 'center',
fontFamily: 'sans-serif',
},
textStyleB: {
fontSize: 16,
padding: 8,
paddingTop:5,
textAlign: 'center',
color:'white',
fontFamily: 'sans-serif',
},
buttonView: {
flexDirection: 'column',
marginLeft: config.deviceHeight * 1.0,
},
buttonStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
width: '1.5%',
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '1.5%',
position: 'absolute',
},
});
style/styleQuiz.js
View file @ d9d76629
......@@ -12,10 +12,10 @@ export default StyleSheet.create({
flex: 1,
},
viewmodalQ: {
marginLeft: Dimensions.get('window').width * 0.35,
width : Dimensions.get('window').width * 0.4,
height : Dimensions.get('window').height * 0.4,
marginTop : Dimensions.get('window').height * 0.25,
marginLeft: Dimensions.get('window').height * 0.3,
width : Dimensions.get('window').height * 0.4,
height : Dimensions.get('window').width * 0.35,
marginTop : Dimensions.get('window').width * 0.25,
alignItems: 'center',
backgroundColor:'white',
borderRadius: 10,
......@@ -64,8 +64,8 @@ export default StyleSheet.create({
},
// Modal Correct and Wrong
viewmodalCW: {
marginLeft: Dimensions.get('window').width * 0.25,
width : Dimensions.get('window').width * 0.4,
marginLeft: Dimensions.get('window').height * 0.25,
width : Dimensions.get('window').height * 0.4,
alignItems: 'center',
},
imagecw: {
......@@ -76,7 +76,7 @@ export default StyleSheet.create({
fontSize: 25,
fontFamily: 'sans-serif',
textAlign: 'center',
marginTop:Dimensions.get('window').height * 0.43,
marginTop:Dimensions.get('window').width * 0.43,
marginLeft:120,
color:'white',
},
......@@ -97,8 +97,8 @@ export default StyleSheet.create({
},
// Modal Done
viewmodalD: {
marginLeft: Dimensions.get('window').width * 0.3,
width : Dimensions.get('window').width * 0.4,
marginLeft: Dimensions.get('window').height * 0.3,
width : Dimensions.get('window').height * 0.4,
alignItems: 'center',
},
imagedone :{
......@@ -113,7 +113,7 @@ export default StyleSheet.create({
fontSize: 25,
fontFamily: 'sans-serif',
textAlign: 'center',
marginTop:Dimensions.get('window').height * 0.42,
marginTop:Dimensions.get('window').width * 0.42,
marginLeft:65,
color:'white',
},
......@@ -281,7 +281,6 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: 'black',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
......@@ -289,26 +288,7 @@ export default StyleSheet.create({
alignItems: 'center',
backgroundColor: '#92ddea',
height: '55%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
//timer
optcontainer: {
backgroundColor: 'black',
padding: 5,
borderRadius: 10,
borderColor:'white',
borderWidth:3,
width: 200,
alignItems: 'center',
},
opttext: {
fontSize: 25,
color: '#FFF',
textAlign: 'center',
paddingTop: 5,
alignItems: 'center',
fontFamily: 'sans-serif',
},
});
style/styleSettings.js
View file @ d9d76629
/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';
import config from './config';
import {StyleSheet,Dimensions} from 'react-native';
const config = {
deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height,
};
export default StyleSheet.create({
container: {
alignItems: 'center',
......@@ -46,7 +51,7 @@ export default StyleSheet.create({
flexWrap: 'wrap',
},
textques: {
fontSize: 16,
fontSize: 15,
marginRight:9,
fontFamily: 'sans-serif',
},
......
yarn.lock
View file @ d9d76629
......@@ -710,6 +710,14 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
"@callstack/react-theme-provider@^3.0.5":
version "3.0.5"
resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.5.tgz#a173e455e9603c9c45357a3b6ace1273086527ca"
integrity sha512-Iec+ybWN0FvNj87sD3oWo/49edGUP0UOSdMnzCJEFJIDYr992ECIuOV89burAAh2/ibPCxgLiK6dmgv2mO/8Tg==
dependencies:
deepmerge "^3.2.0"
hoist-non-react-statics "^3.3.0"
"@cnakazawa/watch@^1.0.3":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
......@@ -1171,10 +1179,10 @@
resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
"@react-navigation/bottom-tabs@^5.11.2":
version "5.11.2"
resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.2.tgz#5b541612fcecdea2a5024a4028da35e4a727bde6"
integrity sha512-7+hH00N9Ze74VcX8uYWVyXFXZ0Fwid+lG+SSLtmnJjk1Y6oIQpQ17EPqKO0UZlKKjhsvMlAnL5fdgFtoqnSjcA==
"@react-navigation/bottom-tabs@^5.11.7":
version "5.11.7"
resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.7.tgz#a1d220afe02b6897c0705ddc40265e65c01fa0ba"
integrity sha512-O8B/5GiME589fc6ltqV3iJxCdWXhplx+9i7tPbwx4SxKm1e1N9jdL9H8bsx+SWcMBelGfGeZ2WqRwMJzjQDT3Q==
dependencies:
color "^3.1.3"
react-native-iphone-x-helper "^1.3.0"
......@@ -1198,6 +1206,11 @@
color "^3.1.3"
react-native-iphone-x-helper "^1.3.0"
"@react-navigation/material-bottom-tabs@^5.3.13":
version "5.3.13"
resolved "https://registry.yarnpkg.com/@react-navigation/material-bottom-tabs/-/material-bottom-tabs-5.3.13.tgz#c9657008894b2ec85ed3560731e8ea6220151e5a"
integrity sha512-yx/V8wnjZPq+1Gbxeb9G2xvavS52bRB9YoTkIHbSRuug6VBLSc4yK3N1tWpc5rytQZegIL0h63jOn65uo1hm/g==
"@react-navigation/native@^5.8.10":
version "5.8.10"
resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.8.10.tgz#3fe806abff9efb085bcf595212803dd05a1347ca"
......@@ -5962,7 +5975,7 @@ react-native-grid-list@^1.1.0:
dependencies:
prop-types "^15.6.0"
react-native-iphone-x-helper@^1.3.0:
react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
......@@ -5980,6 +5993,15 @@ react-native-orientation@^3.1.3:
resolved "https://registry.yarnpkg.com/react-native-orientation/-/react-native-orientation-3.1.3.tgz#d45803841fe94b6cce9acbe904fd5ca191a3711e"
integrity sha512-A0h0E+2f95X4avmhaBG1ZT8WDxBACA/q//JN2eF1E7kq8AJVxt5XDiavv+aSBkBlqFsfF3bIS+T/DB5mXmnxuA==
react-native-paper@^4.7.1:
version "4.7.1"
resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.7.1.tgz#9f22116d39e4a129be9fd4c8d7342d0f6a20245c"
integrity sha512-37xJgCcTAELFBvE7+l9xcMW3wh2/dvrOs7TeRLIpnHsjfa+m4h+vvzb8q0YIUJOKtHcJ4cY77NHUr6JMGzNHFw==
dependencies:
"@callstack/react-theme-provider" "^3.0.5"
color "^3.1.2"
react-native-iphone-x-helper "^1.3.1"
react-native-pixel-perfect@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-native-pixel-perfect/-/react-native-pixel-perfect-1.0.2.tgz#8e6dc97e377caa4bd07f9e584ba438d53c0e25e8"
......
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