Skip to content

S
shoppinglist
Commit fa600511 authored by Farhani's avatar Farhani
Browse files
Options

Change modal to text input

parent dd72260d
Show whitespace changes
Inline Side-by-side
Showing with 538 additions and 243 deletions
screens/AddItemScreen/index.js
View file @ fa600511
......@@ -9,6 +9,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
import ListScreen from '../ListScreen';
import ItemScreen from '../ItemScreen';
const plusbutton = require('../../images/plusbutton.png');
var db = openDatabase({ name: 'shoppinglist.db'});
// const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png');
......
screens/ItemScreen/index.js
View file @ fa600511
......@@ -5,27 +5,255 @@ import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ListScreen from '../ListScreen';
import AddItemScreen from '../AddItemScreen';
const plusbutton = require('../../images/plusbutton.png');
import AntDesign from 'react-native-vector-icons/AntDesign';
const tick = require('../../images/tick.png');
const oil = require('../../images/oil.png');
const cat = require('../../images/cat.jpg');
// const editbutton = require('../../images/editbutton.png');
// const deletebutton = require ('../../images/deletebutton.png');
const write = require('../../images/write.png');
var db = openDatabase({ name: 'shoppinglist.db'});
const ItemScreen = ({navigation}) => {
const [addItemVisible, setAddItemVisible] = useState(false);
const [manageItemModalVisible, setManageItemModalVisible] = useState(false);
const addItemModal = () => {
if(addItemVisible){
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const [confirmEditModalVisible, setConfirmEditModalVisible] = useState(false);
const [items, setItems] = useState([]);
const [emptyList, setEmptyList] = useState([]);
const [updateProduct, setUpdateProduct] = useState ([]);
const [product, setProduct] = useState('');
const [pic, setPic] = useState('');
const [quantity, setQuantity] = useState('');
const [selectedId, setSelectedId] = useState ('');
const [text, setText] = useState ([]);
// const [onSubmit, setOnSubmit] = useState ('');
useEffect(() => {
db.transaction(function (txn) {
txn.executeSql(
"SELECT name from sqlite_master WHERE type='table' AND name='item'",
[],
function (tx, res) {
console.log('item: ', res.rows.length);
if (res.rows.length == 0) {
txn.executeSql('DROP TABLE IF EXISTS item', []);
txn.executeSql(
'CREATE TABLE IF NOT EXISTS item(prodid INTEGER PRIMARY KEY AUTOINCREMENT, product VARCHAR(100), quantity INT(10), image LONGTEXT)',
[],
);
}
},
);
});
}, []);
// add into list
const insertItem = () => {
console.log(product, quantity, pic);
if (product == '') {
alert('Please enter item');
}
else{
// setAddModalVisible(false)
db.transaction(function (tx) {
tx.executeSql(
'INSERT INTO item (product, quantity, image) VALUES (?,?,?)',
[product, quantity, pic],
(tx, results) => {
console.log('Data insert : ', results.rowsAffected);
if (results.rowsAffected > 0) {
Alert.alert(
'Success!',
'Data inserted successfully.',
[
{
text: 'Ok',
onPress: () => navigation.navigate('ItemScreen'),
},
],
{ cancelable: false }
);
onRefresh()
setProduct(''), setQuantity(''), setPic('')
} else alert('Add list failed');
},(error)=>{
console.log(JSON.stringify(error))
}
);
});
}
}
// view list
useEffect(() => {
onRefresh()
}, []);
// update list
const updateItem = () => {
console.log(selectedId, product, quantity, pic);
console.log(updateProduct.product, updateProduct.quantity, updateProduct.pic);
var p = ''
var q = ''
var i = ''
if (product == '' && updateProduct.product == ''){
alert('Please enter item');
}
// else if (quantity == 0 && updateItem.quantity == 0){
// alert('Please enter quantity');
// }
// else if (image == '' && updateItem.image == ''){
// alert('')
// }
else {
if(product == ''){
p = updateProduct.product
}
else{
p = product
}
console.log(p,q,i)
// setEditModalVisible(false)
// setManageListModalVisible(false)
db.transaction((tx) => {
tx.executeSql(
'UPDATE item set product = ?, quantity = ?, image = ? where prodid = ?',
[p, q, i, selectedId],
(tx, results) => {
console.log('Data update: ', JSON.stringify(results));
if (results.rowsAffected > 0) {
Alert.alert(
'Success!',
'Data updated successfully.',
[
{
text: 'Ok',
onPress: () => navigation.navigate('ItemScreen'),
},
],
{ cancelable: false }
);
onRefresh()
setProduct(''), setQuantity(''), setPic('')
} (error)=>{
console.log(JSON.stringify(error))
}
}
);
});
}
};
//delete list
const deleteItem = () => {
console.log('Delete item : ' + selectedId)
var temps = selectedId
// setDeleteModalVisible(false)
// setManageListModalVisible(false)
db.transaction((tx) => {
tx.executeSql(
'DELETE FROM item where prodid = ?',
[temps],
(tx, results) => {
console.log('Data deleted ', JSON.stringify(results));
if (results.rowsAffected > 0) {
Alert.alert(
'Success',
'List deleted successfully.',
[
{
text: 'Ok',
onPress: () => navigation.navigate('ItemScreen'),
},
],
{ cancelable: false }
);
onRefresh()
setProduct('')
}
},(error)=>{
console.log(JSON.stringify(error))
}
);
});
}
const onRefresh = () => {
db.transaction((tx) => {
tx.executeSql(
'SELECT * FROM item',
[],
(tx, results) => {
var temps = [];
for (let i = 0; i < results.rows.length; ++i)
temps.push(results.rows.item(i));
setItems(temps);
if (results.rows.length >=1){
setEmptyList(false);
}else{
setEmptyList(true)
}
console.log('Item: '+ JSON.stringify(temps))
},(error)=>{
console.log(JSON.stringify(error))
}
);
});
};
const emptyMessage = (status) => {
return(
<View
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf:'center',
alignContent:'center',
flex: 1 ,
marginLeft:10,
marginRight:10,
flexDirection:'column'
}}>
<Image
style={{
width:150,
height:150
}}
source={write}
/>
<Text
style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-SemiBold',
color:'gray'
}}>
What do you need to buy?
</Text>
<Text
style={{
fontSize: 20,
textAlign: 'center',
fontFamily:'Poppins-Light',
color:'gray',
marginTop:10
}}>
Tap grey box to add your first item.
</Text>
</View>
);
}
const DeleteListModal = () => {
if(deleteModalVisible){
return(
<Modal
animationType='none'
animationType="none"
transparent={true}
visible={addItemVisible}
onRequestClose={()=> {
setAddItemVisible(!addItemVisible)
visible={deleteModalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setDeleteModalVisible(!deleteModalVisible);
}}>
<View
style={{
......@@ -43,101 +271,43 @@ const ItemScreen = ({navigation}) => {
top:0,
flex:1
}}
onPress ={()=> setAddItemVisible(false)}
onPress={() => setDeleteModalVisible(false)}
/>
<View
style={{
backgroundColor:'white',
width:"80%",
height:300,
justifyContent:'flex-start',
// position:'absolute',
// bottom:0,
borderRadius:20,
}}>
style={
styles.centeredView
}>
<View
style={
styles.deleteModalView
}>
<Text
style={{
fontFamily:'Poppins-SemiBold',
fontSize:20,
color:'black',
alignSelf:'center',
marginTop:20
fontFamily:'Poppins-SemiBold',
marginBottom:20,
}}>
Add item
Delete this shopping list?
</Text>
<View style={{
backgroundColor:'#ededed',
borderRadius:9,
width:275,
height:60,
marginHorizontal:19,
marginTop:15,
justifyContent:'center',
alignContent:'flex-start',
alignItems:'flex-start',
alignSelf:'center',
}}>
<TextInput style={{
fontSize:20,
marginHorizontal:5,
fontFamily:'Poppins-SemiBold',
alignItems:'center',
textAlignVertical:'top',
width:'100%'
}}
placeholder="Add item"
placeholderTextColor="grey"
// onChangeText={(name) => setName(name)}
/>
</View>
<View
<Text
style={{
width:275,
height:60,
backgroundColor:'#ededed',
justifyContent:'center',
alignContent:'center',
alignItems:'center',
alignSelf:'flex-start',
borderRadius:9,
// elevation:7,
marginTop:20,
marginHorizontal:19,
fontSize:18,
color:'black',
fontFamily:'Poppins-Regular'
}}>
<InputSpinner
// value={quantity}
min={0}
max={100}
step={1}
// onChange={(quantity) => setQuantity(quantity)}
onLimitReached={(isMax, msg) => console.log(isMax,msg)}
rounded
// showBorder skin='default'
textColor='black'
fontSize={20}
fontFamily="Poppins-Regular"
colorMin='white'
colorMax='white'
buttonTextColor='dodgerblue'
colorPress="dodgerblue"
color='white'
width={200}
height={50}
/>
</View>
Are you sure?
</Text>
<View
style={{
flexDirection:'row',
margin:25,
marginTop:30,
justifyContent:'space-between',
marginBottom:40,
margin:20,
justifyContent:'flex-start',
}}>
<TouchableOpacity
style={{
marginHorizontal:5
}}
onPress={() => {setConfirmEditModalVisible(true)}}
marginHorizontal:5}}
onPress={() => {setDeleteModalVisible(false),setManageItemModalVisible(false)}}
>
<View
style={{
......@@ -147,7 +317,7 @@ const ItemScreen = ({navigation}) => {
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'
justifyContent:'center',
}}>
<Text
style={{
......@@ -158,16 +328,14 @@ const ItemScreen = ({navigation}) => {
justifyContent:'center',
fontFamily:'Poppins-Medium'
}}>
CANCEL
NO
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:5
}}
// onPress={() => navigation.navigate('ItemScreen')}
// onPress={updateList}
marginHorizontal:5}}
onPress={deleteItem}
>
<View
style={{
......@@ -177,26 +345,27 @@ const ItemScreen = ({navigation}) => {
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center',
}}>
justifyContent:'center'}}
>
<Text
style={{
fontSize:20,
color:'white',
fontFamily:'Poppins-Medium'
}}>
ADD
YES
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</Modal>
)
}
}
const ManageItemModal = () => {
if(manageItemModalVisible){
return(
......@@ -276,7 +445,7 @@ const ItemScreen = ({navigation}) => {
flexDirection:'row',
marginTop:20,
}}
// onPress={()=>setDeleteModalVisible(true)}
onPress={()=>setDeleteModalVisible(true)}
>
<MaterialCommunityIcons
name="delete"
......@@ -302,7 +471,138 @@ const ItemScreen = ({navigation}) => {
)
}
}
const confirmEditModal = () => {
if(confirmEditModalVisible){
return(
<Modal
animationType="none"
transparent={true}
visible={confirmEditModalVisible}
onRequestClose={() => {
// Alert.alert("Modal has been closed.");
setConfirmEditModalVisible(!confirmEditModalVisible);
}}>
<View
style={{
height:'100%',
width:'100%',
backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center',
alignItems:'center'
}}>
<TouchableOpacity
style={{
height:'100%',
width:'100%',
position:'absolute',
top:0,
flex:1
}}
onPress={() => setConfirmEditModalVisible(false)}
/>
<View
style={
styles.centeredView
}>
<View
style={
styles.deleteModalView
}>
<Text
style={{
fontSize:20,
color:'black',
fontFamily:'Poppins-SemiBold',
marginBottom:20
}}>
Cancel this list update?
</Text>
<Text
style={{
fontSize:18,
color:'black',
fontFamily:'Poppins-Regular'
}}>
Are you sure?
</Text>
<View
style={{
flexDirection:'row',
margin:20,
}}>
<TouchableOpacity
style={{
marginHorizontal:5}}
onPress={() => setConfirmEditModalVisible(false)}
>
<View
style={{
backgroundColor:'#c60000',
borderRadius:7,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'
}}>
<Text
style={{
fontSize:20,
color:'white',
alignItems:'center',
alignContent:'center',
justifyContent:'center',
fontFamily:'Poppins-Medium'
}}>
NO
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
marginHorizontal:5}}
onPress={()=>{setConfirmEditModalVisible(false), setManageListModalVisible(false), setEditModalVisible(false)}}
>
<View
style={{
backgroundColor:'#0077eb',
borderRadius:7,
width:100,
height:50,
alignItems:'center',
alignContent:'center',
justifyContent:'center'}}
>
<Text
style={{
fontSize:20,
color:'white',
}}>
YES
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</Modal>
)
}
}
const listItemSeparator = () =>{
return (
<View style={{
// height: 0.1,
// width: '100%',
// backgroundColor: 'white'
}}/>
);
};
const ItemView = (item) => (
<View
style={
styles.container
......@@ -315,11 +615,11 @@ const ItemScreen = ({navigation}) => {
style={
styles.checkContainer
}>
<Ionicons
{/* <Ionicons
name="checkmark"
color="dodgerblue"
size={20}
/>
/> */}
</TouchableOpacity>
<Text
style={[
......@@ -328,7 +628,7 @@ const ItemScreen = ({navigation}) => {
width:'55%'
}
]}>
Sunflower oil
{item.product}
</Text>
<Text
style={[
......@@ -337,7 +637,7 @@ const ItemScreen = ({navigation}) => {
width:'7%',
}
]}>
10
{item.quantity}
</Text>
<TouchableOpacity
style={
......@@ -349,7 +649,7 @@ const ItemScreen = ({navigation}) => {
height:50,
borderRadius:100
}}
source={oil}
source={cat}
/>
</TouchableOpacity>
<TouchableOpacity
......@@ -367,15 +667,80 @@ const ItemScreen = ({navigation}) => {
/>
</TouchableOpacity>
</View>
<TouchableOpacity style={{backgroundColor:'red', width:50, height:50, borderRadius:100}}
// onPress={() => navigation.navigate('AddItemScreen')}
onPress={() => setAddItemVisible(true)}
</View>
)
// const handleSubmit = event => {
// console.log('handleSubmit ran');
// event.preventDefault(); // 👈️ prevent page refresh
></TouchableOpacity>
{addItemModal()}
{ManageItemModal()}
// // 👇️ clear all input values in the form
// setProduct('');
// };
// const submitClear = () => {
// setText([product])
// setProduct(' ')
// }
return(
<SafeAreaView
style={{
flex:1,
width:'100%'
}}>
<View
style={{
flex:1,
backgroundColor:"white",
}}>
{emptyList ? emptyMessage(emptyList):
<FlatList
data={items}
ItemSeparatorComponent={listItemSeparator}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => ItemView(item)}
/>
}
<View style={{
backgroundColor:'#ededed',
flexDirection:'row',
width:'100%',
height:60,
}}>
<TextInput
style={{
fontSize:20,
marginHorizontal:10,
fontFamily:'Poppins-SemiBold',
width:'100%',
}}
placeholder="Add new item"
placeholderTextColor="grey"
onChangeText={(product) => setProduct(product)}
returnKeyType="done"
onSubmitEditing={insertItem}
/>
<TouchableOpacity
style={{
right:60,
top:15
}}
// onPress={()=>{setProduct(product)}}
onPress={insertItem}
>
<AntDesign
name="pluscircle"
color='grey'
size={30}
/>
</TouchableOpacity>
</View>
);
</View>
{ManageItemModal()}
{confirmEditModal()}
{DeleteListModal()}
</SafeAreaView>
);
};
const styles = StyleSheet.create({
......@@ -383,6 +748,12 @@ const styles = StyleSheet.create({
backgroundColor:'white',
flex:1,
},
centeredView:{
flex:1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
itemCard:{
backgroundColor:'white',
width:'100%',
......@@ -420,5 +791,24 @@ const styles = StyleSheet.create({
alignContent:'center',
marginTop:5,
},
deleteModalView:{
position:'absolute',
marginHorizontal:100,
backgroundColor:'white',
borderRadius:20,
padding:25,
width:'80%',
height:200,
// justifyContent:'center',
alignItems:'center',
shadowColor:'#000',
shadowOffset:{
width:0,
height:2
},
shadowOpacity:0.25,
shadowRadius:4,
elevation:5
},
});
export default ItemScreen;
\ No newline at end of file
screens/ListScreen/index.js
View file @ fa600511
import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, SafeAreaView, StyleSheet, Image, FlatList, Modal, Alert, TextInput, PermissionsAndroid, Platform, Button, AsyncStorage} from 'react-native';
import { openDatabase } from 'react-native-sqlite-storage';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import InputSpinner from 'react-native-input-spinner';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import ItemScreen from '../ItemScreen';
import AddItemScreen from '../AddItemScreen';
const write = require('../../images/write.png');
const plusbutton = require('../../images/plusbutton.png');
// const editbutton = require('../../images/editbutton.png');
......@@ -47,25 +42,38 @@ const ListScreen = ({navigation}) => {
});
}, []);
useEffect(() => {
db.transaction(function (txn) {
txn.executeSql(
"SELECT name from sqlite_master WHERE type='table' AND name='product'",
[],
function (tx, res) {
console.log('item: ', res.rows.length);
if (res.rows.length == 0) {
txn.executeSql('DROP TABLE IF EXISTS product', []);
txn.executeSql(
'CREATE TABLE IF NOT EXISTS product(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(100), quantity INT(10), image LONGTEXT)',
[],
);
}
},
);
});
}, []);
// useEffect(() => {
// db.transaction(function (txn) {
// txn.executeSql(
// "SELECT name from sqlite_master WHERE type='table' AND name='item'",
// [],
// function (tx, res) {
// console.log('item: ', res.rows.length);
// if (res.rows.length == 0) {
// txn.executeSql('DROP TABLE IF EXISTS item', []);
// txn.executeSql(
// 'CREATE TABLE IF NOT EXISTS item(id INTEGER PRIMARY KEY AUTOINCREMENT, product VARCHAR(100), quantity INT(10), image LONGTEXT)',
// [],
// );
// }
// },
// );
// });
// }, []);
// const init = async () => {
// const promise = new Promise((resolve, reject) => {
// db.transaction(async (tx) => {
// await tx.executeSql(
// 'CREATE TABLE IF NOT EXISTS list(id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(100));')
// await tx.executeSql(
// 'CREATE TABLE IF NOT EXISTS item(id INTEGER PRIMARY KEY AUTOINCREMENT, product VARCHAR(100), quantity INT(10), image LONGTEXT);')
// resolve();
// })
// })
// return promise
// }
// add into list
......@@ -328,111 +336,6 @@ const listItemView = ( item ) => (
</View>
)
const AddImage = () => {
if(addImageVisible){
return(
<Modal
animationType="none"
transparent={true}
visible={addImageVisible}
onRequestClose={() =>{
Alert.alert("Modal has been closed.");
setAddImageVisible(!addImageVisible);
}}>
<View
style={{
height:'100%',
width:'100%',
backgroundColor:'rgba(0,0,0,.5)',
justifyContent:'center',
alignItems:'center'
}}>
<TouchableOpacity
style={{
height:'100%',
width:'100%',
position:'absolute',
top:0,
flex:1
}}
onPress = {()=>{setAddImageVisible(false)}}>
</TouchableOpacity>
<View
style={styles.centeredView}>
<View
style={styles.centeredView}>
<View
style={styles.addImageView}>
<TouchableOpacity
style={{
justifyContent:'flex-start'
}}
onPress={()=>setAddImageVisible(false)}
>
<MaterialCommunityIcons
name="close-circle"
size={30}
color='white'
/>
</TouchableOpacity>
<View
style={{
alignItems:'center',
marginTop:1
}}>
<Text
style={{
fontSize:20,
color:'black',
fontWeight:'bold',
justifyContent:'center'
}}>
Add image
</Text>
<TouchableOpacity
onPress={() => {openCamera()}}
>
<View
style={{
marginTop:25
}}>
<Text
style={{
fontSize:15,
color:'black',
}}>
Take photo
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => openGallery()}
>
<View
style={{
marginTop:15
}}>
<Text
style={{
fontSize:15,
color:'black'
}}>
Add from gallery
</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
</Modal>
)
}
}
const ManageListModal = () => {
if(manageListModalVisible){
return(
......@@ -621,7 +524,8 @@ const listItemView = ( item ) => (
placeholder="New List"
placeholderTextColor="grey"
onChangeText={(name) => setName(name)}
returnKeyType="done"
onSubmitEditing={insertList}
/>
</View>
</View>
......@@ -1155,7 +1059,6 @@ const confirmEditModal = () => {
</View>
</TouchableOpacity>
</View>
{AddImage()}
{AddListModal()}
{EditListModal()}
{DeleteListModal()}
......
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