Skip to content

GitLab

Commit 5fb876b7 authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0808 메인 페이지

parent d4207d12
Hide whitespace changes
Inline Side-by-side
App.js
View file @ 5fb876b7
......@@ -43,7 +43,6 @@ function Home() {
<Tab.Screen name="Main" component={MainScreen} />
<Tab.Screen name="Monthly" component={Monthly} />
<Tab.Screen name="Analy" component={Analy} />
<Tab.Screen name="PostMoney" component={PostMoney} />
</Tab.Navigator>
)
}
......@@ -86,6 +85,11 @@ function App() {
component={EditOption}
options={{ title: "편집" }}
/>
<Stack.Screen
name="PostMoney"
component={PostMoney}
options={{ title: "추가" }}
/>
</Stack.Navigator>
</NavigationContainer>
);
......
MainScreen.js
View file @ 5fb876b7
import React, {useState} from 'react';
import { View, Text, TextInput, StyleSheet, Button, Keyboard, TouchableWithoutFeedback, Modal } from 'react-native';
import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, StyleSheet, Button, Keyboard, TouchableWithoutFeedback, Modal, Pressable, FlatList, ScrollView } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import { SpeedDial } from 'react-native-elements';
import WeeklyCalendar from './components/WeeklyCalendar';
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import DeptPage from './DeptPage';
import weekApi from './db/mainScreen.api';
import { getDateStr } from './utils/dateFunction';
const DetailItem = ({item}) => {
return (
<>
<View style={{
flexDirection: "row", padding: "5%", borderColor: '#d3d3d3', //light grey
borderWidth: 1, borderTopWidth: 0,
}}>
<Text style={[style.itemText, item.type === 1 ? style.inputColor : style.outputColor]}>{item.category}</Text>
<Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text>
<Text style={[style.itemTextNum, style.Font]}>{item.price}원</Text>
</View>
</>
);
};
const AssetItem = ({item}) => {
return (
<View style={{ flexDirection: "row", width: 180 }}>
<Text style={[style.Font, { width: "40%", textAlign: 'left' }]}>{item.name}</Text>
<Text style={[style.Font, { width: "60%", textAlign: 'right' }]}>{item.price} 원</Text>
</View>
);
};
function MainScreen({ navigation }) {
const [number, onChangeNumber] = useState(null);
const day = new Date(getDateStr())
const daysToSubtract = day.getDay()
const startingDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() - daysToSubtract)
const endDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() + (6 - daysToSubtract))
const [modalOpen, setModalOpen] = useState(false);
// const [reviews, setReviews] = useState([
// { title: 'aa', rating: 5, body: 'bb', key: '1' },
// ]);
const [open, setOpen] = useState(false)
const [selectedDate, setSelectedDate] = useState(getDateStr())
const [weeklyData, setWeeklyData] = useState([])
const [weekMoney, setWeekMoney] = useState({ input: 0, output: 0 })
const [singleMoney, setSingleMoney] = useState([])
const [totalMoney, setTotalMoney] = useState(0)
const [totalAssetsMoney, setTotalAssetsMoney] = useState([])
useFocusEffect(
React.useCallback(() => {
getWeeklyData(startingDate, endDate)
getTotalMoney()
}, [])
);
const getTotalMoney = async () => {
const { total, assets_total } = await weekApi.getTotalData()
setTotalMoney(total)
setTotalAssetsMoney(assets_total)
}
const getWeeklyData = async (start, end) => {
const { data, input, output } = await weekApi.getWeeklyData(start, end)
setWeeklyData(data)
setWeekMoney({ input: input, output, output })
console.log('=============week changed')
}
useEffect(() => {
getSingleData()
}, [selectedDate])
const getSingleData = async () => {
const tempData = await weekApi.getData(selectedDate)
setSingleMoney(tempData)
}
return (
<>
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={{ flex: 1 }}>
<WeeklyCalendar />
<View >
<Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
<Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
<TextInput
style={style.TextInput}
onChangeText={onChangeNumber}
keyboardType="numeric"
/>
<Text>입력한 숫자 보기: {number} </Text>
</View>
<Button
title="월별 페이지로 이동"
onPress={() => navigation.navigate('Monthly')}
<WeeklyCalendar
selectedDate={selectedDate}
startingDate={startingDate}
onWeekChanged={(start, end) => getWeeklyData(start, end)}
onDateSelected={(date) => setSelectedDate(getDateStr(date))}
weeklyData={weeklyData}
/>
<View style={style.weekData}>
<Text style={[style.Font, { color: 'white' }]}>수입 {weekMoney.input}</Text>
<Text style={[style.Font, { color: 'white' }]}>지출 {weekMoney.output}</Text>
</View>
<ScrollView nestedScrollEnabled={true} horizontal={false} >
<>
<View>
{
singleMoney.length != 0 ?
<View>
{singleMoney.length !== 0 && singleMoney.map((item, index) => <DetailItem item={item} key={index}/>)}
</View>
: <View style={{ marginTop: 10, marginBottom: 50 }}>
<Text style={{ textAlign: "center", fontSize: 20, fontFamily: 'GowunDodum-Regular' }}>내역이 없습니다.</Text>
</View>
}
</View>
<View style={style.Contents}>
<Text style={[style.Font, { fontWeight: 'bold' }]}>총 자산</Text>
<Text style={style.totalMoney}><FontAwesome name="won" style={style.totalMoney} /> {totalMoney}</Text>
<View style={{ marginTop: 5 }}>
{totalAssetsMoney.length !== 0 && totalAssetsMoney.map((item, index) => <AssetItem item={item} key={index}/>)}
</View>
</View>
<Pressable
onPress={() => navigation.navigate('PostMoney')}
style={style.submitButton}
>
<Text style={[style.Font, { color: 'white' }]}>수입/지출 기록</Text>
</Pressable>
</>
</ScrollView>
<SpeedDial
isOpen={open}
icon={{ name: 'edit', color: '#fff' }} //연필모양
......@@ -76,14 +166,43 @@ function MainScreen({ navigation }) {
const style = StyleSheet.create({
weekData: {
flexDirection: "row",
justifyContent: "space-around",
backgroundColor: "#6b768a",
paddingBottom: 10,
},
TextInput: {
borderColor: 'skyblue',
height: 40,
margin: 12,
borderWidth: 1
},
totalMoney: {
fontSize: 35,
},
Font: {
fontSize: 24
fontSize: 18
},
inputColor: {
color: '#1E90FF'
},
outputColor: {
color: '#dc143c'
},
itemTextNum: {
flex: 1,
textAlign: "center",
},
itemText: {
flex: 1,
},
submitButton: {
backgroundColor: "#6b768a",
margin: 10,
height: 50,
alignItems: 'center',
justifyContent: 'center',
},
modalToggle: {
......@@ -102,9 +221,8 @@ const style = StyleSheet.create({
flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
},
Contents: {
justifyContent: "center",
alignItems: "center",
margin: 10
margin: 20
}
});
......
PostMoney.js
View file @ 5fb876b7
......@@ -6,7 +6,7 @@ import SelectForm from './components/SelectForm';
import StyledButton from './components/StyledButton';
import DatePicker from './components/DatePicker';
import moneyApi from './db/postMoney.api';
import { getDate } from './utils/dateFunction'
import { getDateStr } from './utils/dateFunction'
const INIT_ASSETSTYPE = {
id: 1,
......@@ -26,7 +26,7 @@ const INIT_SUBCATEGORY = {
const PostMoney = ({navigation}) => {
const [selectedIndex, setSelectedIndex] = useState(0)
const [date, setDate] = useState(getDate())
const [date, setDate] = useState(getDateStr())
const [contents, setContents] = useState('')
const [price, setPrice] = useState('')
const [asset_type, setAsset_type] = useState([])
......@@ -47,7 +47,7 @@ const PostMoney = ({navigation}) => {
}, [selectedIndex])
const initData = () => {
setDate(getDate())
setDate(getDateStr())
setContents('')
setPrice('')
setSelected_asset_type(INIT_ASSETSTYPE)
......
components/DatePicker.js
View file @ 5fb876b7
import React, { useState } from "react";
import { Button, View, Text, StyleSheet, Pressable } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import { getDateStr } from '../utils/dateFunction';
const DatePicker = (props) => {
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
......@@ -14,8 +15,8 @@ const DatePicker = (props) => {
};
const handleConfirm = (date) => {
console.log("A date has been picked: ", String(date.toJSON()).split(/T/)[0]);
props.setDate(String(date.toJSON()).split(/T/)[0])
console.log("A date has been picked: ", getDateStr(date));
props.setDate(getDateStr(date))
hideDatePicker();
};
......
components/SelectForm.js
View file @ 5fb876b7
......@@ -99,7 +99,7 @@ const SelectForm = ({
<Text style={style.textStyle}>
{selectedData.value ?
selectedSubData?.value ?
selectedData.value + ' < ' + selectedSubData.value
selectedData.value + ' > ' + selectedSubData.value
: selectedData.value
: placeholder}
</Text>
......
components/WeeklyCalendar.js
View file @ 5fb876b7
import React, { Component } from 'react';
import React, { Component, useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import CalendarStrip from 'react-native-calendar-strip';
// import moment from 'moment';
import { getDateStr } from '../utils/dateFunction';
const WeeklyCalendar = (props) => {
const WeeklyCalendar = ({
selectedDate,
startingDate,
onWeekChanged,
onDateSelected,
weeklyData = [],
customDatesStyles
}) => {
const [markedDates, setmarkedDates] = useState([])
useEffect(() => {
getMarkedDates()
}, [weeklyData])
const getMarkedDates = () => {
if(weeklyData.length === 0) {
return null;
}
const markedData = weeklyData.map(data => {
return (
{
date: data.date,
dots: getDots(data.type_id)
}
);
})
setmarkedDates(markedData)
}
const getDots = (typeArray) => {
const tempDots = []
for (let i = 0; i < typeArray.length; i++) {
if (typeArray[i] === "1") {
tempDots.push({ color: "#93bdcc", selectedColor: "#7b9e7c", })
} else {
tempDots.push({ color: "#d98b79", })
}
}
return tempDots;
}
return (
<View>
<CalendarStrip
scrollable
calendarAnimation={{ type: 'sequence', duration: 30 }}
calendarAnimation={{ type: 'parallel', duration: 30 }}
daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
style={{ height: 200, paddingTop: 20, paddingBottom: 10 }}
style={{ height: 130, paddingTop: 20, paddingBottom: 10 }}
calendarHeaderStyle={{ color: 'white' }}
calendarColor={'#3343CE'}
calendarColor={'#6b768a'}
dateNumberStyle={{ color: 'white' }}
dateNameStyle={{ color: 'white' }}
iconContainer={{ flex: 0.1 }}
// customDatesStyles={this.state.customDatesStyles}
customDatesStyles={customDatesStyles}
updateWeek
highlightDateNameStyle={{ color: 'white' }}
highlightDateNumberStyle={{ color: 'yellow' }}
highlightDateNumberStyle={{ color: 'white' }}
highlightDateContainerStyle={{ backgroundColor: 'black' }}
// markedDates={this.state.markedDates}
// datesBlacklist={this.datesBlacklistFunc}
// selectedDate={this.state.selectedDate}
// onDateSelected={this.onDateSelected}
// markedDates={markedDates}
// datesBlacklist={datesBlacklistFunc}
// startingDate={startingDate}
selectedDate={selectedDate}
onWeekChanged={onWeekChanged}
onDateSelected={onDateSelected}
useIsoWeekday={false}
/>
</View>
......
db/mainScreen.api.js 0 → 100644
View file @ 5fb876b7
import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
import getDb from './moneyDB'
import { getDateStr } from '../utils/dateFunction';
DEBUG(true);
enablePromise(true);
const getWeeklyData = async (start, end) => {
const db = await getDb();
return new Promise(async (resolve, reject) => {
const temp = [];
let input = 0;
let output = 0;
await db.transaction(async (tx) => {
const [txn, results] = await tx.executeSql(
`select date, group_concat(type_id, '|') as type_id
from (SELECT date, type_id
from money
where date BETWEEN "${getDateStr(start)}" and "${getDateStr(end)}"
group by date, type_id ) group by date`
);
for (let i = 0; i < results.rows.length; i++) {
const tempDate = results.rows.item(i).date;
let tempType_id = [];
if (results.rows.item(i).type_id) {
tempType_id = results.rows.item(i).type_id.split('|');
}
temp.push({ date: tempDate, type_id: tempType_id })
}
})
await db.transaction(async (tx) => {
const [txn2, res] = await tx.executeSql(
`SELECT type_id, sum(price) as price from money
where date BETWEEN "${getDateStr(start)}" and "${getDateStr(end)}"
group by type_id ;`
);
for (let i = 0; i < res.rows.length; i++) {
if (res.rows.item(i).type_id === 1) {
input = res.rows.item(i).price;
} else if (res.rows.item(i).type_id === 2) {
output = res.rows.item(i).price;
} else {
console.log("이동")
}
}
})
resolve({ data: temp, input: input, output: output })
})
}
const getData = async (findDate) => {
const db = await getDb();
return new Promise((resolve, reject) => {
db.transaction(async (tx) => {
console.log("get single data");
const [txn, results] = await tx.executeSql(`SELECT money.type_id, category_name, contents, price FROM money inner JOIN categories on money.category_id = categories.category_id WHERE date="${getDateStr(findDate)}"`);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
temp.push({ id: results.rows.item(i).id, category: results.rows.item(i).category_name, contents: results.rows.item(i).contents, price: results.rows.item(i).price, type: results.rows.item(i).type_id })
}
resolve(temp);
})
})
};
const getTotalData = async () => {
const db = await getDb();
return new Promise(async (resolve, reject) => {
console.log("get total Money");
let total = 0;
const temp = [];
await db.transaction(async (tx) => {
const [txn, results] = await tx.executeSql("SELECT money.assets_id as id, assets_name, sum(price) as price from money left JOIN assets_type on money.assets_id = assets_type.assets_id group by money.assets_id");
for (let i = 0; i < results.rows.length; i++) {
temp.push({ id: results.rows.item(i).id, name: results.rows.item(i).assets_name, price: results.rows.item(i).price })
}
})
await db.transaction(async (tx) => {
const [txn, results] = await tx.executeSql("SELECT sum(price) as price from money");
for (let i = 0; i < results.rows.length; i++) {
total = results.rows.item(i).price
}
})
resolve({ total: total, assets_total: temp});
})
};
const weekApi = {
getWeeklyData,
getData,
getTotalData,
}
export default weekApi;
\ No newline at end of file
utils/dateFunction.js
View file @ 5fb876b7
export function getDate () {
const date = new Date();
export function getDateStr (item) {
let date = ''
if (item){
date = new Date(item)
} else {
date = new Date()
}
const tempY = date.getFullYear();
let tempM = date.getMonth()+1;
tempM = tempM > 9 ? tempM : "0" + tempM;
let tempD = date.getDate();
tempD = tempD > 9 ? tempD : "0" + tempD;
console.log(`${tempY}-${tempM}-${tempD}`)
return `${tempY}-${tempM}-${tempD}`
}
\ No newline at end of file
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