Skip to content

GitLab

Commit 7d2182de authored by Choi Ga Young's avatar Choi Ga Young
Browse files

Merge remote-tracking branch 'origin/sooHyun' into rkyoung

parents 90f72388 93a47926
Hide whitespace changes
Inline Side-by-side
MainScreen.js
View file @ 7d2182de
......@@ -10,17 +10,34 @@ import weekApi from './db/mainScreen.api';
import { getDateStr } from './utils/dateFunction';
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 (
<>
<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>
<View style={{
padding: "5%", borderColor: '#d3d3d3', //light grey
borderWidth: 1, borderTopWidth: 0,
}}>
<View style={{ flexDirection: "row" }}>
<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.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원</Text>
</View>
</>
{item.asset ?
<Text style={[style.itemTextNum, style.Font]}>
{'(' + item.asset + '>' + item.deposit_asset + ')'}
</Text>
: null}
</View>
);
};
......@@ -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 }) {
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 initialStartingDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() - daysToSubtract)
const initialEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() + (6 - daysToSubtract))
const [modalOpen, setModalOpen] = useState(false);
const [open, setOpen] = useState(false)
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 [markedDates, setMarkedDates] = useState([])
const [singleMoney, setSingleMoney] = useState([])
......@@ -53,23 +103,26 @@ function MainScreen({ navigation }) {
useFocusEffect(
React.useCallback(() => {
getWeeklyData(startingDate, endDate)
getWeeklyData(initialStartingDate, initialEndDate)
getTotalMoney()
}, [])
);
const getWeeklyData = async (start, end) => {
if (getDateStr(start) !== getDateStr(startingDate)) {
const { data, input, output } = await weekApi.getWeeklyData(start, end)
setStartingDate(start)
setWeekMoney({ input: input, output, output })
setMarkedDates(getMarkedDates(data))
}
}
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 })
}
useEffect(() => {
getSingleData()
}, [selectedDate])
......@@ -85,12 +138,21 @@ function MainScreen({ navigation }) {
Keyboard.dismiss();
}}>
<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
selectedDate={selectedDate}
startingDate={startingDate}
onWeekChanged={(start, end) => getWeeklyData(start, end)}
onDateSelected={(date) => setSelectedDate(getDateStr(date))}
weeklyData={weeklyData}
onDateSelected={(date) => setSelectedDate(date)}
markedDates={markedDates}
/>
<View style={style.weekData}>
<Text style={[style.Font, { color: 'white' }]}>수입 {weekMoney.input}</Text>
......@@ -188,6 +250,9 @@ const style = StyleSheet.create({
outputColor: {
color: '#dc143c'
},
moveColor: {
color: '#646d75'
},
itemTextNum: {
flex: 1,
textAlign: "center",
......
PostMoney.js
View file @ 7d2182de
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 ButtonsForm from './components/ButtonsForm';
import SelectForm from './components/SelectForm';
......@@ -37,8 +37,10 @@ const PostMoney = ({ navigation }) => {
const [subcategories, setSubcategories] = useState([])
const [selected_subcat, setSelected_subcat] = useState(INIT_SUBCATEGORY)
const [disabled, setDisabled] = useState(true)
const [success, setSuccess] = useState(false)
useEffect(() => {
loadCat()
loadSubCat()
......@@ -46,10 +48,23 @@ const PostMoney = ({ navigation }) => {
initData()
}, [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 = () => {
setDate(getDateStr())
setContents('')
setPrice('')
setSelected_asset_type(INIT_ASSETSTYPE)
setSelected_cat(INIT_CATEGORY)
setSelected_subcat(INIT_SUBCATEGORY)
......@@ -106,83 +121,87 @@ const PostMoney = ({ navigation }) => {
}
if (success) {
initData()
setSuccess(false)
navigation.goBack()
}
return (
<View>
<View>
<ButtonsForm
onPress={(index) => setSelectedIndex(index)}
selectedIndex={selectedIndex}
group={["수입", "지출", "이동"]} />
<DatePicker
inputTitle="날짜"
date={date}
setDate={setDate}
/>
<InputBox
inputTitle="내용"
placeholder="내용을 입력하세요"
value={contents}
onChangeText={
(contents) => setContents(contents)
}
maxLength={30}
/>
<InputBox
inputTitle="금액"
placeholder="금액을 입력하세요"
value={price}
onChangeText={
(price) => setPrice(price)
}
keyboardType="numeric"
maxLength={30}
/>
<SelectForm
inputTitle={selectedIndex === 2 ? "출금" : "자산"}
placeholder="자산 선택"
data={asset_type}
selectedData={selected_asset_type}
onValueChange={(asset) => setSelected_asset_type(asset)}
onUpdateDataPress={onUpdateAssetPress}
/>
{selectedIndex === 2 &&
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={{ flex: 1 }}>
<View>
<ButtonsForm
onPress={(index) => {setSelectedIndex(index); Keyboard.dismiss();}}
selectedIndex={selectedIndex}
group={["수입", "지출", "이동"]} />
<DatePicker
inputTitle="날짜"
date={date}
setDate={setDate}
/>
<InputBox
inputTitle="내용"
placeholder="내용을 입력하세요"
value={contents}
onChangeText={
(contents) => setContents(contents)
}
maxLength={30}
/>
<InputBox
inputTitle="금액"
placeholder="금액을 입력하세요"
value={price}
onChangeText={
(price) => setPrice(price)
}
keyboardType="numeric"
maxLength={30}
/>
<SelectForm
inputTitle="입금"
inputTitle={selectedIndex === 2 ? "출금" : "자산"}
placeholder="자산 선택"
data={asset_type}
selectedData={selected_deposit_asset_type}
onValueChange={(deposit_asset) => setSelected_deposit_asset_type(deposit_asset)}
selectedData={selected_asset_type}
onValueChange={(asset) => setSelected_asset_type(asset)}
onUpdateDataPress={onUpdateAssetPress}
/>}
<SelectForm
inputTitle="구분"
placeholder="카테고리 선택"
data={categories}
selectedData={selected_cat}
onValueChange={(cat) => setSelected_cat(cat)}
subData={subcategories}
selectedSubData={selected_subcat}
onSubValueChange={(subcat) => setSelected_subcat(subcat)}
onUpdateDataPress={onUpdateCatPress}
/>
</View>
<View style={style.buttonRow}>
<StyledButton
name="저장하기"
onPress={insertData}
style={style.submitButton}
/>
<StyledButton
name="취소"
onPress={() => console.log('취소버튼')}
style={style.cancelButton}
/>
/>
{selectedIndex === 2 &&
<SelectForm
inputTitle="입금"
placeholder="자산 선택"
data={asset_type}
selectedData={selected_deposit_asset_type}
onValueChange={(deposit_asset) => setSelected_deposit_asset_type(deposit_asset)}
onUpdateDataPress={onUpdateAssetPress}
/>}
<SelectForm
inputTitle="구분"
placeholder="카테고리 선택"
data={categories}
selectedData={selected_cat}
onValueChange={(cat) => setSelected_cat(cat)}
subData={subcategories}
selectedSubData={selected_subcat}
onSubValueChange={(subcat) => setSelected_subcat(subcat)}
onUpdateDataPress={onUpdateCatPress}
/>
</View>
<View style={style.buttonRow}>
<StyledButton
name="저장하기"
onPress={insertData}
style={style.submitButton}
disabled={disabled}
/>
<StyledButton
name="취소"
onPress={() => navigation.goBack()}
style={style.cancelButton}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
)
}
......
components/StyledButton.js
View file @ 7d2182de
import React from 'react';
import { StyleSheet, Pressable, Text } from 'react-native';
const StyledButton = (props) => {
const StyledButton = ({
name,
onPress,
style,
disabled,
}) => {
return (
<Pressable
style={({ pressed }) => [
{
backgroundColor: pressed ? '#adbfdb' : '#bfd3f2',
backgroundColor: disabled ? '#9c9c9c' : pressed ? '#adbfdb' : '#bfd3f2',
},
style.pressableStyle,
props.style
styles.pressableStyle,
style
]}
onPress={props.onPress}>
<Text style={style.buttonText}>{props.name}</Text>
onPress={onPress}
disabled={disabled}>
<Text style={styles.buttonText}>{name}</Text>
</Pressable>
);
};
const style = StyleSheet.create({
const styles = StyleSheet.create({
pressableStyle: {
alignItems: "center",
justifyContent: "center",
......
components/WeeklyCalendar.js
View file @ 7d2182de
......@@ -7,44 +7,9 @@ const WeeklyCalendar = ({
startingDate,
onWeekChanged,
onDateSelected,
weeklyData = [],
markedDates,
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
......@@ -57,13 +22,12 @@ const WeeklyCalendar = ({
dateNameStyle={{ color: 'white' }}
iconContainer={{ flex: 0.1 }}
customDatesStyles={customDatesStyles}
updateWeek
updateWeek = {false}
highlightDateNameStyle={{ color: 'white' }}
highlightDateNumberStyle={{ color: 'white' }}
highlightDateContainerStyle={{ backgroundColor: '#6b768a' }}
// markedDates={markedDates}
// datesBlacklist={datesBlacklistFunc}
// startingDate={startingDate}
markedDates={markedDates||[]}
startingDate={startingDate}
selectedDate={selectedDate}
onWeekChanged={onWeekChanged}
onDateSelected={onDateSelected}
......
db/mainScreen.api.js
View file @ 7d2182de
......@@ -31,17 +31,16 @@ const getWeeklyData = async (start, end) => {
})
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 ;`
`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("이동")
}
}
})
......@@ -53,11 +52,47 @@ 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 [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 = [];
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);
})
......@@ -67,22 +102,41 @@ const getData = async (findDate) => {
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");
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++) {
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) => {
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++) {
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