Explorar el Código

mmmmmvp

master
DemiSel hace 2 años
padre
commit
60773c1eb8
Se han modificado 5 ficheros con 97 adiciones y 27 borrados
  1. 4
    2
      App.js
  2. 4
    1
      app.json
  3. 54
    9
      components/add_depense.js
  4. 33
    14
      components/depenses_list.js
  5. 2
    1
      db/query.js

+ 4
- 2
App.js Ver fichero

@@ -17,8 +17,10 @@ export default function App() {
17 17
         console.log(res.rows.length);
18 18
         if(res.rows.length == 0)
19 19
           onChangeObjective(15);
20
-      })
21
-    })
20
+      });
21
+    });
22
+    sqlite_exec_query(`
23
+      create table if not exists expense (id integer primary key not null, value real, description text, date integer);`,(res)=>{});
22 24
   });
23 25
 
24 26
   return (

+ 4
- 1
app.json Ver fichero

@@ -5,7 +5,10 @@
5 5
     "version": "1.0.0",
6 6
     "assetBundlePatterns": [
7 7
       "**/*"
8
-    ]
8
+    ],
9
+    "android": {
10
+      "package": "com.eseb.budgetizr"
11
+    }
9 12
   },
10 13
   "name": "budgetizr"
11 14
 }

+ 54
- 9
components/add_depense.js Ver fichero

@@ -1,24 +1,57 @@
1 1
 import React from 'react';
2 2
 import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
3
-
3
+import { sqlite_exec_parameterised } from '../db/query';
4 4
 
