Bladeren bron

fix days repeating each months ; basic by-week display

master
DemiSel 2 jaren geleden
bovenliggende
commit
6bcf7d089b
4 gewijzigde bestanden met toevoegingen van 167 en 20 verwijderingen
  1. 105
    17
      components/depenses_list.js
  2. 3
    3
      components/list/day_list.js
  3. 53
    0
      components/list/week_list.js
  4. 6
    0
      utils/util.js

+ 105
- 17
components/depenses_list.js Bestand weergeven

@@ -4,8 +4,10 @@ import { ScrollView } from 'react-native-gesture-handler';
4 4
 import { sqlite_exec_query } from '../db/query';
5 5
 import DepenseListEntry from './depense_list_entry';
6 6
 import DayList from './list/day_list';
7
+import WeekList from './list/week_list';
7 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;};
10
+var getWeek=function(i_date){return Math.ceil(((i_date-new Date(i_date.getFullYear(),0,1)+86400000)/86400000)/7)}
9 11
 
10 12
 function DepensesList(props)
11 13
 {
@@ -35,27 +37,113 @@ function DepensesList(props)
35 37
         let oldestDate = new Date(oldest_depense.date);
36 38
 
37 39
         let days = getDaysArray(oldestDate, curDate ).reverse();
38
-        let days_disp = {};
39
-        days.forEach( (day) => {
40
-            // get depenses that are on the current day
41
-            var depenses_day = depenses.filter( obj => {return new Date(obj.date).getDate() == day.getDate()} )
42
-            content.push(
43
-            <DayList 
44
-                dailyObjective={props.dailyObjective}
45
-                fetchDepenses={() => preventFetchDepenses(false)}
46
-                key={"day_list_"+day.toDateString()} 
47
-                date={day} 
48
-                depenses={depenses_day}/>)
49
-        });
50
-    }
40
+        let data = [];
41
+        let renderItem = null;
42
+        switch(props.durationMode)
43
+        {
44
+            case "days":
45
+                days.forEach( (day) => {
46
+                    // get depenses that are on the current day
47
+                    var depenses_day = depenses.filter( obj => {
48
+                        var tpDate = new Date(obj.date);
49
+                        return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
50
+                    } )
51
+
52
+                    data.push(
53
+                        {
54
+                            date: day,
55
+                            depenses: depenses_day,
56
+                            dailyObjective: props.dailyObjective,
57
+                            id: "day_"+day.toISOString()
58
+                        })
59
+
60
+                });
61
+                
62
+                renderItem = ({item}) =>(
63
+                    <DayList 
64
+                        dailyObjective={props.dailyObjective}
65
+                        fetchDepenses={() => preventFetchDepenses(false)} 
66
+                        date={item.date} 
67
+                        depenses={item.depenses}/>
68
+                );
69
+                
70
+                content = (
71
+                    <FlatList
72
+                        data={data}
73
+                        renderItem={renderItem}
74
+                        keyExtractor={item => item.id}/>
75
+                    )
76
+                break;
77
+            case "weeks":
78
+                    // dont forget the list of days is ordered latest to oldest
79
+                    let week_number = getWeek(days[0]);
80
+                    let week = {
81
+                        id:week_number+"_"+days[0].getFullYear(),
82
+                        days: [],
83
+                        number: week_number,
84
+                    }
85
+                    data.push(week);
86
+                    days.forEach( (day) => {
87
+                        week_number = getWeek(day);
88
+                        console.log("\n\n");
89
+                        if( week_number+"_"+day.getFullYear() == week.id)
90
+                            week.days.push(
91
+                                {
92
+                                    date:day,
93
+                                    expenses: depenses.filter( obj => {
94
+                                        var tpDate = new Date(obj.date);
95
+                                        return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
96
+                                    } ) 
97
+                                });
98
+                        else
99
+                            {
100
+                                week = {
101
+                                    id:week_number+"_"+day.getFullYear(),
102
+                                    days: [
103
+                                        {
104
+                                            date:day,
105
+                                            expenses: depenses.filter( obj => {
106
+                                                var tpDate = new Date(obj.date);
107
+                                                return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
108
+                                            } ) 
109
+                                        }
110
+                                    ],
111
+                                    number: week_number,
112
+                                }
113
+                                data.push(week);
114
+                            }
115
+                    });
116
+
117
+                    renderItem = ({item}) =>(
118
+                        <WeekList 
119
+                            dailyObjective={props.dailyObjective}
120
+                            days={item.days} 
121
+                            number={item.number}
122
+                            fetchDepenses={() => preventFetchDepenses(false)}
123
+                            />
124
+                    );
125
+
126
+                    content = (
127
+                        <FlatList
128
+                            data={data}
129
+                            renderItem={renderItem}
130
+                            keyExtractor={item => item.id}/>
131
+                        )
132
+                break;
133
+            default:
134
+                content = <Text> This does not work yet :(</Text>
135
+        }
136
+        
137
+    }else
138
+        content = <Text> Start adding expenses ! </Text>
51 139
 
