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

calendar changes, fixes

Browse Source
This commit is contained in:
ivic00
2024-09-29 22:24:37 +02:00
parent 908eeab607
commit e17dabe801
8 changed files with 1040 additions and 1307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
components/pages/todos/AddChoreDialog.tsx Normal file
View File

@ -0,0 +1,251 @@
import { View, Text, Button, Switch } from "react-native-ui-lib";
import React, { useState } from "react";
import PointsSlider from "@/components/shared/PointsSlider";
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
import { Feather, AntDesign, Ionicons } from "@expo/vector-icons";
import {
Dialog,
TextField,
DateTimePicker,
Picker,
ButtonSize,
} from "react-native-ui-lib";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { StyleSheet } from "react-native";
interface IAddChoreDialog {
isVisible: boolean;
setIsVisible: (value: boolean) => void;
}
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const { addToDo, toDos } = useToDosContext();
const [newTitle, setNewTitle] = useState<string>("");
const [points, setPoints] = useState<number>(10);
const [choreDate, setChoreDate] = useState<Date | null>(new Date());
const [rotate, setRotate] = useState<boolean>(false);
const [repeatType, setRepeatType] = useState<string>("Every week");
const handleChange = (text: string) => {
const numericValue = parseInt(text, 10);
if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
setPoints(numericValue);
} else if (text === "") {
setPoints(0);
}
};
return (
<Dialog
bottom={true}
height={"90%"}
panDirection={PanningDirectionsEnum.DOWN}
onDismiss={() => addChoreDialogProps.setIsVisible(false)}
containerStyle={{
borderRadius: 10,
backgroundColor: "white",
width: "100%",
alignSelf: "stretch",
padding: 0,
paddingTop: 3,
margin: 0,
}}
visible={addChoreDialogProps.isVisible}
>
<View row spread>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Cancel"
onPress={() => {
addChoreDialogProps.setIsVisible(false);
}}
/>
<Button
style={styles.topBtn}
iconSource={() => (
<Feather name="chevron-down" size={24} color="black" />
)}
onPress={() => {
addChoreDialogProps.setIsVisible(false);
}}
/>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Save"
onPress={() => {
try {
addToDo({
id: 0,
title: newTitle,
done: false,
date: choreDate,
points: points,
rotate: rotate,
repeatType: repeatType,
});
addChoreDialogProps.setIsVisible(false);
console.log(toDos);
} catch (error) {
console.error(error)
}
}}
/>
</View>
<TextField
placeholder="Add a To Do"
value={newTitle}
onChangeText={(text) => {
setNewTitle(text);
}}
placeholderTextColor="#2d2d30"
text60R
marginT-15
marginL-30
/>
<View style={styles.divider} marginT-8 />
<View marginL-30 centerV>
<View row marginB-10>
{choreDate && (
<View row centerV>
<Feather name="calendar" size={25} color="#919191" />
<DateTimePicker
value={choreDate}
text70
marginL-8
onChange={(date) => {
setChoreDate(date);
}}
/>
</View>
)}
</View>
<View row centerV>
<AntDesign name="clockcircleo" size={24} color="#919191" />
<Picker
marginL-8
placeholder="Select Repeat Type"
value={repeatType}
onChange={(value) => {
if (value) {
if (value.toString() == "None") {
setChoreDate(null);
setRepeatType("None");
} else {
setRepeatType(value.toString());
setChoreDate(new Date());
}
}
}}
topBarProps={{ title: "Repeat" }}
style={{ marginVertical: 5 }}
>
{repeatOptions.map((option) => (
<Picker.Item
key={option.value}
label={option.label}
value={option.value}
/>
))}
</Picker>
</View>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text text70R marginL-10>
Assignees
</Text>
<Button
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c" />
)}
style={{
marginLeft: "auto",
borderRadius: 8,
backgroundColor: "#ffe8f1",
borderColor: "#ea156c",
borderWidth: 1,
}}
color="#ea156c"
label="Assign"
/>
</View>
<View row marginH-13 marginT-13>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
</View>
<View row centerV style={styles.rotateSwitch}>
<Text text80>Take Turns</Text>
<Switch
onColor={"#ea156c"}
value={rotate}
marginL-10
onValueChange={(value) => setRotate(value)}
/>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-15 row centerV>
<Ionicons name="gift-outline" size={25} color="#919191" />
<Text text70BL marginL-10>
Reward Points
</Text>
</View>
<PointsSlider
points={points}
setPoints={setPoints}
handleChange={handleChange}
/>
</Dialog>
);
};
export default AddChoreDialog;
const styles = StyleSheet.create({
divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
gradient: {
height: "25%",
position: "absolute",
bottom: 0,
width: "100%",
},
buttonContainer: {
position: "absolute",
bottom: 25,
width: "100%",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
paddingVertical: 20,
},
topBtn: {
backgroundColor: "white",
color: "#05a8b6",
},
rotateSwitch: {
marginLeft: 35,
marginBottom: 10,
marginTop: 25,
},
});