5 5
 export default function AddDepense(props){
6 6
     const [addingDepense, onAddDepense] = React.useState(false);
7
+    const [depenseValue, onValueEdit] = React.useState(null);
8
+    const [descriptionValue, onDescriptionEdit] = React.useState(null);
7 9
 
8
-
9
-    return (<View style={add_depenses_styles.overlay}>
10
+    return (<View style={ add_depenses_styles.overlay }>
10 11
     <View >
11 12
         {addingDepense ? 
12
-            <View style={ add_depenses_styles.form_area}>
13
-                <Text> Le form</Text>
14
-                <Button title="Ajouter"/>
13
+            <View style={ add_depenses_styles.form_area }>
14
+                <Text> Nouvelle dépense</Text>
15
+                <View style={ add_depenses_styles.form_entry }>
16
+                    <Text> 💸</Text>
17
+                    <TextInput
18
+                        keyboardType="numeric"
19
+                        style={ add_depenses_styles.input }
20
+                        onChangeText={ (value) => {
21
+                            onValueEdit(value);
22
+                        }}
23
+                    />
24
+                </View>
25
+                <View style={ add_depenses_styles.form_entry }>
26
+                    <Text> 📃</Text>
27
+                    <TextInput style={ add_depenses_styles.input }
28
+                        onChangeText={ (value) => {
29
+                            onDescriptionEdit(value);
30
+                        }}
31
+                    />
32
+                </View>
33
+                <Button 
34
+                    onPress={() => 
35
+                        {
36
+                            console.log(depenseValue);
37
+                            if(null != depenseValue)
38
+                            {
39
+                                sqlite_exec_parameterised(
40
+                                    "INSERT INTO expense (value, description, date) values (?, ?, ?)",
41
+                                    [depenseValue, descriptionValue, Date.now()], (res) => {
42
+                                        onAddDepense(false);
43
+                                    }
44
+                                    );
45
+                            }
46
+                        }}
47
+                    title="Ajouter"/>
15 48
             </View>
16 49
          : <View/>}
17 50
     </View>
18 51
     <View style={ add_depenses_styles.button_add_parent }>
19 52
         <Button 
20 53
             style={add_depenses_styles.button_add} 
21
-            title="+"
54
+            title={!addingDepense ? "+" : "-"}
22 55
             onPress={() => onAddDepense(!addingDepense)}></Button>
23 56
     </View>
24 57
     </View>
@@ -34,11 +67,23 @@ const add_depenses_styles = StyleSheet.create({
34 67
 
35 68
     },
36 69
     form_area: {
37
-        backgroundColor: '#282828',
70
+        backgroundColor: '#f2c596',
71
+        zIndex: 10,
72
+        elevation: 10,
73
+        display: 'flex',
74
+        flexDirection: 'column'
38 75
 
39 76
     },
77
+    form_entry :{
78
+        display: 'flex',
79
+        flexDirection: 'row',
80
+    },
81
+    input :{
82
+        width: "50%",
83
+        borderWidth: 1
84
+    },
40 85
     button_add: {
41
-
86
+        
42 87
     },
43 88
     button_add_parent: {
44 89
         position: 'absolute',

+ 33
- 14
components/depenses_list.js Ver fichero

@@ -1,27 +1,46 @@
1
-import React from 'react';
1
+import React, { useEffect } from 'react';
2 2
 import { StyleSheet, Text, View, TextInput } from 'react-native';
3
+import { sqlite_exec_query } from '../db/query';
3 4
 
4 5
 
5 6
 function DepensesList(props)
6 7
 {
8
+    const [depenses, onGetDepenses] = React.useState([]);
9
+    useEffect( () => {
10
+        sqlite_exec_query("select * from expense", (res) => {
11
+            onGetDepenses(res.rows._array);
12
+        })
13
+    });
14
+    let content = []
15
+
16
+    depenses
17
+        .sort((a,b) => (a.date > b.date) ? -1 : (b.date > a.date) ? 1 : 0)
18
+        .forEach( function(depense){
19
+        content.push(
20
+            <View key={"depense_list_depense"+depense.id} style={depense_list_style.depense_list_entry}>
21
+                <Text >{depense.description}</Text>
22
+                <Text >{depense.value}</Text>
23
+            </View>
24
+        )
25
+    });
7 26
 
8 27
     return(
9 28
     <View>
10
-        <Text>{props.durationMode}</Text>
11
-        <Text>{props.durationMode}</Text>
12
-        <Text>{props.durationMode}</Text>
13
-        <Text>{props.durationMode}</Text>
14
-        <Text>{props.durationMode}</Text>
15
-        <Text>{props.durationMode}</Text>
16
-        <Text>{props.durationMode}</Text>
17
-        <Text>{props.durationMode}</Text>
18
-        <Text>{props.durationMode}</Text>
19
-        <Text>{props.durationMode}</Text>
20
-        <Text>{props.durationMode}</Text>
21
-        <Text>{props.durationMode}</Text>
22
-        <Text>{props.durationMode}</Text>
29
+        {content}
23 30
     </View>
24 31
     )
25 32
 }
26 33
 
34
+const depense_list_style = StyleSheet.create({
35
+    depense_list_entry: {
36
+        display: "flex",
37
+        flexDirection: "row",
38
+        justifyContent: "space-between",
39
+    //   flex: 1,
40
+    //   backgroundColor: '#00FF00',
41
+    //   alignItems: 'center',
42
+    //   justifyContent: 'center',
43
+    }
44
+  });
45
+
27 46
 export default DepensesList

+ 2
- 1
db/query.js Ver fichero

@@ -9,9 +9,10 @@ export function sqlite_exec_query(inQuery, inCallback){
9 9
 }
10 10
 
11 11
 export function sqlite_exec_parameterised(inQuery, inParams, inCallback){
12
+    // console.log(inQuery);
12 13
     db.transaction((tx) => {
13 14
         tx.executeSql(inQuery, inParams,
14 15
         (txobj, res) => inCallback(res),
15
-        (txobj, err) => {console.log("er");console.log(err);})
16
+        (txobj, err) => {console.log("query.js error |");console.log(err);})
16 17
     })
17 18
 }

Loading…
Cancelar
Guardar