rawalcher/interaktive-systeme
Archived
1
0
Fork 0
Code Issues 5 Pull requests 2 Projects Releases 14 Packages Wiki Activity Actions

some clean up and work on the budget screen

Browse source
This commit is contained in:
thschleicher 2023-12-23 13:55:57 +01:00 • committed by Jakob Stornig
parent ef90c4ee1a
commit 7c165fb691
3 changed files with 64 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/(tabs)/budget/index.tsx
View file

@ -1,38 +1,41 @@
import { SafeAreaView, StyleSheet, Text } from 'react-native';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { SearchBar } from '../../../components';
import CategoryItem from '../../../components/budget/categoryItem';
import useFetch from '../../../hooks/useFetch';
import { useThemeColor } from '../../../hooks/useThemeColor';
export default function Page() {
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: "red",
fontSize: 40,
}
});
const containerColor = useThemeColor("containerColor");
const textColor = useThemeColor("primaryText");
const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category", args: []});
return (
<SafeAreaView style={styles.container}>
<Text style={styles.text}>Expense View</Text>
<SearchBar placeholder='Nothing'></SearchBar>
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
<View>
<Text style={[{color: textColor}]}>Expense View</Text>
<SearchBar placeholder='Search...'></SearchBar>
</View>
<FlatList
data={data}
renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}>
</FlatList>
renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
keyExtractor={item => item.category_guid}
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperatorStyle}/>);
}}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safeAreaViewStyle: {
flex: 1,
},
itemSeperatorStyle: {
marginVertical: 5,
}
});

39
app/(tabs)/home/index.tsx
View file

@ -38,26 +38,7 @@ const constructMarkedDates = (data : {[column: string]: any}) => {
export default function Page() {
const { colors, theme } = useTheme()
//Styles
const styles = StyleSheet.create({
safeAreaViewStyle: {
flex: 1,
backgroundColor: colors.backgroundColor
},
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
text: {
color: colors.primaryText,
fontSize: 70,
fontWeight: "bold"
},
loading: {
color: "red",
}
});
const router = useRouter();
const [plusShow, setPlusShow] = useState(true);
@ -91,7 +72,7 @@ export default function Page() {
return (
<SafeAreaView edges={["left", "right", "top"]} style={styles.safeAreaViewStyle}>
<SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
{plusShow && <Plus onPress={()=>{
// router.push("/(tabs)/home/addItem");
@ -130,11 +111,21 @@ export default function Page() {
}
renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={"10,00$"}/>}
keyExtractor={item => item.expense_guid}
ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperatorStyle}/>);
}}
onScroll={handleScroll}
scrollEventThrottle={20}
>
</FlatList>
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safeAreaViewStyle: {
flex: 1,
},
itemSeperatorStyle: {
marginVertical: 5,
}
});

42
components/budget/categoryItem.tsx
View file

@ -1,4 +1,4 @@
import { ColorValue, StyleSheet, View } from "react-native";
import { ColorValue, StyleSheet, Text, View } from "react-native";
import { useThemeColor } from "../../hooks/useThemeColor";
import CustomCard from "../common/CustomCard";
@ -15,10 +15,9 @@ const CategoryItem = (properties: CategoryItemProps) => {
return (
<CustomCard>
< View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
<View style={[styles.colorTip, {backgroundColor: properties.color}]}></View>
<View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
<Text style={[styles.textSection, {color: textColor}]}>{properties.category}</Text>
</View>
@ -32,18 +31,23 @@ const CategoryItem = (properties: CategoryItemProps) => {
export default CategoryItem;
const styles = StyleSheet.create({
colorTip: {
width: 20,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
},
textSection: {
flexDirection: "column",
alignContent: "space-between",
alignItems:"flex-start",
paddingLeft: 10,
flex:1,
alignSelf: "stretch",
paddingVertical: 5
},
valueSection: {
justifyContent:"center",
borderTopRightRadius: 20,
borderBottomRightRadius: 20,
}
});
flexDirection: "column",
alignContent: "space-between",
alignItems:"flex-start",
paddingLeft: 10,
flex:1,
alignSelf: "stretch",
paddingVertical: 5
},
valueSection: {
justifyContent:"center",
borderTopRightRadius: 20,
borderBottomRightRadius: 20,
}
})