Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
App.js
View file @ 3d64de39
......@@ -7,37 +7,9 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import Monthly from './Monthly';
import Analy from './Analy';
import PostMoney from './PostMoney';
import InsertCat from './InsertCat';
import MainScreen from './MainScreen';
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 Stack = createStackNavigator();
......@@ -55,7 +27,7 @@ function Home() {
iconName = focused ? 'calendar' : 'calendar-outline';
} else if (route.name === 'Analy') {
iconName = focused ? 'bar-chart' : 'bar-chart-outline';
}
}
// else if (route.name === 'Calendar') {
// iconName = focused ? 'calendar-sharp' : 'calendar-sharp';
// }
......@@ -81,7 +53,7 @@ function App() {
return (
<NavigationContainer>
<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.Navigator>
</NavigationContainer>
......
MainScreen.js 0 → 100644
View file @ 3d64de39
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
MoneyDB.js deleted 100644 → 0
View file @ 0ad8ca36
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
PostMoney.js
View file @ 3d64de39
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { DEBUG, enablePromise, openDatabase } from 'react-native-sqlite-storage';
import InputBox from './components/InputBox';
import ButtonsForm from './components/ButtonsForm';
import SelectForm from './components/SelectForm';
import StyledButton from './components/StyledButton';
import DatePicker from './components/DatePicker';
import moneyApi from './MoneyDB';
DEBUG(true);
enablePromise(true);
const db = openDatabase({
name: 'MyMoney',
location: 'default',
createFromLocation: '~MyMoney.db', // android/src/main/assets/TestDB.db 파일을 위치 시킴
});
import moneyApi from './db/postMoney.api';
const getDate = () => {
var date = new Date();
......@@ -73,17 +62,13 @@ const PostMoney = () => {
const insertData = async () => {
try {
let type = ''
if (selectedIndex === 0) { type = '수입' }
else if (selectedIndex === 1) { type = '지출' }
else { type = '이동' }
(await db).transaction((tx) => {
console.log("데이터 삽입하기");
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))
})
const result = await moneyApi.insertMoney([type, date, contents, price, selected_asset_type, selected_cat, selected_subcat])
console.log(result)
} catch (error) {
console.log('error in insert data', error)
}
......@@ -91,42 +76,24 @@ const PostMoney = () => {
const loadCat = async () => {
try {
await moneyApi.QueryFunc(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 });
}
setCategories(temp);
})
const catArray = await moneyApi.selectCategories()
console.log('catload', catArray)
setCategories(catArray);
} catch (error) {
console.log('error in load data ( postMoney.js )', error)
console.log('error in load categories ( postMoney.js )', error)
}
}
const loadAssetType = async () => {
try {
(await 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 });
}
setAsset_type(temp);
})
const assetsTypeArray = await moneyApi.selectAssetsType()
setAsset_type(assetsTypeArray);
} catch (error) {
console.log('error in insert data', error)
console.log('error in load assets type ( postMoney.js )', error)
}
}
useEffect(() => {
loadCat()
loadAssetType()
......
components/Notification.js
View file @ 3d64de39
import React, { useEffect, useRef } from 'react';
import { Animated, Text, View, StyleSheet } from 'react-native';
const Notification = (props) => {
const NotificationBox = (props) => {
const opacity = useRef(new Animated.Value(0)).current;
useEffect(() => {
if (props.notification !== '') {
Animated.sequence([
Animated.timing(opacity, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}),
Animated.delay(2500),
Animated.timing(opacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}),
]).start(() => {
props.setNotification('');
})
}
}, [props.notification])
Animated.sequence([
Animated.timing(opacity, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}),
Animated.delay(2500),
Animated.timing(opacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}),
]).start(() => {
props.onHide();
})
}, [])
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 (
<View style={{
position: 'absolute',
......@@ -31,29 +54,21 @@ const Notification = (props) => {
left: 0,
right: 0,
}}>
<Animated.View
style={[
{
opacity: opacity
},
{
transform: [{
translateY: opacity.interpolate({
inputRange: [0, 1],
outputRange: [-20, 0],
})
}],
},
style.msgBox
]}
>
<Text style={style.textStyle}>
{props.notification}
</Text>
</Animated.View>
</View >
);
};
{console.log(props.notification)}
{props.notification.map((notificationMsg) => (
<NotificationBox
key={notificationMsg}
message={notificationMsg}
onHide={() => {
props.setNotification((prev) =>
prev.filter((currentNotification) => currentNotification !== notificationMsg )
)
}}
/>
))}
</View>
)
}
const style = StyleSheet.create({
msgBox: {
......
components/SelectForm.js
View file @ 3d64de39
......@@ -17,11 +17,11 @@ const SelectForm = (props) => {
const [subOptionShow, setSubOptionShow] = useState(false)
const [modalOpen, setModalOpen] = useState(false)
const [notification, setNotification] = useState('')
const [notification, setNotification] = useState([])
const onPressSelectBox = () => { setModalOpen(true) }
const modalClose = () => { setModalOpen(false) }
const modalClose = () => { setModalOpen(false); setNotification([]) }
const onPressOption = (item) => {
if (subOption !== undefined) {
......@@ -51,13 +51,12 @@ const SelectForm = (props) => {
return true;
})
if (newOption.length === 0) {
setNotification(`${item.value}의 세부 카테고리가 존재하지 않습니다.`)
setNotification((prev) => [...prev, `${item.value}의 세부 카테고리가 존재하지 않습니다.`])
} else {
setSubOption(newOption)
setSubOptionShow(true)
}
}
const renderOptionItem = ({ item }) => (
<TouchableOpacity onPress={() => onPressOption(item)} style={style.option}>
<Text style={style.optionText} >
......
components/WeeklyCalendar.js 0 → 100644
View file @ 3d64de39
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
db/MoneyDB.js 0 → 100644
View file @ 3d64de39
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
db/postMoney.api.js 0 → 100644
View file @ 3d64de39
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