affichage par mois

App.js

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

components/add_depense.js

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

components/depenses_list.js

@@ -6,7 +6,7 @@ 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 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;};
 var getWeek=function(i_date){return Math.ceil(((i_date-new Date(i_date.getFullYear(),0,1)+86400000)/86400000)/7)}
 
 function DepensesList(props)
@@ -36,7 +36,8 @@ function DepensesList(props)
         let curDate = new Date(latest_depense.date);
         let oldestDate = new Date(oldest_depense.date);
 
-        let days = getDaysArray(oldestDate, curDate ).reverse();
+        let days = getDaysArray(oldestDate, curDate )
+        days.reverse();
         let data = [];
         let renderItem = null;
         switch(props.durationMode)
@@ -46,7 +47,7 @@ function DepensesList(props)
                     // 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()
+                        return tpDate.getUTCFullYear() == day.getUTCFullYear() && tpDate.getUTCMonth() == day.getUTCMonth() && tpDate.getUTCDate() == day.getUTCDate()
                     } )
 
                     data.push(
@@ -85,7 +86,6 @@ function DepensesList(props)
                     data.push(week);
                     days.forEach( (day) => {
                         week_number = getWeek(day);
-                        console.log("\n\n");
                         if( week_number+"_"+day.getFullYear() == week.id)
                             week.days.push(
                                 {
@@ -140,17 +140,13 @@ function DepensesList(props)
 
     return(
     <SafeAreaView >
-        <View>
             {content}
-        </View>
     </SafeAreaView >
     )
 }
 
 const depense_list_style = StyleSheet.create({
-    list_container: {
-        flex: 1
-    }
+
   });
 
 export default DepensesList

components/list/day_list.js

@@ -10,7 +10,12 @@ export default function DayList(props)
 
     let total = 0;
 
-    
+    var currentDay = new Date();
+    let isCurrentday = (
+        currentDay.getFullYear() === props.date.getFullYear() && 
+        currentDay.getMonth() === props.date.getMonth() && 
+        currentDay.getDate() === props.date.getDate());
+
     props.depenses.forEach( function(depense){
         content.push(
             <DepenseListEntry fetchDepenses={props.fetchDepenses} key={"depense_list_depense"+depense.id} depense={depense}/>
@@ -30,7 +35,7 @@ export default function DayList(props)
             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}]}>
+        <View style={[day_list_styles.day_list_container, {backgroundColor: bg_color}, isCurrentday ? day_list_styles.current_day_container : null]}>
             <Pressable 
                 style={day_list_styles.day_list_entry}
                 onPress={() => {onToggleDepenses(!showDepenses)}}>
@@ -46,14 +51,27 @@ export default function DayList(props)
 
 const day_list_styles = StyleSheet.create({
     day_list_container: {
-        borderWidth: 1,
+        // borderWidth: 1,
         margin: 1,
+        marginTop: 15,
+        elevation: 5,
+        
+    },
+    current_day_container: {
+        shadowColor: "#0000FF",
+        shadowOffset: {
+            width: 0,
+            height: 10,
+        },
+        shadowOpacity: 0,
+        shadowRadius: 10,
+        elevation: 10,
     },
     day_list_entry: {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between',
-        marginTop: 5,
+        marginBottom: 10,
     },
     day_list_day: {
         fontWeight: '900',

components/list/week_list.js

@@ -1,8 +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';
+import { StyleSheet, Text, View, Pressable } from 'react-native';
 import DayList from './day_list';
+import { LinearGradient } from 'expo-linear-gradient';
 
 export default function WeekList(props)
 {
@@ -10,25 +9,48 @@ export default function WeekList(props)
     
     let days = []
 
-    if(showDays)
-        props.days.forEach(element => {
-            days.push(
-                <DayList
-                    dailyObjective={props.dailyObjective}
-                    fetchDepenses={props.fetchDepenses}
-                    date={element.date}
-                    depenses={element.expenses}
-                    />
-            )
-        });
+    let objective = props.dailyObjective * 7 
+    let total_payed = 0;
+
+
+    props.days.forEach(element => {
+        element.expenses.forEach( (expense) => {
+            total_payed += expense.value;
+        })
+
+        days.push(
+            <DayList
+                key={"daylist_"+element.date}    
+                dailyObjective={props.dailyObjective}
+                fetchDepenses={props.fetchDepenses}
+                date={element.date}
+                depenses={element.expenses}
+                />
+        )
+    });
+
+    let scale = Math.min(1, total_payed/objective)
+
     return (
     <View style={week_list_styles.week_list_container}>
+        <View>
+        <LinearGradient
+                    // Background Linear Gradient
+                    colors={[scale > 0 ? '#FFDDDDFF' : '#FFFFFF','#FFFFFF', '#FFFFFF']}
+                    locations={[scale, scale+0.05, 1]}
+                    end={{x:1,y:0}}
+                    style={week_list_styles.background}
+                />   
         <Pressable
             style={week_list_styles.week_header}
             onPress={() => {onToggleDays(!showDays)}}>
-            <Text>{"Week " + props.number}</Text>
+                             
+                <Text>{"Week " + props.number}</Text>
+                <Text>{total_payed+"/"+objective}</Text>
+                
         </Pressable>
-        {days}
+        {showDays ? days : <View/>}
+        </View>
     </View>
     );
 }
@@ -36,8 +58,11 @@ export default function WeekList(props)
 
 const week_list_styles = StyleSheet.create({
     week_list_container: {
-        borderWidth: 1,
+        borderWidth: 0.5,
         margin: 1,
+        marginTop: 25,
+        elevation:5,
+        
     },
     week_header: {
         display: 'flex',
@@ -45,9 +70,12 @@ const week_list_styles = StyleSheet.create({
         justifyContent: 'space-between',
         marginTop: 5,
         marginBottom: 5,
+        padding: 3,
+        // elevation: 10,
     },
-    day_list_day: {
-        fontWeight: '900',
-        margin: 4,
+    background: {
+        position: 'absolute',
+        width: '100%',
+        height: "100%",
     }
 });

package-lock.json

@@ -3359,6 +3359,14 @@
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-10.0.0.tgz",
       "integrity": "sha512-x5zRTjIvSry/EISKvjWpnLERGZj5maCwEouOfiDk0JPa0UTg/zFkT7pmiadAfHT95XUgjjb2DOku+wj6J7el7Q=="
     },
+    "expo-linear-gradient": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-10.0.3.tgz",
+      "integrity": "sha512-zKkBhHvTvDywpb0y5BJDHTbxX5/2C60qW/M8uyZXKIZcTUwY7j/9Kcx0YzoNNglq7p6aQ/DWO7sM8LHr93985Q==",
+      "requires": {
+        "expo-modules-core": "~0.4.4"
+      }
+    },
     "expo-manifests": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.2.2.tgz",

package.json

@@ -8,7 +8,9 @@
   },
   "dependencies": {
     "@databases/expo": "^5.0.0",
+    "@react-native-community/datetimepicker": "3.5.2",
     "expo": "^43.0.3",
+    "expo-linear-gradient": "^10.0.3",
     "expo-splash-screen": "~0.13.5",
     "expo-sqlite": "~10.0.3",
     "expo-status-bar": "~1.1.0",
@@ -21,8 +23,7 @@
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.8.0",
     "react-native-sqlite-storage": "^6.0.1",
-    "react-native-web": "0.17.1",
-    "@react-native-community/datetimepicker": "3.5.2"
+    "react-native-web": "0.17.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",