Skip to content

Commit

Permalink
Merge branch 'main' of github.com:Marin2705/Jardin-ReactNative
Browse files Browse the repository at this point in the history
  • Loading branch information
@Marin2705
Marin2705 committed Mar 28, 2022
2 parents 36f1307 + 7dfa0ab commit 6b7e553
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 84 deletions.
Binary file modified assets/activity.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/chairs.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/home.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/presentation.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
160 changes: 106 additions & 54 deletions component/NewEvent.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
import React, { useState } from 'react'
import {
StyleSheet,
ScrollView,
View,
Text,
TextInput,
Pressable,
KeyboardAvoidingView,
FlatList
} from 'react-native'
import MapContainer from './MapContainer'

// Accepter la fonction childToParent passée en prop
function NewEvent({ childToParent }) {
// BOX SHADOW QUI FONCTIONNE SEULEMENT SUR MOBILE ???
// generateBoxShadowStyle(-2, 4, '#000000', 0.25, 3, 4, '#000000');
// Accepter la fonction CloseModal passée en prop
function NewEvent({ CloseModal }) {

generateBoxShadowStyle(-2, 4, '#000000', 0.25, 3, 4, '#000000');

const [touchY, setTouchY] = useState(0)
const [name, setName] = useState('')
const [description, setDescription] = useState('')
const [address, setAddress] = useState([2.337179, 48.846836])
const [address, setAddress] = useState('')
const [coord, setCoord] = useState([2.337179, 48.846836])
const [ListAddresses, setList] = useState([]);
const apitoken =
'pk.eyJ1IjoiZWxvcG4iLCJhIjoiY2t3dnRsNm5zMjNwcTJ3cDNjdjB1cWNldCJ9.tH301UpWotwarxl8l7w9HA'

let timeout
let timeout;

const getCoord = (input) => {
clearTimeout(timeout)
timeout = setTimeout(() => {
Expand All @@ -34,47 +37,61 @@ function NewEvent({ childToParent }) {
apitoken
).then((response) => {
response.json().then((value) => {
setAddress(value.features[0].center)

// Insérer dans un tableau toutes les adresses correspondantes
let tab = [];

value.features.forEach(address => {
tab.push({
name: address.place_name,
coord: address.center
})
})

// Set le state qui sera lu par la Flatlist
setList(tab)
})
})
} else {
setList([])
}
}, 600)
}

const onSubmit = () => {
let data = { name: name, description: description, lat: address[1], long: address[0] }

fetch('https://perso-etudiant.u-pem.fr/~elodie.pan/api/Surroundings.php?action=addEvent',
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: "POST",
body: JSON.stringify(data)
})
.then(() => {
childToParent();
})
}
const onSubmit = () => {
let data = { name: name, description: description, lat: coord[1], long: coord[0] }

fetch('https://perso-etudiant.u-pem.fr/~elodie.pan/api/Surroundings.php?action=addEvent',
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: "POST",
body: JSON.stringify(data)
})
.then(() => {
CloseModal();
})
}

