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

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

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

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

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

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