Skip to content

GitLab

Commit a390f249 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

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

parents 822a6710 5fb876b7
Hide whitespace changes
Inline Side-by-side
App.js
View file @ a390f249
...@@ -42,7 +42,6 @@ function Home() { ...@@ -42,7 +42,6 @@ function Home() {
<Tab.Screen name="Main" component={MainScreen} /> <Tab.Screen name="Main" component={MainScreen} />
<Tab.Screen name="Monthly" component={Monthly} /> <Tab.Screen name="Monthly" component={Monthly} />
<Tab.Screen name="Analy" component={Analy} /> <Tab.Screen name="Analy" component={Analy} />
<Tab.Screen name="PostMoney" component={PostMoney} />
</Tab.Navigator> </Tab.Navigator>
) )
} }
...@@ -88,6 +87,11 @@ function App() { ...@@ -88,6 +87,11 @@ function App() {
component={EditOption} component={EditOption}
options={{ title: "편집" }} options={{ title: "편집" }}
/> />
<Stack.Screen
name="PostMoney"
component={PostMoney}
options={{ title: "추가" }}
/>
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
); );
......
MainScreen.js
View file @ a390f249
import React, {useState} from 'react'; import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, StyleSheet, Button, Keyboard, TouchableWithoutFeedback, Modal } from 'react-native'; import { View, Text, StyleSheet, Keyboard, TouchableWithoutFeedback, Modal, Pressable, ScrollView } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import { SpeedDial } from 'react-native-elements'; import { SpeedDial } from 'react-native-elements';
import WeeklyCalendar from './components/WeeklyCalendar'; import WeeklyCalendar from './components/WeeklyCalendar';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import DeptPage from './DeptPage'; 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 }) { 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 [modalOpen, setModalOpen] = useState(false);
const [open, setOpen] = useState(false) 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 })
}
useEffect(() => {
getSingleData()
}, [selectedDate])
const getSingleData = async () => {
const tempData = await weekApi.getData(selectedDate)
setSingleMoney(tempData)
}
return ( return (
<> <>
<TouchableWithoutFeedback onPress={() => { <TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss(); Keyboard.dismiss();
}}> }}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<WeeklyCalendar /> <WeeklyCalendar
selectedDate={selectedDate}
<View > startingDate={startingDate}
<Text style={style.Font}>여기는 메인 페이지 입니다.</Text> onWeekChanged={(start, end) => getWeeklyData(start, end)}
<Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text> onDateSelected={(date) => setSelectedDate(getDateStr(date))}
<TextInput weeklyData={weeklyData}
style={style.TextInput}
onChangeText={onChangeNumber}
keyboardType="numeric"
/>
<Text>입력한 숫자 보기: {number} </Text>
</View>
<Button
title="월별 페이지로 이동"
onPress={() => navigation.navigate('Monthly')}
/> />
<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 <SpeedDial
isOpen={open} isOpen={open}
icon={{ name: 'edit', color: '#fff' }} icon={{ name: 'edit', color: '#fff' }}
openIcon={{ name: 'close', color: '#fff' }} openIcon={{ name: 'close', color: '#fff' }}
onOpen={() => setOpen(!open)} onOpen={() => setOpen(!open)}
onClose={() => setOpen(!open)} onClose={() => setOpen(!open)}
> >
...@@ -72,15 +163,44 @@ function MainScreen({ navigation }) { ...@@ -72,15 +163,44 @@ function MainScreen({ navigation }) {
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
weekData: {
flexDirection: "row",
justifyContent: "space-around",
backgroundColor: "#6b768a",
paddingBottom: 10,
},
TextInput: { TextInput: {
borderColor: 'skyblue', borderColor: 'skyblue',
height: 40, height: 40,
margin: 12, margin: 12,
borderWidth: 1 borderWidth: 1
}, },
totalMoney: {
fontSize: 35,
},
Font: { Font: {
fontFamily: 'GowunDodum-Regular', fontFamily: 'GowunDodum-Regular',
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: { modalToggle: {
...@@ -99,9 +219,8 @@ const style = StyleSheet.create({ ...@@ -99,9 +219,8 @@ const style = StyleSheet.create({
flex: 1, flex: 1,
}, },
Contents: { Contents: {
justifyContent: "center",
alignItems: "center", alignItems: "center",
margin: 10 margin: 20
} }
}); });
......
components/SelectForm.js
View file @ a390f249
...@@ -99,7 +99,7 @@ const SelectForm = ({ ...@@ -99,7 +99,7 @@ const SelectForm = ({
<Text style={style.textStyle}> <Text style={style.textStyle}>
{selectedData.value ? {selectedData.value ?
selectedSubData?.value ? selectedSubData?.value ?
selectedData.value + ' < ' + selectedSubData.value selectedData.value + ' > ' + selectedSubData.value
: selectedData.value : selectedData.value
: placeholder} : placeholder}
</Text> </Text>
......
components/WeeklyCalendar.js
View file @ a390f249
import React from 'react'; import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native'; import { View, StyleSheet } from 'react-native';
import CalendarStrip from 'react-native-calendar-strip'; import CalendarStrip from 'react-native-calendar-strip';
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 ( return (
<View> <View>
<CalendarStrip <CalendarStrip
scrollable calendarAnimation={{ type: 'parallel', duration: 30 }}
calendarAnimation={{ type: 'sequence', duration: 30 }}
daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }} daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
style={{ height: 200, paddingTop: 20, paddingBottom: 10 }} style={{ height: 130, paddingTop: 20, paddingBottom: 10 }}
calendarHeaderStyle={{ color: 'white' }} calendarHeaderStyle={{ color: 'white' }}
calendarColor={'#3343CE'} calendarColor={'#6b768a'}
dateNumberStyle={{ color: 'white' }} dateNumberStyle={{ color: 'white' }}
dateNameStyle={{ color: 'white' }} dateNameStyle={{ color: 'white' }}
iconContainer={{ flex: 0.1 }} iconContainer={{ flex: 0.1 }}
// customDatesStyles={this.state.customDatesStyles} customDatesStyles={customDatesStyles}
updateWeek
highlightDateNameStyle={{ color: 'white' }} highlightDateNameStyle={{ color: 'white' }}
highlightDateNumberStyle={{ color: 'yellow' }} highlightDateNumberStyle={{ color: 'white' }}
highlightDateContainerStyle={{ backgroundColor: 'black' }} highlightDateContainerStyle={{ backgroundColor: 'black' }}
// markedDates={this.state.markedDates} // markedDates={markedDates}
// datesBlacklist={this.datesBlacklistFunc} // datesBlacklist={datesBlacklistFunc}
// selectedDate={this.state.selectedDate} // startingDate={startingDate}
// onDateSelected={this.onDateSelected} selectedDate={selectedDate}
onWeekChanged={onWeekChanged}
onDateSelected={onDateSelected}
useIsoWeekday={false} useIsoWeekday={false}
/> />
</View> </View>
......
db/mainScreen.api.js 0 → 100644
View file @ a390f249
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 @ a390f249
...@@ -10,6 +10,5 @@ export function getDateStr(item) { ...@@ -10,6 +10,5 @@ export function getDateStr(item) {
tempM = tempM > 9 ? tempM : "0" + tempM; tempM = tempM > 9 ? tempM : "0" + tempM;
let tempD = date.getDate(); let tempD = date.getDate();
tempD = tempD > 9 ? tempD : "0" + tempD; tempD = tempD > 9 ? tempD : "0" + tempD;
console.log(`${tempY}-${tempM}-${tempD}`)
return `${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