fix days repeating each months ; basic by-week display

components/depenses_list.js

@@ -4,8 +4,10 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { sqlite_exec_query } from '../db/query';
 import DepenseListEntry from './depense_list_entry';
 import DayList from './list/day_list';
+import WeekList from './list/week_list';
 
 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;};
+var getWeek=function(i_date){return Math.ceil(((i_date-new Date(i_date.getFullYear(),0,1)+86400000)/86400000)/7)}
 
 function DepensesList(props)
 {
@@ -35,27 +37,113 @@ function DepensesList(props)
         let oldestDate = new Date(oldest_depense.date);
 
         let days = getDaysArray(oldestDate, curDate ).reverse();
-        let days_disp = {};
-        days.forEach( (day) => {
-            // get depenses that are on the current day
-            var depenses_day = depenses.filter( obj => {return new Date(obj.date).getDate() == day.getDate()} )
-            content.push(
-            <DayList 
-                dailyObjective={props.dailyObjective}
-                fetchDepenses={() => preventFetchDepenses(false)}
-                key={"day_list_"+day.toDateString()} 
-                date={day} 
-                depenses={depenses_day}/>)
-        });
-    }
+        let data = [];
+        let renderItem = null;
+        switch(props.durationMode)
+        {
+            case "days":
+                days.forEach( (day) => {
+                    // get depenses that are on the current day
+                    var depenses_day = depenses.filter( obj => {
+                        var tpDate = new Date(obj.date);
+                        return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
+                    } )
+
+                    data.push(
+                        {
+                            date: day,
+                            depenses: depenses_day,
+                            dailyObjective: props.dailyObjective,
+                            id: "day_"+day.toISOString()
+                        })
+
+                });
+                
+                renderItem = ({item}) =>(
+                    <DayList 
+                        dailyObjective={props.dailyObjective}
+                        fetchDepenses={() => preventFetchDepenses(false)} 
+                        date={item.date} 
+                        depenses={item.depenses}/>
+                );
+                
+                content = (
+                    <FlatList
+                        data={data}
+                        renderItem={renderItem}
+                        keyExtractor={item => item.id}/>
+                    )
+                break;
+            case "weeks":
+                    // dont forget the list of days is ordered latest to oldest
+                    let week_number = getWeek(days[0]);
+                    let week = {
+                        id:week_number+"_"+days[0].getFullYear(),
+                        days: [],
+                        number: week_number,
+                    }
+                    data.push(week);
+                    days.forEach( (day) => {
+                        week_number = getWeek(day);
+                        console.log("\n\n");
+                        if( week_number+"_"+day.getFullYear() == week.id)
+                            week.days.push(
+                                {
+                                    date:day,
+                                    expenses: depenses.filter( obj => {
+                                        var tpDate = new Date(obj.date);
+                                        return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
+                                    } ) 
+                                });
+                        else
+                            {
+                                week = {
+                                    id:week_number+"_"+day.getFullYear(),
+                                    days: [
+                                        {
+                                            date:day,
+                                            expenses: depenses.filter( obj => {
+                                                var tpDate = new Date(obj.date);
+                                                return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
+                                            } ) 
+                                        }
+                                    ],
+                                    number: week_number,
+                                }
+                                data.push(week);
+                            }
+                    });
+
+                    renderItem = ({item}) =>(
+                        <WeekList 
+                            dailyObjective={props.dailyObjective}
+                            days={item.days} 
+                            number={item.number}
+                            fetchDepenses={() => preventFetchDepenses(false)}
+                            />
+                    );
+
+                    content = (
+                        <FlatList
+                            data={data}
+                            renderItem={renderItem}
+                            keyExtractor={item => item.id}/>
+                        )
+                break;
+            default:
+                content = <Text> This does not work yet :(</Text>
+        }
+        
+    }else
+        content = <Text> Start adding expenses ! </Text>
 
 
     return(
-    <View>
-        <ScrollView>
+    <SafeAreaView >
+        <View>
             {content}
-        </ScrollView>
-    </View>
+        </View>
+    </SafeAreaView >
     )
 }
 

components/list/day_list.js

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

components/list/week_list.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native';
+import DepenseListEntry from '../depense_list_entry';
+import { strLPad } from '../../utils/util';
+import DayList from './day_list';
+
+export default function WeekList(props)
+{
+    const [ showDays, onToggleDays] = React.useState(true);
+    
+    let days = []
+
+    if(showDays)
+        props.days.forEach(element => {
+            days.push(
+                <DayList
+                    dailyObjective={props.dailyObjective}
+                    fetchDepenses={props.fetchDepenses}
+                    date={element.date}
+                    depenses={element.expenses}
+                    />
+            )
+        });
+    return (
+    <View style={week_list_styles.week_list_container}>
+        <Pressable
+            style={week_list_styles.week_header}
+            onPress={() => {onToggleDays(!showDays)}}>
+            <Text>{"Week " + props.number}</Text>
+        </Pressable>
+        {days}
+    </View>
+    );
+}
+
+
+const week_list_styles = StyleSheet.create({
+    week_list_container: {
+        borderWidth: 1,
+        margin: 1,
+    },
+    week_header: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 5,
+        marginBottom: 5,
+    },
+    day_list_day: {
+        fontWeight: '900',
+        margin: 4,
+    }
+});

utils/util.js

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