Skip to content

GitLab

Commit 7d50384d authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0909 메인 페이지

parent b8bc934a
Hide whitespace changes
Inline Side-by-side
MainScreen.js
View file @ 7d50384d
...@@ -10,17 +10,34 @@ import weekApi from './db/mainScreen.api'; ...@@ -10,17 +10,34 @@ import weekApi from './db/mainScreen.api';
import { getDateStr } from './utils/dateFunction'; import { getDateStr } from './utils/dateFunction';
const DetailItem = ({ item }) => { const DetailItem = ({ item }) => {
let item_color
switch (item.type) {
case 1:
item_color = style.inputColor;
break;
case 2:
item_color = style.outputColor;
break;
case 3:
item_color = style.moveColor;
break;
}
return ( return (
<> <View style={{
<View style={{ padding: "5%", borderColor: '#d3d3d3', //light grey
flexDirection: "row", padding: "5%", borderColor: '#d3d3d3', //light grey borderWidth: 1, borderTopWidth: 0,
borderWidth: 1, borderTopWidth: 0, }}>
}}> <View style={{ flexDirection: "row" }}>
<Text style={[style.itemText, item.type === 1 ? style.inputColor : style.outputColor]}>{item.category}</Text> <Text style={[style.itemText, item_color]}>{item.category}</Text>
<Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text> <Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text>
<Text style={[style.itemTextNum, style.Font]}>{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원</Text> <Text style={[style.itemTextNum, style.Font]}>{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원</Text>
</View> </View>
</> {item.asset ?
<Text style={[style.itemTextNum, style.Font]}>
{'(' + item.asset + '>' + item.deposit_asset + ')'}
</Text>
: null}
</View>
); );
}; };
...@@ -33,18 +50,51 @@ const AssetItem = ({ item }) => { ...@@ -33,18 +50,51 @@ const AssetItem = ({ item }) => {
); );
}; };
const getMarkedDates = (weeklyData) => {
if (weeklyData.length === 0) {
return null;
}
const markedData = weeklyData.map(data => {
return (
{
date: data.date,
dots: getDots(data.type_id)
}
);
})
return markedData
}
const getDots = (typeArray) => {
const tempDots = []
for (let i = 0; i < typeArray.length; i++) {
if (typeArray[i] === "1") {
tempDots.push({ color: "#7192d1" })
} else if (typeArray[i] === '2') {
tempDots.push({ color: "#d98b79" })
} else {
tempDots.push({ color: "white" })
}
}
return tempDots;
}
function MainScreen({ navigation }) { function MainScreen({ navigation }) {
const day = new Date(getDateStr()) const day = new Date(getDateStr())
const daysToSubtract = day.getDay() const daysToSubtract = day.getDay()
const startingDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() - daysToSubtract) const initialStartingDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() - daysToSubtract)
const endDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() + (6 - daysToSubtract)) const initialEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() + (6 - daysToSubtract))
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [selectedDate, setSelectedDate] = useState(getDateStr()) const [selectedDate, setSelectedDate] = useState(getDateStr())
const [weeklyData, setWeeklyData] = useState([]) const [startingDate, setStartingDate] = useState(initialStartingDate)
const [endDate, setEndDate] = useState(initialEndDate)
const [weekMoney, setWeekMoney] = useState({ input: 0, output: 0 }) const [weekMoney, setWeekMoney] = useState({ input: 0, output: 0 })
const [markedDates, setMarkedDates] = useState([])
const [singleMoney, setSingleMoney] = useState([]) const [singleMoney, setSingleMoney] = useState([])
...@@ -53,23 +103,27 @@ function MainScreen({ navigation }) { ...@@ -53,23 +103,27 @@ function MainScreen({ navigation }) {
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
getWeeklyData(startingDate, endDate) getWeeklyData(initialStartingDate, initialEndDate)
getTotalMoney() getTotalMoney()
}, []) }, [])
); );
const getWeeklyData = async (start, end) => {
if (getDateStr(start) !== getDateStr(startingDate)) {
console.log('weekchanged~~~~~~~~~~~~', start, end)
const { data, input, output } = await weekApi.getWeeklyData(start, end)
setStartingDate(start)
setWeekMoney({ input: input, output, output })
setMarkedDates(getMarkedDates(data))
}
}
const getTotalMoney = async () => { const getTotalMoney = async () => {
const { total, assets_total } = await weekApi.getTotalData() const { total, assets_total } = await weekApi.getTotalData()
setTotalMoney(total) setTotalMoney(total)
setTotalAssetsMoney(assets_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 })
}
useEffect(() => { useEffect(() => {
getSingleData() getSingleData()
}, [selectedDate]) }, [selectedDate])
...@@ -85,12 +139,21 @@ function MainScreen({ navigation }) { ...@@ -85,12 +139,21 @@ function MainScreen({ navigation }) {
Keyboard.dismiss(); Keyboard.dismiss();
}}> }}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
{/* <Pressable onPress={() => {
let startD = new Date(startingDate.getFullYear(), startingDate.getMonth(), startingDate.getDate() - 7)
let endD = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() - 7)
getWeeklyData(startD, endD);
setStartingDate(startD)
setEndDate(endD)
}}>
<Text>테스트</Text>
</Pressable> */}
<WeeklyCalendar <WeeklyCalendar
selectedDate={selectedDate} selectedDate={selectedDate}
startingDate={startingDate} startingDate={startingDate}
onWeekChanged={(start, end) => getWeeklyData(start, end)} onWeekChanged={(start, end) => getWeeklyData(start, end)}
onDateSelected={(date) => setSelectedDate(getDateStr(date))} onDateSelected={(date) => setSelectedDate(date)}
weeklyData={weeklyData} markedDates={markedDates}
/> />
<View style={style.weekData}> <View style={style.weekData}>
<Text style={[style.Font, { color: 'white' }]}>수입 {weekMoney.input}</Text> <Text style={[style.Font, { color: 'white' }]}>수입 {weekMoney.input}</Text>
...@@ -166,7 +229,7 @@ const style = StyleSheet.create({ ...@@ -166,7 +229,7 @@ const style = StyleSheet.create({
weekData: { weekData: {
flexDirection: "row", flexDirection: "row",
justifyContent: "space-around", justifyContent: "space-around",
backgroundColor: "#6b768a", backgroundColor: '#adbfdb',
paddingBottom: 10, paddingBottom: 10,
}, },
TextInput: { TextInput: {
...@@ -188,6 +251,9 @@ const style = StyleSheet.create({ ...@@ -188,6 +251,9 @@ const style = StyleSheet.create({
outputColor: { outputColor: {
color: '#dc143c' color: '#dc143c'
}, },
moveColor: {
color: '#646d75'
},
itemTextNum: { itemTextNum: {
flex: 1, flex: 1,
textAlign: "center", textAlign: "center",
......
PostMoney.js
View file @ 7d50384d
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { View, StyleSheet} from 'react-native'; import { View, StyleSheet, Keyboard, TouchableWithoutFeedback } from 'react-native';
import InputBox from './components/InputBox'; import InputBox from './components/InputBox';
import ButtonsForm from './components/ButtonsForm'; import ButtonsForm from './components/ButtonsForm';
import SelectForm from './components/SelectForm'; import SelectForm from './components/SelectForm';
...@@ -37,8 +37,10 @@ const PostMoney = ({ navigation }) => { ...@@ -37,8 +37,10 @@ const PostMoney = ({ navigation }) => {
const [subcategories, setSubcategories] = useState([]) const [subcategories, setSubcategories] = useState([])
const [selected_subcat, setSelected_subcat] = useState(INIT_SUBCATEGORY) const [selected_subcat, setSelected_subcat] = useState(INIT_SUBCATEGORY)
const [disabled, setDisabled] = useState(true)
const [success, setSuccess] = useState(false) const [success, setSuccess] = useState(false)
useEffect(() => { useEffect(() => {
loadCat() loadCat()
loadSubCat() loadSubCat()
...@@ -46,10 +48,23 @@ const PostMoney = ({ navigation }) => { ...@@ -46,10 +48,23 @@ const PostMoney = ({ navigation }) => {
initData() initData()
}, [selectedIndex]) }, [selectedIndex])
useEffect(() => {
let isProper = false
if (selectedIndex === 2) {
isProper = [contents, price, selected_asset_type.value, selected_deposit_asset_type.value, selected_cat.value].every( elem => elem !== '')
} else {
isProper = [contents, price, selected_asset_type.value, selected_cat.value].every( elem => elem !== '')
}
if (isProper) {
setDisabled(false)
} else {
setDisabled(true)
}
}, [contents, price, selected_asset_type, selected_deposit_asset_type, selected_cat, selected_subcat])
const initData = () => { const initData = () => {
setDate(getDateStr())
setContents('')
setPrice('')
setSelected_asset_type(INIT_ASSETSTYPE) setSelected_asset_type(INIT_ASSETSTYPE)
setSelected_cat(INIT_CATEGORY) setSelected_cat(INIT_CATEGORY)
setSelected_subcat(INIT_SUBCATEGORY) setSelected_subcat(INIT_SUBCATEGORY)
...@@ -106,83 +121,87 @@ const PostMoney = ({ navigation }) => { ...@@ -106,83 +121,87 @@ const PostMoney = ({ navigation }) => {
} }
if (success) { if (success) {
initData() navigation.goBack()
setSuccess(false)
} }
return ( return (
<View> <TouchableWithoutFeedback onPress={() => {
<View> Keyboard.dismiss();
<ButtonsForm }}>
onPress={(index) => setSelectedIndex(index)} <View style={{ flex: 1 }}>
selectedIndex={selectedIndex} <View>
group={["수입", "지출", "이동"]} /> <ButtonsForm
<DatePicker onPress={(index) => {setSelectedIndex(index); Keyboard.dismiss();}}
inputTitle="날짜" selectedIndex={selectedIndex}
date={date} group={["수입", "지출", "이동"]} />
setDate={setDate} <DatePicker
/> inputTitle="날짜"
<InputBox date={date}
inputTitle="내용" setDate={setDate}
placeholder="내용을 입력하세요" />
value={contents} <InputBox
onChangeText={ inputTitle="내용"
(contents) => setContents(contents) placeholder="내용을 입력하세요"
} value={contents}
maxLength={30} onChangeText={
/> (contents) => setContents(contents)
<InputBox }
inputTitle="금액" maxLength={30}
placeholder="금액을 입력하세요" />
value={price} <InputBox
onChangeText={ inputTitle="금액"
(price) => setPrice(price) placeholder="금액을 입력하세요"
} value={price}
keyboardType="numeric" onChangeText={
maxLength={30} (price) => setPrice(price)
/> }
<SelectForm keyboardType="numeric"
inputTitle={selectedIndex === 2 ? "출금" : "자산"} maxLength={30}
placeholder="자산 선택" />
data={asset_type}
selectedData={selected_asset_type}
onValueChange={(asset) => setSelected_asset_type(asset)}
onUpdateDataPress={onUpdateAssetPress}
/>
{selectedIndex === 2 &&
<SelectForm <SelectForm
inputTitle="입금" inputTitle={selectedIndex === 2 ? "출금" : "자산"}
placeholder="자산 선택" placeholder="자산 선택"
data={asset_type} data={asset_type}
selectedData={selected_deposit_asset_type} selectedData={selected_asset_type}
onValueChange={(deposit_asset) => setSelected_deposit_asset_type(deposit_asset)} onValueChange={(asset) => setSelected_asset_type(asset)}
onUpdateDataPress={onUpdateAssetPress} onUpdateDataPress={onUpdateAssetPress}
/>} />
<SelectForm {selectedIndex === 2 &&
inputTitle="구분" <SelectForm
placeholder="카테고리 선택" inputTitle="입금"
data={categories} placeholder="자산 선택"
selectedData={selected_cat} data={asset_type}
onValueChange={(cat) => setSelected_cat(cat)} selectedData={selected_deposit_asset_type}
subData={subcategories} onValueChange={(deposit_asset) => setSelected_deposit_asset_type(deposit_asset)}
selectedSubData={selected_subcat} onUpdateDataPress={onUpdateAssetPress}
onSubValueChange={(subcat) => setSelected_subcat(subcat)} />}
onUpdateDataPress={onUpdateCatPress} <SelectForm
/> inputTitle="구분"
</View> placeholder="카테고리 선택"
<View style={style.buttonRow}> data={categories}
<StyledButton selectedData={selected_cat}
name="저장하기" onValueChange={(cat) => setSelected_cat(cat)}
onPress={insertData} subData={subcategories}
style={style.submitButton} selectedSubData={selected_subcat}
/> onSubValueChange={(subcat) => setSelected_subcat(subcat)}
<StyledButton onUpdateDataPress={onUpdateCatPress}
name="취소" />
onPress={() => console.log('취소버튼')} </View>
style={style.cancelButton} <View style={style.buttonRow}>
/> <StyledButton
name="저장하기"
onPress={insertData}
style={style.submitButton}
disabled={disabled}
/>
<StyledButton
name="취소"
onPress={() => navigation.goBack()}
style={style.cancelButton}
/>
</View>
</View> </View>
</View> </TouchableWithoutFeedback>
) )
} }
......
components/StyledButton.js
View file @ 7d50384d
import React from 'react'; import React from 'react';
import { StyleSheet, Pressable, Text } from 'react-native'; import { StyleSheet, Pressable, Text } from 'react-native';
const StyledButton = (props) => { const StyledButton = ({
name,
onPress,
style,
disabled,
}) => {
return ( return (
<Pressable <Pressable
style={({ pressed }) => [ style={({ pressed }) => [
{ {
backgroundColor: pressed ? '#437dd9' : '#4e8ff5', backgroundColor: disabled ? '#9c9c9c' : pressed ? '#adbfdb' : '#bfd3f2',
}, },
style.pressableStyle, styles.pressableStyle,
props.style style
]} ]}
onPress={props.onPress}> onPress={onPress}
<Text style={style.buttonText}>{props.name}</Text> disabled={disabled}>
<Text style={styles.buttonText}>{name}</Text>
</Pressable> </Pressable>
); );
}; };
const style = StyleSheet.create({ const styles = StyleSheet.create({
pressableStyle: { pressableStyle: {
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
......
components/WeeklyCalendar.js
View file @ 7d50384d
...@@ -7,44 +7,9 @@ const WeeklyCalendar = ({ ...@@ -7,44 +7,9 @@ const WeeklyCalendar = ({
startingDate, startingDate,
onWeekChanged, onWeekChanged,
onDateSelected, onDateSelected,
weeklyData = [], markedDates,
customDatesStyles 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 ( return (
<View> <View>
<CalendarStrip <CalendarStrip
...@@ -52,18 +17,17 @@ const WeeklyCalendar = ({ ...@@ -52,18 +17,17 @@ const WeeklyCalendar = ({
daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }} daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
style={{ height: 130, paddingTop: 20, paddingBottom: 10 }} style={{ height: 130, paddingTop: 20, paddingBottom: 10 }}
calendarHeaderStyle={{ color: 'white' }} calendarHeaderStyle={{ color: 'white' }}
calendarColor={'#6b768a'} calendarColor={'#adbfdb'}
dateNumberStyle={{ color: 'white' }} dateNumberStyle={{ color: 'white' }}
dateNameStyle={{ color: 'white' }} dateNameStyle={{ color: 'white' }}
iconContainer={{ flex: 0.1 }} iconContainer={{ flex: 0.1 }}
customDatesStyles={customDatesStyles} customDatesStyles={customDatesStyles}
updateWeek updateWeek = {false}
highlightDateNameStyle={{ color: 'white' }} highlightDateNameStyle={{ color: 'white' }}
highlightDateNumberStyle={{ color: 'white' }} highlightDateNumberStyle={{ color: 'white' }}
highlightDateContainerStyle={{ backgroundColor: 'black' }} highlightDateContainerStyle={{ backgroundColor: '#6b768a' }}
// markedDates={markedDates} markedDates={markedDates||[]}
// datesBlacklist={datesBlacklistFunc} startingDate={startingDate}
// startingDate={startingDate}
selectedDate={selectedDate} selectedDate={selectedDate}
onWeekChanged={onWeekChanged} onWeekChanged={onWeekChanged}
onDateSelected={onDateSelected} onDateSelected={onDateSelected}
......
db/mainScreen.api.js
View file @ 7d50384d
...@@ -31,20 +31,20 @@ const getWeeklyData = async (start, end) => { ...@@ -31,20 +31,20 @@ const getWeeklyData = async (start, end) => {
}) })
await db.transaction(async (tx) => { await db.transaction(async (tx) => {
const [txn2, res] = await tx.executeSql( const [txn2, res] = await tx.executeSql(
`SELECT type_id, sum(price) as price from money `SELECT type_id, sum(price) as price
where date BETWEEN "${getDateStr(start)}" and "${getDateStr(end)}" FROM money
group by type_id ;` WHERE date BETWEEN "${getDateStr(start)}" and "${getDateStr(end)}"
GROUP BY type_id ;`
); );
for (let i = 0; i < res.rows.length; i++) { for (let i = 0; i < res.rows.length; i++) {
if (res.rows.item(i).type_id === 1) { if (res.rows.item(i).type_id === 1) {
input = res.rows.item(i).price; input = res.rows.item(i).price;
} else if (res.rows.item(i).type_id === 2) { } else if (res.rows.item(i).type_id === 2) {
output = res.rows.item(i).price; output = res.rows.item(i).price;
} else {
console.log("이동")
} }
} }
}) })
console.log('실행실행실행')
resolve({ data: temp, input: input, output: output }) resolve({ data: temp, input: input, output: output })
}) })
} }
...@@ -54,10 +54,47 @@ const getData = async (findDate) => { ...@@ -54,10 +54,47 @@ const getData = async (findDate) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
db.transaction(async (tx) => { db.transaction(async (tx) => {
console.log("get single data"); 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 [txn, results] = await tx.executeSql(`
SELECT money.type_id, category_name, assets_name, contents, price
FROM money
inner JOIN categories on money.category_id = categories.category_id
inner JOIN assets_type on money.assets_id = assets_type.assets_id
WHERE date="${getDateStr(findDate)}"
`);
const temp = []; const temp = [];
for (let i = 0; i < results.rows.length; i++) { 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 }) if (results.rows.item(i).type_id === 3) {
let asset_type = results.rows.item(i).assets_name;
let deposit_asset = results.rows.item(i).assets_name;
let price = 0;
if (results.rows.item(i).price > 0) {
deposit_asset = results.rows.item(i).assets_name;
asset_type = results.rows.item(i + 1).assets_name;
price = results.rows.item(i).price;
} else {
asset_type = results.rows.item(i).assets_name;
deposit_asset = results.rows.item(i + 1).assets_name;
price = -results.rows.item(i).price;
}
temp.push({
id: results.rows.item(i).id,
category: results.rows.item(i).category_name,
asset: asset_type,
deposit_asset: deposit_asset,
contents: results.rows.item(i).contents,
price: price,
type: results.rows.item(i).type_id
})
i++;
} else {
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); resolve(temp);
}) })
...@@ -71,18 +108,38 @@ const getTotalData = async () => { ...@@ -71,18 +108,38 @@ const getTotalData = async () => {
let total = 0; let total = 0;
const temp = []; const temp = [];
await db.transaction(async (tx) => { 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"); const [txn, results] = await tx.executeSql("SELECT type_id, sum(price) as price from money group by type_id");
for (let i = 0; i < results.rows.length; i++) { 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 }) if (results.rows.item(i).type_id === 2) {
total -= results.rows.item(i).price
} else {
total += results.rows.item(i).price
}
} }
}) })
await db.transaction(async (tx) => { await db.transaction(async (tx) => {
const [txn, results] = await tx.executeSql("SELECT sum(price) as price from money"); const [txn, results] = await tx.executeSql(`
select id, group_concat(type_id, '|') as type_id, assets_name, group_concat(price, '|') as price
from (SELECT money.assets_id as id, type_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, type_id)
group by id`);
for (let i = 0; i < results.rows.length; i++) { for (let i = 0; i < results.rows.length; i++) {
total = results.rows.item(i).price let tempAssetTotal = 0;
const type_id_array = results.rows.item(i).type_id.split('|');
const price_array = results.rows.item(i).price.split('|');
for (let j = 0; j < type_id_array.length; j++) {
if (type_id_array[j] === '2') {
tempAssetTotal -= Number(price_array[j])
} else {
tempAssetTotal += Number(price_array[j])
}
}
temp.push({ id: results.rows.item(i).id, name: results.rows.item(i).assets_name, price: tempAssetTotal })
} }
}) })
resolve({ total: total, assets_total: temp}); resolve({ total: total, assets_total: temp });
}) })
}; };
......
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