BudgetIzr/components/list/day_list.js

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 { LinearGradient } from 'expo-linear-gradient';

export default function DayList(props)
{
    const [ showDepenses, onToggleDepenses] = React.useState(false);
    let content = []

    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}/>
        )
        total += depense.value;
    });
    
    let scale = Math.min(1, total/props.dailyObjective)

    let result = props.dailyObjective - total 
    let text_color = "#000000";
    let bg_color = "#FFFFFF";
    if( result > 0)
        text_color = "#00"+parseInt(100 + (result / props.dailyObjective) * 100).toString(16) + "00"
    else
        bg_color = "#FF"+
            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}, isCurrentday ? day_list_styles.current_day_container : null]}>
            <LinearGradient
                colors={[scale > 0 ? '#FFDDDDFF' : '#FFFFFFFF','#FFFFFFFF', '#FFFFFFFF']}
                locations={[scale, scale + (scale < 0.95 ? 0.05 : 0), 1]}
                start={{ x: 0, y: 0.0 }}
                end={{x:1,y:0}}
                style={day_list_styles.background}
            />
            <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 || isCurrentday ? content : <View/>}
        </View>
    )
}


const day_list_styles = StyleSheet.create({
    day_list_container: {
        // borderWidth: 1,
        // margin: 1,
        // marginTop: 5,
        // marginBottom: 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',
        margin: 10,
    },
    day_list_day: {
        fontWeight: '900',
        margin: 4,
    },
    background: {
        position: 'absolute',
        width: '100%',
        height: "100%",
    }
});