ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 00:24:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings for other users, fixed event time

Browse Source
This commit is contained in:
ivic00
2024-12-10 22:06:06 +01:00
parent 2740907d63
commit a305aedeeb
4 changed files with 171 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/pages/calendar/ManuallyAddEventModal.tsx
View File

@ -447,6 +447,12 @@ export const ManuallyAddEventModal = () => {
value={startDate} value={startDate}
onChange={(date) => { onChange={(date) => {
setStartDate(date); setStartDate(date);
if (date > endDate) {
const newEndDate = new Date(date);
newEndDate.setDate(date.getDate() + 1);
setEndDate(newEndDate);
}
}} }}
//maximumDate={endDate} //maximumDate={endDate}
style={{ style={{
@ -459,10 +465,15 @@ export const ManuallyAddEventModal = () => {
<DateTimePicker <DateTimePicker
value={startTime} value={startTime}
onChange={(time) => { onChange={(time) => {
if (time <= endTime) { if (
endDate.getDate() === startDate.getDate() &&
time.getHours() < endTime.getHours()
){
setStartTime(time); setStartTime(time);
console.log('should happen')
} }
}} }}
maximumDate={endTime}
minuteInterval={5} minuteInterval={5}
dateTimeFormatter={(date, mode) => dateTimeFormatter={(date, mode) =>
date.toLocaleTimeString("en-us", { date.toLocaleTimeString("en-us", {
@ -508,6 +519,8 @@ export const ManuallyAddEventModal = () => {
const newEndDate = new Date(endDate); const newEndDate = new Date(endDate);
newEndDate.setDate(newEndDate.getDate() + 1); newEndDate.setDate(newEndDate.getDate() + 1);
setEndDate(newEndDate); setEndDate(newEndDate);
console.log('new day');
} }
}} }}
minuteInterval={5} minuteInterval={5}

4
components/pages/settings/SettingsPage.tsx
View File

@ -43,7 +43,7 @@ const SettingsPage = () => {
{pageIndex == 0 && ( {pageIndex == 0 && (
<View flexG centerH marginH-30 marginT-30> <View flexG centerH marginH-30 marginT-30>
<Button <Button
disabled={isntParent} disabled={false}
backgroundColor="white" backgroundColor="white"
style={styles.mainBtn} style={styles.mainBtn}
children={ children={
@ -63,7 +63,7 @@ const SettingsPage = () => {
onPress={() => setPageIndex(1)} onPress={() => setPageIndex(1)}
/> />
<Button <Button
disabled={isntParent} disabled={false}
backgroundColor="white" backgroundColor="white"
style={styles.mainBtn} style={styles.mainBtn}
children={ children={

148
components/pages/settings/user_settings_views/MyGroup.tsx
View File

@ -169,20 +169,22 @@ const MyGroup: React.FC<MyGroupProps> = ({
> >
{member.pfp ? ( {member.pfp ? (
<ImageBackground <ImageBackground
style={[ style={[
styles.pfp, styles.pfp,
(member.eventColor && { (member.eventColor && {
borderWidth: 2, borderWidth: 2,
borderColor: member.eventColor, borderColor: member.eventColor,
}) || }) ||
undefined, undefined,
]} ]}
borderRadius={10.56}
source={{ uri: member.pfp || undefined }} source={{ uri: member.pfp || undefined }}
/> />
) : ( ) : (
<View <View
style={[styles.pfp, { backgroundColor: member.eventColor || colorMap.pink }]} style={[
styles.pfp,
{ backgroundColor: member.eventColor || colorMap.pink },
]}
/> />
)} )}
<View row marginL-10 centerV> <View row marginL-10 centerV>
@ -212,7 +214,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
{!!caregivers.length && ( {!!caregivers.length && (
<View style={styles.card}> <View style={styles.card}>
<Text style={styles.subTit} marginB-10 marginT-15> <Text style={styles.subTit} marginB-10>
Caregivers Caregivers
</Text> </Text>
{caregivers?.map((member) => ( {caregivers?.map((member) => (
@ -223,71 +225,104 @@ const MyGroup: React.FC<MyGroupProps> = ({
style={styles.familyCard} style={styles.familyCard}
row row
centerV centerV
padding-10 paddingT-10
> >
<Avatar {member.pfp ? (
source={{ uri: member?.pfp ?? undefined }} <ImageBackground
size={40} style={[
backgroundColor={Colors.grey60} styles.pfp,
/> (member.eventColor && {
<View marginL-10> borderWidth: 2,
<Text text70M> borderColor: member.eventColor,
}) ||
undefined,
]}
source={{ uri: member.pfp || undefined }}
/>
) : (
<View
style={[
styles.pfp,
{ backgroundColor: member.eventColor || colorMap.pink },
]}
/>
)}
<View row marginL-10 centerV>
<Text style={styles.name}>
{member.firstName} {member.lastName} {member.firstName} {member.lastName}
</Text> </Text>
<Text text90 grey40>
Caregiver
</Text>
</View> </View>
<View flexG />
<View flex-1 /> <View row centerV gap-10>
<Text style={styles.userType}>Caregiver</Text>
<UserMenu <UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)} setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid} showQRCodeDialog={showQRCodeDialog === member?.uid}
user={member} user={member}
/> />
{profileData?.userType === ProfileType.PARENT && (
<UserOptions user={member} />
)}
</View>
</Card> </Card>
))} ))}
</View> </View>
)} )}
{!!familyDevices.length && ( {!!familyDevices.length && (
<> <View style={styles.card}>
<Text text70 marginB-10 marginT-15> <Text style={styles.subTit} marginB-10>
Family Devices Family Devices
</Text> </Text>
{familyDevices?.map((member, index) => ( {familyDevices?.map((member, index) => (
<Card <Card
enableShadow={false} enableShadow={false}
elevation={0} elevation={0}
key={`${member.firstName}_${member.lastName}_${index}`} key={`${member.firstName}_${index}`}
style={styles.familyCard} style={styles.familyCard}
row row
centerV centerV
padding-10 paddingT-10
> >
<Avatar {member.pfp ? (
source={{ uri: member?.pfp ?? undefined }} <ImageBackground
size={40} style={[
backgroundColor={Colors.grey60} styles.pfp,
/> (member.eventColor && {
<View marginL-10> borderWidth: 2,
<Text text70M>{member.firstName}</Text> borderColor: member.eventColor,
<Text text90 grey40> }) ||
Family Device undefined,
</Text> ]}
imageStyle={{ borderRadius: 10.56 }}
source={{ uri: member.pfp || undefined }}
/>
) : (
<View
style={[
styles.pfp,
{ backgroundColor: member.eventColor || colorMap.pink },
]}
/>
)}
<View row marginL-10 centerV>
<Text style={styles.name}>{member.firstName}</Text>
</View>
<View flexG />
<View row centerV gap-10>
<Text style={styles.userType}>Family Device</Text>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
user={member}
/>
{profileData?.userType === ProfileType.PARENT && (
<UserOptions user={member} />
)}
</View> </View>
<View flex-1 />
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
user={member}
/>
</Card> </Card>
))} ))}
</> </View>
)} )}
</View> </View>
</ScrollView> </ScrollView>
@ -630,7 +665,12 @@ const styles = StyleSheet.create({
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13, fontSize: 13,
}, },
pfp: { aspectRatio: 1, width: 37.03, borderRadius: 10.56 }, pfp: {
aspectRatio: 1,
width: 37.03,
borderRadius: 10.56,
overflow: "hidden",
},
userType: { userType: {
fontFamily: "Manrope_500Medium", fontFamily: "Manrope_500Medium",
fontSize: 12, fontSize: 12,

105
components/pages/settings/user_settings_views/MyProfile.tsx
View File

@ -15,7 +15,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
import * as tz from "tzdata"; import * as tz from "tzdata";
import * as Localization from "expo-localization"; import * as Localization from "expo-localization";
import debounce from "debounce"; import debounce from "debounce";
import { useAuthContext } from "@/contexts/AuthContext"; import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData"; import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture"; import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
import { colorMap } from "@/constants/colorMap"; import { colorMap } from "@/constants/colorMap";
@ -24,9 +24,13 @@ import { AntDesign } from "@expo/vector-icons";
import { useDeleteUser } from "@/hooks/firebase/useDeleteUser"; import { useDeleteUser } from "@/hooks/firebase/useDeleteUser";
import { useUpdateHouseholdName } from "@/hooks/firebase/useUpdateHouseholdName"; import { useUpdateHouseholdName } from "@/hooks/firebase/useUpdateHouseholdName";
import { useGetHouseholdName } from "@/hooks/firebase/useGetHouseholdName"; import { useGetHouseholdName } from "@/hooks/firebase/useGetHouseholdName";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
const MyProfile = () => { const MyProfile = () => {
const { user, profileData } = useAuthContext(); const { user, profileData } = useAuthContext();
const { data: familyMembers } = useGetFamilyMembers();
const [takenColors, setTakenColors] = useState<string[]>([]);
const { data: hhName, refetch: refetchHHName } = useGetHouseholdName( const { data: hhName, refetch: refetchHHName } = useGetHouseholdName(
profileData.familyId profileData.familyId
); );
@ -91,6 +95,15 @@ const MyProfile = () => {
handleUpdateHouseholdName(); handleUpdateHouseholdName();
}, [householdName]); }, [householdName]);
useEffect(() => {
if (familyMembers) {
const colors = familyMembers
.filter(member => member?.eventColor && member.uid !== user?.uid)
.map(member => member.eventColor!);
setTakenColors(colors);
}
}, [familyMembers]);
useEffect(() => { useEffect(() => {
if (profileData) { if (profileData) {
setFirstName(profileData.firstName || ""); setFirstName(profileData.firstName || "");
@ -214,18 +227,22 @@ const MyProfile = () => {
)} )}
</View> </View>
<View paddingH-15> <View paddingH-15>
<Text text80 marginT-10 marginB-7 style={styles.label}> {profileData?.userType == ProfileType.PARENT && (
Household <>
</Text> <Text text80 marginT-10 marginB-7 style={styles.label}>
<TextField Household
text70 </Text>
placeholder="Household name" <TextField
style={styles.txtBox} text70
value={householdName} placeholder="Household name"
onChangeText={async (value) => { style={styles.txtBox}
setHouseholdName(value); value={householdName}
}} onChangeText={async (value) => {
/> setHouseholdName(value);
}}
/>
</>
)}
<Text text80 marginT-10 marginB-7 style={styles.label}> <Text text80 marginT-10 marginB-7 style={styles.label}>
First name First name
</Text> </Text>
@ -267,81 +284,81 @@ const MyProfile = () => {
Color Preference Color Preference
</Text> </Text>
<View row spread> <View row spread>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)} disabled={takenColors.includes(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.pink) ? 0.1 : 1}]} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && ( {selectedColor == colorMap.pink && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)} disabled={takenColors.includes(colorMap.orange)}>
<View style={styles.colorBox} backgroundColor={colorMap.orange}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.orange) ? 0.1 : 1}]} backgroundColor={colorMap.orange}>
{selectedColor == colorMap.orange && ( {selectedColor == colorMap.orange && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)} disabled={takenColors.includes(colorMap.green)}>
<View style={styles.colorBox} backgroundColor={colorMap.green}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.green) ? 0.1 : 1}]} backgroundColor={colorMap.green}>
{selectedColor == colorMap.green && ( {selectedColor == colorMap.green && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)} disabled={takenColors.includes(colorMap.teal)}>
<View style={styles.colorBox} backgroundColor={colorMap.teal}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.teal) ? 0.1 : 1}]} backgroundColor={colorMap.teal}>
{selectedColor == colorMap.teal && ( {selectedColor == colorMap.teal && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}disabled={takenColors.includes(colorMap.purple)}>
<View style={styles.colorBox} backgroundColor={colorMap.purple}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.purple) ? 0.1 : 1}]} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && ( {selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View row spread marginT-10> <View row spread marginT-10>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)} disabled={takenColors.includes(colorMap.navy)}>
<View style={styles.colorBox} backgroundColor={colorMap.navy}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.navy) ? 0.1 : 1}]} backgroundColor={colorMap.navy}>
{selectedColor == colorMap.navy && ( {selectedColor == colorMap.navy && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.red)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)} disabled={takenColors.includes(colorMap.red)}>
<View style={styles.colorBox} backgroundColor={colorMap.red}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.red) ? 0.1 : 1}]} backgroundColor={colorMap.red}>
{selectedColor == colorMap.red && ( {selectedColor == colorMap.red && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)} disabled={takenColors.includes(colorMap.indigo)}>
<View style={styles.colorBox} backgroundColor={colorMap.indigo}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.indigo) ? 0.1 : 1}]} backgroundColor={colorMap.indigo}>
{selectedColor == colorMap.indigo && ( {selectedColor == colorMap.indigo && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)} disabled={takenColors.includes(colorMap.emerald)}>
<View style={styles.colorBox} backgroundColor={colorMap.emerald}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.emerald) ? 0.1 : 1}]} backgroundColor={colorMap.emerald}>
{selectedColor == colorMap.emerald && ( {selectedColor == colorMap.emerald && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)}> <TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)} disabled={takenColors.includes(colorMap.violet)}>
<View style={styles.colorBox} backgroundColor={colorMap.violet}> <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.violet) ? 0.1 : 1}]} backgroundColor={colorMap.violet}>
{selectedColor == colorMap.violet && ( {selectedColor == colorMap.violet && (
<AntDesign name="check" size={30} color="white" /> <AntDesign name="check" size={30} color="white" />
)} )}
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<View style={styles.card}> <View style={styles.card}>
<Text style={styles.subTit}>Settings</Text> <Text style={styles.subTit}>Settings</Text>
<Text style={styles.jakarta12}>Time Zone</Text> <Text style={styles.jakarta12}>Time Zone</Text>