Commit 7b5b720e authored by 7056117's avatar 7056117
Browse files

Merge branch 'master' of https://git.science.uu.nl/0517356/gl-proj

# Conflicts:
#	TraCloSo/scr/Settings.js
parents 1f82e8d4 790f7bb5
......@@ -4,6 +4,9 @@ import { StyleSheet, Text, View, Image } from 'react-native';
//view for the header component
export default function HeaderComponent( { selectedIndex, setSelectedIndex }) {
const [searchValue, onChangeSearchValue] = React.useState("")
return (
<View>
<View style={style.header}>
......@@ -15,6 +18,8 @@ export default function HeaderComponent( { selectedIndex, setSelectedIndex }) {
containerStyle={style.searchbar}
inputContainerStyle={style.searchbarInput}
inputStyle={style.inputText}
onChangeText={onChangeSearchValue}
value={searchValue}
placeholder="Search here..."
lightTheme
round
......@@ -75,6 +80,7 @@ const style = StyleSheet.create ({
},
inputText: {
fontSize: 14,
color: 'black'
},
threeButtons: {
alignItems: 'center',
......
......@@ -1285,6 +1285,18 @@
"lodash.template": "^4.5.0"
}
},
"@expo/websql": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@expo/websql/-/websql-1.0.1.tgz",
"integrity": "sha1-//DPnBuqH3D54dZYt8OaQg2bEKk=",
"requires": {
"argsarray": "^0.0.1",
"immediate": "^3.2.2",
"noop-fn": "^1.0.0",
"pouchdb-collections": "^1.0.1",
"tiny-queue": "^0.2.1"
}
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
......@@ -2456,6 +2468,11 @@
"sprintf-js": "~1.0.2"
}
},
"argsarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/argsarray/-/argsarray-0.0.1.tgz",
"integrity": "sha1-bnIHtOzbObCviDA/pa4ivajfYcs="
},
"arr-diff": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
......@@ -3729,6 +3746,15 @@
"resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-9.1.2.tgz",
"integrity": "sha512-CCuEOQUNLYtMA0rt0sQ9u5LlIMH7lDJG7dImoorfKMsP95yHXy8dl3oCdtaz2zbsPgggVYeom9gE+gQu+Ki4rQ=="
},
"expo-sqlite": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/expo-sqlite/-/expo-sqlite-9.1.0.tgz",
"integrity": "sha512-nr6rHm2GCm+MrMAuMoL0mGbGw8aIHT/UNg/zMDb2/QjFU1ZHj7c/lI+vmmQx0ObZ+NfJfu+tyW6HqxsdMnkeog==",
"requires": {
"@expo/websql": "^1.0.1",
"lodash": "^4.17.15"
}
},
"expo-status-bar": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.0.4.tgz",
......@@ -4272,6 +4298,11 @@
"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz",
"integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA=="
},
"immediate": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
"integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q=="
},
"import-fresh": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
......@@ -5945,6 +5976,11 @@
"resolved": "https://registry.npmjs.org/node-stream-zip/-/node-stream-zip-1.13.4.tgz",
"integrity": "sha512-M2nPvnSWFFH+fgLIRZDqmhshmuzXcr+ce9BsHQX/30pXR+cEz/USMYmx9ZAFYy837W2QoDoNzhFtbZhfzaMk9A=="
},
"noop-fn": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/noop-fn/-/noop-fn-1.0.0.tgz",
"integrity": "sha1-XzPUfxPSFQ35PgywNmmemC94/78="
},
"normalize-css-color": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/normalize-css-color/-/normalize-css-color-1.0.2.tgz",
......@@ -6459,6 +6495,11 @@
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
},
"pouchdb-collections": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz",
"integrity": "sha1-/mOhfal3YRq+98uAJssalVP9g1k="
},
"pretty-format": {
"version": "26.6.2",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
......@@ -7058,6 +7099,11 @@
"resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz",
"integrity": "sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw=="
},
"react-native-sqlite-storage": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-native-sqlite-storage/-/react-native-sqlite-storage-5.0.0.tgz",
"integrity": "sha512-c1Joq3/tO1nmIcP8SkRZNolPSbfvY8uZg5lXse0TmjIPC0qHVbk96IMvWGyly1TmYCIpxpuDRc0/xCffDbYIvg=="
},
"react-native-web": {
"version": "0.16.5",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.16.5.tgz",
......@@ -7937,6 +7983,11 @@
"resolved": "https://registry.npmjs.org/timm/-/timm-1.7.1.tgz",
"integrity": "sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw=="
},
"tiny-queue": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tiny-queue/-/tiny-queue-0.2.1.tgz",
"integrity": "sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY="
},
"tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
......
......@@ -24,10 +24,14 @@
"react-native-safe-area-context": "3.2.0",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "~3.0.0",
"react-native-sqlite-storage": "^5.0.0",
"react-native-web": "^0.16.5",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.1",
"react-navigation-stack": "^2.10.4"
"react-navigation-stack": "^2.10.4",
"expo-sqlite": "~9.1.0",
"expo-file-system": "~11.0.2",
"expo-asset": "~8.3.1"
},
"devDependencies": {
"@babel/core": "^7.9.0"
......
import * as React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import Icon from "react-native-vector-icons/AntDesign";
//view for the About screen
export default function About() {
return (
<SafeAreaView style={style.container}>
<View style={style.AHeader}>
<Text style={style.AHeaderText}>Contact</Text>
</View>
);
}
const style = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
AHeader: {
backgroundColor: '#A5D6AA',
height: 65,
flexDirection: 'row',
justifyContent: 'space-between',
},
AHeaderText: {
fontSize: 24,
paddingLeft: '2%',
...Platform.select({
ios: {
marginTop: 25,
},
android: {
marginTop: 20,
}
})
}
})
\ No newline at end of file
......@@ -5,10 +5,14 @@ import { SafeAreaView, Platform, StyleSheet, Share,
import { MaterialCommunityIcons } from '@expo/vector-icons';
import MapView from 'react-native-maps';
import { Overlay } from 'react-native-elements';
import * as SQLite from 'expo-sqlite';
export default function BrandScreen({ navigation, route }) {
const {BrandName, Score, Logo} = route.params
const db = SQLite.openDatabase('traclo_db.db')
const onShare = async () => {
try {
const result = await Share.share({
......@@ -41,7 +45,7 @@ export default function BrandScreen({ navigation, route }) {
var transparancyColor = '#FF918E'
}
const [visible, setVisible] = useState(false);
const [visible, setVisible] = React.useState(false);
const toggleOverlay = () => {
setVisible(!visible);
......@@ -60,7 +64,7 @@ export default function BrandScreen({ navigation, route }) {
</View>
<View style={style.Icons}>
{/*favorite button*/}
<TouchableOpacity onPress={() => alert("You clicked on favorite")}>
<TouchableOpacity onPress={() => alert(BrandName)}>
<MaterialCommunityIcons style={{paddingRight: '5%'}} name="star-outline" size={30}/>
</TouchableOpacity>
{/*share button*/}
......@@ -242,7 +246,14 @@ const style = StyleSheet.create ({
flexDirection: 'row'
},
CloseText: {
paddingTop: 2,
...Platform.select({
ios :{
paddingTop: 4
},
android: {
paddingTop: 2
}
}),
color: 'red'
}
})
\ No newline at end of file
import * as React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import Icon from "react-native-vector-icons/AntDesign";
//view for the Contact screen
export default function Contact() {
return (
<SafeAreaView style={style.container}>
<View style={style.CHeader}>
<Text style={style.CHeaderText}>Contact</Text>
</View>
);
}
const style = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
CHeader: {
backgroundColor: '#A5D6AA',
height: 65,
flexDirection: 'row',
justifyContent: 'space-between',
},
CHeaderText: {
fontSize: 24,
paddingLeft: '2%',
...Platform.select({
ios: {
marginTop: 25,
},
android: {
marginTop: 20,
}
})
}
})
\ No newline at end of file
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import Icon from "react-native-vector-icons/AntDesign";
//view for the information screen
export default function Information() {
return (
<View style={style.container}>
<Text>Information!</Text>
</View>
<SafeAreaView style={style.container}>
<View style={style.IHeader}>
<Text style={style.IHeaderText}>Information</Text>
</View>
<ScrollView>
<View style={style.content}>
<Text style={style.title}>How did we get the information?</Text>
<Text>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</Text>
<Text style={[style.title, {paddingTop:15}]}>What does the score mean?</Text>
<Text>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</Text>
<TouchableOpacity>
<Text style={[style.title, {paddingTop:15}]}>About
<Icon name='right' size={19} color='#767577'/>
</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={[style.title, {paddingTop:15}]}>Contact
<Icon name='right' size={19} color='#767577'/>
</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
);
}
const style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff'
},
IHeader: {
backgroundColor: '#A5D6AA',
height: 65,
flexDirection: 'row',
justifyContent: 'space-between',
},
IHeaderText: {
fontSize: 24,
paddingLeft: '2%',
...Platform.select({
ios: {
marginTop: 25,
},
android: {
marginTop: 20,
}
})
},
content: {
marginTop: 20,
marginLeft: 20,
marginRight: 15
},
title: {
fontSize: 19,
},
})
\ No newline at end of file
import * as React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Overlay } from 'react-native-elements';
//view for the requestform
export default function RequestForm() {
......@@ -12,6 +13,12 @@ export default function RequestForm() {
const [Mail, onChangeMail] = React.useState("")
const [Motivation, onChangeMotivation] = React.useState("")
const [visible, setVisible] = React.useState(false);
const toggleOverlay = () => {
setVisible(!visible);
};
const checkTextInput = () => {
//Check for the Name TextInput
if (Name == "") {
......@@ -19,7 +26,7 @@ export default function RequestForm() {
return;
}
//Check for the Email TextInput
let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+(\s*)$/;
if (reg.test(Mail) === false ) {
alert('Please enter a correct e-mail adress');
return;
......@@ -29,11 +36,14 @@ export default function RequestForm() {
return;
}
//Checked Successfully
alert(Mail + " filled in " + Name + " because " + Motivation);
Alert.alert(
"Your request has been received!",
"We'll send you a conformation email and we keep you updated through the mail. You can also find more information on our social media!",
);
onChangeName('');
onChangeMail('');
onChangeMotivation('')
};
onChangeMotivation('');
};
var ButtonColor;
if (Name == '') {
......@@ -54,7 +64,7 @@ export default function RequestForm() {
<SafeAreaView style={style.container}>
<View style={style.FormHeader}>
<Text style={style.HeaderText}>Brand Request Form</Text>
<TouchableOpacity style={style.Icons} onPress={() => alert("You clicked on help")}>
<TouchableOpacity style={style.Icons} onPress={toggleOverlay}>
<MaterialCommunityIcons name="help-circle-outline" size={30}/>
</TouchableOpacity>
</View>
......@@ -97,6 +107,30 @@ export default function RequestForm() {
</TouchableOpacity>
</View>
</View>
<View>
<Overlay
fullScreen= 'true'
isVisible={visible}
onBackdropPress={toggleOverlay}
backdropStyle={style.BackDrop}
overlayStyle={style.OverlayStyle} >
<View style={{alignItems: 'center'}}>
<View style={style.help}>
<View style={style.helpheader}>
<Text style={style.helpHeaderText}>What is this form for?</Text>
</View>
<View style={style.headerContent}>
<Text style={{fontSize:18, textAlign: 'center', fontWeight: '300'}}>With this form you can request for a brand to be researched. Simply fill in the brand (already existing in the app, or a new brand), your email and motivation. We need your email in case we want to contact you. {"\n"} {"\n"}More info? Send us an email!</Text>
<Text></Text>
<MaterialCommunityIcons name='help-circle-outline' size={50} color={'black'}/>
</View>
</View>
<TouchableOpacity style={style.CloseIcon} onPress={toggleOverlay}>
<MaterialCommunityIcons name='close' size={25} color={'black'}/>
</TouchableOpacity>
</View>
</Overlay>
</View>
</SafeAreaView>
);
}
......@@ -164,5 +198,39 @@ const style = StyleSheet.create({
ButtonText: {
textAlign: 'center',
fontSize: 18
},
help: {
height: '70%',
width: '85%',
backgroundColor: '#ffffff',
marginTop: 90
},
OverlayStyle: {
backgroundColor: 'transparent',
},
CloseIcon: {
position: 'absolute',
right: '10%',
marginTop: 95,
flexDirection: 'row'
},
CloseText: {
paddingTop: 2,
color: 'black'
},
helpheader: {
height: '25%',
width: '100%',
backgroundColor: '#D1EFD6',
position: 'absolute',
alignItems: 'center'
},
helpHeaderText: {
marginTop: 40,
fontSize: 22
},
headerContent: {
marginTop: '40%',
alignItems: 'center',
}
})
\ No newline at end of file
import * as React from 'react';
import { useState } from "react";
import { StyleSheet, Text, Switch, View, TouchableOpacity } from 'react-native';
import { StyleSheet, Text, Switch, View, TouchableOpacity, LayoutAnimation, UIManager } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
......@@ -12,54 +12,73 @@ import Icon from "react-native-vector-icons/MaterialIcons";
export default function Settings() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch1 = () => setIsEnabled(previousState => !previousState);
const toggleSwitch2 = () => setIsEnabled(previousState => !previousState);
const [isEnabledDarkMode, setIsEnabledDarkMode] = useState(false);
const [isEnabledNotification, setIsEnabledNotification] = useState(true);
const toggleSwitchDarkMode = () => setIsEnabledDarkMode(previousState => !previousState);
const toggleSwitchNotification = () => setIsEnabledNotification(previousState => !previousState);
const [expanded, setExpanded] = useState(false);
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
return (
<View style={style.container}>
<SafeAreaView style={style.Sheader}>
<Text style={{ fontSize: 30 }}>Settings</Text>
</SafeAreaView>
<View style={style.row}>
<Text style={{ fontSize: 25}} >Dark mode</Text>
<Switch
trackColor={{ false: "#767577", true: "#A5D6AA" }}
thumbColor={isEnabled ? "#FFFFFF" : "#FFFFFF"}
ios_backgroundColor="#E5E5E5"
onValueChange={toggleSwitch1}
value={isEnabled}
/>
</View>
<View style={style.row}>
<Text style={{ fontSize: 25 }}>Notifications</Text>
<Switch
trackColor={{ false: "#767577", true: "#A5D6AA" }}
thumbColor={isEnabled ? "#FFFFFF" : "#FFFFFF"}
ios_backgroundColor="#E5E5E5"
onValueChange={toggleSwitch2}
value={isEnabled}
/>
<SafeAreaView style={style.container}>
<View style={style.Sheader}>
<Text style={style.SheaderText}>Settings</Text>
</View>
<Text/>
<TouchableOpacity
style={style.Accordion}
key={'Language'}
onPress={() => { }}
>
<View>
<View style={style.language}>
<Text style={{ fontSize: 25 }}>Language</Text>
<Icon name='keyboard-arrow-down' size={30} color='#767577' />
</View>
<View style={style.SContent}>
<View style={style.row}>
<Text style={style.Stext} >Dark mode</Text>
<Switch
style={style.switch}
trackColor={{ false: "#767577", true: "#A5D6AA" }}
thumbColor={isEnabledDarkMode ? "#FFFFFF" : "#FFFFFF"}
ios_backgroundColor="#E5E5E5"
onValueChange={toggleSwitchDarkMode}
value={isEnabledDarkMode}
/>
</View>
<View style={style.row}>
<Text style={style.Stext}>Notifications</Text>
<Switch
style={style.switch}
trackColor={{ false: "#767577", true: "#A5D6AA" }}
thumbColor={isEnabledNotification ? "#FFFFFF" : "#FFFFFF"}
ios_backgroundColor="#E5E5E5"
onValueChange={toggleSwitchNotification}
value={isEnabledNotification}
/>
</View>
<View style={style.collapse}>
<TouchableOpacity
style={style.Accordion}
onPress={() => {LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setExpanded(!expanded)}}
>
<View style={style.language}>
<Text style={{ fontSize: 18 }}>Language</Text>
<Icon name={expanded ? 'keyboard-arrow-up': 'keyboard-arrow-down'} style={style.ExIcon} size={30} color='#767577' />
</View>
</TouchableOpacity>
{(expanded &&
<View style={style.options}>
<Text style={style.taal}>English</Text>
<Text style={style.taal}>Nederlands</Text>
<TouchableOpacity>
<Text style={style.taal}>English</Text>