Browse Source

button to open form

master
DemiSel 2 years ago
parent
commit
5865269f3f
4 changed files with 65 additions and 23 deletions
  1. 9
    8
      App.js
  2. 36
    12
      components/add_depense.js
  3. 14
    0
      components/depenses_list.js
  4. 6
    3
      db/query.js

+ 9
- 8
App.js View File

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View, TextInput } from 'react-native';
4 4
 import AddDepense from './components/add_depense';
5 5
 import DepensesList from './components/depenses_list';
6 6
 import TitleBar from './components/title_bar';
7
-import sqlite_exec_query from './db/query';
7
+import {sqlite_exec_query} from './db/query';
8 8
 
9 9
 
10 10
 export default function App() {
@@ -22,7 +22,7 @@ export default function App() {
22 22
   });
23 23
 
24 24
   return (
25
-    <View>
25
+    <View style={styles.home}>
26 26
       <View style={styles.container, {
27 27
         flexDirection: "column"
28 28
       }}>
@@ -33,20 +33,21 @@ export default function App() {
33 33
             onChangeObjective={onChangeObjective}/>
34 34
           <DepensesList durationMode={durationMode} />
35 35
           <StatusBar hidden />
36
-        </View>
37
-        <View>
38
-        {/* Overlay for expenses */}
39
-        <AddDepense/>
40
-
41 36
       </View>
37
+        {/* Overlay for expenses */}
38
+      <AddDepense/>
42 39
     </View>
43 40
   );
44 41
 }
45 42
 
46 43
 const styles = StyleSheet.create({
44
+  home: {
45
+    width: '100%',
46
+    height: '100%',
47
+  },
47 48
   container: {
48 49
     flex: 1,
49
-    backgroundColor: '#fff',
50
+    backgroundColor: '#00FF00',
50 51
     alignItems: 'center',
51 52
     justifyContent: 'center',
52 53
   }

+ 36
- 12
components/add_depense.js View File

@@ -3,22 +3,46 @@ import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
3 3
 
4 4
 
5 5
 export default function AddDepense(props){
6
+    const [addingDepense, onAddDepense] = React.useState(false);
6 7
 
7
-        return (
8
-        <View style={add_depenses_styles.buttonAdd}>
9
-            <Button  title="+"></Button>
10
-        </View>
11
-        );
12
-    }
8
+
9
+    return (<View style={add_depenses_styles.overlay}>
10
+    <View >
11
+        {addingDepense ? 
12
+            <View style={ add_depenses_styles.form_area}>
13
+                <Text> Le form</Text>
14
+                <Button title="Ajouter"/>
15
+            </View>
16
+         : <View/>}
17
+    </View>
18
+    <View style={ add_depenses_styles.button_add_parent }>
19
+        <Button 
20
+            style={add_depenses_styles.button_add} 
21
+            title="+"
22
+            onPress={() => onAddDepense(!addingDepense)}></Button>
23
+    </View>
24
+    </View>
25
+    );
26
+}
13 27
 
14 28
 
15 29
 const add_depenses_styles = StyleSheet.create({
16
-    buttonAdd: {
30
+    overlay: {
31
+        height: "100%",
32
+        width: "100%",
17 33
         position: 'absolute',
18
-        bottom: 0,
19
-        right: 0
34
+
35
+    },
36
+    form_area: {
37
+        backgroundColor: '#282828',
38
+
39
+    },
40
+    button_add: {
41
+
20 42
     },
21
-    input: {
22
-        borderWidth: 0.5
43
+    button_add_parent: {
44
+        position: 'absolute',
45
+        bottom: 10,
46
+        right: 10,
23 47
     }
24
-    });
48
+});

+ 14
- 0
components/depenses_list.js View File

@@ -6,7 +6,21 @@ function DepensesList(props)
6 6
 {
7 7
 
8 8
     return(
9
+    <View>
9 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>
23
+    </View>
10 24
     )
11 25
 }
12 26
 

+ 6
- 3
db/query.js View File

@@ -4,11 +4,14 @@ import * as SQLite from 'expo-sqlite';
4 4
 const db = SQLite.openDatabase("datacoucou.db");
5 5
 
6 6
 
7
-export default function sqlite_exec_query(inQuery, inCallback){
7
+export function sqlite_exec_query(inQuery, inCallback){
8
+    sqlite_exec_parameterised(inQuery, [], inCallback);    
9
+}
8 10
 
11
+export function sqlite_exec_parameterised(inQuery, inParams, inCallback){
9 12
     db.transaction((tx) => {
10
-        tx.executeSql(inQuery, [],
13
+        tx.executeSql(inQuery, inParams,
11 14
         (txobj, res) => inCallback(res),
12 15
         (txobj, err) => {console.log("er");console.log(err);})
13 16
     })
14
-}
17
+}

Loading…
Cancel
Save