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

Resolve "Budget"

Browse source
This commit is contained in:
Thomas Schleicher 2024-01-02 12:49:13 +00:00 • committed by jastornig
parent 645b805aa7
commit 69610de100
17 changed files with 346 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/(tabs)/_layout.tsx
View file

@ -34,12 +34,13 @@ export default function Layout() {
return (
<Tabs sceneContainerStyle={styles.sceneContainer} screenOptions={screenOptions}>
<Tabs.Screen name="budget/index" options={
<Tabs.Screen name="budget" options={
{
tabBarLabel: "Budget",
tabBarIcon: ({size, color}) => (
<FontAwesome name="money" size={size} color={color}/>),
unmountOnBlur: true,
href: "(tabs)/budget"
}
}/>
<Tabs.Screen name="home" options={

16
app/(tabs)/budget/_layout.tsx Normal file
View file

@ -0,0 +1,16 @@
import { Stack } from "expo-router";
import { useTheme } from "../../contexts/ThemeContext";
export default function _Layout() {
const { colors } = useTheme();
return (
<Stack initialRouteName="index" screenOptions={{
headerShown: false
}}>
<Stack.Screen name="index"/>
<Stack.Screen
name="addCategory"
options={{presentation: "modal"}}/>
</Stack>
);
}

8
app/(tabs)/budget/addCategory.tsx Normal file
View file

@ -0,0 +1,8 @@
const addCategory = () => {
return (
<></>
);
}
export default addCategory;

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

@ -1,28 +1,70 @@
import { SafeAreaView, StyleSheet, Switch, Text } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { router } from 'expo-router';
import { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import { BudgetHeader, LoadingSymbol, Plus } from '../../../components';
import CategoryItem from '../../../components/budget/categoryItem';
import useFetch from '../../../hooks/useFetch';
import { useTheme } from '../../contexts/ThemeContext';
export default function Page() {
const {colors} = useTheme()
const containerColor = colors.containerColor;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
switch: {
transform: [{ scaleX: 1.3 }, { scaleY: 1.3 }],
},
text: {
color: "red",
fontSize: 40,
const [selectedPage, setSelectedPage] = useState("noPageLoaded");
useEffect(() => {
AsyncStorage.getItem("currentBudgetPage").then((page) => {
if(page === "expenses" || page === "savings") {
setSelectedPage(page);
}
}).catch((error) => {
console.log("Error fetching previous page from Async Storage:", error);
})
}, []);
const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM expense e RIGHT JOIN category c ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
useEffect(() => {
reFetch();
}, [selectedPage]);
const handlePageSelection = (page: string) => {
if(page !== selectedPage) {
setSelectedPage(page);
AsyncStorage.setItem("currentBudgetPage", page);
}
});
// const {data, isLoading, reFetch} = useFetch();
};
return (
<SafeAreaView>
<Text style={styles.text}>Hallo wo bin ich?!</Text>
<Switch style={styles.switch}/>
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
<BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
<Plus onPress={() => {
router.push("/(tabs)/budget/addCategory")
}}/>
{isLoading ? (<LoadingSymbol/>) : (
<FlatList
data={data}
renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_amount={item.allocated_amount ?? 0} color={item.category_color} category_guid={item.category_guid} total_expenses={item.total_expenses ?? 0}/>}
keyExtractor={item => item.category_guid}
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperatorStyle}/>);
}}
/>
)}
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
safeAreaViewStyle: {
flex: 1,
},
itemSeperatorStyle: {
marginVertical: 5,
},
});

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

@ -5,7 +5,8 @@ import { FlatList } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ExpenseItem, LoadingSymbol, Plus, SearchBar, Welcome } from '../../../components';
import useFetch from '../../../hooks/useFetch';
import { addExpense } from "../../../services/database";
import { addExpense, executeQuery } from "../../../services/database";
import { useAuth } from '../../contexts/AuthContext';
import { useRouter } from "expo-router";
import { SimpleDate } from '../../../util/SimpleDate';
@ -37,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);
@ -81,7 +63,7 @@ export default function Page() {
}
}
const {data, isLoading, reFetch} = useFetch();
const {data, isLoading, reFetch} = useFetch({sql: "SELECT e.guid AS expense_guid, c.guid AS category_guid, e.name AS expense_name, c.name AS category_name, e.datetime AS expense_datetime, e.amount AS expense_amount, c.color AS category_color, c.type AS category_type FROM expense e JOIN category c ON e.category_guid = c.guid;", args: []});
const expenseDates = useMemo(()=>
constructMarkedDates(data)
@ -90,15 +72,20 @@ 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");
newExpense("Test Title", "3b33b8ac-5fc1-43e5-81fc-cf61628861f7", "69.69.1234", 100).then(() => {
reFetch();
});
executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => {
if("rows" in result[0]) {
newExpense("Test Title", result[0]["rows"][0]["guid"], "69.69.1234", 100).then(() => {
reFetch();
});
}
})
}}/>}
{isLoading && <LoadingSymbol></LoadingSymbol>}
{isLoading && <LoadingSymbol/>}
<FlatList
data={data}
@ -122,13 +109,23 @@ export default function Page() {
<SearchBar placeholder='Type to Search...'></SearchBar>
</>
}
renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={"10,00$"}/>}
renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={item.expense_amount}/>}
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,
}
});

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

@ -1,22 +1,20 @@
import { Query } from 'expo-sqlite';
import { StyleSheet, Text, View } from 'react-native';
import { deleteExpenses } from '../../../services/database';
import { addCategory, deleteDatabase, deleteExpenses, executeQuery, initDatabase } from '../../../services/database';
export default function Page() {
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
justifyContent: 'space-evenly',
alignItems: 'center',
},
text: {
textAlign: 'center',
fontSize: 40,
color: "red",
color: "yellow",
}
});
return (
<View style={styles.container}>
<Text style={styles.text} onPress={() => {
@ -24,5 +22,40 @@ export default function Page() {
console.log("Expenses Deleted!");
})
}}>Reset Expenses</Text>
<Text style={styles.text} onPress={() => {
deleteDatabase();
console.log("Database Deleted!");
}}>Reset Database</Text>
<Text style={styles.text} onPress={() => {
initDatabase().then(() => {
console.log("Database Initialized!");
});
}}>Init Database</Text>
<Text style={styles.text} onPress={() => {
addCategory("Category", "green", "expense", 500).then(() => {
const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
executeQuery(getCategoryQuery).then((result) => {
if("rows" in result[0]) {
console.log(result[0]["rows"]);
}
})
console.log("Category added with success!");
})
}}>Add new Category Expense</Text>
<Text style={styles.text} onPress={() => {
addCategory("Category", "yellow", "saving", 420).then(() => {
const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
executeQuery(getCategoryQuery).then((result) => {
if("rows" in result[0]) {
console.log(result[0]["rows"]);
}
})
console.log("Category added with success!");
})
}}>Add new Category Savings</Text>
</View>);
}