return (
<View style={[styles.popup, styles.boxShadow]}>
{/* Drag vers le bas -> déclencher l'évènement childToParent qui sera détectée par le component parent */}
{/* Drag vers le bas -> déclencher l'évènement CloseModal qui sera détectée par le component parent */}
<Pressable
style={{ paddingVertical: 15 }}
onTouchStart={(e) => setTouchY(e.nativeEvent.pageY)}
onTouchEnd={(e) => {
if (e.nativeEvent.pageY - touchY > 20) {
childToParent()
CloseModal()
}
}}
>
<View style={styles.handle}></View>
</Pressable>

<KeyboardAvoidingView behavior="height">
<ScrollView style={styles.form}>
<KeyboardAvoidingView style={styles.form} behavior="height">

<View>
<Text>Nom</Text>
<TextInput
Expand All @@ -101,12 +118,31 @@ function NewEvent({ childToParent }) {
onChangeText={(insertedAddress) => getCoord(insertedAddress)}
defaultValue={address}
/>

<FlatList style={[styles.list, ListAddresses.length != 0 ? {borderBottomWidth: 1}:{borderBottomWidth: 0} ]}
data={ListAddresses}
keyExtractor={(item) => item.id}
renderItem={({item}) =>
// Au clic sur une adresse, la map s'actualise, la valeur de l'input et la liste des adresses est vide pour que la Flatlist soit vide et invisible
<Pressable style={[styles.listItem, ListAddresses.length != 0 ? {borderWidth: 1}:{borderWidth: 0} ]} onPress={() => {
setCoord(item.coord);
setList([]);
setAddress(item.name);
}}>

<Text>{item.name}</Text>

</Pressable>
}
/>

</View>

<View style={styles.map}>
{/* Localisation correspondant à l'adresse saisie */}
<MapContainer
lat={address[1]}
long={address[0]}
lat={coord[1]}
long={coord[0]}
name={name}
description={description}
/>
Expand All @@ -115,36 +151,36 @@ function NewEvent({ childToParent }) {
<Pressable style={styles.button} onPress={onSubmit}>
<Text style={styles.textButton}>Partager</Text>
</Pressable>
</ScrollView>

</KeyboardAvoidingView>
</View>
)
}

// Box Shadow en fonction de l'OS de l'appareil (SEULEMENT SUR MOBILE ??)
// const generateBoxShadowStyle = (
// xOffset,
// yOffset,
// shadowColorIos,
// shadowOpacity,
// shadowRadius,
// elevation,
// shadowColorAndroid,
// ) => {
// if (Platform.OS === 'ios') {
// styles.boxShadow = {
// shadowColor: shadowColorIos,
// shadowOffset: {width: xOffset, height: yOffset},
// shadowOpacity,
// shadowRadius,
// };
// } else if (Platform.OS === 'android') {
// styles.boxShadow = {
// elevation,
// shadowColor: shadowColorAndroid,
// };
// }
// };
const generateBoxShadowStyle = (
xOffset,
yOffset,
shadowColorIos,
shadowOpacity,
shadowRadius,
elevation,
shadowColorAndroid,
) => {
if (Platform.OS === 'ios') {
styles.boxShadow = {
shadowColor: shadowColorIos,
shadowOffset: {width: xOffset, height: yOffset},
shadowOpacity,
shadowRadius,
};
} else if (Platform.OS === 'android') {
styles.boxShadow = {
elevation,
shadowColor: shadowColorAndroid,
};
}
};

const styles = StyleSheet.create({
popup: {
Expand All @@ -170,6 +206,22 @@ const styles = StyleSheet.create({
padding: 5,
borderBottomWidth: 1,
},
list: {
width: '100%',
maxHeight: 280,
backgroundColor: '#FFFFFF',
borderColor: '#C4C4C4',
position: 'absolute',
top: 55,
margin: 'auto',
zIndex: 5
},
listItem: {
paddingVertical: 15,
paddingHorizontal: 5,
borderColor: '#C4C4C4',
borderBottomColor: "#C4C4C4"
},
map: {
height: 200,
backgroundColor: '#DCFFCB',
Expand Down
58 changes: 28 additions & 30 deletions component/Surroundings.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import { render } from 'react-dom';
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, FlatList, Pressable, Image, Modal, SafeAreaView } from 'react-native'
import Item from './Item'
import NewEvent from './NewEvent'

function Surroundings() {

// BOX SHADOW QUI FONCTIONNE SEULEMENT SUR MOBILE ???
// generateBoxShadowStyle(-2, 4, '#000000', 0.25, 3, 4, '#000000');
generateBoxShadowStyle(-2, 4, '#000000', 0.25, 3, 4, '#000000');

const [modalVisible, setModalVisible] = useState(false);
const [data, setData] = useState('');


const childToParent = () => {
const CloseModal = () => {
setModalVisible(false)
fetchData()
}
Expand Down Expand Up @@ -48,14 +46,14 @@ function Surroundings() {
renderItem={({item}) => <Item data={item}/>}
/>
{/* Faire apparaitre la popup au clic */}
<Pressable style={[styles.addButton]} onPress={() => {
<Pressable style={[styles.addButton, styles.boxShadow]} onPress={() => {
setModalVisible(true);
}}>
<Image source={require('../assets/add.png')}/>
</Pressable>

</View>
{/* Popup */}

<Modal
animationType="slide"
transparent={true}
Expand All @@ -65,37 +63,37 @@ function Surroundings() {
}}
>
{/* Passer une prop au component enfant et recevoir l'évènement créé par l'enfant */}
<NewEvent childToParent={childToParent} />
<NewEvent CloseModal={CloseModal} />

</Modal>
</SafeAreaView>
)
}

// Box Shadow en fonction de l'OS de l'appareil (SEULEMENT SUR MOBILE ??)
// const generateBoxShadowStyle = (
// xOffset,
// yOffset,
// shadowColorIos,
// shadowOpacity,
// shadowRadius,
// elevation,
// shadowColorAndroid,
// ) => {
// if (Platform.OS === 'ios') {
// styles.boxShadow = {
// shadowColor: shadowColorIos,
// shadowOffset: {width: xOffset, height: yOffset},
// shadowOpacity,
// shadowRadius,
// };
// } else if (Platform.OS === 'android') {
// styles.boxShadow = {
// elevation,
// shadowColor: shadowColorAndroid,
// };
// }
// };
const generateBoxShadowStyle = (
xOffset,
yOffset,
shadowColorIos,
shadowOpacity,
shadowRadius,
elevation,
shadowColorAndroid,
) => {
if (Platform.OS === 'ios') {
styles.boxShadow = {
shadowColor: shadowColorIos,
shadowOffset: {width: xOffset, height: yOffset},
shadowOpacity,
shadowRadius,
};
} else if (Platform.OS === 'android') {
styles.boxShadow = {
elevation,
shadowColor: shadowColorAndroid,
};
}
};

const styles = StyleSheet.create({
title: {
Expand Down

0 comments on commit 6b7e553

Please sign in to comment.