Commit 3d64de39 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

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

parents 0ad8ca36 47855eb2
...@@ -7,37 +7,9 @@ import Ionicons from 'react-native-vector-icons/Ionicons'; ...@@ -7,37 +7,9 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import Monthly from './Monthly'; import Monthly from './Monthly';
import Analy from './Analy'; import Analy from './Analy';
import PostMoney from './PostMoney'; import PostMoney from './PostMoney';
import InsertCat from './InsertCat'; import MainScreen from './MainScreen';
import DetailInfo from './DetailInfo'; import DetailInfo from './DetailInfo';
function MainScreen({ navigation }) {
const [number, onChangeNumber] = useState(null)
const [totalAssets, setTotalAssets] = useState(0) //총 자산
return (
<>
<View>
<Text style={style.Font}>주간 캘린더 들어올 자리</Text>
<View style={style.Contents}>
<Text style={style.Font}> 자산</Text>
<Text style={style.Font}>{totalAssets}</Text>
</View>
<TextInput
style={style.TextInput}
onChangeText={onChangeNumber}
keyboardType="numeric"
/>
<Text>입력한 숫자 보기: {number} </Text>
</View>
<Button
title="월별 페이지로 이동"
onPress={() => navigation.navigate('Monthly')}
/>
<InsertCat />
</>
)
}
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
const Stack = createStackNavigator(); const Stack = createStackNavigator();
...@@ -55,7 +27,7 @@ function Home() { ...@@ -55,7 +27,7 @@ function Home() {
iconName = focused ? 'calendar' : 'calendar-outline'; iconName = focused ? 'calendar' : 'calendar-outline';
} else if (route.name === 'Analy') { } else if (route.name === 'Analy') {
iconName = focused ? 'bar-chart' : 'bar-chart-outline'; iconName = focused ? 'bar-chart' : 'bar-chart-outline';
} }
// else if (route.name === 'Calendar') { // else if (route.name === 'Calendar') {
// iconName = focused ? 'calendar-sharp' : 'calendar-sharp'; // iconName = focused ? 'calendar-sharp' : 'calendar-sharp';
// } // }
...@@ -81,7 +53,7 @@ function App() { ...@@ -81,7 +53,7 @@ function App() {
return ( return (
<NavigationContainer> <NavigationContainer>
<Stack.Navigator> <Stack.Navigator>
<Stack.Screen options={{headerShown: false}} name="Home" component={Home} /> <Stack.Screen options={{ headerShown: false }} name="Home" component={Home} />
<Stack.Screen name="DetailInfo" component={DetailInfo} /> <Stack.Screen name="DetailInfo" component={DetailInfo} />
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
......
import React from 'react';
import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
import WeeklyCalendar from './components/WeeklyCalendar';
import InsertCat from './InsertCat';
function MainScreen({ navigation }) {
const [number, onChangeNumber] = React.useState(null);
return (
<>
<View>
<WeeklyCalendar />
<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')}
/>
<InsertCat />
</>
)
}
const style = StyleSheet.create({
TextInput: {
borderColor: 'skyblue',
height: 40,
margin: 12,
borderWidth: 1
},
Font: {
fontSize: 24
}
});
export default MainScreen;
\ No newline at end of file
import { DEBUG, enablePromise, openDatabase } from 'react-native-sqlite-storage';
import { View, SafeAreaView, Text, StyleSheet, Button, TextInput } from 'react-native';
import React, { useEffect, useState } from 'react';
DEBUG(true);
enablePromise(true);
const db = openDatabase({
name: 'MyMoney',
location: 'default',
createFromLocation: '~MyMoney.db', // android/src/main/assets/TestDB.db 파일을 위치 시킴
});
const QueryFunc = async (Query) => {
(await db).transaction(Query)
};
const moneyApi = {
QueryFunc,
}
export default moneyApi
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native'; import { View, Text, StyleSheet, Button } from 'react-native';
import { DEBUG, enablePromise, openDatabase } from 'react-native-sqlite-storage';
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';
import StyledButton from './components/StyledButton'; import StyledButton from './components/StyledButton';
import DatePicker from './components/DatePicker'; import DatePicker from './components/DatePicker';
import moneyApi from './MoneyDB'; import moneyApi from './db/postMoney.api';
DEBUG(true);
enablePromise(true);
const db = openDatabase({
name: 'MyMoney',
location: 'default',
createFromLocation: '~MyMoney.db', // android/src/main/assets/TestDB.db 파일을 위치 시킴
});
const getDate = () => { const getDate = () => {
var date = new Date(); var date = new Date();
...@@ -73,17 +62,13 @@ const PostMoney = () => { ...@@ -73,17 +62,13 @@ const PostMoney = () => {
const insertData = async () => { const insertData = async () => {
try { try {
let type = '' let type = ''
if (selectedIndex === 0) { type = '수입' } if (selectedIndex === 0) { type = '수입' }
else if (selectedIndex === 1) { type = '지출' } else if (selectedIndex === 1) { type = '지출' }
else { type = '이동' } else { type = '이동' }
(await db).transaction((tx) => { const result = await moneyApi.insertMoney([type, date, contents, price, selected_asset_type, selected_cat, selected_subcat])
console.log("데이터 삽입하기"); console.log(result)
tx.executeSql('INSERT INTO Money (type, date, contents, price, asset_type, category, subcategory) VALUES (?,?,?,?,?,?,?);',
[type, date, contents, price, selected_asset_type, selected_cat, selected_subcat],
() => { console.log("삽입 성공"); },
(error) => console.log(error))
})
} catch (error) { } catch (error) {
console.log('error in insert data', error) console.log('error in insert data', error)
} }
...@@ -91,42 +76,24 @@ const PostMoney = () => { ...@@ -91,42 +76,24 @@ const PostMoney = () => {
const loadCat = async () => { const loadCat = async () => {
try { try {
await moneyApi.QueryFunc(async (tx) => { const catArray = await moneyApi.selectCategories()
console.log("카테고리 부르기"); console.log('catload', catArray)
const [txn, results] = await tx.executeSql('SELECT * FROM categories'); setCategories(catArray);
console.log('item length', results.rows.length);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
const tempId = results.rows.item(i).category_id;
const tempName = results.rows.item(i).category_name;
temp.push({ id: tempId, value: tempName });
}
setCategories(temp);
})
} catch (error) { } catch (error) {
console.log('error in load data ( postMoney.js )', error) console.log('error in load categories ( postMoney.js )', error)
} }
} }
const loadAssetType = async () => { const loadAssetType = async () => {
try { try {
(await db).transaction(async (tx) => { const assetsTypeArray = await moneyApi.selectAssetsType()
console.log("자산 유형 부르기"); setAsset_type(assetsTypeArray);
const [txn, results] = await tx.executeSql('SELECT * FROM assets_type');
console.log('item length', results.rows.length);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
const tempId = results.rows.item(i).assets_id;
const tempName = results.rows.item(i).assets_name;
temp.push({ id: tempId, value: tempName });
}
setAsset_type(temp);
})
} catch (error) { } catch (error) {
console.log('error in insert data', error) console.log('error in load assets type ( postMoney.js )', error)
} }
} }
useEffect(() => { useEffect(() => {
loadCat() loadCat()
loadAssetType() loadAssetType()
......
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { Animated, Text, View, StyleSheet } from 'react-native'; import { Animated, Text, View, StyleSheet } from 'react-native';
const Notification = (props) => { const NotificationBox = (props) => {
const opacity = useRef(new Animated.Value(0)).current; const opacity = useRef(new Animated.Value(0)).current;
useEffect(() => { useEffect(() => {
if (props.notification !== '') { Animated.sequence([
Animated.sequence([ Animated.timing(opacity, {
Animated.timing(opacity, { toValue: 1,
toValue: 1, duration: 500,
duration: 500, useNativeDriver: true,
useNativeDriver: true, }),
}), Animated.delay(2500),
Animated.delay(2500), Animated.timing(opacity, {
Animated.timing(opacity, { toValue: 0,
toValue: 0, duration: 500,
duration: 500, useNativeDriver: true,
useNativeDriver: true, }),
}), ]).start(() => {
]).start(() => { props.onHide();
props.setNotification(''); })
}) }, [])
}
}, [props.notification]) return (
<Animated.View
style={[
{
opacity: opacity
},
{
transform: [{
translateY: opacity.interpolate({
inputRange: [0, 1],
outputRange: [-20, 0],
})
}],
},
style.msgBox
]}
>
<Text style={style.textStyle}>
{props.message}
</Text>
</Animated.View>
);
};
const Notification = (props) => {
return ( return (
<View style={{ <View style={{
position: 'absolute', position: 'absolute',
...@@ -31,29 +54,21 @@ const Notification = (props) => { ...@@ -31,29 +54,21 @@ const Notification = (props) => {
left: 0, left: 0,
right: 0, right: 0,
}}> }}>
<Animated.View {console.log(props.notification)}
style={[ {props.notification.map((notificationMsg) => (
{ <NotificationBox
opacity: opacity key={notificationMsg}
}, message={notificationMsg}
{ onHide={() => {
transform: [{ props.setNotification((prev) =>
translateY: opacity.interpolate({ prev.filter((currentNotification) => currentNotification !== notificationMsg )
inputRange: [0, 1], )
outputRange: [-20, 0], }}
}) />
}], ))}
}, </View>
style.msgBox )
]} }
>
<Text style={style.textStyle}>
{props.notification}
</Text>
</Animated.View>
</View >
);
};
const style = StyleSheet.create({ const style = StyleSheet.create({
msgBox: { msgBox: {
......
...@@ -17,11 +17,11 @@ const SelectForm = (props) => { ...@@ -17,11 +17,11 @@ const SelectForm = (props) => {
const [subOptionShow, setSubOptionShow] = useState(false) const [subOptionShow, setSubOptionShow] = useState(false)
const [modalOpen, setModalOpen] = useState(false) const [modalOpen, setModalOpen] = useState(false)
const [notification, setNotification] = useState('') const [notification, setNotification] = useState([])
const onPressSelectBox = () => { setModalOpen(true) } const onPressSelectBox = () => { setModalOpen(true) }
const modalClose = () => { setModalOpen(false) } const modalClose = () => { setModalOpen(false); setNotification([]) }
const onPressOption = (item) => { const onPressOption = (item) => {
if (subOption !== undefined) { if (subOption !== undefined) {
...@@ -51,13 +51,12 @@ const SelectForm = (props) => { ...@@ -51,13 +51,12 @@ const SelectForm = (props) => {
return true; return true;
}) })
if (newOption.length === 0) { if (newOption.length === 0) {
setNotification(`${item.value}의 세부 카테고리가 존재하지 않습니다.`) setNotification((prev) => [...prev, `${item.value}의 세부 카테고리가 존재하지 않습니다.`])
} else { } else {
setSubOption(newOption) setSubOption(newOption)
setSubOptionShow(true) setSubOptionShow(true)
} }
} }
const renderOptionItem = ({ item }) => ( const renderOptionItem = ({ item }) => (
<TouchableOpacity onPress={() => onPressOption(item)} style={style.option}> <TouchableOpacity onPress={() => onPressOption(item)} style={style.option}>
<Text style={style.optionText} > <Text style={style.optionText} >
......
import React, { Component } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import CalendarStrip from 'react-native-calendar-strip';
// import moment from 'moment';
const WeeklyCalendar = (props) => {
return (
<View>
<CalendarStrip
scrollable
calendarAnimation={{ type: 'sequence', duration: 30 }}
daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
style={{ height: 200, paddingTop: 20, paddingBottom: 10 }}
calendarHeaderStyle={{ color: 'white' }}
calendarColor={'#3343CE'}
dateNumberStyle={{ color: 'white' }}
dateNameStyle={{ color: 'white' }}
iconContainer={{ flex: 0.1 }}
// customDatesStyles={this.state.customDatesStyles}
highlightDateNameStyle={{ color: 'white' }}
highlightDateNumberStyle={{ color: 'yellow' }}
highlightDateContainerStyle={{ backgroundColor: 'black' }}
// markedDates={this.state.markedDates}
// datesBlacklist={this.datesBlacklistFunc}
// selectedDate={this.state.selectedDate}
// onDateSelected={this.onDateSelected}
useIsoWeekday={false}
/>
</View>
);
};
const style = StyleSheet.create({
container: {
height: 54,
flexDirection: 'row',
alignItems: "center",
marginHorizontal: 10,
marginVertical: 3,
borderWidth: 1.5,
borderStyle: "solid",
borderColor: "#1467ff",
borderRadius: 5,
backgroundColor: "#f5f5f5",
},
})
export default WeeklyCalendar
\ No newline at end of file
import { DEBUG, enablePromise, openDatabase } from 'react-native-sqlite-storage';
DEBUG(true);
enablePromise(true);
const getDb = async () => {
return await openDatabase({
name: 'MyMoney',
location: 'default',
createFromLocation: '~MyMoney.db',
})
}
export default getDb
\ No newline at end of file
import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
import getDb from './moneyDB'
DEBUG(true);
enablePromise(true);
const insertMoney = async (moneyData) => {
const db = await getDb();
return new Promise((resolve, reject) => {
db.transaction((tx) => {
console.log("데이터 삽입하기");
tx.executeSql('INSERT INTO Money (type, date, contents, price, asset_type, category, subcategory) VALUES (?,?,?,?,?,?,?);',
moneyData,
(error) => console.log(error))
resolve('데이터 삽입 완료');
})
})
};
const selectCategories = async () => {
const db = await getDb();
return new Promise((resolve, reject) => {
db.transaction(async (tx) => {
console.log("카테고리 부르기");
const [txn, results] = await tx.executeSql('SELECT * FROM categories');
console.log('item length', results.rows.length);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
const tempId = results.rows.item(i).category_id;
const tempName = results.rows.item(i).category_name;
temp.push({ id: tempId, value: tempName });
}
console.log(temp)
resolve(temp);
})
})
}
const selectAssetsType = async () => {
const db = await getDb();
return new Promise((resolve, reject) => {
db.transaction(async (tx) => {
console.log("자산 유형 부르기");
const [txn, results] = await tx.executeSql('SELECT * FROM assets_type');
console.log('item length', results.rows.length);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
const tempId = results.rows.item(i).assets_id;
const tempName = results.rows.item(i).assets_name;
temp.push({ id: tempId, value: tempName });
}
console.log(temp)
resolve(temp);
})
})
}
const moneyApi = {
insertMoney,
selectCategories,
selectAssetsType,
}
export default moneyApi;
\ 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