Add ability to edit created on sets
This commit is contained in:
parent
f4a9bceb61
commit
f2d5166c8a
11
EditPlan.tsx
11
EditPlan.tsx
|
|
@ -3,16 +3,7 @@ import {StyleSheet, Text, View} from 'react-native';
|
|||
import {Button, Dialog, Portal, Switch} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import {Plan} from './plan';
|
||||
|
||||
const DAYS = [
|
||||
'Monday',
|
||||
'Tuesday',
|
||||
'Wednesday',
|
||||
'Thursday',
|
||||
'Friday',
|
||||
'Saturday',
|
||||
'Sunday',
|
||||
];
|
||||
import {DAYS} from './time';
|
||||
|
||||
export default function EditPlan({
|
||||
plan,
|
||||
|
|
|
|||
34
EditSet.tsx
34
EditSet.tsx
|
|
@ -1,8 +1,9 @@
|
|||
import {format} from 'date-fns';
|
||||
import React from 'react';
|
||||
import {StyleSheet, Text} from 'react-native';
|
||||
import React, {useState} from 'react';
|
||||
import {StyleSheet} from 'react-native';
|
||||
import DateTimePickerModal from 'react-native-modal-datetime-picker';
|
||||
import {Button, Dialog, Portal, TextInput} from 'react-native-paper';
|
||||
import Set from './set';
|
||||
import {format} from './time';
|
||||
|
||||
export default function EditSet({
|
||||
set,
|
||||
|
|
@ -17,6 +18,13 @@ export default function EditSet({
|
|||
title: string;
|
||||
saveText: string;
|
||||
}) {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
const onConfirm = (created: Date) => {
|
||||
setSet({...set, created: created.toISOString()});
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
<Dialog visible={set ? true : false} onDismiss={() => setSet(undefined)}>
|
||||
|
|
@ -52,12 +60,20 @@ export default function EditSet({
|
|||
onChangeText={unit => setSet({...set, unit})}
|
||||
onSubmitEditing={onSave}
|
||||
/>
|
||||
<Text style={styles.text}>
|
||||
{format(
|
||||
set?.created ? new Date(set.created) : new Date(),
|
||||
'PPPP p',
|
||||
)}
|
||||
</Text>
|
||||
{set?.created && (
|
||||
<>
|
||||
<Button icon="calendar-outline" onPress={() => setShow(true)}>
|
||||
{format(set.created)}
|
||||
</Button>
|
||||
<DateTimePickerModal
|
||||
isVisible={show}
|
||||
mode="datetime"
|
||||
onConfirm={onConfirm}
|
||||
onCancel={() => setShow(false)}
|
||||
date={new Date(set.created)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Dialog.Content>
|
||||
<Dialog.Actions>
|
||||
<Button icon="close" onPress={() => setSet(undefined)}>
|
||||
|
|
|
|||
16
HomePage.tsx
16
HomePage.tsx
|
|
@ -50,9 +50,17 @@ export default function HomePage() {
|
|||
);
|
||||
|
||||
const update = useCallback(async () => {
|
||||
console.log('HomePage.update', {edit});
|
||||
await db.executeSql(
|
||||
`UPDATE sets SET name = ?, reps = ?, weight = ?, unit = ? WHERE id = ?`,
|
||||
[edit?.name, edit?.reps, edit?.weight, edit?.unit, edit?.id],
|
||||
`UPDATE sets SET name = ?, reps = ?, weight = ?, created = ?, unit = ? WHERE id = ?`,
|
||||
[
|
||||
edit?.name,
|
||||
edit?.reps,
|
||||
edit?.weight,
|
||||
edit?.created,
|
||||
edit?.unit,
|
||||
edit?.id,
|
||||
],
|
||||
);
|
||||
setEdit(undefined);
|
||||
await refresh();
|
||||
|
|
@ -139,7 +147,9 @@ export default function HomePage() {
|
|||
saveText="Add"
|
||||
onSave={add}
|
||||
/>
|
||||
<MassiveFab onPress={() => setNewSet({} as Set)} />
|
||||
<MassiveFab
|
||||
onPress={() => setNewSet({created: new Date().toISOString()} as Set)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"dependencies": {
|
||||
"@babel/preset-env": "^7.1.6",
|
||||
"@react-native-async-storage/async-storage": "^1.17.7",
|
||||
"@react-native-community/datetimepicker": "^6.2.0",
|
||||
"@react-navigation/material-top-tabs": "^6.2.1",
|
||||
"@react-navigation/native": "^6.0.10",
|
||||
"@react-navigation/native-stack": "^6.6.2",
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
"@types/react-native-svg-charts": "^5.0.12",
|
||||
"@types/react-native-vector-icons": "^6.4.11",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"date-fns": "^2.28.0",
|
||||
"react": "18.0.0",
|
||||
"react-devtools": "^4.24.7",
|
||||
"react-native": "0.69.1",
|
||||
"react-native-gesture-handler": "^2.5.0",
|
||||
"react-native-linear-gradient": "^2.6.2",
|
||||
"react-native-modal-datetime-picker": "^13.1.2",
|
||||
"react-native-pager-view": "^5.4.24",
|
||||
"react-native-paper": "^4.12.2",
|
||||
"react-native-reanimated": "^2.9.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
export const DAYS = [
|
||||
'Sunday',
|
||||
'Monday',
|
||||
'Tuesday',
|
||||
'Wednesday',
|
||||
'Thursday',
|
||||
'Friday',
|
||||
'Saturday',
|
||||
];
|
||||
|
||||
export const MONTH = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
];
|
||||
|
||||
export function format(iso: string) {
|
||||
const date = new Date(iso);
|
||||
const mm = MONTH[date.getMonth()];
|
||||
const dd = date.getDate().toString();
|
||||
const day = DAYS[date.getDay()];
|
||||
const isPM = date.getHours() >= 12;
|
||||
const isMidday = date.getHours() == 12;
|
||||
const hours = date.getHours() - (isPM && !isMidday ? 12 : 0);
|
||||
const time =
|
||||
[
|
||||
hours.toString().padStart(2, '0'),
|
||||
date.getMinutes().toString().padStart(2, '0'),
|
||||
].join(':') + (isPM ? ' pm' : 'am');
|
||||
return `${day} ${dd} ${mm}, ${time}`;
|
||||
}
|
||||
19
yarn.lock
19
yarn.lock
|
|
@ -1579,6 +1579,13 @@
|
|||
prompts "^2.4.0"
|
||||
semver "^6.3.0"
|
||||
|
||||
"@react-native-community/datetimepicker@^6.2.0":
|
||||
version "6.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-6.2.0.tgz#50bc629e70e4030c48205c01efbc65a8f35d82d4"
|
||||
integrity sha512-w1ZS+wYO3qSASliRp+B7mPphOhtVm++rhSbj1WsgXdgLgDXSkDxpMnAXXQu9M0XdcgBwVJ6wDExeIwuzU5Jtfg==
|
||||
dependencies:
|
||||
invariant "^2.2.4"
|
||||
|
||||
"@react-native-community/eslint-config@^2.0.0":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@react-native-community/eslint-config/-/eslint-config-2.0.0.tgz#35dcc529a274803fc4e0a6b3d6c274551fb91774"
|
||||
|
|
@ -3195,11 +3202,6 @@ data-urls@^2.0.0:
|
|||
whatwg-mimetype "^2.3.0"
|
||||
whatwg-url "^8.0.0"
|
||||
|
||||
date-fns@^2.28.0:
|
||||
version "2.28.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
|
||||
integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
|
||||
|
||||
dayjs@^1.8.15:
|
||||
version "1.11.3"
|
||||
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.3.tgz#4754eb694a624057b9ad2224b67b15d552589258"
|
||||
|
|
@ -6875,6 +6877,13 @@ react-native-linear-gradient@^2.6.2:
|
|||
resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.6.2.tgz#56598a76832724b2afa7889747635b5c80948f38"
|
||||
integrity sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ==
|
||||
|
||||
react-native-modal-datetime-picker@^13.1.2:
|
||||
version "13.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-13.1.2.tgz#7c8bd3402acb4dcfbca49c926a7f18dd108c69c4"
|
||||
integrity sha512-PZDkuY7HayRX1KE2X2dm29CvCLzwj/vn6B6QdPbjZea/GEKvHBMOLGdhFCcA9+gD64Y41+VqfytUh2fdvUvQ1g==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-native-pager-view@^5.4.24:
|
||||
version "5.4.24"
|
||||
resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.4.24.tgz#8626e757ddc55e41eca66d2f8a8a75aec54591ee"
|
||||
|
|
|
|||
Loading…
Reference in New Issue