Skip to content

Commit

Permalink
Formatting Health and Meal Pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@rhit-villencr
rhit-villencr committed Sep 28, 2024
1 parent 79cb2f6 commit e95f145
Show file tree
Hide file tree
Showing 10 changed files with 395 additions and 126 deletions.
160 changes: 115 additions & 45 deletions app/(tabs)/addHealthEvents.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,130 @@
import React from 'react';
import React, { useState } from 'react';
import { View, TextInput, Text, TouchableOpacity } from 'react-native';
import { styles } from './styles';
import { Ionicons } from "@expo/vector-icons";
import { Props } from '../_layout'
import { Dropdown } from 'react-native-element-dropdown';

const data = [
{ label: 'Item 1', value: '1' },
{ label: 'Item 2', value: '2' },
{ label: 'Item 3', value: '3' },
{ label: 'Item 4', value: '4' },
{ label: 'Item 5', value: '5' },
{ label: 'Item 6', value: '6' },
{ label: 'Item 7', value: '7' },
{ label: 'Item 8', value: '8' },
];

export default function AddHealthEvents({ navigation }:Props) {
const [value, setValue] = useState(null);
const [isFocus, setIsFocus] = useState(false);

const renderLabel = () => {
if (value || isFocus) {
return (
<Text>
Dropdown label
</Text>
);
}
return null;
};
return (
<View style={styles.container}>
<View style={{ height: 100 }}></View>
<View>
<View>
<Text>
Name:
</Text>
<TextInput
style={styles.input}
/>
<Text>
Date:
</Text>
<TextInput
style={styles.input}
/>
<Text>
Time:
</Text>
<TextInput
style={styles.input}
/>
<Text>
Health Goal:
</Text>
<TextInput
style={styles.input}
/>
<Text>
# Calories Burned:
</Text>
<TextInput
style={styles.input}
/>
<Text>
Repeat:
</Text>
<TextInput
style={styles.input}
/>
<View style={styles.inLine}>
<Text style={styles.sectionHeader}>Add new Health Event</Text>
<TouchableOpacity style={{ marginLeft: 50 }}
onPress={() =>
navigation.navigate('addMeals')}
hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}>
<View style={styles.taskicon}>
<Ionicons name="walk-outline" size={30} color={'#000'} />
</View>
</TouchableOpacity>
</View>
<View style={styles.inputContainer}>
<View style={styles.inLine}>
<Text style={styles.inputText}>
Title
</Text>
<TextInput
style={styles.input}
/>
</View>

<View style={styles.inLine}>
<Text style={styles.inputText}>
Date
</Text>
<TextInput
style={styles.input}
/>
</View>

<View style={styles.inLine}>
<Text style={styles.inputText}>
Time
</Text>
<TextInput
style={styles.input}
/>
</View>

<View style={styles.inLine}>
<Text style={styles.inputText}>
Repeating
</Text>
<View style={styles.container}>
{renderLabel()}
<Dropdown
data={data}
search
maxHeight={300}
labelField="label"
valueField="value"
placeholder={!isFocus ? 'Select item' : '...'}
searchPlaceholder="Search..."
value={value}
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
onChange={item => {
setValue(item.value);

Check failure on line 94 in app/(tabs)/addHealthEvents.tsx

View workflow job for this annotation

GitHub Actions / type-check 

Argument of type 'string' is not assignable to parameter of type 'SetStateAction<null>'.
setIsFocus(false);
}}
renderLeftIcon={() => (
<Ionicons
name='accessibility-outline'
/>
)}
/>
</View>
<View>
<TouchableOpacity style={styles.centerButton}
onPress={() =>
navigation.navigate('healthTracking')}
hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }}>
<Ionicons name="save-outline" size={30} color={'#000'} />
</TouchableOpacity>
</View>

</View>
</View>
<View style={styles.saveCancelContainer}>
<View style={styles.saveCancel}>
<Text style={styles.cancelText}>Cancel</Text>
<TouchableOpacity
onPress={() =>
navigation.navigate('mealTracking')}
hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }}>
<Ionicons name='close-circle-outline' size={30} color={'#000'} />
</TouchableOpacity>
</View>
<View style={styles.saveCancel}>
<Text style={styles.saveText}>Save</Text>
<TouchableOpacity
onPress={() =>
navigation.navigate('mealTracking')}
hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }}>
<Ionicons name="save-outline" size={30} color={'#000'} />
</TouchableOpacity>
</View>

</View>

