Facebook
From Soft Echidna, 5 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 203
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Magazyn</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta charset="utf-8">
  7.     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  8.     <script rel="prefetch" crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  9.     <script rel="prefetch" crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  10.     <script rel="prefetch" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  11. </head>
  12. <body>
  13. <div id="application"></div>
  14.  
  15. <script type="text/babel">
  16.     class WarehouseForm extends React.Component {
  17.         state = {
  18.             category: '',
  19.             product: {
  20.                 name: '',
  21.                 category: 0,
  22.                 quantity: 0
  23.             }
  24.         }
  25.  
  26.         updateCategory = ({ target }) => this.setState({
  27.             category: target.value
  28.         })
  29.  
  30.         updateProductName = ({ target }) => this.setState({
  31.             product: {
  32.                 ...this.state.product,
  33.                 name: target.value
  34.             }
  35.         })
  36.  
  37.         updateProductCategory = ({ target }) => this.setState({
  38.             product: {
  39.                 ...this.state.product,
  40.                 category: target.value
  41.             }
  42.         })
  43.  
  44.         updateProductQuantity = ({ target }) => this.setState({
  45.             product: {
  46.                 ...this.state.product,
  47.                 quantity: target.value
  48.             }
  49.         })
  50.  
  51.         addProduct = (event) => {
  52.             event.preventDefault()
  53.             this.props.addProduct({
  54.                 ...this.state.product,
  55.                 category: Number(this.state.product.category)
  56.             })
  57.             this.setState({
  58.                 product: {
  59.                     name: '',
  60.                     quantity: 0,
  61.                     category: 0
  62.                 }
  63.             })
  64.         }
  65.  
  66.         addCategory = (event) => {
  67.             event.preventDefault()
  68.             this.props.addCategory(this.state.category)
  69.             this.setState({
  70.                 category: ''
  71.             })
  72.         }
  73.  
  74.         render() {
  75.             const { categories } = this.props;
  76.             const { category, product } = this.state;
  77.             const {
  78.                 addProduct,
  79.                 addCategory,
  80.                 updateCategory,
  81.                 updateProductName,
  82.                 updateProductCategory,
  83.                 updateProductQuantity
  84.             } = this;
  85.  
  86.             return (
  87.                 <React.Fragment>
  88.                     <form className="form-row mb-2" onSubmit={addCategory}>
  89.                         <div className="col-sm">
  90.                             <input required type="text" onChange={updateCategory} value={ category } className="form-control" placeholder="Nazwa kategorii" />
  91.                         </div>
  92.                         <button type="submit" className="btn btn-primary col-sm">Dodaj</button>
  93.                     </form>
  94.  
  95.                     <form className="form-row mb-2" onSubmit={addProduct}>
  96.                         <div required className="col-sm">
  97.                             <input type="text" onChange={updateProductName} value={ product.name } className="form-control" placeholder="Nazwa produktu" />
  98.                         </div>
  99.                         <div required className="col-sm">
  100.                             <input min="0" type="number" onChange={updateProductQuantity} value={ product.quantity } className="form-control" placeholder="Ilość" />
  101.                         </div>
  102.                         <div className="col-sm">
  103.                             <select required onChange={updateProductCategory} value={ product.category } placeholder="Kategoria" className="form-control">
  104.                                 <option value="">Kategoria</option>
  105.                                 {
  106.                                     categories
  107.                                         .map(({ id, name }) => (
  108.                                             <option key={ id } value={ id }>{ name }</option>
  109.                                         ))
  110.                                 }
  111.                             </select>
  112.                         </div>
  113.                         <button type="submit" className="btn btn-primary col-sm">Dodaj</button>
  114.                     </form>
  115.                 </React.Fragment>
  116.             )
  117.         }
  118.     }
  119.  
  120.     class WarehouseCategory extends React.Component {
  121.         updateProduct = (amount) => () => this.props.updateProduct({
  122.             id: this.props.id,
  123.             name: this.props.name,
  124.             quantity: this.props.quantity + amount
  125.         })
  126.  
  127.         removeProduct = () => this.props.removeProduct(Number(this.props.id))
  128.  
  129.         render() {
  130.             const { name, quantity } = this.props;
  131.             const {
  132.                 updateProduct,
  133.                 removeProduct
  134.             } = this;
  135.  
  136.             return (
  137.                 <div className="row align-items-center">
  138.                     <div className="col-sm">{ name }</div>
  139.                     <div className="col-sm">{ quantity }</div>
  140.                     <div className="col-sm text-right">
  141.                         <div className="btn-toolbar">
  142.                             <div className="btn-group mr-2" role="group">
  143.                                 <button onClick={ updateProduct(1) } type="button" className="btn btn-dark">+</button>
  144.                                 <button onClick={ updateProduct(-1) } type="button" className="btn btn-dark">-</button>
  145.                             </div>
  146.                             <div className="btn-group" role="group">
  147.                                 <button onClick={ removeProduct } type="button" className="btn btn-danger">x</button>
  148.                             </div>
  149.                         </div>
  150.                     </div>
  151.                 </div>
  152.             )
  153.         }
  154.     }
  155.  
  156.     class Warehouse extends React.Component {
  157.         addProduct = (sill) => {
  158.             const { categories, updateCategories } = this.props;
  159.  
  160.             console.log(1, sill)
  161.             updateCategories(
  162.                 categories
  163.                     .map(category => ({
  164.                         ...category,
  165.                         sills: category.id === sill.category ?
  166.                             [
  167.                                 {
  168.                                     ...sill,
  169.                                     id: new Date().getTime()
  170.                                 },
  171.                                 ...category.sills
  172.                             ] :
  173.                             category.sills
  174.                     }))
  175.             )
  176.         }
  177.  
  178.         addCategory = (name) => {
  179.             const { categories, updateCategories } = this.props;
  180.  
  181.             updateCategories([
  182.                 {
  183.                     id: new Date().getTime(),
  184.                     name,
  185.                     sills: []
  186.                 },
  187.                 ...categories
  188.             ])
  189.         }
  190.  
  191.         removeCategory = (id) => () => {
  192.             const { categories, updateCategories } = this.props;
  193.  
  194.             updateCategories(
  195.                 categories
  196.                     .filter((category) => Number(id) !== category.id)
  197.             )
  198.         }
  199.  
  200.         updateProduct = ({ id, quantity }) => {
  201.             const { categories, updateCategories } = this.props;
  202.  
  203.             updateCategories(
  204.                 categories
  205.                     .map(category => ({
  206.                         ...category,
  207.                         sills: category.sills
  208.                             .map(sill => ({
  209.                                 ...sill,
  210.                                 quantity: id === sill.id ? quantity : sill.quantity
  211.                             }))
  212.                     }))
  213.             )
  214.         }
  215.  
  216.         removeProduct = (productId) => {
  217.             const { categories, updateCategories } = this.props;
  218.  
  219.             updateCategories(
  220.                 categories
  221.                     .map(category => ({
  222.                         ...category,
  223.                         sills: category.sills.filter(sill => sill.id !== productId)
  224.                     }))
  225.             )
  226.         }
  227.  
  228.         render () {
  229.             const { categories } = this.props;
  230.             const {
  231.                 addProduct,
  232.                 addCategory,
  233.                 removeCategory,
  234.                 updateProduct,
  235.                 removeProduct
  236.             } = this;
  237.  
  238.             return (
  239.                 <React.Fragment>
  240.                     <WarehouseForm categories={ categories } addCategory={addCategory} addProduct={addProduct} />
  241.  
  242.                     {
  243.                         categories
  244.                             .map(({ id, name, sills }) => (
  245.                                 <div className="card mb-4" key={ id }>
  246.                                     <div className="card-header">
  247.                                         <div className="row align-items-center">
  248.                                             <div className="col-sm">
  249.                                                 { name }
  250.                                             </div>
  251.                                             <div className="col-sm text-right">
  252.                                                 <button onClick={ removeCategory(id) } type="button" className="btn btn-danger">x</button>
  253.                                             </div>
  254.                                         </div>
  255.                                     </div>
  256.                                     <div className="card-body">
  257.                                         <ul className="list-group">
  258.                                             {
  259.                                                 sills
  260.                                                     .map(({ id: sillId, name: sillName, quantity }) => (
  261.                                                         <li key={ sillId } className="list-group-item">
  262.                                                             <WarehouseCategory removeProduct={ removeProduct } updateProduct={ updateProduct } id={ sillId } name={ sillName } quantity={ quantity } />
  263.                                                         </li>
  264.                                                     ))
  265.                                             }
  266.                                         </ul>
  267.                                     </div>
  268.                                 </div>
  269.                             ))
  270.                     }
  271.                 </React.Fragment>
  272.             )
  273.         }
  274.     }
  275.     class Application extends React.Component {
  276.         state = {
  277.             categories: [
  278.                 {
  279.                     id: 55,
  280.                     name: "title",
  281.                     sills: [
  282.                         {
  283.                             id: 1,
  284.                             name: "Foo",
  285.                             quantity: 5
  286.                         }
  287.                     ]
  288.                 },
  289.                 {
  290.                     id: 66,
  291.                     name: "titl2e",
  292.                     sills: [
  293.  
  294.                         {
  295.                             id: 2,
  296.                             name: "Foo",
  297.                             quantity: 13
  298.                         },
  299.  
  300.                         {
  301.                             id: 3,
  302.                             name: "Bar",
  303.                             quantity: 1
  304.                         }
  305.                     ]
  306.                 }
  307.             ]
  308.         }
  309.  
  310.         updateCategories = categories => {
  311.             this.setState({
  312.                 categories
  313.             })
  314.         }
  315.  
  316.         render() {
  317.             const { updateCategories } = this
  318.             return (
  319.                 <div className="container">
  320.                     <Warehouse updateCategories={ updateCategories } categories={this.state.categories} />
  321.                 </div>
  322.             )
  323.         }
  324.     }
  325.     ReactDOM.render(<Application />, window.application)
  326. </script>
  327. </body>
  328. </html>
  329.