SHARE
TWEET

nuevo_articulo.js

a guest Mar 26th, 2020 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { StyleSheet, Text, View, Button, Image, TextInput, ScrollView, Alert } from 'react-native';
  3. import {List, ListItem, Col, Row} from 'native-base'
  4. import { FontAwesome, AntDesign, Ionicons, MaterialIcons } from '@expo/vector-icons';
  5. import * as SQLite from 'expo-sqlite';
  6.  
  7. import * as ImagePicker from 'expo-image-picker';
  8. import * as Permissions from 'expo-permissions';
  9.  
  10.  
  11. const db = SQLite.openDatabase('aalmarketapp.db');
  12. export default class AppMarket extends Component {
  13.   constructor(props) {
  14.     super(props);
  15.     this.state = {
  16.       image_front: 'https://i.ibb.co/1MB9qpV/camera-front.png',
  17.       image_back: 'https://i.ibb.co/1LfQKdX/camera-back.png',
  18.       cod_producto: '',
  19.       descripcion: '',
  20.       detalles : '',
  21.       precio: '',
  22.       otros: '',
  23.       card_front: '',
  24.       card_back: ''
  25.     };
  26.   }
  27.  
  28.   componentDidMount(){
  29.     db.transaction(tx => {
  30.       tx.executeSql('CREATE TABLE IF NOT EXISTS productos(productos_id INTEGER PRIMARY KEY AUTOINCREMENT, cod INT(20), descripcion VARCHAR(100), detalles VARCHAR(255), precio VARCHAR(10), otros VARCHAR(255), card_front BLOB, card_back BLOB)',[]);
  31.     });  
  32.  
  33.   }
  34.  
  35.  
  36.   _pickImageGaleryFront = async () => {
  37.     let result = await ImagePicker.launchImageLibraryAsync({
  38.       mediaTypes: ImagePicker.MediaTypeOptions.All,
  39.       allowsEditing: true,
  40.       aspect: [4, 3],
  41.       quality: 0.5,
  42.       base64: true
  43.     });
  44.  
  45.     if (!result.cancelled) {
  46.      
  47.       this.setState({image_front : result.uri, card_front: result.base64});
  48.     }
  49.  
  50.   }
  51.  
  52.   _pickImageCameraFront = async () => {
  53.     let result = await ImagePicker.launchCameraAsync({
  54.       mediaTypes: ImagePicker.MediaTypeOptions.All,
  55.       allowsEditing: true,
  56.       aspect: [4, 3],
  57.       quality: 0.5,
  58.       base64: true
  59.     });
  60.  
  61.     if (!result.cancelled) {
  62.       this.setState({image_front : result.uri, card_front: result.base64});
  63.     }
  64.   }
  65.  
  66.   _pickImageGaleryBack = async () => {
  67.     let result = await ImagePicker.launchImageLibraryAsync({
  68.       mediaTypes: ImagePicker.MediaTypeOptions.All,
  69.       allowsEditing: true,
  70.       aspect: [4, 3],
  71.       quality: 0.5,
  72.       base64: true
  73.     });
  74.  
  75.     if (!result.cancelled) {
  76.      
  77.       this.setState({image_back : result.uri, card_back: result.base64});
  78.     }
  79.  
  80.   }
  81.  
  82.   _pickImageCameraBack = async () => {
  83.     let result = await ImagePicker.launchCameraAsync({
  84.       mediaTypes: ImagePicker.MediaTypeOptions.All,
  85.       allowsEditing: true,
  86.       aspect: [4, 3],
  87.       quality: 0.5,
  88.       base64: true
  89.     });
  90.  
  91.     if (!result.cancelled) {
  92.       this.setState({image_back : result.uri, card_back: result.base64});
  93.     }
  94.   }
  95.  
  96.   GuardarForm(){
  97.     const { cod_producto } = this.state;
  98.     const { descripcion } = this.state;
  99.     const { detalles } = this.state;
  100.     const { precio } = this.state;
  101.     const { otros } = this.state;
  102.     const { card_front } = this.state;
  103.     const { card_back } = this.state;
  104.    
  105.     if(cod_producto != "" && descripcion != ""){
  106.       this.insert_producto(cod_producto,descripcion,detalles,precio,otros,card_front,card_back)
  107.     }else{
  108.       Alert.alert('Error','No se pudo guardar el registro');
  109.     }
  110.  
  111.   }
  112.  
  113.   insert_producto(cod,descripcion,detalles,precio,otros,card_front,card_back){
  114.  
  115.     var query = "INSERT INTO productos (productos_id, cod, descripcion, detalles, precio, otros, card_front, card_back) VALUES (null,?,?,?,?,?,?,?)";
  116.     var params = [cod,descripcion,detalles,precio,otros,card_front,card_back];
  117.     db.transaction((tx) => {
  118.       tx.executeSql(query,params, (tx,results) => {
  119.         console.log(results);
  120.         Alert.alert("Exito","Registro almacenado");
  121.       },function(tx,err){
  122.         Alert.alert("Error","Registro no guardado");
  123.         return;
  124.       });
  125.     });
  126.  
  127.   }
  128.  
  129.   render() {
  130.  
  131.   return (
  132.   <ScrollView>
  133.      
  134.  
  135.    
  136.     <View style={styles.body}>
  137.       <TextInput value={this.state.cod_producto} onChangeText={(val) => this.setState({cod_producto: val})} placeholder="Código de Producto" placeholderTextColor="black" maxLength={12} style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, width: '80%'}}></TextInput>
  138.       <TextInput value={this.state.descripcion} onChangeText={(val) => this.setState({descripcion: val})} placeholder="Descripción de producto" placeholderTextColor="black" style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, width: '80%'}}></TextInput>
  139.       <TextInput value={this.state.detalles} onChangeText={(val) => this.setState({detalles: val})} placeholder="Detalles" placeholderTextColor="black" style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, height: 130, width: '80%'}}></TextInput>
  140.       <TextInput value={this.state.precio} onChangeText={(val) => this.setState({precio: val})} placeholder="Precio" placeholderTextColor="black" maxLength={12} style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, width: '80%'}}></TextInput>
  141.       <TextInput value={this.state.otros} onChangeText={(val) => this.setState({otros: val})} placeholder="Otros" placeholderTextColor="black" maxLength={12} style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, height: 110, width: '80%'}}></TextInput>
  142.     </View>
  143.     <View style={styles.card}>
  144.       <Ionicons name="md-photos" color={'green'} size={35} onPress={this._pickImageGaleryFront}></Ionicons>
  145.       <MaterialIcons name="add-a-photo" color={'blue'} size={35} onPress={this._pickImageCameraFront}></MaterialIcons>
  146.       <Image source={{ uri: this.state.image_front }} style={styles.logo} ></Image>
  147.      
  148.       <Ionicons name="md-photos" color={'green'} size={35} onPress={this._pickImageGaleryBack}></Ionicons>
  149.       <MaterialIcons name="add-a-photo" color={'blue'} size={35} onPress={this._pickImageCameraBack}></MaterialIcons>
  150.       <Image source={{ uri: this.state.image_back }} style={styles.logo} ></Image>
  151.     </View>
  152.     <View style={styles.footer_form}>
  153.         <Button rounded success type="outline" title="Guardar Registro" onPress={() => {this.GuardarForm()}}/>
  154.     </View>
  155.   </ScrollView>  
  156.   );
  157. }
  158.  
  159. }
  160.  
  161. const styles = StyleSheet.create({
  162.     card: {
  163.       flex: 1,
  164.       backgroundColor: '#fff',
  165.       alignItems: 'center',
  166.       justifyContent: 'center',
  167.     },container : {
  168.       flex : 1,
  169.       flexDirection : 'column',
  170.       backgroundColor : 'green'
  171.     },
  172.     header : {
  173.       flex: 0.3,
  174.       flexDirection : 'row',
  175.       marginTop : 40
  176.     },
  177.     headerLeft : {
  178.       flex: 1,
  179.      
  180.      
  181.     },
  182.     headerRight : {
  183.       flex : 1,
  184.      
  185.     },
  186.     footer_form : {
  187.       flex: 1,
  188.       flexDirection : 'row',
  189.       marginTop : 25,
  190.       alignItems: 'center',
  191.       justifyContent: 'center',
  192.     },
  193.     body :{
  194.       marginTop : 25,
  195.       flex: 1,
  196.       alignItems : 'center',
  197.       justifyContent : 'center'
  198.     },
  199.     card :{
  200.       marginTop : 25,
  201.       flex: 1,
  202.       alignItems : 'center',
  203.       justifyContent : 'center'
  204.     },
  205.     logo : {
  206.       flex: 1,
  207.       flexDirection : 'column',
  208.       width : 100,
  209.       height : 100,
  210.       borderWidth : 1,
  211.       borderColor: 'red',
  212.       padding : 5,
  213.       marginTop : 10,
  214.       resizeMode : 'contain'
  215.     },
  216.   });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top