您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

depenses_list.js 6.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. import React, { useEffect } from 'react';
  2. import { StyleSheet, Text, View, TextInput, FlatList, SafeAreaView, ColorPropType } from 'react-native';
  3. import { ScrollView } from 'react-native-gesture-handler';
  4. import { sqlite_exec_query } from '../db/query';
  5. import DepenseListEntry from './depense_list_entry';
  6. import DayList from './list/day_list';
  7. import WeekList from './list/week_list';
  8. 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;};
  9. var getWeek=function(i_date){return Math.ceil(((i_date-new Date(i_date.getFullYear(),0,1)+86400000)/86400000)/7)}
  10. function DepensesList(props)
  11. {
  12. const [depenses, onGetDepenses] = React.useState([]);
  13. const [depensesFetched, preventFetchDepenses] = React.useState(false)
  14. let fetchDepenses = props.fetchDepenses || !depensesFetched
  15. useEffect( () => {
  16. sqlite_exec_query(`create table if not exists expense (id integer primary key not null, value real, description text, date integer);`,(res)=>{
  17. if(fetchDepenses)
  18. sqlite_exec_query("select * from expense order by date desc", (res) => {
  19. onGetDepenses(res.rows._array);
  20. preventFetchDepenses(true);
  21. props.depensesFetched();
  22. });
  23. });
  24. });
  25. let content = []
  26. if(depenses.length > 0)
  27. {
  28. // get latest and oldest depense
  29. let latest_depense = depenses[0];
  30. let oldest_depense = depenses[depenses.length - 1]
  31. let curDate = new Date(latest_depense.date);
  32. let oldestDate = new Date(oldest_depense.date);
  33. let days = getDaysArray(oldestDate, curDate )
  34. days.reverse();
  35. let data = [];
  36. let renderItem = null;
  37. switch(props.durationMode)
  38. {
  39. case "days":
  40. days.forEach( (day) => {
  41. // get depenses that are on the current day
  42. var depenses_day = depenses.filter( obj => {
  43. var tpDate = new Date(obj.date);
  44. return tpDate.getUTCFullYear() == day.getUTCFullYear() && tpDate.getUTCMonth() == day.getUTCMonth() && tpDate.getUTCDate() == day.getUTCDate()
  45. } )
  46. data.push(
  47. {
  48. date: day,
  49. depenses: depenses_day,
  50. dailyObjective: props.dailyObjective,
  51. id: "day_"+day.toISOString()
  52. })
  53. });
  54. renderItem = ({item}) =>(
  55. <DayList
  56. dailyObjective={props.dailyObjective}
  57. fetchDepenses={() => preventFetchDepenses(false)}
  58. date={item.date}
  59. depenses={item.depenses}/>
  60. );
  61. content = (
  62. <FlatList
  63. data={data}
  64. renderItem={renderItem}
  65. keyExtractor={item => item.id}/>
  66. )
  67. break;
  68. case "weeks":
  69. // dont forget the list of days is ordered latest to oldest
  70. let week_number = getWeek(days[0]);
  71. let week = {
  72. id:week_number+"_"+days[0].getFullYear(),
  73. days: [],
  74. number: week_number,
  75. }
  76. data.push(week);
  77. days.forEach( (day) => {
  78. week_number = getWeek(day);
  79. if( week_number+"_"+day.getFullYear() == week.id)
  80. week.days.push(
  81. {
  82. date:day,
  83. expenses: depenses.filter( obj => {
  84. var tpDate = new Date(obj.date);
  85. return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
  86. } )
  87. });
  88. else
  89. {
  90. week = {
  91. id:week_number+"_"+day.getFullYear(),
  92. days: [
  93. {
  94. date:day,
  95. expenses: depenses.filter( obj => {
  96. var tpDate = new Date(obj.date);
  97. return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
  98. } )
  99. }
  100. ],
  101. number: week_number,
  102. }
  103. data.push(week);
  104. }
  105. });
  106. renderItem = ({item}) =>(
  107. <WeekList
  108. dailyObjective={props.dailyObjective}
  109. days={item.days}
  110. number={item.number}
  111. fetchDepenses={() => preventFetchDepenses(false)}
  112. />
  113. );
  114. content = (
  115. <FlatList
  116. data={data}
  117. renderItem={renderItem}
  118. keyExtractor={item => item.id}/>
  119. )
  120. break;
  121. default:
  122. content = <Text> This does not work yet :(</Text>
  123. }
  124. }else
  125. content = <Text> Start adding expenses ! </Text>
  126. return(
  127. <SafeAreaView >
  128. {content}
  129. </SafeAreaView >
  130. )
  131. }
  132. const depense_list_style = StyleSheet.create({
  133. });
  134. export default DepensesList