Skip to content

GitLab

Commit 09c424fe authored by Thomas's avatar Thomas
Browse files

no message

parent ad43b95a
Hide whitespace changes
Inline Side-by-side
TraCloSo/components/Header.js
View file @ 09c424fe
......@@ -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',
......
TraCloSo/package-lock.json
View file @ 09c424fe
......@@ -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",
......
TraCloSo/package.json
View file @ 09c424fe
......@@ -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"
......
TraCloSo/scr/Brand.js
View file @ 09c424fe
......@@ -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
TraCloSo/scr/RequestForm.js
View file @ 09c424fe
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
TraCloSo/scr/Settings.js
View file @ 09c424fe
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>
<Icon name='check' style={style.CheckIcon} size={22} color='#767577'/>
</TouchableOpacity>
<TouchableOpacity>
<Text style={style.taal}>Nederlands</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
</View>
)}
</View>
</View>
</SafeAreaView>
);
}
......@@ -67,44 +86,94 @@ const style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#ffffff',
},
Sheader: {
backgroundColor: '#A5D6AA',
height: '15%',
width: '100%',
flexDirection: 'row' //to display it 'rowwise'
height: 65,
flexDirection: 'row',
justifyContent: 'space-between', //to display it 'rowwise'
},
Accordion: {
flexGrow: 1,
paddingTop: 20,
SheaderText: {
fontSize: 24,
paddingLeft: '2%',
...Platform.select({
ios: {
marginTop: 25,
},
android: {
marginTop: 20,
}
})
},
SContent:{
marginTop: 20,
marginLeft: 20,
marginRight: 15
},
language: {
textTransform: 'uppercase',
backgroundColor: "#E5E5E5",
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingLeft: '25%',
paddingRight: '25%',
paddingTop: 10,
paddingBottom: 10,
paddingRight: 15,
},
taal:{
fontSize: 20,
padding: 5,
fontSize: 15,
padding: 7,
borderBottomWidth: 0.8,
borderBottomColor: '#C6C6C9'
},
options: {
padding: 10,
paddingLeft: 50,
padding: 5,
paddingLeft: 20,
paddingRight: 15
},
row: {
flexGrow: 0.1,
flexGrow: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 20,
borderBottomWidth: 1,
height: 60,
},
switch: {
...Platform.select({
android: {
transform: [{scaleX: 1.2}, {scaleY:1.2}],
},
ios: {
transform: [{scaleX: 0.8}, {scaleY:0.8}],
marginTop: 5
}
}),
marginRight: 10
},
Stext: {
fontSize: 18,
marginTop: 10
},
collapse: {
marginTop: 10
},
CheckIcon: {
position: 'absolute',
right: 4,
...Platform.select({
ios: {
marginTop: 6,
},
android: {
marginTop: 12,
}
})
},
ExIcon: {
...Platform.select({
ios: {
marginTop: -1,
},
android: {
marginTop: 2,
}
})
}
})
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