jsais plus, plein de choses

App.js

@@ -43,6 +43,7 @@ export default function App() {
           <DepensesList 
             depensesFetched={() => onFetchDepenses(false)} 
             fetchDepenses={fetchDepenses} 
+            dailyObjective={dailyObjective}
             durationMode={durationMode} />
           <StatusBar hidden />
       </View>

components/depense_edit/depense_form.js

@@ -61,8 +61,12 @@ export default function DepenseForm(props){
                         is24Hour={true}
                         display="default"
                         onChange={(event, value) => {
-                            onDatePicker(false);
-                            onDateChange(new Date(value));
+                            
+                            if(event.type != "dismissed")
+                            {
+                                onDatePicker(false);
+                                onDateChange(new Date(value));
+                            }else{onDatePicker(false);}
                         }}
                         />
                     }

components/depenses_list.js

@@ -1,8 +1,11 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, Text, View, TextInput, FlatList, SafeAreaView  } from 'react-native';
+import { StyleSheet, Text, View, TextInput, FlatList, SafeAreaView, ColorPropType  } from 'react-native';
 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';
+
+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;};
 
 function DepensesList(props)
 {
@@ -23,7 +26,6 @@ function DepensesList(props)
 
     let content = []
 
-
     if(depenses.length > 0)
     {
         // get latest and oldest depense
@@ -31,14 +33,22 @@ function DepensesList(props)
         let oldest_depense = depenses[depenses.length - 1]
         let curDate = new Date(latest_depense.date);
         let oldestDate = new Date(oldest_depense.date);
-    }
-        depenses
-            .forEach( function(depense){
+
+        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(
-                <DepenseListEntry fetchDepenses={() => preventFetchDepenses(false)} key={"depense_list_depense"+depense.id} depense={depense}/>
-            )
+            <DayList 
+                dailyObjective={props.dailyObjective}
+                fetchDepenses={() => preventFetchDepenses(false)}
+                key={"day_list_"+day.toDateString()} 
+                date={day} 
+                depenses={depenses_day}/>)
         });
-    
+    }
+
 
     return(
     <SafeAreaView>

components/list/day_list.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native';
+import DepenseListEntry from '../depense_list_entry';
+
+
+export default function DayList(props)
+{
+    const [ showDepenses, onToggleDepenses] = React.useState(true);
+    let content = []
+
+    let total = 0;
+
+    
+    props.depenses.forEach( function(depense){
+        content.push(
+            <DepenseListEntry fetchDepenses={props.fetchDepenses} key={"depense_list_depense"+depense.id} depense={depense}/>
+        )
+        total += depense.value;
+    });
+    
+
+    let result = props.dailyObjective - total 
+    let text_color = "#000000";
+    let bg_color = "#FFFFFF";
+    console.log(" "+props.dailyObjective +" - "+total +" = " + result)
+    if( result > 0)
+        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)
+
+    console.log(text_color)
+    return (
+        <View style={[day_list_styles.day_list_container, {backgroundColor: bg_color}]}>
+            <Pressable 
+                style={day_list_styles.day_list_entry}
+                onPress={() => {onToggleDepenses(!showDepenses)}}>
+            
+                <Text style={day_list_styles.day_list_day}>{props.date.toDateString()}</Text>
+                <Text style={[day_list_styles.day_list_day, {color: text_color}]}>{"Total : "+total}</Text>
+            </Pressable>
+            {showDepenses ? content : <View/>}
+        </View>
+    )
+}
+
+
+const day_list_styles = StyleSheet.create({
+    day_list_container: {
+        borderWidth: 1,
+        margin: 1,
+    },
+    day_list_entry: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 5,
+    },
+    day_list_day: {
+        fontWeight: '900',
+        margin: 4,
+    }
+});

utils/util.js

@@ -0,0 +1,11 @@
+export function colorForUUID(iStrUUID)
+    {
+        return '#' + Util.zeroFill(( Math.abs( parseInt( iStrUUID.replace( "-", "" ), 16 )) % 16777215 ) & 0x1F0F3F , 6, '0' ).toString( 16 );
+    }
+
+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);
+    }