You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

week_list.js 2.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import React from 'react';
  2. import { StyleSheet, Text, View, Pressable } from 'react-native';
  3. import DayList from './day_list';
  4. import { LinearGradient } from 'expo-linear-gradient';
  5. export default function WeekList(props)
  6. {
  7. const [ showDays, onToggleDays] = React.useState(true);
  8. let days = []
  9. let objective = props.dailyObjective * 7
  10. let total_payed = 0;
  11. props.days.forEach(element => {
  12. element.expenses.forEach( (expense) => {
  13. total_payed += expense.value;
  14. })
  15. days.push(
  16. <DayList
  17. key={"daylist_"+element.date}
  18. dailyObjective={props.dailyObjective}
  19. fetchDepenses={props.fetchDepenses}
  20. date={element.date}
  21. depenses={element.expenses}
  22. />
  23. )
  24. });
  25. let scale = Math.min(1, total_payed/objective)
  26. return (
  27. <View style={week_list_styles.week_list_container}>
  28. <View>
  29. <LinearGradient
  30. // Background Linear Gradient
  31. colors={[scale > 0 ? '#FFDDDDFF' : '#FFFFFF','#FFFFFF', '#FFFFFF']}
  32. locations={[scale, scale+0.05, 1]}
  33. end={{x:1,y:0}}
  34. style={week_list_styles.background}
  35. />
  36. <Pressable
  37. style={week_list_styles.week_header}
  38. onPress={() => {onToggleDays(!showDays)}}>
  39. <Text>{"Week " + props.number}</Text>
  40. <Text>{total_payed+"/"+objective}</Text>
  41. </Pressable>
  42. {showDays ? days : <View/>}
  43. </View>
  44. </View>
  45. );
  46. }
  47. const week_list_styles = StyleSheet.create({
  48. week_list_container: {
  49. borderWidth: 0.5,
  50. margin: 1,
  51. marginTop: 25,
  52. elevation:5,
  53. },
  54. week_header: {
  55. display: 'flex',
  56. flexDirection: 'row',
  57. justifyContent: 'space-between',
  58. marginTop: 5,
  59. marginBottom: 5,
  60. padding: 3,
  61. // elevation: 10,
  62. },
  63. background: {
  64. position: 'absolute',
  65. width: '100%',
  66. height: "100%",
  67. }
  68. });