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

changed the categoryItem component

Browse source
This commit is contained in:
Thomas Schleicher 2023-12-24 16:40:07 +01:00 • committed by Jakob Stornig
parent 6cf8fc29a2
commit 8931386239
3 changed files with 32 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,7 +37,7 @@ export default function Page() {
}}>Init Database</Text> }}>Init Database</Text>
<Text style={styles.text} onPress={() => { <Text style={styles.text} onPress={() => {
addCategory("Expense Category", "green", "expense").then(() => { addCategory("Category", "green", "expense").then(() => {
const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []}; const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
executeQuery(getCategoryQuery).then((result) => { executeQuery(getCategoryQuery).then((result) => {
if("rows" in result[0]) { if("rows" in result[0]) {
@ -49,7 +49,7 @@ export default function Page() {
}}>Add new Category Expense</Text> }}>Add new Category Expense</Text>
<Text style={styles.text} onPress={() => { <Text style={styles.text} onPress={() => {
addCategory("Savings Category", "yellow", "saving").then(() => { addCategory("Category", "yellow", "saving").then(() => {
const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []}; const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
executeQuery(getCategoryQuery).then((result) => { executeQuery(getCategoryQuery).then((result) => {
if("rows" in result[0]) { if("rows" in result[0]) {

48
components/budget/categoryItem.tsx
View file

@ -15,14 +15,19 @@ const CategoryItem = (properties: CategoryItemProps) => {
return ( return (
<CustomCard> <CustomCard>
<View style={[styles.colorTip, {backgroundColor: properties.color}]}></View> <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
<View style={[styles.textSection, {backgroundColor: backgroundColor}]}> <View style={[styles.textViewStyle]}>
<Text style={[styles.textSection, {color: textColor}]}>{properties.category}</Text> <Text style={[styles.textViewTextStyle, {color: textColor}]}>
{properties.category}
</Text>
</View> </View>
<View style={[styles.valueSection, {backgroundColor: backgroundColor}]}> <View style={[styles.valueViewStyle]}>
<Text style={[styles.valueViewTextStyle, {color: textColor}]}>
10/100$
{/* {properties.allocated_account} */}
</Text>
</View> </View>
</CustomCard> </CustomCard>
); );
@ -31,23 +36,28 @@ const CategoryItem = (properties: CategoryItemProps) => {
export default CategoryItem; export default CategoryItem;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
colorTip: { colorTipStyle: {
width: 20, width: 25,
borderTopLeftRadius: 20, borderTopLeftRadius: 10,
borderBottomLeftRadius: 20, borderBottomLeftRadius: 10,
}, },
textSection: { textViewStyle: {
flexDirection: "column", paddingVertical: 5,
alignContent: "space-between",
alignItems:"flex-start",
paddingLeft: 10, paddingLeft: 10,
flex:1,
alignSelf: "stretch", alignSelf: "stretch",
paddingVertical: 5
}, },
valueSection: { textViewTextStyle: {
justifyContent:"center", fontSize: 30,
borderTopRightRadius: 20, fontWeight: "bold",
borderBottomRightRadius: 20, },
valueViewStyle: {
alignSelf: "stretch",
flex: 1,
flexDirection: "row-reverse",
alignItems: "center",
paddingHorizontal: 10,
},
valueViewTextStyle: {
fontSize: 20,
} }
}) })

2
components/common/CustomCard.tsx
View file

@ -42,7 +42,7 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
alignItems: "stretch", alignItems: "stretch",
alignContent: "space-between", alignContent: "space-between",
borderRadius: 20, borderRadius: 10,
marginHorizontal: 10, marginHorizontal: 10,
}, },
boxShadow: {}, boxShadow: {},