Ei kuvausta

ProductInput.js 9.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. import React, { Component } from 'react';
  2. import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text, ScrollView, Platform,Picker,SafeAreaView} from 'react-native';
  3. import DatePicker from 'react-native-datepicker';
  4. import RNPickerSelect, { defaultStyles } from 'react-native-picker-select';
  5. import Constants from 'expo-constants';
  6. export default class Product extends Component {
  7. constructor(props) {
  8. super(props)
  9. this.state = {
  10. uid:this.props.navigation.getParam('uid'),
  11. lid:this.props.navigation.getParam('lid'),
  12. name_p: '',
  13. bought_date:'',
  14. expiration_date:'',
  15. iso_date:'',
  16. i:'',
  17. typ:'',
  18. quantity:'',
  19. notes:'',
  20. renew:'',
  21. picked:'no'
  22. }
  23. }
  24. insertList_Function = () => {
  25. this.setState({ picked: "yes" })
  26. fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_p.php', {
  27. method: 'POST',
  28. headers: {
  29. 'Accept': 'application/json',
  30. 'Content-Type': 'application/json',
  31. },
  32. body: JSON.stringify({
  33. name_p: this.state.name_p,
  34. lid: this.state.lid,
  35. bought_date:this.state.bought_date,
  36. expiration_date:this.state.expiration_date,
  37. type:this.state.typ,
  38. quantity:this.state.quantity,
  39. renew:this.state.renew,
  40. notes:this.state.notes,
  41. })
  42. }).then((response) => response.json())
  43. .then((responseJson) => {
  44. // Showing response message coming from server after inserting records.
  45. Alert.alert("Status",responseJson, [
  46. {
  47. text: 'Cancel',
  48. style: 'cancel'
  49. },
  50. { text: 'OK', onPress:() => this.props.navigation.navigate('Products') }
  51. ],
  52. { cancelable: false }
  53. );
  54. //navigation.navigate('Landing');
  55. });
  56. }
  57. setBought=(data)=>{
  58. this.setState({bought_date:data});
  59. this.setExpiration;
  60. }
  61. setType=(itemValue)=>{
  62. this.setExpiration;
  63. }
  64. setExpiration=()=>{
  65. if(this.state.typ!=='' && this.state.bought_date!=='' ){
  66. const e_date=new Date(this.state.bought_date);
  67. //this.setState({e_date: new Date(this.state.bought_date)});
  68. if(this.state.typ==='fruits'){
  69. e_date.setDate(e_date.getDate() + 5);
  70. }
  71. else if(this.state.typ==='eggs'){
  72. e_date.setDate(e_date.getDate() + 28);
  73. }
  74. else if(this.state.typ==='meats'){
  75. e_date.setDate(e_date.getDate() + 14);
  76. }
  77. else if(this.state.typ==='salads'){
  78. e_date.setDate(e_date.getDate() + 3);
  79. }
  80. else if(this.state.typ==='poultry'){
  81. e_date.setDate(e_date.getDate() + 2);
  82. }
  83. else if(this.state.typ==='soups'){
  84. e_date.setDate(e_date.getDate() + 3);
  85. }
  86. else if(this.state.typ==='scr'){
  87. e_date.setDate(e_date.getDate() + 4);
  88. }
  89. else if(this.state.typ==='bacon'){
  90. e_date.setDate(e_date.getDate() + 7);
  91. }
  92. else if(this.state.typ==='sausage'){
  93. e_date.setDate(e_date.getDate() + 2);
  94. }
  95. else if(this.state.typ==='gmeat'){
  96. e_date.setDate(e_date.getDate() + 2);
  97. }
  98. else if(this.state.typ==='pizza'){
  99. e_date.setDate(e_date.getDate() + 4);
  100. }
  101. this.setState({expiration_date: e_date.toISOString().slice(0,10)});
  102. this.setState({ iso_date: e_date.toISOString().slice(0,10)});
  103. }
  104. }
  105. render() {
  106. return (
  107. <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
  108. <View style={styles.MainContainer}>
  109. <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>Products Form</Text>
  110. <TextInput
  111. placeholder="Product Name"
  112. onChangeText={data => this.setState({ name_p: data })}
  113. underlineColorAndroid='transparent'
  114. style={styles.TextInputStyleClass}
  115. />
  116. <RNPickerSelect
  117. placeholder={{label: 'Select type of food to refrigerate',color: 'gray',}}
  118. items={ [{label: 'Fruits',value: 'fruits'}, {label: 'Unopened Luncheon Meat',value: 'meats'},{label: 'Eggs',value: 'eggs'},{label: 'Salad',value: 'salads'},{label: 'Fresh Poultry',value: 'poultry'},{label: 'Soups',value: 'soups'},{label: 'Steaks, Chops or Roasts',value: 'scr'},{label: 'Bacon',value: 'bacon'},{label: 'Sausage',value: 'sausage'},{label: 'Ground Meat(Hamburguers)',value: 'gmeat'},{label: 'Pizza',value: 'pizza'}]}
  119. onValueChange={(itemValue, itemIndex) => {this.setState({typ:itemValue},()=>{ this.setExpiration();});}}
  120. style={pickerSelectStyles}
  121. useNativeAndroidPickerStyle={false}
  122. />
  123. <DatePicker
  124. style={styles.TextInputStyleClass}
  125. mode="date" // The enum of date, datetime and time
  126. placeholder="Bought"
  127. format="YYYY-MM-DD"
  128. date={this.state.bought_date}
  129. confirmBtnText="Confirm"
  130. cancelBtnText="Cancel"
  131. customStyles={{
  132. dateIcon: {
  133. position: 'absolute',
  134. left: 2,
  135. top: 3,
  136. marginLeft: 0,
  137. },
  138. dateInput: {
  139. marginLeft: 0,
  140. },
  141. }}
  142. //onDateChange={data => this.setBought(data)}
  143. onDateChange={data => {this.setState({bought_date:data},()=>{ this.setExpiration();});}}
  144. />
  145. <Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginBottom: 10 }}> Expected expiration date {this.state.iso_date} </Text>
  146. <Text style={{ fontSize: 10, color: "#3414B3", textAlign: 'center', marginBottom: 10 }}>Add date here if you prefer to add your own expiration date</Text>
  147. <DatePicker
  148. style={styles.datestyling}
  149. mode="date" // The enum of date, datetime and time
  150. date={this.state.expiration_date}
  151. placeholder="Expiration"
  152. format="YYYY-MM-DD"
  153. confirmBtnText="Confirm"
  154. cancelBtnText="Cancel"
  155. customStyles={{
  156. dateIcon: {
  157. position: 'absolute',
  158. left: 2,
  159. top: 3,
  160. marginLeft: 0,
  161. },
  162. dateInput: {
  163. marginLeft: 0,
  164. },
  165. }}
  166. onDateChange={data => this.setState({expiration_date:data})}
  167. />
  168. <TextInput
  169. placeholder="Quantity"
  170. style={styles.TextInputStyleClass}
  171. keyboardType = 'number-pad'
  172. onChangeText = {(text)=> this.setState({quantity: text})}
  173. value = {this.state.quantity}
  174. />
  175. <TextInput
  176. placeholder="Notes"
  177. onChangeText={data => this.setState({ notes: data })}
  178. underlineColorAndroid='transparent'
  179. style={styles.TextInputStyleClass}
  180. />
  181. <RNPickerSelect
  182. placeholder={{label: 'Select to renew or not',color: '#9EA0A4',}}
  183. items={ [{label: 'Renew',value: '1'}, {label: 'Do not Renew',value: '2'}]}
  184. selectedValue={this.state.renew}
  185. onValueChange={(itemValue, itemIndex) =>this.setState({renew: itemValue})}
  186. style={pickerSelectStyles}
  187. useNativeAndroidPickerStyle={false}
  188. />
  189. <TouchableOpacity style={styles.button} onPress={this.insertList_Function} >
  190. <Text style={styles.text}>+</Text>
  191. </TouchableOpacity>
  192. <Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginTop: 20, marginBottom: 15 }}>Start adding your products </Text>
  193. </View>
  194. </ScrollView>
  195. );
  196. }
  197. }
  198. const styles = StyleSheet.create({
  199. MainContainer: {
  200. marginTop: Constants.statusBarHeight,
  201. justifyContent: 'center',
  202. alignItems: 'center',
  203. flex: 1,
  204. margin: 10
  205. },
  206. TextInputStyleClass: {
  207. color: 'gray',
  208. textAlign: 'center',
  209. marginBottom: 7,
  210. height: 40,
  211. width: '80%',
  212. borderWidth: 1,
  213. borderColor: '#3414B3'
  214. },
  215. datestyling: {
  216. textAlign: 'center',
  217. color: 'gray',
  218. marginBottom: 7,
  219. height: 40,
  220. width: '80%',
  221. borderWidth: 1,
  222. borderColor: '#3414B3'
  223. },
  224. button: {
  225. height:50,
  226. width: 50,
  227. paddingTop: 2,
  228. paddingBottom: 2,
  229. backgroundColor: '#3414B3',
  230. borderRadius: 100,
  231. marginTop: 20,
  232. alignItems: 'center'
  233. },
  234. text: {
  235. color: '#fff',
  236. fontSize: 30,
  237. textAlign: 'center',
  238. padding: 0
  239. },
  240. }
  241. );
  242. const pickerSelectStyles = StyleSheet.create({
  243. inputIOS: {
  244. textAlign: 'center',
  245. marginLeft:35,
  246. borderWidth: 1,
  247. fontSize: 16,
  248. borderColor: '#3414B3',
  249. marginBottom: 7,
  250. height: 40,
  251. width: '80%',
  252. color: 'gray'
  253. },
  254. inputAndroid: {
  255. textAlign: "center",
  256. borderWidth: 1,
  257. fontSize: 16,
  258. borderColor: '#3414B3',
  259. marginBottom: 7,
  260. height: 40,
  261. width: 270,
  262. color: 'gray'
  263. },
  264. inputWeb: {
  265. color: 'gray',
  266. alignItems: 'center',
  267. fontSize: 16,
  268. textAlign: 'center',
  269. marginBottom: 7,
  270. height: 40,
  271. width: '80%',
  272. borderWidth: 1,
  273. borderColor: '#3414B3',
  274. }
  275. });