Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
rich-maker
Commits
5fb876b7
Commit
5fb876b7
authored
Aug 08, 2021
by
Soo Hyun Kim
Browse files
0808 메인 페이지
parent
d4207d12
Changes
8
Show 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
"
<
WeeklyCalendar
selectedDate
=
{
selectedDate
}
startingDate
=
{
startingDate
}
onWeekChanged
=
{(
start
,
end
)
=>
getWeeklyData
(
start
,
end
)}
onDateSelected
=
{(
date
)
=>
setSelectedDate
(
getDateStr
(
date
))}
weeklyData
=
{
weeklyData
}
/
>
<
Text
>
입력한
숫자
보기
:
{
number
}
<
/Text
>
<
View
style
=
{
style
.
weekData
}
>
<
Text
style
=
{[
style
.
Font
,
{
color
:
'
white
'
}]}
>
수입
{
weekMoney
.
input
}
<
/Text
>
<
Text
style
=
{[
style
.
Font
,
{
color
:
'
white
'
}]}
>
지출
{
weekMoney
.
output
}
<
/Text
>
<
/View
>
<
Button
title
=
"
월별 페이지로 이동
"
onPress
=
{()
=>
navigation
.
navigate
(
'
Monthly
'
)}
/
>
<
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
:
1
0
margin
:
2
0
}
});
...
...
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
{
getDate
Str
}
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
(
getDate
Str
())
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
(
getDate
Str
())
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
:
20
0
,
paddingTop
:
20
,
paddingBottom
:
10
}}
style
=
{{
height
:
13
0
,
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment