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

last changes

Browse source
This commit is contained in:
Jakob Stornig 2024-01-25 20:35:09 +01:00
parent 7a5ace403e
commit 899b50ded4
16 changed files with 53 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/(tabs)/(budget)/addCategory.tsx
View file

@ -5,7 +5,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
import { addCategory } from "../../../services/database";
import { useTheme } from "../../contexts/ThemeContext";
import { CategoryType } from "../../../services/database";
import { CategoryType } from "../../../types/dbItems";
export default function Page() {
const {colors} = useTheme();

3
app/(tabs)/(budget)/editCategory.tsx
View file

@ -6,6 +6,7 @@ import useFetch from "../../../hooks/useFetch";
import { deleteCategory, deleteExpense, updateCategory } from "../../../services/database";
import { useTheme } from "../../contexts/ThemeContext";
import { SafeAreaView } from 'react-native-safe-area-context';
import { CategoryType } from "../../../types/dbItems";
const addCategory = () => {
const {colors} = useTheme();
@ -13,7 +14,7 @@ const addCategory = () => {
const [categoryName, setCategoryName] = useState(category_name.toString());
const [categoryColor, setCategoryColor] = useState(category_color.toString());
const [selectedType, setSelectedType] = useState(category_type.toString());
const [selectedType, setSelectedType] = useState<CategoryType>(category_type === "expense" ? CategoryType.EXPENSE : CategoryType.SAVING);
const [amount, setAmount] = useState(Number.parseFloat(category_amount.toString()));
const {data} = useFetch({sql: "SELECT * FROM expense WHERE category_guid = ?", args: [category_guid.toString()]});

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

@ -67,7 +67,6 @@ export default function Page() {
})
}, [data, searchString, selectedPage]);
console.log(selectedPage)
return (
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
<View style={{flex: 1, marginHorizontal: 10}}>

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

@ -1,24 +1,39 @@
import React from 'react';
import { SafeAreaView } from 'react-native';
import { Graph } from '../../../components';
import BudgetOverview from '../../../components/stats/BudgetOverview';
import BudgetRemaining from '../../../components/stats/BudgetRemaining';
import BudgetRemaining from '../../../components/stats/SavingsOverview';
import SavingsOverview from '../../../components/stats/SavingsOverview';
import Widget from '../../../components/stats/Widget';
import FinancialAdvice from '../../../components/stats/FinancialAdvice';
import BudgetTotal from '../../../components/stats/BudgetTotal';
import { ScrollView } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import DebugMenu from '../../../services/DebugMenu';
export default function Page() {
return (
<SafeAreaView style={{flex:1}}>
<ScrollView>
{/* <DebugMenu/> */}
<Widget title="Budget Overview"/>
<Graph/>
<BudgetRemaining/>
<Widget>
<BudgetOverview/>
</Widget>
<Widget>
<SavingsOverview/>
</Widget>
<Widget>
<BudgetTotal/>
</Widget>
{/* <Widget title='"Financial" Tips' backgroundColor='orange'>
<FinancialAdvice/>
</Widget> */}
</ScrollView>
</SafeAreaView>
);
}

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

@ -1,52 +0,0 @@
import React from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';
import BudgetTotal from '../../../components/stats/BudgetTotal';
import { useTheme } from '../../contexts/ThemeContext';
import Widget from '../../../components/stats/Widget';
import DebugMenu from '../../../services/DebugMenu';
import SavingsOverview from '../../../components/stats/SavingsOverview';
import FinancialAdvice from '../../../components/stats/FinancialAdvice';
import BudgetOverview from '../../../components/stats/BudgetOverview';
export default function Page() {
const { colors } = useTheme();
// Mock data #TODO Database einbinden
// what to do when amount too small?
const spent = 120.75;
const budget = 696.96;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.backgroundColor,
marginTop: 50,
alignItems: 'center',
},
});
return (
<View style={styles.container}>
<ScrollView>
<DebugMenu />
<Widget title='"Financial" Tips' backgroundColor='orange'>
<FinancialAdvice/>
</Widget>
<Widget title="Budget Overview" />
<Widget>
<BudgetTotal/>
</Widget>
<Widget title='Your Expenses so far' image={require('../../../assets/images/8b14el.jpg')}/>
<Widget>
<BudgetOverview/>
</Widget>
<Widget>
<SavingsOverview/>
</Widget>
</ScrollView>
</View>
);
}

2
app/expense/new.tsx
View file

