daily pastebin goal
44%
SHARE
TWEET

Untitled

a guest Aug 19th, 2018 55 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import './shop.css'
  3.  
  4. // class Button extends React.Component {
  5. //     constructor() {
  6. //         super();
  7. //         this.state = {
  8. //             value: null,
  9. //         };
  10. //     }
  11. //     render() {
  12. //         return (
  13. //             <button className="button"
  14. //                 onClick={() => this.props.Clic()}>
  15. //                 {this.props.value}
  16.  
  17. //             </button>
  18.  
  19. //         );
  20.  
  21.  
  22. //     }
  23. // }
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33. class Books_Store extends React.Component {
  34.     constructor() {
  35.         super();
  36.         this.state = {
  37.             names: ['שס', "rishon", "aharon"],
  38.          //   Books: [[  'kidushin'  , "ctobot", "brahot"], ["rashi", "tosfot", "ritva"], ["rabi", "rabi2", "rabi3"]],
  39.           Books:[
  40.                {name:'kidushin',autor:'dfdgf',cotigoru:'0',stok:6,price:50,id:123},
  41.               {name:"ctobot",autor:'dfdgf',cotigoru:'0',stok:6,price:40,id:124},
  42.               {name:"ramban",autor:'rashi',cotigoru:'1',stok:5,price:30,id:125},
  43.               {name:"rashi",autor:'rashi',cotigoru:'1',stok:5,price:35,id:126},
  44.               {name:"rambam",autor:'RaMbam',cotigoru:'1',stok:5,price:45,id:127},
  45.               {name:"rabi  Akiva",autor:'AGER',cotigoru:'2',stok:7,price:55,id:128},
  46.               {name:"Igrot  Moshe",autor:' rav  Moshe Fanshtein',cotigoru:'2',stok:7,price:59,id:129}
  47.  
  48.           ],
  49.        
  50.        
  51.             current: [],
  52.             ammont:0,
  53.             id:130,
  54.             page2:false
  55.  
  56.         }
  57.         this.showTask = this.showTask.bind(this);
  58.         this.showTO = this.showTO.bind(this);
  59.         this.pay = this.pay.bind(this);
  60.         this.New_books=this.New_books.bind(this);
  61.         this.New_page=this.New_page.bind(this)
  62.         this.Page1=this.Page1.bind(this)
  63.     }
  64.      
  65.    
  66.     showTask(index) {
  67.         console.log(index);
  68.        
  69.         const book= []
  70.         // const d = this.state.Books[index]
  71.         for ( let i=0;i<this.state.Books.length;i++)
  72.         { if(this.state.Books[i].cotigoru==index)
  73.             { book.push(this.state.Books[i])}
  74.        
  75.         }
  76. console.log(book);
  77.  
  78.  
  79.         this.setState({ current: book })
  80.     }
  81.  
  82.    
  83.        pay(){
  84.          
  85.         this.setState({ ammont:0 })
  86.        }
  87.      
  88.  
  89.  
  90. New_books(book)
  91.  
  92. {  
  93.      book.id=this.state.id
  94.    
  95.     const Books2=this.state.Books;
  96.    Books2.push(book)
  97.  
  98.    this.setState({ Books: Books2 })
  99.    this.setState({ id:this.state.id+1})
  100.    console.log('books11',book);
  101. console.log('books2',Books2);
  102. console.log('books1',this.state.Books);
  103. }
  104.     showTO(index){
  105.         const Books2=this.state.Books;
  106.        
  107.  
  108.    
  109.          const a=this.state.current[index].id
  110.          let b;
  111.          let price
  112.        
  113.  
  114.             for ( let i=0;i<Books2.length;i++)
  115.              
  116.                            // ammont=ammont+price
  117.             { if(Books2[i].id==a)
  118.                 {  
  119.                        price=Books2[i].price
  120.                
  121.  
  122.                         this.setState({ ammont: this.state.ammont+price })
  123.                      b=Books2[i].stok-1;
  124.                     if(b>=0){
  125.                    (Books2[i].stok=b)}
  126.                 console.log(Books2[i].stok);
  127.                
  128.                 console.log(this.state.Books[i].stok);
  129.             }
  130.  
  131.             }
  132.            
  133.         this.setState({ Books: Books2 })
  134.        
  135.     }
  136.  
  137.     New_page(){
  138.         this.setState({page2 : true })
  139.     }
  140.  
  141.     Page1(){
  142.         this.setState({page2 : false })
  143.     }
  144.  
  145.     render() {
  146.  
  147.         console.log('this.state.current=', this.state.current)
  148.  
  149.  
  150.         return (
  151.             <div className="center">
  152.                 < Sidebar names={this.state.names} clik={this.showTask} amount={this.state.ammont} pay={this.pay}  new_bookss={this.New_page}/>,
  153.             < Windows window={this.state.current} cliks={this. showTO} trues={this.state. page2}new_books={this. New_books}page1={this.Page1}/>
  154.             </div>
  155.         )
  156.  
  157.     }
  158.  
  159. }
  160.  
  161.  
  162.    const wind2=""
  163.  
  164.    
  165.  
  166. class Windows extends React.Component {
  167.     constructor(props) {
  168.         super(props);
  169.  
  170.     };
  171.    
  172.     return
  173.  
  174.     creatWins() {
  175.  
  176.         console.log(this.props)
  177.         const wind = this.props.window.map((elm, index) => {
  178.             return <div className="screen" key={index}>{"name is "+elm.name+" autor  is "+elm.autor +" in stok is "+elm.stok }
  179.  
  180.                  <button className="button_sm"  key={index} onClick={() => this.props.cliks(index)}>buy</button></div>
  181.         })
  182.        
  183.  
  184.  
  185.         return wind  
  186.      
  187.                              
  188.     }
  189.  
  190.  
  191.     CreatBooks(){
  192.        
  193.         const  book={}
  194.        
  195.      
  196.            function Nbooks(obj){
  197.               for(const key  in obj){
  198.          book[key]=obj[key] }
  199.      
  200.       console.log(book);
  201.            
  202.       }
  203.      
  204.      
  205.               return (
  206.                 <div>
  207.               <input type="text" onChange={function (event) {Nbooks({name:event.target.value})}} placeholder='name'/>
  208.               <input type="text" onChange={function (event) {Nbooks({autor:event.target.value})}} placeholder='autor'/>
  209.               <input type="number" onChange={function (event) {Nbooks({stok:parseInt(event.target.value)})}} placeholder='how   mush '/>
  210.               <input type="number" onChange={function (event) {Nbooks({price:parseInt(event.target.value)})}} placeholder='price'/>
  211.               <select  onChange={function (event) {Nbooks({cotigoru:event.target.value})}}>
  212.               <option value="">what category</option>
  213.                 <option value="0">שס</option>
  214.                   <option value="1">rishon</option>
  215.                   <option value="2">aharon</option>
  216.                
  217.                   </select>
  218.                   <button className="button"  onClick={() => this.props.new_books(book)+this.props.page1()}>save</button>
  219.               </div>
  220.      
  221.          
  222.      
  223.               )
  224.           }
  225.  
  226.  
  227.  
  228.  
  229.     render() { if (!this.props.trues){
  230.  
  231.         return (
  232.             <div className="cen_screen">
  233.            
  234.         <div className="cen_row">
  235.  
  236.         {this.creatWins()}
  237.           </div>
  238.         <div className="cen_row">
  239.             {this.wind2}
  240.            
  241.          </div>
  242.        
  243.     </div>
  244.    
  245.            
  246.            
  247.         )
  248.     }else {
  249.  
  250.         return (
  251.             <div className="cen_screen">
  252.             <div className="cen_row">
  253.         daf 2
  254.       { this.CreatBooks()}
  255.             </div>
  256.        
  257.        
  258.     </div>
  259.    
  260.            
  261.            
  262.         )
  263.  
  264.  
  265.     }
  266.     }
  267.  
  268.  
  269. }
  270.  
  271.  
  272.  
  273.  
  274.  
  275.  
  276.  
  277.  
  278. class Sidebar extends React.Component {
  279.     constructor(props) {
  280.         super(props);
  281.  
  282.     };
  283.  
  284.     Pay (){
  285.         return<button className='pay' onClick={()=> this.props.pay()}>Pay</button>
  286.     }
  287.  
  288.    
  289.  
  290.     handleChane(event) {
  291. console.log(event);
  292.  
  293.        this.B=event.target.value
  294.        console.log(this.B);
  295.       }
  296.  
  297.     Bild() {
  298.         const list = this.props.names.map((elm, index) => {
  299.  
  300.             return <button className="button" key={index} onClick={() => this.props.clik(index)}> {elm} </button>
  301.         })
  302.         return list
  303.  
  304.     }
  305.  
  306.     CreatBooks1(){
  307. return <button className="button"  onClick={() => this.props.new_bookss()}>New book </button>
  308.     }
  309.  
  310.    
  311.  
  312.    
  313.  
  314.  
  315.     render() {
  316.        
  317.         return (
  318.             <div className="bar">
  319.                
  320.                 {this.Bild()}
  321.  
  322.                 < div className="amount">amount {this.props.amount} ש"ח
  323.                 {this.Pay()}
  324.                  
  325.          
  326.                 </div>
  327.                
  328.              
  329.                 {this.CreatBooks1()}
  330.        
  331.        
  332.             {/* <input type="text" value={this.a}  onChange={this.handleChane}/> */}
  333.  
  334.  
  335.        
  336.          
  337.      
  338.          
  339.             </div>
  340.         )
  341.     }
  342.  
  343. }
  344.  
  345. export default Books_Store;
  346.  
  347.  
  348.  
  349. //scc
  350.  
  351.  
  352.  
  353.  
  354. .center{display: flex}
  355. .bar {
  356.     flex:1;
  357.     display:block;
  358.     height: 750px;
  359.     border: 1px red solid
  360. }
  361. .cen_screen{
  362.    
  363.     flex: 9;
  364.     margin: 20px;
  365. }
  366. .screen{
  367.     flex:2;
  368.     height:100px;
  369.     border: 1px red solid;
  370.     margin: 20px;
  371. }
  372.    
  373.  
  374.  
  375. .cen_row{
  376.     display: flex;
  377.     flex: 9;
  378.     margin: 20px;
  379. }
  380.  
  381. .button{
  382.   margin: 10px;
  383.     width: 150px;
  384.     height: 70px;
  385. }
  386. .button_sm{
  387.     width: 75px;
  388.     height: 30px;
  389.     margin: 45px;
  390.     border: 1px red solid
  391. }
  392.  
  393. .amount{
  394.     margin: 10px;
  395.     width: 150px;
  396.     height: 70px;
  397.     border: 1px blue solid
  398. }
  399.  
  400. .pay {
  401.     width: 75px;
  402.     height: 35px;
  403. }
  404.  
  405. .page2{
  406.     display:block
  407. }
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