API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 20th, 2019
73
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 12.43 KB | None | 0 0
raw download clone embed print report diff
  1. import React, { Component, Fragment } from "react";
  2. import ConnectDB from "../ConnectDB";
  3. import { Segment, Header, Button, Icon, Container } from 'semantic-ui-react'
  4.  
  5. class EventData extends Component {
  6.   state = {
  7.     basket: [{ product: '', count: '' }]
  8.   }
  9.  
  10.   constructor(props) {
  11.     super(props);
  12.     let eventID;
  13.     let tempAddressID;
  14.     const tempID = JSON.parse(window.localStorage.getItem('user')).id;
  15.     eventID = this.props.match.params.event;
  16.     this.state = { event: [], address: [], loading: true };
  17.  
  18.     ConnectDB.getEvent(eventID).then(res => {
  19.       this.setState({ event: res, loading: false });
  20.       tempAddressID = this.state.event.idAddress;
  21.       ConnectDB.getAddress(tempAddressID).then(resp => {
  22.         this.setState({ address: resp, loading: false });
  23.       });
  24.  
  25.       this.setState({ eventID: eventID, userID: tempID });
  26.     });
  27.   }
  28.  
  29.   joinToEvent() {
  30.     ConnectDB.postUserEventsJunction(this.state.eventID, this.state.userID)
  31.       .then(res => {
  32.         console.log(this.state.userID);
  33.         console.log(this.state.eventID);
  34.       });
  35.   }
  36.  
  37.   static showEvent(event, address) {
  38.     return (
  39.       <ul>
  40.         <div class="ui grid">
  41.           <div class="four wide column"><p><Icon name='calendar alternate outline' /><b>Data:</b> {event.date.substring(0, 10)}</p> </div>
  42.           <div class="four wide column"><p><Icon name='clock outline' /><b>Godzina:</b>  {event.time.substring(0, 5)}</p></div>
  43.           <div class="four wide column"><p><Icon name='building outline' /><b>Miasto:</b> {address.city} </p> </div>
  44.           <div class="four wide column"><p><Icon name='street view' /><b>Ulica:</b> {address.street} {address.apartmentNumber} </p> </div>
  45.         </div>
  46.       </ul>
  47.     );
  48.   }
  49.  
  50.   static showDescription(event) {
  51.     return (
  52.       <ul>
  53.         <div class="ui grid">
  54.           <div class="eight wide column"><p><b>{event.description}</b></p> </div>
  55.           <div class="eight wide column">
  56.             <div class="eight column row">
  57.               <div class="ui right left color blue animated button" tabindex="0">
  58.                 <div class="visible content">Uczestnicy</div>
  59.                 <div class="hidden content">
  60.                   <i class="child icon"></i>
  61.                 </div>
  62.               </div>
  63.               <button class="circular right floated color blue ui icon button">
  64.                 <i class="icon user outline"></i>
  65.               </button>
  66.               <button class="circular right floated color blue ui icon button">
  67.                 <i class="icon user outline"></i>
  68.               </button>
  69.               <button class="circular right floated color blue ui icon button">
  70.                 <i class="icon user outline"></i>
  71.               </button>
  72.               <button class="circular right floated color blue ui icon button">
  73.                 <i class="icon user outline"></i>
  74.               </button>
  75.               <button class="circular right floated color blue ui icon button">
  76.                 <i class="icon user outline"></i>
  77.               </button>
  78.               <button class="circular right floated color blue ui icon button">
  79.                 <i class="icon user outline"></i>
  80.               </button>
  81.               <button class="circular right floated color blue ui icon button">
  82.                 <i class="icon user outline"></i>
  83.               </button>
  84.             </div>
  85.             <div class="eight column row">
  86.               {this.state.basket && this.state.basket.map(row =>
  87.                 <Fragment>
  88.                   <div class="ui left icon input">
  89.                     <input type="text" placeholder="Wpisz produkt"></input>
  90.                     <i class="birthday cake icon"></i>
  91.                   </div>
  92.                   <div class="ui right labeled input">
  93.                     <input type="text" placeholder="Wpisz ilość"></input>
  94.                     <div class="ui basic label">
  95.                       szt
  96.                     </div>
  97.                   </div>
  98.                 </Fragment>
  99.               )}
  100.             </div>
  101.             <div class="eight column row">
  102.               <div class="ui left floated vertical animated button" tabindex="0" onClick={() => handleAddNewProduct()}>
  103.                 <div class="hidden content">Dodaj</div>
  104.                 <div class="visible content">
  105.                   <i class="plus icon"></i>
  106.                 </div>
  107.               </div>
  108.             </div>
  109.  
  110.           </div>
  111.         </div>
  112.       </ul>
  113.     );
  114.   }
  115.  
  116.   handleAddNewProduct = () => {
  117.     this.setState(prevState => ({ basket: [...prevState.basket, { product: '', count: '' }] }))
  118.   }
  119.  
  120.   render() {
  121.     let contents = this.state.loading
  122.       ? <p><em>Loading...</em></p>
  123.       : EventData.showEvent(this.state.event, this.state.address);
  124.     let descriptionContents = this.state.loading
  125.       ? <p><em>Loading...</em></p>
  126.       : EventData.showDescription(this.state.event, this.state.address);
  127.     return (
  128.       <div>
  129.  
  130.         <Segment.Group>
  131.           <Segment inverted color='blue' secondary>
  132.             <Header as="h2" textAlign="center">Wydarzenie</Header>
  133.           </Segment>
  134.           <Container>
  135.             <Header
  136.               as='h1'
  137.               inverted
  138.               style={{
  139.                 width: "100%",
  140.                 height: 250,
  141.                 display: 'inline-block',
  142.                 opacity: 1,
  143.                 backgroundImage: `url(${"https://i.imgur.com/A3SxaVn.png"})`,
  144.                 backgroundSize: 'cover',
  145.                 fontWeight: 'bold',
  146.                 marginBottom: 0,
  147.                 marginLeft: 'auto',
  148.                 marginRight: 'auto',
  149.                 paddingTop: 210,
  150.                 fontSize: 'xx-large'
  151.               }}
  152.             >
  153.               {this.state.event.title}
  154.             </Header>
  155.           </Container>
  156.           <Segment textAlign="left">
  157.             {contents}
  158.           </Segment>
  159.           <Segment textAlign="left">
  160.             {descriptionContents}
  161.           </Segment>
  162.           <Segment>
  163.             <Button color="blue" icon labelPosition='left'
  164.               onClick={() => { window.location.href = ('#/home/events/search-event'); }}>
  165.               Wróć
  166.               <Icon name='reply' />
  167.             </Button>
  168.             <Button color="blue" icon labelPosition='right'
  169.               onClick={() => this.joinToEvent()}>
  170.               Dołącz do wydarzenia
  171.               <Icon name='check circle' />
  172.             </Button>
  173.           </Segment>
  174.         </Segment.Group>
  175.       </div>
  176.     );
  177.   }
  178. }
  179.  
  180. export default EventData;
  181.     super(props);
  182.     let eventID;
  183.     let tempAddressID;
  184.     const tempID = JSON.parse(window.localStorage.getItem('user')).id;
  185.     eventID = this.props.match.params.event;
  186.     this.state = { event: [], address: [], loading: true };
  187.  
  188.     ConnectDB.getEvent(eventID).then(res => {
  189.       this.setState({ event: res, loading: false });
  190.       tempAddressID = this.state.event.idAddress;
  191.       ConnectDB.getAddress(tempAddressID).then(resp => {
  192.         this.setState({ address: resp, loading: false });
  193.         });
  194.  
  195.       this.setState({eventID:eventID, userID:tempID});
  196.       });
  197.     }  
  198.  
  199.   joinToEvent(){
  200.     ConnectDB.postUserEventsJunction(this.state.eventID,this.state.userID)
  201.       .then(res => {
  202.         console.log(this.state.userID);
  203.         console.log(this.state.eventID);
  204.       });
  205.   }
  206.  
  207.   static showEvent(event, address) {
  208.     return (
  209.       <ul>
  210.         <div class="ui grid">
  211.           <div class="four wide column"><p><Icon name='calendar alternate outline' /><b>Data:</b> {event.date.substring(0,10)}</p> </div>
  212.           <div class="four wide column"><p><Icon name='clock outline' /><b>Godzina:</b>  {event.time.substring(0,5)}</p></div>
  213.           <div class="four wide column"><p><Icon name='building outline' /><b>Miasto:</b> {address.city} </p> </div>
  214.           <div class="four wide column"><p><Icon name='street view' /><b>Ulica:</b> {address.street} {address.apartmentNumber} </p> </div>
  215.         </div>
  216.       </ul>
  217.     );
  218.   }
  219.  
  220.   static showDescription(event) {
  221.     return (
  222.       <ul>
  223.         <div class="ui grid">
  224.           <div class="eight wide column"><p><b>{event.description}</b></p> </div>
  225.           <div class="eight wide column">
  226.             <div class="eight column row">
  227.               <div class="ui right left color blue animated button" tabindex="0">
  228.                 <div class="visible content">Uczestnicy</div>
  229.                 <div class="hidden content">
  230.                   <i class="child icon"></i>
  231.                 </div>
  232.               </div>
  233.               <button class="circular right floated color blue ui icon button">
  234.                 <i class="icon user outline"></i>
  235.               </button>
  236.               <button class="circular right floated color blue ui icon button">
  237.                 <i class="icon user outline"></i>
  238.               </button>
  239.               <button class="circular right floated color blue ui icon button">
  240.                 <i class="icon user outline"></i>
  241.               </button>
  242.               <button class="circular right floated color blue ui icon button">
  243.                 <i class="icon user outline"></i>
  244.               </button>
  245.               <button class="circular right floated color blue ui icon button">
  246.                 <i class="icon user outline"></i>
  247.               </button>
  248.               <button class="circular right floated color blue ui icon button">
  249.                 <i class="icon user outline"></i>
  250.               </button>
  251.               <button class="circular right floated color blue ui icon button">
  252.                 <i class="icon user outline"></i>
  253.               </button>
  254.             </div>
  255.             <div class="eight column row">
  256.               <div class="ui left icon input">
  257.                 <input type="text" placeholder="Wpisz produkt"></input>
  258.                 <i class="birthday cake icon"></i>
  259.               </div>
  260.               <div class="ui right labeled input">
  261.                 <input type="text" placeholder="Wpisz ilość"></input>
  262.                 <div class="ui basic label">
  263.                   szt
  264.                 </div>
  265.               </div>
  266.             </div>
  267.             <div class="eight column row">
  268.               <div class="ui left floated vertical animated button" tabindex="0">
  269.                   <div class="hidden content">Dodaj</div>
  270.                     <div class="visible content">
  271.                       <i class="plus icon"></i>
  272.                     </div>
  273.               </div>
  274.             </div>
  275.            
  276.           </div>
  277.         </div>
  278.       </ul>
  279.     );
  280.   }
  281.  
  282.   render() {
  283.     let contents = this.state.loading
  284.       ? <p><em>Loading...</em></p>
  285.       : EventData.showEvent(this.state.event, this.state.address);
  286.     let descriptionContents = this.state.loading
  287.       ? <p><em>Loading...</em></p>
  288.       : EventData.showDescription(this.state.event, this.state.address);
  289.     return (
  290.       <div>
  291.        
  292.         <Segment.Group>
  293.           <Segment inverted color='blue' secondary>
  294.             <Header as="h2" textAlign="center">Wydarzenie</Header>
  295.           </Segment>
  296.           <Container>
  297.           <Header
  298.             as='h1'
  299.             inverted
  300.             style={{
  301.                 width: "100%",
  302.                 height: 250,
  303.                 display: 'inline-block',
  304.                 opacity: 1,
  305.                 backgroundImage: `url(${"https://i.imgur.com/A3SxaVn.png"})`,
  306.                 backgroundSize: 'cover',
  307.                 fontWeight: 'bold',
  308.                 marginBottom: 0,
  309.                 marginLeft: 'auto',
  310.                 marginRight: 'auto',
  311.                 paddingTop: 210,
  312.                 fontSize: 'xx-large'
  313.             }}
  314.           >
  315.           {this.state.event.title}
  316.           </Header>
  317.           </Container>
  318.           <Segment textAlign="left">
  319.             {contents}
  320.           </Segment>
  321.           <Segment textAlign="left">
  322.             {descriptionContents}
  323.           </Segment>
  324.           <Segment>
  325.           <Button color="blue" icon labelPosition='left'
  326.               onClick={() => {window.location.href = ('#/home/events/search-event');}}>
  327.               Wróć
  328.               <Icon name='reply' />
  329.             </Button>
  330.             <Button color="blue" icon labelPosition='right'
  331.               onClick={() => this.joinToEvent()}>
  332.               Dołącz do wydarzenia
  333.               <Icon name='check circle' />
  334.             </Button>
  335.           </Segment>
  336.         </Segment.Group>
  337.       </div>
  338.     );
  339.   }
  340. }
  341.  
  342. export default EventData;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!