52 140
 
53 141
     return(
54
-    <View>
55
-        <ScrollView>
142
+    <SafeAreaView >
143
+        <View>
56 144
             {content}
57
-        </ScrollView>
58
-    </View>
145
+        </View>
146
+    </SafeAreaView >
59 147
     )
60 148
 }
61 149
 

+ 3
- 3
components/list/day_list.js Bestand weergeven

@@ -1,7 +1,7 @@
1 1
 import React from 'react';
2 2
 import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native';
3 3
 import DepenseListEntry from '../depense_list_entry';
4
-
4
+import { strLPad } from '../../utils/util';
5 5
 
6 6
 export default function DayList(props)
7 7
 {
@@ -26,8 +26,8 @@ export default function DayList(props)
26 26
         text_color = "#00"+parseInt(100 + (result / props.dailyObjective) * 100).toString(16) + "00"
27 27
     else
28 28
         bg_color = "#FF"+
29
-            parseInt(255 + (result / props.dailyObjective) * 100).toString(16) + 
30
-            parseInt(255 + (result / props.dailyObjective) * 100).toString(16)
29
+            strLPad(parseInt(255 + Math.max(-255,(result / props.dailyObjective) * 100)).toString(16), 2, '0') + 
30
+            strLPad(parseInt(255 + Math.max(-255, (result / props.dailyObjective) * 100)).toString(16), 2, '0')
31 31
 
32 32
     return (
33 33
         <View style={[day_list_styles.day_list_container, {backgroundColor: bg_color}]}>

+ 53
- 0
components/list/week_list.js Bestand weergeven

@@ -0,0 +1,53 @@
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';
5
+import DayList from './day_list';
6
+
7
+export default function WeekList(props)
8
+{
9
+    const [ showDays, onToggleDays] = React.useState(true);
10
+    
11
+    let days = []
12
+
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
+        });
24
+    return (
25
+    <View style={week_list_styles.week_list_container}>
26
+        <Pressable
27
+            style={week_list_styles.week_header}
28
+            onPress={() => {onToggleDays(!showDays)}}>
29
+            <Text>{"Week " + props.number}</Text>
30
+        </Pressable>
31
+        {days}
32
+    </View>
33
+    );
34
+}
35
+
36
+
37
+const week_list_styles = StyleSheet.create({
38
+    week_list_container: {
39
+        borderWidth: 1,
40
+        margin: 1,
41
+    },
42
+    week_header: {
43
+        display: 'flex',
44
+        flexDirection: 'row',
45
+        justifyContent: 'space-between',
46
+        marginTop: 5,
47
+        marginBottom: 5,
48
+    },
49
+    day_list_day: {
50
+        fontWeight: '900',
51
+        margin: 4,
52
+    }
53
+});

+ 6
- 0
utils/util.js Bestand weergeven

@@ -8,4 +8,10 @@ export function zeroFill( number, width, padchar )
8 8
         var pad_char = typeof padchar !== 'undefined' ? padchar : '0';
9 9
         var pad = new Array(1 + width).join(pad_char);
10 10
         return ( pad + number ).slice(-pad.length);
11
+    }
12
+
13
+export function strLPad( i_string, i_charcount, i_padchar )
14
+    {
15
+        var pad = new Array(1 + i_charcount).join(i_padchar);
16
+        return (pad + i_string).slice(-pad.length);
11 17
     }

Laden…
Annuleren
Opslaan