@ -54,9 +54,7 @@ export default function AddItem() {
useEffect(()=>{
if(searchParams.category !== undefined){
console.log(searchParams.category)
executeQuery({sql: "SELECT * FROM category WHERE guid = ?", args: [searchParams.category]}).then((result) =>{
console.log("then")
if("rows" in result[0]){
const category = result[0]["rows"][0];
setSelectedCategory({name: category["name"], color: category["color"], guid: category["guid"]})

2
components/budget/typeSelectorSwitch.tsx
View file

@ -1,7 +1,7 @@
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useTheme } from "../../app/contexts/ThemeContext";
import { CategoryType } from "../../services/database";
import { CategoryType } from "../../types/dbItems";
export type TypeSelectorSwitchProperties = {
handleButtonPress: (type: CategoryType) => void,

4
components/stats/BudgetOverview.tsx
View file

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Text, StyleSheet } from 'react-native';
import { useTheme } from '../../app/contexts/ThemeContext';
import useFetch from '../../hooks/useFetch';
import { CategoryType } from '../../services/database';
import { CategoryType } from '../../types/dbItems';
import {useCategoryData} from '../../hooks/useCategoryData';
const styles = StyleSheet.create({
@ -47,7 +47,7 @@ const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor
return (
<Text style={[styles.text, { color: colors.primaryText }]}>
<>
You have spent <Text style={[styles.boldText, { color: goodColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Budget of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
You have spent <Text style={[styles.boldText, { color: goodColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Budget of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>
</>
</Text>
);

6
components/stats/BudgetTotal.tsx
View file

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Text, StyleSheet } from 'react-native';
import { useTheme } from '../../app/contexts/ThemeContext';
import useFetch from '../../hooks/useFetch';
import { CategoryType } from '../../services/database';
import { CategoryType } from '../../types/dbItems';
import {useCategoryData} from '../../hooks/useCategoryData';
const styles = StyleSheet.create({
@ -48,11 +48,11 @@ const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor
<Text style={[styles.text, { color: colors.primaryText }]}>
{remaining >= 0 ? (
<>
Your remaining overall Budget is <Text style={[styles.boldText, { color: goodColor }]}>{remaining.toFixed(2)}€</Text>.
Your remaining overall Budget is <Text style={[styles.boldText, { color: goodColor }]}>{remaining.toFixed(2)}€</Text>
</>
) : (
<>
Your Budget is overspent by <Text style={[styles.boldText, { color: badColor }]}>-{Math.abs(remaining).toFixed(2)}€</Text>.
Your Budget is overspent by <Text style={[styles.boldText, { color: badColor }]}>-{Math.abs(remaining).toFixed(2)}€</Text>
</>
)}
</Text>

6
components/stats/SavingsOverview.tsx
View file

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Text, StyleSheet } from 'react-native';
import { useTheme } from '../../app/contexts/ThemeContext';
import useFetch from '../../hooks/useFetch';
import { CategoryType } from '../../services/database';
import { CategoryType } from '../../types/dbItems';
import {useCategoryData} from '../../hooks/useCategoryData';
const styles = StyleSheet.create({
@ -48,11 +48,11 @@ const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor
<Text style={[styles.text, { color: colors.primaryText }]}>
{remaining >= 0 ? (
<>
You have saved <Text style={[styles.boldText, { color: badColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
You have saved <Text style={[styles.boldText, { color: badColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€</Text>
</>
) : (
<>
You have surpassed your Savings Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€</Text> by <Text style={[styles.boldText, { color: goodColor }]}>{Math.abs(remaining).toFixed(2)}€</Text>.
You have surpassed your Savings Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€</Text> by <Text style={[styles.boldText, { color: goodColor }]}>{Math.abs(remaining).toFixed(2)}€</Text>
</>
)}
</Text>

2
hooks/useCategoryData.ts
View file

@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import useFetch from './useFetch';
import { CategoryType } from '../services/database';
import { CategoryType } from '../types/dbItems';
export const useCategoryData = (CategoryType: string) => {
const [data, setData] = useState({ total: 0, expenseTotal: 0 });

8
package-lock.json generated
View file

@ -28,7 +28,7 @@
"react-native-calendars": "^1.1303.0",
"react-native-chart-kit": "^6.12.0",
"react-native-gesture-handler": "~2.12.0",
"react-native-reanimated": "^3.3.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native-uuid": "^2.0.1",
@ -16163,9 +16163,9 @@
}
},
"node_modules/react-native-reanimated": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz",
"integrity": "sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==",
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz",
"integrity": "sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==",
"dependencies": {
"@babel/plugin-transform-object-assign": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",

2
package.json
View file

@ -38,7 +38,7 @@
"react-native-calendars": "^1.1303.0",
"react-native-chart-kit": "^6.12.0",
"react-native-gesture-handler": "~2.12.0",
"react-native-reanimated": "^3.3.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native-uuid": "^2.0.1",

3
services/DebugMenu.tsx
View file

@ -2,6 +2,7 @@ import React from 'react';
import { View, Button, Alert } from 'react-native';
import { addCategory, addExpense, deleteExpenses, deleteCategories, DEV_populateDatabase, deleteDatabase } from './database';
import uuid from 'react-native-uuid';
import { CategoryType } from '../types/dbItems';
const randomColors = ["red", "blue", "green", "purple", "yellow"];
@ -46,7 +47,7 @@ const DebugMenu = () => {
const allocated_amount = getRandomNumber();
const type = "expense";
addCategory(name, color, type, allocated_amount)
addCategory(name, color, CategoryType.EXPENSE, allocated_amount)
.then(() => Alert.alert("Category Added", `Name: ${name}, Color: ${color}`))
.catch((error: any) => console.error("Error adding category: ", error));
};

6
services/database.ts
View file

@ -4,13 +4,11 @@ import uuid from "react-native-uuid";
import { Query } from "expo-sqlite";
import { SimpleDate } from "../util/SimpleDate";
import { CategoryType } from "../types/dbItems";
let db: SQLite.SQLiteDatabase;
export enum CategoryType {
SAVING = "saving",
EXPENSE = "expense",
}
export const initDatabase = async () => {
db = SQLite.openDatabase("interactive_systeme.db");

4
types/dbItems.ts
View file

@ -1,3 +1,7 @@
export enum CategoryType {
SAVING = "saving",
EXPENSE = "expense",
}
export interface Category {
guid? : string;
name? : string;