DemiSel пре 2 година
родитељ
комит
80d2cccc32
7 измењених фајлова са 89 додато и 35 уклоњено
  1. 1
    0
      App.js
  2. 2
    0
      components/add_depense.js
  3. 5
    9
      components/depenses_list.js
  4. 22
    4
      components/list/day_list.js
  5. 48
    20
      components/list/week_list.js
  6. 8
    0
      package-lock.json
  7. 3
    2
      package.json

+ 1
- 0
App.js Прегледај датотеку

@@ -57,6 +57,7 @@ const styles = StyleSheet.create({
57 57
   home: {
58 58
     width: '100%',
59 59
     height: '100%',
60
+    backgroundColor: '#FFFFFF',
60 61
   },
61 62
   container: {
62 63
     flex: 1,

+ 2
- 0
components/add_depense.js Прегледај датотеку

@@ -36,6 +36,8 @@ const add_depenses_styles = StyleSheet.create({
36 36
     button_add: {
37 37
         borderWidth: 1,
38 38
         padding: 10,
39
+        backgroundColor: "#FFFFFF",
40
+        elevation:5,
39 41
     },
40 42
     button_add_parent: {
41 43
         position: 'absolute',

+ 5
- 9
components/depenses_list.js Прегледај датотеку

@@ -6,7 +6,7 @@ import DepenseListEntry from './depense_list_entry';
6 6
 import DayList from './list/day_list';
7 7
 import WeekList from './list/week_list';
8 8
 
9
-var getDaysArray = function(s,e) {for(var a=[],d=new Date(s);d<=e;d.setDate(d.getDate()+1)){ a.push(new Date(d));}return a;};
9
+var getDaysArray = function(s,e) {for(var a=[],d=new Date(s);d<=e.setHours(23,59,59);d.setDate(d.getDate()+1)){ a.push(new Date(d));}return a;};
10 10
 var getWeek=function(i_date){return Math.ceil(((i_date-new Date(i_date.getFullYear(),0,1)+86400000)/86400000)/7)}
11 11
 
12 12
 function DepensesList(props)
@@ -36,7 +36,8 @@ function DepensesList(props)
36 36
         let curDate = new Date(latest_depense.date);
37 37
         let oldestDate = new Date(oldest_depense.date);
38 38
 
39
-        let days = getDaysArray(oldestDate, curDate ).reverse();
39
+        let days = getDaysArray(oldestDate, curDate )
40
+        days.reverse();
40 41
         let data = [];
41 42
         let renderItem = null;
42 43
         switch(props.durationMode)
@@ -46,7 +47,7 @@ function DepensesList(props)
46 47
                     // get depenses that are on the current day
47 48
                     var depenses_day = depenses.filter( obj => {
48 49
                         var tpDate = new Date(obj.date);
49
-                        return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
50
+                        return tpDate.getUTCFullYear() == day.getUTCFullYear() && tpDate.getUTCMonth() == day.getUTCMonth() && tpDate.getUTCDate() == day.getUTCDate()
50 51
                     } )
51 52
 
52 53
                     data.push(
@@ -85,7 +86,6 @@ function DepensesList(props)
85 86
                     data.push(week);
86 87
                     days.forEach( (day) => {
87 88
                         week_number = getWeek(day);
88
-                        console.log("\n\n");
89 89
                         if( week_number+"_"+day.getFullYear() == week.id)
90 90
                             week.days.push(
91 91
                                 {
@@ -140,17 +140,13 @@ function DepensesList(props)
140 140
 
141 141
     return(
142 142
     <SafeAreaView >
143
-        <View>
144 143
             {content}
145
-        </View>
146 144
     </SafeAreaView >
147 145
     )
148 146
 }
149 147
 
150 148
 const depense_list_style = StyleSheet.create({
151
-    list_container: {
152
-        flex: 1
153
-    }
149
+
154 150
   });
155 151
 
156 152
 export default DepensesList

+ 22
- 4
components/list/day_list.js Прегледај датотеку

@@ -10,7 +10,12 @@ export default function DayList(props)
10 10
 
11 11
     let total = 0;
12 12
 
13
-    
13
+    var currentDay = new Date();
14
+    let isCurrentday = (
15
+        currentDay.getFullYear() === props.date.getFullYear() && 
16
+        currentDay.getMonth() === props.date.getMonth() && 
17
+        currentDay.getDate() === props.date.getDate());
18
+
14 19
     props.depenses.forEach( function(depense){
15 20
         content.push(
16 21
             <DepenseListEntry fetchDepenses={props.fetchDepenses} key={"depense_list_depense"+depense.id} depense={depense}/>
@@ -30,7 +35,7 @@ export default function DayList(props)
30 35
             strLPad(parseInt(255 + Math.max(-255, (result / props.dailyObjective) * 100)).toString(16), 2, '0')
31 36
 
32 37
     return (
33
-        <View style={[day_list_styles.day_list_container, {backgroundColor: bg_color}]}>
38
+        <View style={[day_list_styles.day_list_container, {backgroundColor: bg_color}, isCurrentday ? day_list_styles.current_day_container : null]}>
34 39
             <Pressable 
35 40
                 style={day_list_styles.day_list_entry}
36 41
                 onPress={() => {onToggleDepenses(!showDepenses)}}>
@@ -46,14 +51,27 @@ export default function DayList(props)
46 51
 
47 52
 const day_list_styles = StyleSheet.create({
48 53
     day_list_container: {
49
-        borderWidth: 1,
54
+        // borderWidth: 1,
50 55
         margin: 1,
56
+        marginTop: 15,
57
+        elevation: 5,
58
+        
59
+    },
60
+    current_day_container: {
61
+        shadowColor: "#0000FF",
62
+        shadowOffset: {
63
+            width: 0,
64
+            height: 10,
65
+        },
66
+        shadowOpacity: 0,
67
+        shadowRadius: 10,
68
+        elevation: 10,
51 69
     },
52 70
     day_list_entry: {
53 71
         display: 'flex',
54 72
         flexDirection: 'row',
55 73
         justifyContent: 'space-between',
56
-        marginTop: 5,
74
+        marginBottom: 10,
57 75
     },
58 76
     day_list_day: {
59 77
         fontWeight: '900',

+ 48
- 20
components/list/week_list.js Прегледај датотеку

@@ -1,8 +1,7 @@
1 1
 import React from 'react';
2
-import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native';
3
-import DepenseListEntry from '../depense_list_entry';
4
-import { strLPad } from '../../utils/util';
2
+import { StyleSheet, Text, View, Pressable } from 'react-native';
5 3
 import DayList from './day_list';
4
+import { LinearGradient } from 'expo-linear-gradient';
6 5
 
7 6
 export default function WeekList(props)
8 7
 {
@@ -10,25 +9,48 @@ export default function WeekList(props)
10 9
     
11 10
     let days = []
12 11
 
13
-    if(showDays)
14
-        props.days.forEach(element => {
15
-            days.push(
16
-                <DayList
17
-                    dailyObjective={props.dailyObjective}
18
-                    fetchDepenses={props.fetchDepenses}
19
-                    date={element.date}
20
-                    depenses={element.expenses}
21
-                    />
22
-            )
23
-        });
12
+    let objective = props.dailyObjective * 7 
13
+    let total_payed = 0;
14
+
15
+
16
+    props.days.forEach(element => {
17
+        element.expenses.forEach( (expense) => {
18
+            total_payed += expense.value;
19
+        })
20
+
21
+        days.push(
22
+            <DayList
23
+                key={"daylist_"+element.date}    
24
+                dailyObjective={props.dailyObjective}
25
+                fetchDepenses={props.fetchDepenses}
26
+                date={element.date}
27
+                depenses={element.expenses}
28
+                />
29
+        )
30
+    });
31
+
32
+    let scale = Math.min(1, total_payed/objective)
33
+
24 34
     return (
25 35
     <View style={week_list_styles.week_list_container}>
36
+        <View>
37
+        <LinearGradient
38
+                    // Background Linear Gradient
39
+                    colors={[scale > 0 ? '#FFDDDDFF' : '#FFFFFF','#FFFFFF', '#FFFFFF']}
40
+                    locations={[scale, scale+0.05, 1]}
41
+                    end={{x:1,y:0}}
42
+                    style={week_list_styles.background}
43
+                />   
26 44
         <Pressable
27 45
             style={week_list_styles.week_header}
28 46
             onPress={() => {onToggleDays(!showDays)}}>
29
-            <Text>{"Week " + props.number}</Text>
47
+                             
48
+                <Text>{"Week " + props.number}</Text>
49
+                <Text>{total_payed+"/"+objective}</Text>
50
+                
30 51
         </Pressable>
31
-        {days}
52
+        {showDays ? days : <View/>}
53
+        </View>
32 54
     </View>
33 55
     );
34 56
 }
@@ -36,8 +58,11 @@ export default function WeekList(props)
36 58
 
37 59
 const week_list_styles = StyleSheet.create({
38 60
     week_list_container: {
39
-        borderWidth: 1,
61
+        borderWidth: 0.5,
40 62
         margin: 1,
63
+        marginTop: 25,
64
+        elevation:5,
65
+        
41 66
     },
42 67
     week_header: {
43 68
         display: 'flex',
@@ -45,9 +70,12 @@ const week_list_styles = StyleSheet.create({
45 70
         justifyContent: 'space-between',
46 71
         marginTop: 5,
47 72
         marginBottom: 5,
73
+        padding: 3,
74
+        // elevation: 10,
48 75
     },
49
-    day_list_day: {
50
-        fontWeight: '900',
51
-        margin: 4,
76
+    background: {
77
+        position: 'absolute',
78
+        width: '100%',
79
+        height: "100%",
52 80
     }
53 81
 });

+ 8
- 0
package-lock.json Прегледај датотеку

@@ -3359,6 +3359,14 @@
3359 3359
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-10.0.0.tgz",
3360 3360
       "integrity": "sha512-x5zRTjIvSry/EISKvjWpnLERGZj5maCwEouOfiDk0JPa0UTg/zFkT7pmiadAfHT95XUgjjb2DOku+wj6J7el7Q=="
3361 3361
     },
3362
+    "expo-linear-gradient": {
3363
+      "version": "10.0.3",
3364
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-10.0.3.tgz",
3365
+      "integrity": "sha512-zKkBhHvTvDywpb0y5BJDHTbxX5/2C60qW/M8uyZXKIZcTUwY7j/9Kcx0YzoNNglq7p6aQ/DWO7sM8LHr93985Q==",
3366
+      "requires": {
3367
+        "expo-modules-core": "~0.4.4"
3368
+      }
3369
+    },
3362 3370
     "expo-manifests": {
3363 3371
       "version": "0.2.2",
3364 3372
       "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.2.2.tgz",

+ 3
- 2
package.json Прегледај датотеку

@@ -8,7 +8,9 @@
8 8
   },
9 9
   "dependencies": {
10 10
     "@databases/expo": "^5.0.0",
11
+    "@react-native-community/datetimepicker": "3.5.2",
11 12
     "expo": "^43.0.3",
13
+    "expo-linear-gradient": "^10.0.3",
12 14
     "expo-splash-screen": "~0.13.5",
13 15
     "expo-sqlite": "~10.0.3",
14 16
     "expo-status-bar": "~1.1.0",
@@ -21,8 +23,7 @@
21 23
     "react-native-safe-area-context": "3.3.2",
22 24
     "react-native-screens": "~3.8.0",
23 25
     "react-native-sqlite-storage": "^6.0.1",
24
-    "react-native-web": "0.17.1",
25
-    "@react-native-community/datetimepicker": "3.5.2"
26
+    "react-native-web": "0.17.1"
26 27
   },
27 28
   "devDependencies": {
28 29
     "@babel/core": "^7.12.9",

Loading…
Откажи
Сачувај