svenf/Massive
1
0
Fork 0
Code Pull Requests Activity

Add fab to home page

Browse Source
This commit is contained in:
Brandon Presley 2022-07-05 12:43:23 +12:00
parent 3d32f391e6
commit 47af169ca6
3 changed files with 99 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Alarm.tsx
View File

@ -1,6 +1,6 @@
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import React, {useEffect, useState} from 'react'; 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'; import {Button, Modal, Portal} from 'react-native-paper';
export default function Alarm() { export default function Alarm() {
@ -8,15 +8,16 @@ export default function Alarm() {
const [seconds, setSeconds] = useState(0); const [seconds, setSeconds] = useState(0);
const [minutes, setMinutes] = useState(0); const [minutes, setMinutes] = useState(0);
let intervalId: number;
useEffect(() => { useEffect(() => {
if (!show) return; if (!show) return;
let intervalId: number;
(async () => { (async () => {
const next = await AsyncStorage.getItem('nextAlarm'); const next = await AsyncStorage.getItem('nextAlarm');
if (!next) return; if (!next) return;
const ms = new Date(next).getTime() - new Date().getTime(); const milliseconds = new Date(next).getTime() - new Date().getTime();
if (ms <= 0) return; if (milliseconds <= 0) return;
let secondsLeft = ms / 1000; let secondsLeft = milliseconds / 1000;
setSeconds(Math.floor(secondsLeft % 60)); setSeconds(Math.floor(secondsLeft % 60));
setMinutes(Math.floor(secondsLeft / 60)); setMinutes(Math.floor(secondsLeft / 60));
intervalId = setInterval(() => { intervalId = setInterval(() => {
@ -29,6 +30,14 @@ export default function Alarm() {
return () => clearInterval(intervalId); return () => clearInterval(intervalId);
}, [show]); }, [show]);
const stop = async () => {
NativeModules.AlarmModule.stop();
clearInterval(intervalId);
setSeconds(0);
setMinutes(0);
await AsyncStorage.setItem('nextAlarm', '');
};
return ( return (
<> <>
<Portal> <Portal>
@ -40,9 +49,14 @@ export default function Alarm() {
<Text style={styles.center}> <Text style={styles.center}>
{minutes}:{seconds} {minutes}:{seconds}
</Text> </Text>
<Button mode="contained" onPress={() => setShow(false)}> <View style={{flexDirection: 'row'}}>
Close <Button icon="close" onPress={() => setShow(false)}>
</Button> Close
</Button>
<Button mode="contained" icon="stop" onPress={stop}>
Stop
</Button>
</View>
</Modal> </Modal>
</Portal> </Portal>
<Button icon="time" onPress={() => setShow(true)}> <Button icon="time" onPress={() => setShow(true)}>

133
EditSet.tsx
View File

@ -9,11 +9,9 @@ export default function EditSet({
onSave, onSave,
show, show,
setShow, setShow,
setId,
onRemove, onRemove,
}: { }: {
id?: number; id?: number;
setId: (id?: number) => void;
onSave: () => void; onSave: () => void;
show: boolean; show: boolean;
setShow: (visible: boolean) => void; setShow: (visible: boolean) => void;
@ -23,6 +21,7 @@ export default function EditSet({
const [reps, setReps] = useState(''); const [reps, setReps] = useState('');
const [weight, setWeight] = useState(''); const [weight, setWeight] = useState('');
const [unit, setUnit] = useState(''); const [unit, setUnit] = useState('');
const [created, setCreated] = useState(new Date());
const weightRef = useRef<any>(null); const weightRef = useRef<any>(null);
const repsRef = useRef<any>(null); const repsRef = useRef<any>(null);
const unitRef = useRef<any>(null); const unitRef = useRef<any>(null);
@ -39,6 +38,7 @@ export default function EditSet({
setReps(set.reps.toString()); setReps(set.reps.toString());
setWeight(set.weight.toString()); setWeight(set.weight.toString());
setUnit(set.unit); setUnit(set.unit);
setCreated(new Date(set.created));
}); });
}, [id]); }, [id]);
@ -68,77 +68,74 @@ export default function EditSet({
}; };
return ( return (
<> <Portal>
<Portal> <Modal
<Modal visible={show}
visible={show} contentContainerStyle={styles.modal}
contentContainerStyle={styles.modal} onDismiss={() => setShow(false)}>
onDismiss={() => setShow(false)}> <Text style={styles.title}>Add a set</Text>
<Text style={styles.title}>Add a set</Text> <TextInput
<TextInput style={styles.text}
style={styles.text} autoFocus
autoFocus label="Name *"
label="Name *" value={name}
value={name} onChangeText={setName}
onChangeText={setName} onSubmitEditing={() => repsRef.current?.focus()}
onSubmitEditing={() => repsRef.current?.focus()} />
/> <TextInput
<TextInput style={styles.text}
style={styles.text} label="Reps *"
label="Reps *" keyboardType="numeric"
keyboardType="numeric" value={reps}
value={reps} onChangeText={setReps}
onChangeText={setReps} ref={repsRef}
ref={repsRef} onSubmitEditing={() => weightRef.current?.focus()}
onSubmitEditing={() => weightRef.current?.focus()} />
/> <TextInput
<TextInput style={styles.text}
style={styles.text} label="Weight *"
label="Weight *" keyboardType="numeric"
keyboardType="numeric" value={weight}
value={weight} onChangeText={setWeight}
onChangeText={setWeight} onSubmitEditing={save}
onSubmitEditing={save} ref={weightRef}
ref={weightRef} />
/> <TextInput
<TextInput style={styles.text}
style={styles.text} label="Unit (kg)"
label="Unit (kg)" value={unit}
value={unit} onChangeText={setUnit}
onChangeText={setUnit} ref={unitRef}
ref={unitRef} onSubmitEditing={save}
onSubmitEditing={save} />
/> <TextInput
<View style={styles.bottom}> style={styles.text}
<Button mode="contained" icon="save" onPress={save}> label="Created"
Save disabled
</Button> value={created.toLocaleString()}
<Button icon="close" onPress={() => setShow(false)}> />
Cancel <View style={styles.bottom}>
</Button> <Button mode="contained" icon="save" onPress={save}>
<Button icon="trash" onPress={remove} disabled={!id}> Save
Delete </Button>
</Button> <Button icon="close" onPress={() => setShow(false)}>
</View> Cancel
</Modal> </Button>
</Portal> <Button
style={{alignSelf: 'flex-end'}}
<Button icon="trash"
icon="add" onPress={remove}
mode="contained" disabled={!id}>
onPress={() => { Delete
setId(undefined); </Button>
setShow(true); </View>
}}> </Modal>
Add </Portal>
</Button>
</>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
modal: { modal: {
height: '100%',
backgroundColor: 'black', backgroundColor: 'black',
padding: 20, padding: 20,
}, },

14
Home.tsx
View File

@ -7,7 +7,7 @@ import {
StyleSheet, StyleSheet,
View, View,
} from 'react-native'; } from 'react-native';
import {List, Searchbar} from 'react-native-paper'; import {AnimatedFAB, Button, Searchbar} from 'react-native-paper';
import Alarm from './Alarm'; import Alarm from './Alarm';
import {getDb} from './db'; import {getDb} from './db';
import EditSet from './EditSet'; import EditSet from './EditSet';
@ -90,13 +90,23 @@ export default function Home() {
<Alarm /> <Alarm />
<EditSet <EditSet
id={id} id={id}
setId={setId}
show={showEdit} show={showEdit}
setShow={setShowEdit} setShow={setShowEdit}
onSave={save} onSave={save}
onRemove={refresh} onRemove={refresh}
/> />
</View> </View>
<AnimatedFAB
extended={false}
label="Add"
icon="add"
style={{position: 'absolute', right: 20, bottom: 20}}
onPress={() => {
setId(undefined);
setShowEdit(true);
}}
/>
</SafeAreaView> </SafeAreaView>
); );
} }