Add fab to home page
This commit is contained in:
parent
3d32f391e6
commit
47af169ca6
30
Alarm.tsx
30
Alarm.tsx
|
@ -1,6 +1,6 @@
|
|||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {StyleSheet, Text} from 'react-native';
|
||||
import {NativeModules, StyleSheet, Text, View} from 'react-native';
|
||||
import {Button, Modal, Portal} from 'react-native-paper';
|
||||
|
||||
export default function Alarm() {
|
||||
|
@ -8,15 +8,16 @@ export default function Alarm() {
|
|||
const [seconds, setSeconds] = useState(0);
|
||||
const [minutes, setMinutes] = useState(0);
|
||||
|
||||
let intervalId: number;
|
||||
|
||||
useEffect(() => {
|
||||
if (!show) return;
|
||||
let intervalId: number;
|
||||
(async () => {
|
||||
const next = await AsyncStorage.getItem('nextAlarm');
|
||||
if (!next) return;
|
||||
const ms = new Date(next).getTime() - new Date().getTime();
|
||||
if (ms <= 0) return;
|
||||
let secondsLeft = ms / 1000;
|
||||
const milliseconds = new Date(next).getTime() - new Date().getTime();
|
||||
if (milliseconds <= 0) return;
|
||||
let secondsLeft = milliseconds / 1000;
|
||||
setSeconds(Math.floor(secondsLeft % 60));
|
||||
setMinutes(Math.floor(secondsLeft / 60));
|
||||
intervalId = setInterval(() => {
|
||||
|
@ -29,6 +30,14 @@ export default function Alarm() {
|
|||
return () => clearInterval(intervalId);
|
||||
}, [show]);
|
||||
|
||||
const stop = async () => {
|
||||
NativeModules.AlarmModule.stop();
|
||||
clearInterval(intervalId);
|
||||
setSeconds(0);
|
||||
setMinutes(0);
|
||||
await AsyncStorage.setItem('nextAlarm', '');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Portal>
|
||||
|
@ -40,9 +49,14 @@ export default function Alarm() {
|
|||
<Text style={styles.center}>
|
||||
{minutes}:{seconds}
|
||||
</Text>
|
||||
<Button mode="contained" onPress={() => setShow(false)}>
|
||||
Close
|
||||
</Button>
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<Button icon="close" onPress={() => setShow(false)}>
|
||||
Close
|
||||
</Button>
|
||||
<Button mode="contained" icon="stop" onPress={stop}>
|
||||
Stop
|
||||
</Button>
|
||||
</View>
|
||||
</Modal>
|
||||
</Portal>
|
||||
<Button icon="time" onPress={() => setShow(true)}>
|
||||
|
|
133
EditSet.tsx
133
EditSet.tsx
|
@ -9,11 +9,9 @@ export default function EditSet({
|
|||
onSave,
|
||||
show,
|
||||
setShow,
|
||||
setId,
|
||||
onRemove,
|
||||
}: {
|
||||
id?: number;
|
||||
setId: (id?: number) => void;
|
||||
onSave: () => void;
|
||||
show: boolean;
|
||||
setShow: (visible: boolean) => void;
|
||||
|
@ -23,6 +21,7 @@ export default function EditSet({
|
|||
const [reps, setReps] = useState('');
|
||||
const [weight, setWeight] = useState('');
|
||||
const [unit, setUnit] = useState('');
|
||||
const [created, setCreated] = useState(new Date());
|
||||
const weightRef = useRef<any>(null);
|
||||
const repsRef = useRef<any>(null);
|
||||
const unitRef = useRef<any>(null);
|
||||
|
@ -39,6 +38,7 @@ export default function EditSet({
|
|||
setReps(set.reps.toString());
|
||||
setWeight(set.weight.toString());
|
||||
setUnit(set.unit);
|
||||
setCreated(new Date(set.created));
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
|
@ -68,77 +68,74 @@ export default function EditSet({
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Portal>
|
||||
<Modal
|
||||
visible={show}
|
||||
contentContainerStyle={styles.modal}
|
||||
onDismiss={() => setShow(false)}>
|
||||
<Text style={styles.title}>Add a set</Text>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
autoFocus
|
||||
label="Name *"
|
||||
value={name}
|
||||
onChangeText={setName}
|
||||
onSubmitEditing={() => repsRef.current?.focus()}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Reps *"
|
||||
keyboardType="numeric"
|
||||
value={reps}
|
||||
onChangeText={setReps}
|
||||
ref={repsRef}
|
||||
onSubmitEditing={() => weightRef.current?.focus()}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Weight *"
|
||||
keyboardType="numeric"
|
||||
value={weight}
|
||||
onChangeText={setWeight}
|
||||
onSubmitEditing={save}
|
||||
ref={weightRef}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Unit (kg)"
|
||||
value={unit}
|
||||
onChangeText={setUnit}
|
||||
ref={unitRef}
|
||||
onSubmitEditing={save}
|
||||
/>
|
||||
<View style={styles.bottom}>
|
||||
<Button mode="contained" icon="save" onPress={save}>
|
||||
Save
|
||||
</Button>
|
||||
<Button icon="close" onPress={() => setShow(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button icon="trash" onPress={remove} disabled={!id}>
|
||||
Delete
|
||||
</Button>
|
||||
</View>
|
||||
</Modal>
|
||||
</Portal>
|
||||
|
||||
<Button
|
||||
icon="add"
|
||||
mode="contained"
|
||||
onPress={() => {
|
||||
setId(undefined);
|
||||
setShow(true);
|
||||
}}>
|
||||
Add
|
||||
</Button>
|
||||
</>
|
||||
<Portal>
|
||||
<Modal
|
||||
visible={show}
|
||||
contentContainerStyle={styles.modal}
|
||||
onDismiss={() => setShow(false)}>
|
||||
<Text style={styles.title}>Add a set</Text>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
autoFocus
|
||||
label="Name *"
|
||||
value={name}
|
||||
onChangeText={setName}
|
||||
onSubmitEditing={() => repsRef.current?.focus()}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Reps *"
|
||||
keyboardType="numeric"
|
||||
value={reps}
|
||||
onChangeText={setReps}
|
||||
ref={repsRef}
|
||||
onSubmitEditing={() => weightRef.current?.focus()}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Weight *"
|
||||
keyboardType="numeric"
|
||||
value={weight}
|
||||
onChangeText={setWeight}
|
||||
onSubmitEditing={save}
|
||||
ref={weightRef}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Unit (kg)"
|
||||
value={unit}
|
||||
onChangeText={setUnit}
|
||||
ref={unitRef}
|
||||
onSubmitEditing={save}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Created"
|
||||
disabled
|
||||
value={created.toLocaleString()}
|
||||
/>
|
||||
<View style={styles.bottom}>
|
||||
<Button mode="contained" icon="save" onPress={save}>
|
||||
Save
|
||||
</Button>
|
||||
<Button icon="close" onPress={() => setShow(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
style={{alignSelf: 'flex-end'}}
|
||||
icon="trash"
|
||||
onPress={remove}
|
||||
disabled={!id}>
|
||||
Delete
|
||||
</Button>
|
||||
</View>
|
||||
</Modal>
|
||||
</Portal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
modal: {
|
||||
height: '100%',
|
||||
backgroundColor: 'black',
|
||||
padding: 20,
|
||||
},
|
||||
|
|
14
Home.tsx
14
Home.tsx
|
@ -7,7 +7,7 @@ import {
|
|||
StyleSheet,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import {List, Searchbar} from 'react-native-paper';
|
||||
import {AnimatedFAB, Button, Searchbar} from 'react-native-paper';
|
||||
import Alarm from './Alarm';
|
||||
import {getDb} from './db';
|
||||
import EditSet from './EditSet';
|
||||
|
@ -90,13 +90,23 @@ export default function Home() {
|
|||
<Alarm />
|
||||
<EditSet
|
||||
id={id}
|
||||
setId={setId}
|
||||
show={showEdit}
|
||||
setShow={setShowEdit}
|
||||
onSave={save}
|
||||
onRemove={refresh}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<AnimatedFAB
|
||||
extended={false}
|
||||
label="Add"
|
||||
icon="add"
|
||||
style={{position: 'absolute', right: 20, bottom: 20}}
|
||||
onPress={() => {
|
||||
setId(undefined);
|
||||
setShowEdit(true);
|
||||
}}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user