Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

day_list.js 3.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import React from 'react';
  2. import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native';
  3. import DepenseListEntry from '../depense_list_entry';
  4. import { strLPad } from '../../utils/util';
  5. import { LinearGradient } from 'expo-linear-gradient';
  6. export default function DayList(props)
  7. {
  8. const [ showDepenses, onToggleDepenses] = React.useState(false);
  9. let content = []
  10. let total = 0;
  11. var currentDay = new Date();
  12. let isCurrentday = (
  13. currentDay.getFullYear() === props.date.getFullYear() &&
  14. currentDay.getMonth() === props.date.getMonth() &&
  15. currentDay.getDate() === props.date.getDate());
  16. props.depenses.forEach( function(depense){
  17. content.push(
  18. <DepenseListEntry fetchDepenses={props.fetchDepenses} key={"depense_list_depense"+depense.id} depense={depense}/>
  19. )
  20. total += depense.value;
  21. });
  22. let scale = Math.min(1, total/props.dailyObjective)
  23. let result = props.dailyObjective - total
  24. let text_color = "#000000";
  25. let bg_color = "#FFFFFF";
  26. if( result > 0)
  27. text_color = "#00"+parseInt(100 + (result / props.dailyObjective) * 100).toString(16) + "00"
  28. else
  29. bg_color = "#FF"+
  30. strLPad(parseInt(255 + Math.max(-255,(result / props.dailyObjective) * 100)).toString(16), 2, '0') +
  31. strLPad(parseInt(255 + Math.max(-255, (result / props.dailyObjective) * 100)).toString(16), 2, '0')
  32. return (
  33. <View style={[day_list_styles.day_list_container, {backgroundColor: bg_color}, isCurrentday ? day_list_styles.current_day_container : null]}>
  34. <LinearGradient
  35. colors={[scale > 0 ? '#FFDDDDFF' : '#FFFFFFFF','#FFFFFFFF', '#FFFFFFFF']}
  36. locations={[scale, scale + (scale < 0.95 ? 0.05 : 0), 1]}
  37. start={{ x: 0, y: 0.0 }}
  38. end={{x:1,y:0}}
  39. style={day_list_styles.background}
  40. />
  41. <Pressable
  42. style={day_list_styles.day_list_entry}
  43. onPress={() => {onToggleDepenses(!showDepenses)}}>
  44. <Text style={day_list_styles.day_list_day}>{props.date.toDateString()}</Text>
  45. <Text style={[day_list_styles.day_list_day, {color: text_color}]}>{"Total : "+total}</Text>
  46. </Pressable>
  47. {showDepenses || isCurrentday ? content : <View/>}
  48. </View>
  49. )
  50. }
  51. const day_list_styles = StyleSheet.create({
  52. day_list_container: {
  53. // borderWidth: 1,
  54. // margin: 1,
  55. // marginTop: 5,
  56. // marginBottom: 15,
  57. // elevation: 5,
  58. },
  59. current_day_container: {
  60. shadowColor: "#0000FF",
  61. shadowOffset: {
  62. width: 0,
  63. height: 10,
  64. },
  65. shadowOpacity: 0,
  66. shadowRadius: 10,
  67. elevation: 10,
  68. },
  69. day_list_entry: {
  70. display: 'flex',
  71. flexDirection: 'row',
  72. justifyContent: 'space-between',
  73. margin: 10,
  74. },
  75. day_list_day: {
  76. fontWeight: '900',
  77. margin: 4,
  78. },
  79. background: {
  80. position: 'absolute',
  81. width: '100%',
  82. height: "100%",
  83. }
  84. });