Use switches for plan editing
This commit is contained in:
parent
1d68ba86f5
commit
29200cf248
137
EditPlan.tsx
137
EditPlan.tsx
|
@ -1,9 +1,18 @@
|
|||
import React, {useContext, useEffect, useState} from 'react';
|
||||
import {Button, Dialog, Portal} from 'react-native-paper';
|
||||
import {StyleSheet, Text, View} from 'react-native';
|
||||
import {Button, Dialog, Portal, Switch} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import DayMenu from './DayMenu';
|
||||
import {Plan} from './plan';
|
||||
import WorkoutMenu from './WorkoutMenu';
|
||||
|
||||
const DAYS = [
|
||||
'Monday',
|
||||
'Tuesday',
|
||||
'Wednesday',
|
||||
'Thursday',
|
||||
'Friday',
|
||||
'Saturday',
|
||||
'Sunday',
|
||||
];
|
||||
|
||||
export default function EditPlan({
|
||||
plan,
|
||||
|
@ -16,8 +25,8 @@ export default function EditPlan({
|
|||
setShow: (visible: boolean) => void;
|
||||
plan?: Plan;
|
||||
}) {
|
||||
const [days, setDays] = useState('');
|
||||
const [workouts, setWorkouts] = useState('');
|
||||
const [days, setDays] = useState<string[]>([]);
|
||||
const [workouts, setWorkouts] = useState<string[]>([]);
|
||||
const [names, setNames] = useState<string[]>([]);
|
||||
const db = useContext(DatabaseContext);
|
||||
|
||||
|
@ -26,8 +35,8 @@ export default function EditPlan({
|
|||
if (!namesResult.rows.length) return;
|
||||
setNames(namesResult.rows.raw().map(({name}) => name));
|
||||
if (!plan) return;
|
||||
setDays(plan.days);
|
||||
setWorkouts(plan.workouts);
|
||||
setDays(plan.days.split(','));
|
||||
setWorkouts(plan.workouts.split(','));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -36,76 +45,76 @@ export default function EditPlan({
|
|||
|
||||
const save = async () => {
|
||||
if (!days || !workouts) return;
|
||||
const newWorkouts = workouts.filter(workout => workout).join(',');
|
||||
const newDays = days.filter(day => day).join(',');
|
||||
if (!plan)
|
||||
await db.executeSql(`INSERT INTO plans(days, workouts) VALUES (?, ?)`, [
|
||||
days,
|
||||
workouts,
|
||||
newDays,
|
||||
newWorkouts,
|
||||
]);
|
||||
else
|
||||
await db.executeSql(
|
||||
`UPDATE plans SET days = ?, workouts = ? WHERE id = ?`,
|
||||
[days, workouts, plan.id],
|
||||
[newDays, newWorkouts, plan.id],
|
||||
);
|
||||
setShow(false);
|
||||
onSave();
|
||||
};
|
||||
|
||||
const selectDay = (day: string, index: number) => {
|
||||
const newDays = days.split(',');
|
||||
newDays[index] = day;
|
||||
setDays(newDays.join(','));
|
||||
const toggleWorkout = (on: boolean, name: string) => {
|
||||
if (on) {
|
||||
setWorkouts([...workouts, name]);
|
||||
} else {
|
||||
setWorkouts(workouts.filter(workout => workout !== name));
|
||||
}
|
||||
};
|
||||
|
||||
const selectWorkout = (workout: string, index: number) => {
|
||||
const newWorkouts = workouts.split(',');
|
||||
newWorkouts[index] = workout;
|
||||
setWorkouts(newWorkouts.join(','));
|
||||
};
|
||||
|
||||
const removeWorkout = (index: number) => {
|
||||
const newWorkouts = workouts.split(',');
|
||||
delete newWorkouts[index];
|
||||
setWorkouts(newWorkouts.filter(day => day).join(','));
|
||||
};
|
||||
|
||||
const removeDay = (index: number) => {
|
||||
const newDays = days.split(',');
|
||||
delete newDays[index];
|
||||
setDays(newDays.filter(day => day).join(','));
|
||||
const toggleDay = (on: boolean, day: string) => {
|
||||
if (on) {
|
||||
setDays([...days, day]);
|
||||
} else {
|
||||
setDays(days.filter(d => d !== day));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
<Dialog visible={show} onDismiss={() => setShow(false)}>
|
||||
<Dialog.Title>{plan ? `Edit "${days}"` : 'Add a plan'}</Dialog.Title>
|
||||
<Dialog.Content>
|
||||
{days.split(',').map((day, index) => (
|
||||
<DayMenu
|
||||
index={index}
|
||||
onDelete={() => removeDay(index)}
|
||||
onSelect={option => selectDay(option, index)}
|
||||
onAdd={() => setDays(days + ',Monday')}
|
||||
selected={day}
|
||||
key={index}
|
||||
/>
|
||||
))}
|
||||
<Button icon="add" onPress={() => setDays(days + ',Monday')}>
|
||||
Add day
|
||||
</Button>
|
||||
{workouts.split(',').map((workout, index) => (
|
||||
<WorkoutMenu
|
||||
index={index}
|
||||
selected={workout}
|
||||
onAdd={() => setWorkouts(workouts + ',')}
|
||||
onSelect={option => selectWorkout(option, index)}
|
||||
onDelete={() => removeWorkout(index)}
|
||||
names={names}
|
||||
key={index}
|
||||
/>
|
||||
))}
|
||||
<Button icon="add" onPress={() => setWorkouts(workouts + ',')}>
|
||||
Add workout
|
||||
</Button>
|
||||
<Dialog.Title>
|
||||
{plan ? `Edit "${days.join(', ')}"` : 'Add a plan'}
|
||||
</Dialog.Title>
|
||||
<Dialog.Content style={[styles.row, {justifyContent: 'space-between'}]}>
|
||||
<View>
|
||||
<Text style={styles.title}>Days</Text>
|
||||
{DAYS.map(day => (
|
||||
<View key={day} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<Switch
|
||||
value={days.includes(day)}
|
||||
style={{marginRight: 5}}
|
||||
onValueChange={value => toggleDay(value, day)}
|
||||
/>
|
||||
<Text onPress={() => toggleDay(!days.includes(day), day)}>
|
||||
{day}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<View>
|
||||
<Text style={styles.title}>Workouts</Text>
|
||||
{names.map(name => (
|
||||
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<Switch
|
||||
value={workouts.includes(name)}
|
||||
style={{marginRight: 5}}
|
||||
onValueChange={value => toggleWorkout(value, name)}
|
||||
/>
|
||||
<Text
|
||||
onPress={() => toggleWorkout(!workouts.includes(name), name)}>
|
||||
{name}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</Dialog.Content>
|
||||
<Dialog.Actions>
|
||||
<Button icon="close" onPress={() => setShow(false)}>
|
||||
|
@ -119,3 +128,13 @@ export default function EditPlan({
|
|||
</Portal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
title: {
|
||||
fontSize: 20,
|
||||
marginBottom: 10,
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
});
|
||||
|
|
|
@ -30,8 +30,8 @@ export default function PlanItem({
|
|||
setPlan(item);
|
||||
setShowEdit(true);
|
||||
}}
|
||||
title={item.days}
|
||||
description={item.workouts}
|
||||
title={item.days.replace(/,/g, ', ')}
|
||||
description={item.workouts.replace(/,/g, ', ')}
|
||||
onLongPress={() => setShow(true)}
|
||||
right={() => (
|
||||
<Menu
|
||||
|
|
|
@ -21,7 +21,6 @@
|
|||
"react": "18.0.0",
|
||||
"react-devtools": "^4.24.7",
|
||||
"react-native": "0.69.1",
|
||||
"react-native-document-picker": "^8.1.1",
|
||||
"react-native-gesture-handler": "^2.5.0",
|
||||
"react-native-pager-view": "^5.4.24",
|
||||
"react-native-paper": "^4.12.2",
|
||||
|
@ -62,4 +61,4 @@
|
|||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1603,6 +1603,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.2.0.tgz#7d6d789ae8edf73dc9bed1246cd48277edea8066"
|
||||
integrity sha512-o6aam+0Ug1xGK3ABYmBm0B1YuEKfM/5kaoZO0eHbZwSpw9UzDX4G5y4Nx/K20FHqUmJHkZmLvOUFYwN4N+HqKA==
|
||||
|
||||
"@react-native-picker/picker@^2.4.2":
|
||||
version "2.4.2"
|
||||
resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.4.2.tgz#2925eb8e76ff6b584c80529adc251df963be9141"
|
||||
integrity sha512-0nY8638h1J3wKz6P3IJMpOoxJDdOj7Dk/K2hP/xpqP3KnIY0lmoqYlhyNihuyVPocDGajf6SA7LFFsFepQ56ag==
|
||||
|
||||
"@react-native/assets@1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
|
||||
|
|
Loading…
Reference in New Issue
Block a user