From 29a50b3039fa98795dc476e63bd1abacd8ce36c3 Mon Sep 17 00:00:00 2001 From: Louison PARANT Date: Wed, 15 Nov 2023 15:30:46 +0100 Subject: [PATCH] Profiles Page Add PopUp Deletion --- LeftOvers/assets/images/cross.png | Bin 0 -> 4495 bytes LeftOvers/assets/images/validate.png | Bin 0 -> 3252 bytes LeftOvers/components/ProfileDelete.tsx | 115 ++++++++++++++++ LeftOvers/components/ProfileDetails.tsx | 15 ++- LeftOvers/screens/Profiles.tsx | 170 +++++++++++++++++++++--- 5 files changed, 276 insertions(+), 24 deletions(-) create mode 100644 LeftOvers/assets/images/cross.png create mode 100644 LeftOvers/assets/images/validate.png create mode 100644 LeftOvers/components/ProfileDelete.tsx diff --git a/LeftOvers/assets/images/cross.png b/LeftOvers/assets/images/cross.png new file mode 100644 index 0000000000000000000000000000000000000000..19e410a68666839421f889c8996f7bbdc6c78941 GIT binary patch literal 4495 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 S!B-Z{+MYXnw~M!hB>f+9dWc{E literal 0 HcmV?d00001 diff --git a/LeftOvers/assets/images/validate.png b/LeftOvers/assets/images/validate.png new file mode 100644 index 0000000000000000000000000000000000000000..c174ff41aa4de3bf2e62177d308fc80088796d99 GIT binary patch literal 3252 zcmeI!i&InS6#(#alL%44@Q?+R8drQ&ySPO~W7HiK5xLa}?t%ogR>!j~-ITH$3R{qH8cOitYtEdiM7Xn7J)Ug3f_3CWI) zYe3fS_6`S}gy3z#05^)K(t9TX*o1_v3yw%9240387Cv`veqFl%fz6WEf|SXxh~2D} z@}sbFd%~pHQ#aXX)%z!X>BK!yR@SyeVw$tizAjlCc1$H191D!Bxp+8S+;HUm*yy3X z3viSFqlf&2hyyO)=T8`ql1b$K`^I!_={dcgp^xYT!1wa4iTduU+vEB{`~D|PW|g3b z1LD;FaY;$bdh@;nS34&VMIQ(?XbpLFBU81~hYc0o<+`R-l^mcZ7uuPBy3O_gs;+vJ9=e zc3Xyq0~0G7Ek&{1Gu2QB^e z#;^7GPqxFu3mz|=r>i>@d@H$7p`SQjqMd5=<7d707L1zus*K(*dO*EU!T;USv)W67 zk5f%8!eT<2?LbC#{>TV>Q$^jaP1<-^y^Y>GucW_GWA3gmxNRjJ&lOyK<2lxJn|v!t z)2mo_<}va!{KF<6hR>SK$jf8?(ZFed^A;7T6@3{aEy68!1U$)LHo)*|UA9w9{MFVQ zQ#(!?9_Af&)t~v9m0X4|J$f2VD_G)j#C5HP(gV)oEtq&}Nr1P~oBAY2V59bw#C#JY zEz1?yXqHG~=DI`QJjVBQv`>#WwH4`2;p1rUGxnf&AYIy``|fVv0BsxTy+NvY*_L5N^j%{wk8?ZRKEWA{oKaK!crwyx;RIWOljNFCKp0fso~*!OZ>_Tn&_aZC9bY1rR zBvQ8IMf`G>+F!vhzwAPEoHwl9>EsS~9mqsk94BanhDTej&Ug)e#FbuiB-ODPuiH$Y z47=h&$d_w)ftxG=J5n9)fkzFcPcFcPd>84gE5D87P{|6ue@>n~+(K{xK>>p5O9(u4 z)tXsf~(u;laUbx5S4FW*WwnbNgAHb*9b4?2z#Plb%Co0N za|9II5?D(UvoH@|fzCSp6b9}o_-a?&PLK21c;q$&(=H)ct+V#GfIA3s5cD8$L{NYr z6oDK;6qZ}OO2dbg}K*ft1L12sHfIfB;+I0&*4I3fr{uoc1Z z5d=37^dPXpBxi-vgx^IB9LJ@Do!q6xj-=EUiE)l%Dn25R{W@Xqd??cESP0D8bgj^Q-}AL#%aE%2(dQ)d3HVh% z9Sf1_CLmEl%!1G-2s8Jee1^na=vc zw|Vwh+V8M6@zhv;se#?G;}I8A-i_7O@cvtqlE_#4Wp|1)Ukxf-ftni|FY72umyPzX z2k{c;vPE~?&-X6eJPGDU>P`^FtFE(P=Js((S^b=Q&C#!h%zhwW+^<`v-q+tUVf+l_ z;Z9-f!OGh7=e!{Il2>8uvn> + allergies: list +} + +export default function ProfileDelete(props: ProfileProps) { + const [display, setDisplay] = useState("flex") + const changeListVisibility = () => { + if (display == "none"){ + setDisplay("flex") + } + else{ + setDisplay("none") + } + }; + + return ( + + + + {props.name} + + + + Filters + + + + + + + + + + + ); +} + +const styles = StyleSheet.create({ + background: { + //maxWidth: 370, + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 15, + backgroundColor: '#F2F0E4', + padding: 10, + marginHorizontal: 10, + }, + pseudoBar: { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + flex: 0.7, + width: 330, + marginBottom: 10, + }, + avatar: { + padding: 20, + resizeMode: 'contain', + borderWidth: 2, + borderColor: "#ACA279", + borderRadius: 45, + }, + text: { + fontSize: 20, + color: '#ACA279', + alignItems: 'center', + justifyContent: 'left', + flex: 0.8, + marginLeft: 20, + padding: 5, + }, + + + + filterBar: { + flexDirection: "row", + width: 300, + paddingTop: 10, + paddingBottom: 5, + alignItems: "flex-end", + justifyContent: "center", + flex: 0.2, + }, + filters: { + flex: 0.5, + fontSize: 20, + color: '#ACA279', + flex: 1, + padding: 5, + paddingLeft: 0, + paddingBottom: 0, + }, + nbSelected: { + fontSize: 11, + flex: 1, + color: "#3F3C42", + textAlign: "right", + }, + arrow: { + height: 20, + width: 20, + resizeMode: 'contain', + tintColor: "#3F3C42", + flex: 0.1, + }, +}); \ No newline at end of file diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx index 6fd6f8c..deb63f7 100644 --- a/LeftOvers/components/ProfileDetails.tsx +++ b/LeftOvers/components/ProfileDetails.tsx @@ -8,17 +8,18 @@ type ProfileProps = { avatar: string diets: list allergies: list + onDeleteProfile: () => void } export default function ProfileDetails(props: ProfileProps) { - const [display, setDisplay] = useState("none"); + const [display, setDisplay] = useState("none") const changeListVisibility = () => { - if (display == "none"){ + if (display == "none"){ setDisplay("flex") - } - else{ + } + else{ setDisplay("none") - } + } }; return ( @@ -27,7 +28,9 @@ export default function ProfileDetails(props: ProfileProps) { {props.name} - + + + diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx index 6bb5ca2..0f2e83e 100644 --- a/LeftOvers/screens/Profiles.tsx +++ b/LeftOvers/screens/Profiles.tsx @@ -1,11 +1,10 @@ -import React from 'react'; -import {StyleSheet, View} from 'react-native'; -import ProfileModification from '../components/ProfileModification'; +import {React, useState} from 'react'; +import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native'; import ProfileDetails from '../components/ProfileDetails'; -import ValidateButton from '../components/ValidateButton'; +import ProfileDelete from '../components/ProfileDelete'; import TopBar from '../components/TopBar'; -import { LinearGradient } from 'expo-linear-gradient'; -import { SafeAreaProvider } from 'react-native-safe-area-context'; +import {LinearGradient} from 'expo-linear-gradient'; +import {SafeAreaProvider} from 'react-native-safe-area-context'; export default function ModifyProfile(props) { const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}] @@ -20,21 +19,62 @@ export default function ModifyProfile(props) { const allViktor = [{value: "Pasta"}, {value: "Fish"}] const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}] + const [visible, setVisible] = useState(false); + const [opacity, setOpacity] = useState(1); + const raisePopUp = () => { + setVisible(true) + setOpacity(0.4) + } + const erasePopUp = () => { + setVisible(false) + setOpacity(1) + } + return ( - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + Do you really want to delete this profile? + + + + + Yes + + + + + + No + + + + + + + + + + ); @@ -56,4 +96,98 @@ const styles = StyleSheet.create({ padding: 10, paddingTop: 0, }, + + + + modal: { + position: 'absolute', + top: '50%', + left: '50%', + justifyContent: "center", + alignItems: "center", + width: "100%", + transform: [{ translateX: -207 }, { translateY: -140 }], + }, + viewModal: { + flexDirection: "column", + padding: 10, + alignItems: "center", + justifyContent: "center", + width: "100%", + height: 200, + }, + + + profileValidation: { + width: "100%", + alignItems: "center", + justifyContent: "center", + paddingBottom: 20, + }, + decisionBarVertical: { + flexDirection: "column", + width: "100%", + padding: 10, + height: "100%", + borderRadius: 15, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#F2F0E4", + }, + validationQuestion: { + fontSize: 20, + color: '#ACA279', + alignItems: 'center', + justifyContent: 'center', + flex: 0.3, + padding: 5, + }, + decisionBar: { + flexDirection: "row", + flex: 0.7, + width: "100%", + height: "20%", + borderRadius: 15, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#F2F0E4", + }, + yesButton: { + flexDirection: "row", + flex: 0.5, + padding: 10, + marginHorizontal: 10, + width: "90%", + borderRadius: 20, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#59BDCD", + }, + yesText: { + fontSize: 20, + color: '#3F3C42', + alignItems: 'center', + justifyContent: 'center', + flex: 0.7, + padding: 5, + }, + noButton: { + flexDirection: "row", + flex: 0.5, + padding: 10, + marginHorizontal: 10, + width: "90%", + borderRadius: 20, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#8A0000", + }, + noText: { + fontSize: 20, + color: '#F2F0E4', + alignItems: 'center', + justifyContent: 'center', + flex: 0.7, + padding: 5, + }, }); \ No newline at end of file