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 {Button, Dialog, Portal, Switch} from 'react-native-paper';
|
||||||
import {DatabaseContext} from './App';
|
import {DatabaseContext} from './App';
|
||||||
import {Plan} from './plan';
|
import {Plan} from './plan';
|
||||||
|
import {DAYS} from './time';
|
||||||
const DAYS = [
|
|
||||||
'Monday',
|
|
||||||
'Tuesday',
|
|
||||||
'Wednesday',
|
|
||||||
'Thursday',
|
|
||||||
'Friday',
|
|
||||||
'Saturday',
|
|
||||||
'Sunday',
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function EditPlan({
|
export default function EditPlan({
|
||||||
plan,
|
plan,
|
||||||
|
|
32
EditSet.tsx
32
EditSet.tsx
|
@ -1,8 +1,9 @@
|
||||||
import {format} from 'date-fns';
|
import React, {useState} from 'react';
|
||||||
import React from 'react';
|
import {StyleSheet} from 'react-native';
|
||||||
import {StyleSheet, Text} from 'react-native';
|
import DateTimePickerModal from 'react-native-modal-datetime-picker';
|
||||||
import {Button, Dialog, Portal, TextInput} from 'react-native-paper';
|
import {Button, Dialog, Portal, TextInput} from 'react-native-paper';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
|
import {format} from './time';
|
||||||
|
|
||||||
export default function EditSet({
|
export default function EditSet({
|
||||||
set,
|
set,
|
||||||
|
@ -17,6 +18,13 @@ export default function EditSet({
|
||||||
title: string;
|
title: string;
|
||||||
saveText: string;
|
saveText: string;
|
||||||
}) {
|
}) {
|
||||||
|
const [show, setShow] = useState(false);
|
||||||
|
|
||||||
|
const onConfirm = (created: Date) => {
|
||||||
|
setSet({...set, created: created.toISOString()});
|
||||||
|
setShow(false);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Portal>
|
<Portal>
|
||||||
<Dialog visible={set ? true : false} onDismiss={() => setSet(undefined)}>
|
<Dialog visible={set ? true : false} onDismiss={() => setSet(undefined)}>
|
||||||
|
@ -52,12 +60,20 @@ export default function EditSet({
|
||||||
onChangeText={unit => setSet({...set, unit})}
|
onChangeText={unit => setSet({...set, unit})}
|
||||||
onSubmitEditing={onSave}
|
onSubmitEditing={onSave}
|
||||||
/>
|
/>
|
||||||
<Text style={styles.text}>
|
{set?.created && (
|
||||||
{format(
|
<>
|
||||||
set?.created ? new Date(set.created) : new Date(),
|
<Button icon="calendar-outline" onPress={() => setShow(true)}>
|
||||||
'PPPP p',
|
{format(set.created)}
|
||||||
|
</Button>
|
||||||
|
<DateTimePickerModal
|
||||||
|
isVisible={show}
|
||||||
|
mode="datetime"
|
||||||
|
onConfirm={onConfirm}
|
||||||
|
onCancel={() => setShow(false)}
|
||||||
|
date={new Date(set.created)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</Text>
|
|
||||||
</Dialog.Content>
|
</Dialog.Content>
|
||||||
<Dialog.Actions>
|
<Dialog.Actions>
|
||||||
<Button icon="close" onPress={() => setSet(undefined)}>
|
<Button icon="close" onPress={() => setSet(undefined)}>
|
||||||
|
|
16
HomePage.tsx
16
HomePage.tsx
|
@ -50,9 +50,17 @@ export default function HomePage() {
|
||||||
);
|
);
|
||||||
|
|
||||||
const update = useCallback(async () => {
|
const update = useCallback(async () => {
|
||||||
|
console.log('HomePage.update', {edit});
|
||||||
await db.executeSql(
|
await db.executeSql(
|
||||||
`UPDATE sets SET name = ?, reps = ?, weight = ?, unit = ? WHERE id = ?`,
|
`UPDATE sets SET name = ?, reps = ?, weight = ?, created = ?, unit = ? WHERE id = ?`,
|
||||||
[edit?.name, edit?.reps, edit?.weight, edit?.unit, edit?.id],
|
[
|
||||||
|
edit?.name,
|
||||||
|
edit?.reps,
|
||||||
|
edit?.weight,
|
||||||
|
edit?.created,
|
||||||
|
edit?.unit,
|
||||||
|
edit?.id,
|
||||||
|
],
|
||||||
);
|
);
|
||||||
setEdit(undefined);
|
setEdit(undefined);
|
||||||
await refresh();
|
await refresh();
|
||||||
|
@ -139,7 +147,9 @@ export default function HomePage() {
|
||||||
saveText="Add"
|
saveText="Add"
|
||||||
onSave={add}
|
onSave={add}
|
||||||
/>
|
/>
|
||||||
<MassiveFab onPress={() => setNewSet({} as Set)} />
|
<MassiveFab
|
||||||
|
onPress={() => setNewSet({created: new Date().toISOString()} as Set)}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/preset-env": "^7.1.6",
|
"@babel/preset-env": "^7.1.6",
|
||||||
"@react-native-async-storage/async-storage": "^1.17.7",
|
"@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/material-top-tabs": "^6.2.1",
|
||||||
"@react-navigation/native": "^6.0.10",
|
"@react-navigation/native": "^6.0.10",
|
||||||
"@react-navigation/native-stack": "^6.6.2",
|
"@react-navigation/native-stack": "^6.6.2",
|
||||||
|
@ -20,12 +21,12 @@
|
||||||
"@types/react-native-svg-charts": "^5.0.12",
|
"@types/react-native-svg-charts": "^5.0.12",
|
||||||
"@types/react-native-vector-icons": "^6.4.11",
|
"@types/react-native-vector-icons": "^6.4.11",
|
||||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||||
"date-fns": "^2.28.0",
|
|
||||||
"react": "18.0.0",
|
"react": "18.0.0",
|
||||||
"react-devtools": "^4.24.7",
|
"react-devtools": "^4.24.7",
|
||||||
"react-native": "0.69.1",
|
"react-native": "0.69.1",
|
||||||
"react-native-gesture-handler": "^2.5.0",
|
"react-native-gesture-handler": "^2.5.0",
|
||||||
"react-native-linear-gradient": "^2.6.2",
|
"react-native-linear-gradient": "^2.6.2",
|
||||||
|
"react-native-modal-datetime-picker": "^13.1.2",
|
||||||
"react-native-pager-view": "^5.4.24",
|
"react-native-pager-view": "^5.4.24",
|
||||||
"react-native-paper": "^4.12.2",
|
"react-native-paper": "^4.12.2",
|
||||||
"react-native-reanimated": "^2.9.0",
|
"react-native-reanimated": "^2.9.0",
|
||||||
|
|
40
time.ts
Normal file
40
time.ts
Normal file
|
@ -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"
|
prompts "^2.4.0"
|
||||||
semver "^6.3.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":
|
"@react-native-community/eslint-config@^2.0.0":
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/@react-native-community/eslint-config/-/eslint-config-2.0.0.tgz#35dcc529a274803fc4e0a6b3d6c274551fb91774"
|
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-mimetype "^2.3.0"
|
||||||
whatwg-url "^8.0.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:
|
dayjs@^1.8.15:
|
||||||
version "1.11.3"
|
version "1.11.3"
|
||||||
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.3.tgz#4754eb694a624057b9ad2224b67b15d552589258"
|
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"
|
resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.6.2.tgz#56598a76832724b2afa7889747635b5c80948f38"
|
||||||
integrity sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ==
|
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:
|
react-native-pager-view@^5.4.24:
|
||||||
version "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"
|
resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.4.24.tgz#8626e757ddc55e41eca66d2f8a8a75aec54591ee"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user