daily pastebin goal
95%
SHARE
TWEET

Untitled

a guest Dec 9th, 2018 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from "react";
  2. import {withRouter} from "react-router";
  3. import {PageHeader, Row, Col, Pager, Table, Modal, Button} from "react-bootstrap";
  4. import {getTocken, isLogged} from "../func/LoginTools.jsx";
  5.  
  6. let statemap = {0: "zapłacono", 1: "obsłużono"};
  7.  
  8. class OrderDetails extends Component {
  9.  
  10.   constructor(props) {
  11.     super(props);
  12.     console.log("dupa");
  13.     if (!isLogged())
  14.       window.history.pushState("", "", "/nli/login"); // TODO not good
  15.     this.state = {orderDetails: {state: "loading..."}};
  16.   }
  17.  
  18.   getDetails = () => {
  19.     fetch("/api/orders/details", {
  20.       method: "POST",
  21.       headers: {
  22.         "Accept": "application/json",
  23.         "Content-Type": "application/json",
  24.       },
  25.       body: JSON.stringify({
  26.         tocken: getTocken(),
  27.         id: this.props.currentId,
  28.       })
  29.     }).then((response) => response.json()).then((response) => {
  30.       console.log(response);
  31.       this.setState({orderDetails: response.details});
  32.     });
  33.   }
  34.  
  35.   componentDidMount() {
  36.     if (this.props.details) {
  37.       this.initDataUpdater = setTimeout(this.getDetails());
  38.       this.dataUpdater = setInterval(this.getDetails, 2000);
  39.     }
  40.   }
  41.  
  42.   componentWillUnmount() {
  43.     if (this.initDataUpdater)
  44.       clearTimeout(this.initDataUpdater);
  45.     if (this.dataUpdater)
  46.       clearInterval(this.dataUpdater);
  47.   }
  48.  
  49.   componentDidUpdate() {
  50.     if (this.props.details && !this.dataUpdater) {
  51.       this.initDataUpdater = setTimeout(this.getDetails());
  52.       this.dataUpdater = setInterval(this.getDetails, 2000);
  53.     } else if (!this.props.details) {
  54.       if (this.initDataUpdater)
  55.         clearTimeout(this.initDataUpdater);
  56.       if (this.dataUpdater)
  57.         clearInterval(this.dataUpdater);
  58.     }
  59.   }
  60.  
  61.  
  62.   render() {
  63.     return (
  64.       <div>
  65.         <Modal show={this.props.details} onHide={this.props.hide}>
  66.           <Modal.Header closeButton>
  67.             <Modal.Title>Szczegóły zamówienia</Modal.Title>
  68.           </Modal.Header>
  69.           <Modal.Body>
  70.             Dane:
  71.             <ul className="tableLeft">
  72.               <li>Nr: {this.props.currentId}</li>
  73.               <li>Płatność: 100zł</li>
  74.               <li>Stan Płatności: Zrealizowano</li>
  75.               <li>Stolik: 5</li>
  76.               <li>Stan: {this.state.orderDetails.state}</li>
  77.               <li>Kwota: 100zł</li>
  78.             </ul>
  79.             Dania:
  80.             <ul className="tableLeft">
  81.               <li className="link blue">Zupa ogórkowa</li>
  82.               <li className="link blue">Zupa pomidorowa</li>
  83.             </ul>
  84.             Przypisani pracownicy:
  85.             <ul className="tableLeft">
  86.               <li className="link blue">Joanna Kowalsa</li>
  87.               <li className="link blue">Jan Prusak</li>
  88.             </ul>
  89.             Uwagi:
  90.             <ul className="tableLeft">
  91.               <li><span>brak</span></li>
  92.             </ul>
  93.             Klienci
  94.             <ul className="tableLeft">
  95.               <li className="link blue">Jarosław</li>
  96.             </ul>
  97.           </Modal.Body>
  98.           <Modal.Footer>
  99.             <Button bsStyle="success" onClick={this.props.hide}>Zrealizowano</Button>
  100.             <Button bsStyle="primary" onClick={this.props.hide}>Płatność</Button>
  101.             <Button bsStyle="warning" onClick={this.props.hide}>Zmień zamówienie</Button>
  102.           </Modal.Footer>
  103.         </Modal>
  104.       </div>
  105.     );
  106.   }
  107. }
  108.  
  109. class OrderLine extends Component {
  110.  
  111.   render() {
  112.     return (
  113.       <tr onClick={() => this.props.detailsFn(this.props.data.id)} className="link">
  114.         <td>{this.props.data.id}</td>
  115.         <td>{this.props.data.paid_money} / {this.props.data.bill_money}</td>
  116.         <td>{this.props.data.table}</td>
  117.         <td>{statemap[this.props.data.state]}</td>
  118.         <td>{this.props.data.order_date}</td>
  119.         <td>{this.props.data.finish_date}</td>
  120.       </tr>
  121.     );
  122.   }
  123. }
  124.  
  125. class Orders extends Component {
  126.   constructor(props) {
  127.     super(props);
  128.     if (!isLogged())
  129.       window.history.pushState("", "", "/nli/login"); // TODO not good
  130.     this.state = {details: false, currentId: null, orderAdd: false};
  131.   }
  132.  
  133.   componentDidMount = () => {
  134.     this.initDataUpdater = setTimeout(this.getOrders);
  135.     this.dataUpdater = setInterval(this.getOrders, 2000);
  136.   }
  137.  
  138.   componentWillUnmount() {
  139.     clearTimeout(this.initDataUpdater);
  140.     clearInterval(this.dataUpdater);
  141.   }
  142.  
  143.   showDetails = (id) => {
  144.     this.setState({details: true, currentId: id});
  145.   }
  146.  
  147.   hideDetails = () => {
  148.     this.setState({details: false});
  149.   }
  150.  
  151.   getOrders = () => { // TODO DRY
  152.     fetch("/api/orders/ls", {
  153.       method: "POST",
  154.       headers: {
  155.         "Accept": "application/json",
  156.         "Content-Type": "application/json",
  157.       },
  158.       body: JSON.stringify({
  159.         tocken: getTocken(),
  160.         start: this.state.start,
  161.         end: this.state.end,
  162.       })
  163.     }).then((response) => response.json()).then((response) => {
  164.       console.log("disp");
  165.       console.log(response.orders);
  166.       this.setState({orders: response.orders});
  167.     });
  168.   }
  169.  
  170.   ordersList = (orders) => { // TODO DRY
  171.     if (orders == undefined)
  172.       return <tr>
  173.         <td>loading...</td>
  174.       </tr>
  175.     let norders = orders.map((el) => {
  176.       return (
  177.         <OrderLine key={el.id} data={el}
  178.                    detailsFn={this.showDetails}/>
  179.       )
  180.     })
  181.     return norders;
  182.   }
  183.   orderHide = () => {
  184.     this.setState({orderAdd: false});
  185.   }
  186.  
  187.   render() {
  188.     console.log(this.state.orders);
  189.     console.log(this.state.details);
  190.     console.log(this.state.currentId);
  191.     return (
  192.       <div>
  193.         <Row>
  194.           <Col xs={0} md={2}> </Col>
  195.           <Col xs={12} md={8}>
  196.             <PageHeader>Zamówienia<br/>
  197.               <small>Przeglądanie złożonych zamówień</small>
  198.             </PageHeader>
  199.             <OrderDetails hide={this.hideDetails} details={this.state.details} currentId={this.state.currentId}/>
  200.             <Table responsive hover>
  201.               <thead className="tableLeft">
  202.               <tr>
  203.                 <th>Nr.</th>
  204.                 <th>Stan Płatności</th>
  205.                 <th>Stolik</th>
  206.                 <th>Stan</th>
  207.                 <th>Data złożenia</th>
  208.                 <th>Data zakończenia</th>
  209.               </tr>
  210.               </thead>
  211.               <tbody className="tableLeft">
  212.               {
  213.                 // <OrderLine data={{id: 1, name: "dupa1", bill: "dupa", paymentState: "dupa", table: "dupa", state: "dupa"}}
  214.                 //     onClick={this.showDetails}/>
  215.               }
  216.               {this.ordersList(this.state.orders)}
  217.               </tbody>
  218.             </Table>
  219.             <Pager>
  220.               <Pager.Item disabled previous href="#">
  221.                 Previous
  222.               </Pager.Item>
  223.               <Pager.Item disabled next href="#">
  224.                 Next
  225.               </Pager.Item>
  226.             </Pager>
  227.             <div className="centerO">
  228.               <div className="centerI">
  229.                 <Button bsStyle="info" onClick={() => this.setState({orderAdd: true})}>Dodaj zamówienie</Button>
  230.                 <Modal show={this.state.orderAdd} onHide={this.orderHide}>
  231.                   <Modal.Header closeButton>
  232.                     <Modal.Title>Dodawanie zamówienia</Modal.Title>
  233.                   </Modal.Header>
  234.                   <Modal.Body>
  235.                     Dane:
  236.                     <ul className="tableLeft">
  237.                       <li>Płatność: <input type="text" name="id_pracownika" onChange={this.onBillChange}/></li>
  238.                       <li>Stolik: <input type="text" name="id_pracownika" onChange={this.onTableChange}/></li>
  239.                       <li>Stan: <input type="text" name="id_pracownika" onChange={this.onStateChange}/></li>
  240.                     </ul>
  241.                   </Modal.Body>
  242.                   <Modal.Footer>
  243.                     <Button bsStyle="success" onClick={this.submitOrder}>Zrealizowano</Button>
  244.                   </Modal.Footer>
  245.                 </Modal>
  246.               </div>
  247.             </div>
  248.           </Col>
  249.           <Col xs={0} md={2}> </Col>
  250.         </Row>
  251.       </div>
  252.     );
  253.   }
  254.  
  255.   submitOrder = (e) => {
  256.     fetch("/api/orders/add", {
  257.       method: "POST",
  258.       headers: {
  259.         "Accept": "application/json",
  260.         "Content-Type": "application/json",
  261.       },
  262.       body: JSON.stringify({
  263.         tocken: getTocken(),
  264.         newbill: this.state.newbill,
  265.         newtable: this.state.newtable,
  266.         newstate: this.state.newstate,
  267.       })
  268.     }).then((response) => response.json()).then((response) => {
  269.       console.log(response);
  270.       this.orderHide();
  271.     });
  272.   }
  273.  
  274.   onBillChange = (e) => {
  275.     this.setState({newbill: e.target.value});
  276.   }
  277.  
  278.   onTableChange = (e) => {
  279.     this.setState({newtable: e.target.value});
  280.   }
  281.  
  282.   onStateChange = (e) => {
  283.     this.setState({newstate: e.target.value});
  284.   }
  285. }
  286.  
  287.  
  288. export default withRouter(Orders);
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