</View>
Expand Down
92 changes: 64 additions & 28 deletions app/(tabs)/addMeals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,54 @@ import { Props } from '../_layout'
export default function AddMeals({ navigation }: Props) {
return (
<View style={styles.container}>
<View style={{ height: 100 }}></View>
<View>
<View>
<Text>
Name:
</Text>
<TextInput
style={styles.input}
/>
<Text>
Date:
</Text>
<TextInput
style={styles.input}
/>
<Text>
Time:
</Text>
<TextInput
style={styles.input}
/>
<View style={styles.inLine}>
<Text style={styles.sectionHeader}>Add new Meal</Text>
<TouchableOpacity style={{ marginLeft: 50 }}
onPress={() =>
navigation.navigate('addMeals')}
hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}>
<View style={styles.taskicon}>
<Ionicons name="pizza-outline" size={30} color={'#000'} />
</View>
</TouchableOpacity>
</View>
<View style={styles.inputContainer}>
<View style={styles.inLine}>
<Text style={styles.inputText}>
Title
</Text>
<TextInput
style={styles.input}
/>
</View>

<View style={styles.inLine}>
<Text style={styles.inputText}>
Date
</Text>
<TextInput
style={styles.input}
/>
</View>

<View style={styles.inLine}>
<Text style={styles.inputText}>
Time
</Text>
<TextInput
style={styles.input}
/>
</View>

</View>

</View>
<View>
<View style={styles.inLine}>
<Text style={styles.sectionHeader}>
Grocery List Ingredients:
Ingredients
</Text>
<TouchableOpacity style={{ marginLeft: 50 }}
onPress={() =>
Expand All @@ -43,17 +64,32 @@ export default function AddMeals({ navigation }: Props) {
</TouchableOpacity>
</View>
<TextInput
style={styles.input}
style={styles.input}
/>
<TextInput
style={styles.input}
style={styles.input}
/>
<TouchableOpacity style={styles.centerButton}
onPress={() =>
navigation.navigate('mealTracking')}
hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }}>
<Ionicons name="save-outline" size={30} color={'#000'} />
</TouchableOpacity>
</View>
<View style={styles.saveCancelContainer}>
<View style={styles.saveCancel}>
<Text style={styles.cancelText}>Cancel</Text>
<TouchableOpacity
onPress={() =>
navigation.navigate('mealTracking')}
hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }}>
<Ionicons name='close-circle-outline' size={30} color={'#000'} />
</TouchableOpacity>
</View>
<View style={styles.saveCancel}>
<Text style={styles.saveText}>Save</Text>
<TouchableOpacity
onPress={() =>
navigation.navigate('mealTracking')}
hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }}>
<Ionicons name="save-outline" size={30} color={'#000'} />
</TouchableOpacity>
</View>

</View>

</View>
Expand Down
60 changes: 37 additions & 23 deletions app/(tabs)/healthTracker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity, Button } from 'react-native';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import BouncyCheckbox from "react-native-bouncy-checkbox";
import { Calendar } from 'react-native-calendars';
import { styles } from './styles';
import { Ionicons } from "@expo/vector-icons";
Expand All @@ -9,9 +10,9 @@ import { Props } from '../_layout'
export default function HealthTracker({ navigation }: Props) {
const [selectedDate, setSelectedDate] = useState('');
const [tasks] = useState<Task[]>([
{ id: "1", title: "Walk the dog at 5pm", done: true },
{ id: "2", title: "Gym at 7pm", done: true },
{ id: "3", title: "Therapy at 10pm", done: true },
{ id: "1", title: "Walk the dog at 5pm", done: true, icon: 'walk-outline' },
{ id: "2", title: "Gym at 7pm", done: true, icon: 'barbell-outline' },
{ id: "3", title: "Therapy at 10pm", done: true, icon: 'chatbubbles-outline' },
]);

const handleDayPress = (day: { dateString: React.SetStateAction<string>; }) => {
Expand All @@ -20,17 +21,37 @@ export default function HealthTracker({ navigation }: Props) {

const renderTask = ({ item }: { item: Task }) => (
<View style={styles.taskItem}>
<Text style={styles.bullet}>•</Text>
<Text style={styles.bullet}>
<View style={styles.taskicon}>
<Ionicons name={item.icon} size={30} color={'#000'}></Ionicons>

Check failure on line 26 in app/(tabs)/healthTracker.tsx

View workflow job for this annotation

GitHub Actions / type-check 

Type 'IconName' is not assignable to type '"text" | "search" | "repeat" | "link" | "at" | "body" | "code" | "map" | "menu" | "time" | "ellipse" | "filter" | "image" | "stop" | "push" | "scale" | "alert" | "checkbox" | "radio" | ... 1319 more ... | undefined'.
</View>
</Text>
<Text style={styles.taskText}>{item.title}</Text>
<View>
<BouncyCheckbox
fillColor="#65558F"
iconStyle={{ borderRadius: 0 }}
innerIconStyle={{ borderRadius: 0, borderWidth: 2 }}
onPress={(isChecked: boolean) => { item.done = isChecked }} />
</View>
</View>
);

return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Health</Text>
{/* Temporary View until navigation system gets added vvv */}
<View style={{ height: 100 }}></View>

<View>
<Text style={styles.sectionHeader}>Upcoming Events</Text>
</View>

<FlatList style={styles.flatList}
data={tasks}
renderItem={renderTask}
keyExtractor={(item) => item.id}
/>
<View style={{ height: 50 }}></View>
<Calendar
onDayPress={handleDayPress}
markedDates={{
Expand All @@ -41,26 +62,19 @@ export default function HealthTracker({ navigation }: Props) {
},
}}
theme={{
selectedDayBackgroundColor: '#9b59b6',
selectedDayBackgroundColor: '#65558F',
todayTextColor: '#00adf5',
arrowColor: '#9b59b6',
}}
/>

<View style={styles.inLine}>
<Text style={styles.sectionHeader}>Upcoming Events</Text>
<TouchableOpacity style={{ marginLeft: 150 }}
onPress={() =>
navigation.navigate('addHealthEvents')}
hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }}>
<Ionicons name="add-circle-outline" size={30} color={'#000'} />
</TouchableOpacity>
</View>
<FlatList
data={tasks}
renderItem={renderTask}
keyExtractor={(item) => item.id}
/>
<TouchableOpacity style={styles.fixedButton}
onPress={() =>
navigation.navigate('addHealthEvents')}
hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}>
<View style={styles.icon}>
<Ionicons name="add-outline" size={40} color={'#eee'} />
</View>
</TouchableOpacity>
</View>
);
}
Loading

0 comments on commit e95f145

Please sign in to comment.