Skip to content

GitLab

Commit 824c2e18 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

캘린더 디비 연결 전

parent ab8220c3
Show whitespace changes
Inline Side-by-side
Calendar.js
View file @ 824c2e18
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from 'react-native'; import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from 'react-native';
import { Button, normalize } from 'react-native-elements'; import { Button } from 'react-native-elements';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import DetailInfo from './DetailInfo';
const Stack = createStackNavigator();
const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => { const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => {
return ( return (
<TouchableOpacity onPress={onPress} <TouchableOpacity onPress={onPress}
style={[style.dateContainer, { height: flatListHeight }]}> style={[style.dateContainer, { height: flatListHeight }]}>
<Text style={textColor}>{dateitem.idates}</Text> <Text style={textColor}>{dateitem.date.getDate()}</Text>
{ {
dateitem.type && dateitem.type &&
<View> <View>
...@@ -42,17 +37,7 @@ const INIT_Data = [ ...@@ -42,17 +37,7 @@ const INIT_Data = [
}, },
]; ];
const dateTostr = (date) => { function Calendar() {
//console.log('didididid', date)
const dsy = date.getFullYear();
const dsm = ('0' + (date.getMonth() + 1)).slice(-2);
const dsd = ('0' + date.getDate()).slice(-2);
//console.log('return', dsy + '-' + dsm + '-' + dsd)
return dsy + '-' + dsm + '-' + dsd;
}
function Calendar({ navigation }) {
const date = new Date(); const date = new Date();
const [year, setYear] = useState(date.getFullYear()); const [year, setYear] = useState(date.getFullYear());
const [month, setMonth] = useState(date.getMonth()); const [month, setMonth] = useState(date.getMonth());
...@@ -70,62 +55,49 @@ function Calendar({ navigation }) { ...@@ -70,62 +55,49 @@ function Calendar({ navigation }) {
const thisLastDay = thisLast.getDay(); //이번 달 마지막 요일 const thisLastDay = thisLast.getDay(); //이번 달 마지막 요일
// 이번 달 달력에 쓰일 날짜들. 이전달 다음달 전부 포함 // 이번 달 달력에 쓰일 날짜들. 이전달 다음달 전부 포함
const tempDates = []; const Dates = [];
const testArr = []; const DBDates = [];
if (thisFirstDay != 0) { // 첫째 날이 일요일이 아니라면 if (thisFirstDay != 0) { // 첫째 날이 일요일이 아니라면
for (let i = 0; i < thisFirstDay; i++) { for (let i = 0; i < thisFirstDay; i++) {
tempDates.unshift(prevLastDate - i); Dates.unshift({ date: new Date(year, month - 1, prevLastDate - i) })
//testArr.unshift({ ay: year, am: month, ad: prevLastDate - i });
const re1 = dateTostr(new Date(year, month - 1, prevLastDate - i))
testArr.unshift({ fd: re1, sd: prevLastDate - i })
} }
} }
for (let i = 1; i <= thisLastDate; i++) { //이번 달 날짜 for (let i = 1; i <= thisLastDate; i++) { //이번 달 날짜
tempDates.push(i); Dates.push({ date: new Date(year, month, i) })
//testArr.push({ ay: year, am: month + 1, ad: i });
const re2 = dateTostr(new Date(year, month, i))
testArr.push({ fd: re2, sd: i })
} }
for (let i = 1; i <= 6 - thisLastDay; i++) { for (let i = 1; i <= 6 - thisLastDay; i++) {
tempDates.push(i); Dates.push({ date: new Date(year, month + 1, i) })
//testArr.push({ ay: year, am: month + 2, ad: i });
const re3 = dateTostr(new Date(year, month + 1, i))
testArr.push({ fd: re3, sd: i})
} }
console.log('testArr', testArr);
const dates = tempDates.map((element, index) => ({ key: `${index}`, idates: element }));
const testDates = testArr.map((obj, index) => ({ key: `${index}`, tdates: obj.sd }));
console.log('testDates', testDates)
const testID = dates.findIndex(obj => obj.idates == 28); //DB 데이터와 날짜 비교
if (testID !== -1) { for (let i = 0; i < INIT_Data.length; i++) {
//dates[testID] = { key: `${dates[testID].key}`, idates: dates[testID].idates, type: 'input', price: 10000 }; const str = INIT_Data[i].date
dates[testID] = { key: `${dates[testID].key}`, idates: dates[testID].idates, type: { "input": 10000, "output": 1000 } }; DBDates.push({ date: new Date(Number(str.slice(0, 4)), Number(str.slice(5, 7)) - 1, Number(str.slice(8, 10))), type: INIT_Data[i].type })
//console.log('타입확인', dates[testID]); //타입확인 {"idates": 28, "key": "1", "type": {"input": 10000, "output": 1000}}
//console.log('type', Object.keys(dates[testID].type)); //type ["input", "output"]
console.log('a', dates[testID].type.input)
} }
const thisfirstID = tempDates.indexOf(1); // 이번 달 1일 for (let i = 0; i < Dates.length; i++) {
const thislastID = tempDates.lastIndexOf(thisLastDate); // 이번 달 마지막 날짜 인덱스 const idx = DBDates.findIndex(obj => obj.date.getTime() == Dates[i].date.getTime())
if (idx !== -1) {
Dates[i] = DBDates[idx]
}
}
let istoday = false; let istoday = false;
const renderDate = ({ item }) => { const renderDate = ({ item }) => {
let color = '#000000'; let color = '#000000';
if (item.idates === date.getDate() && month === todayM && year === todayY) { if (item.date.getDate() === date.getDate() && month === todayM && year === todayY) {
istoday = true; istoday = true;
} }
if (istoday) { if (istoday) {
color = '#6495ed' color = '#6495ed'
istoday = false; istoday = false;
} }
if (!(item.key >= thisfirstID && item.key < thislastID + 1)) { if (!(item.date.getMonth() === month)) {
color = '#a9a9a9' color = '#a9a9a9'
} }
return ( return (
<DateItem dateitem={item} textColor={{ color }} onPress={() => navigation.navigate('DetailInfo')} flatListHeight={flatListHeight / 5} /> <DateItem dateitem={item} textColor={{ color }} flatListHeight={flatListHeight / (Dates.length/ 7)} />
) )
} }
const prevBtn = () => { const prevBtn = () => {
...@@ -179,13 +151,11 @@ function Calendar({ navigation }) { ...@@ -179,13 +151,11 @@ function Calendar({ navigation }) {
</View> </View>
<FlatList <FlatList
onLayout={onLayout} onLayout={onLayout}
data={dates} data={Dates}
numColumns={7} numColumns={7}
renderItem={renderDate} renderItem={renderDate}
keyExtractor={item => item.date}
/> />
<Stack.Navigator>
<Stack.Screen name="DetailInfo" component={DetailInfo} />
</Stack.Navigator>
</SafeAreaView> </SafeAreaView>
</> </>
) )
...@@ -215,6 +185,7 @@ const style = StyleSheet.create({ ...@@ -215,6 +185,7 @@ const style = StyleSheet.create({
Days: { Days: {
flexDirection: 'row', flexDirection: 'row',
backgroundColor: '#6495ED' backgroundColor: '#6495ED'
}, },
DayText: { DayText: {
flex: 1, flex: 1,
......
DetailInfo.js 0 → 100644
View file @ 824c2e18
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const DetailInfo =() =>{
return(
<View>
<Text style={style.Font}>여기는 디테일 스크린</Text>
<Text>날짜를 선택하면 세부적인 수입/지출 내역을 볼 수 있는 화면 입니다.</Text>
</View>
)
}
const style = StyleSheet.create({
Font: {
fontSize:24
}
});
export default DetailInfo;
\ No newline at end of file
MoneyDB.js
View file @ 824c2e18
...@@ -6,11 +6,6 @@ import React, { useEffect, useState } from 'react'; ...@@ -6,11 +6,6 @@ import React, { useEffect, useState } from 'react';
DEBUG(true); DEBUG(true);
enablePromise(true); enablePromise(true);
// const database_name = "MyMoney.db";
// const database_version = "1.0"
// const database_displayname = "SQLite Test Database";
// const database_size = 200000;
const db = openDatabase({ const db = openDatabase({
name: 'MyMoney', name: 'MyMoney',
location: 'default', location: 'default',
......
Monthly.js
View file @ 824c2e18
import React from 'react'; import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native'; import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
const Montly =() =>{ const INIT_Data = [
return( {
date: "2021-06-30",
type: { 'input': 50000, 'output': 3500 },
},
{
date: "2021-07-01",
type: { 'input': 100000, 'output': 2000 },
},
{
date: "2021-07-05",
type: { 'input': 15000, 'output': 2010 },
},
{
date: "2021-07-10",
type: { 'input': 10000, 'output': 1000 },
},
];
const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => {
return (
<TouchableOpacity onPress={onPress}
style={[style.dateContainer]}>
<Text style={textColor}>{dateitem.date.getDate()}</Text>
{
dateitem.type &&
<View>
<Text style={{ color: '#1E90FF' }}>{dateitem.type.input ? dateitem.type.input : null}</Text>
<Text style={{ color: '#DC143C' }}>{dateitem.type.output ? dateitem.type.output : null}</Text>
</View>
}
</TouchableOpacity>
);
};
const Montly = () => {
// const [flatListHeight, setFlatListHeight] = useState(400)
const temp = [];
for (let i = 0; i < 12; i++) {
temp.push({ date: new Date(2021, 6, i) })
}
console.log('temp', temp[0].date)
const DBDates = [];
for (let i = 0; i < INIT_Data.length; i++) {
// console.log('날짜만 가져오기', INIT_Data[i].date, 'index', i)
const str = INIT_Data[i].date
DBDates.push({ date: new Date(Number(str.slice(0, 4)), Number(str.slice(5, 7)) - 1, Number(str.slice(8, 10))), type: INIT_Data[i].type })
}
// console.log('DBDates', DBDates)
for (let i = 0; i < temp.length; i++) {
const idx = DBDates.findIndex(obj => obj.date.getTime() == temp[i].date.getTime())
if (idx !== -1) {
temp[i] = DBDates[idx]
}
}
console.log('reTemp', temp)
//reTemp 30
// const date3 = new Date(2021, 6, 1);
// const dy = date3.getFullYear();
// const dm = ('0' + (date3.getMonth() + 1)).slice(-2);
// const dd = ('0' + date3.getDate()).slice(-2);
// ;
// // console.log('eachValue', dy, dm, dd)
const renderDate = ({ item }) => {
// let color = '#000000';
// if (item.datesVal.getDate() === date.getDate() && month === todayM && year === todayY) {
// istoday = true;
// }
// if (istoday) {
// color = '#6495ed'
// istoday = false;
// }
// if (!(item.datesVal.getMonth() === month)) {
// color = '#a9a9a9'
// }
return (
<DateItem dateitem={item} />
)
}
// const onLayout = (event) => {
// const { x, y, height, width } = event.nativeEvent.layout;
// setFlatListHeight(height)
// }
return (
<>
<View> <View>
<Text style={style.Font}>여기는 월별 페이지</Text> <Text style={style.Font}>여기는 월별 페이지</Text>
<Text style={style.Font}>달력을 추가할 예정입니다.</Text> <Text style={style.Font}>달력을 추가할 예정입니다.</Text>
</View> </View>
<FlatList
data={temp}
numColumns={7}
renderItem={renderDate}
keyExtractor={item => item.date}
/>
</>
) )
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
Font: { Font: {
fontSize:24 fontSize: 24
} }
}); });
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment