Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

day_list.js 3.0KB

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' : '#FFFFFF','#FFFFFF', '#FFFFFF']}
  36. locations={[scale, scale+0.05, 1]}
  37. end={{x:1,y:0}}
  38. style={day_list_styles.background}
  39. />
  40. <Pressable
  41. style={day_list_styles.day_list_entry}
  42. onPress={() => {onToggleDepenses(!showDepenses)}}>
  43. <Text style={day_list_styles.day_list_day}>{props.date.toDateString()}</Text>
  44. <Text style={[day_list_styles.day_list_day, {color: text_color}]}>{"Total : "+total}</Text>
  45. </Pressable>
  46. {showDepenses || isCurrentday ? content : <View/>}
  47. </View>
  48. )
  49. }
  50. const day_list_styles = StyleSheet.create({
  51. day_list_container: {
  52. // borderWidth: 1,
  53. // margin: 1,
  54. // marginTop: 5,
  55. // marginBottom: 15,
  56. // elevation: 5,
  57. },
  58. current_day_container: {
  59. shadowColor: "#0000FF",
  60. shadowOffset: {
  61. width: 0,
  62. height: 10,
  63. },
  64. shadowOpacity: 0,
  65. shadowRadius: 10,
  66. elevation: 10,
  67. },
  68. day_list_entry: {
  69. display: 'flex',
  70. flexDirection: 'row',
  71. justifyContent: 'space-between',
  72. marginBottom: 10,
  73. },
  74. day_list_day: {
  75. fontWeight: '900',
  76. margin: 4,
  77. },
  78. background: {
  79. position: 'absolute',
  80. width: '100%',
  81. height: "100%",
  82. }
  83. });