SHARE
TWEET

Untitled

a guest Mar 25th, 2019 147 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from "react";
  2. import { Link } from "react-router-dom";
  3. import Spinner from "../components/spinner";
  4. import Icon from "../components/icon";
  5. import { ICONS } from "../components/constants";
  6. import { bookingStatus } from "../components/booking/booking_status";
  7. import { paymentMethod } from "../components/booking/payment_method";
  8.  
  9. export default class Booking extends Component {
  10.   constructor(props) {
  11.     super(props);
  12.     this.state = {
  13.       passengerNumber: 1,
  14.       booking: {
  15.         id: "",
  16.         number: "",
  17.         date: "",
  18.         bookingStatus: "OPCIJA",
  19.         paymentMethod: "MODELA1",
  20.         tripID: 1,
  21.         passengers: [
  22.           {
  23.             id: "",
  24.             holder: {
  25.               email: "",
  26.               address: "",
  27.               mobile: ""
  28.             },
  29.             name: "",
  30.             surname: "",
  31.             passport: "",
  32.             idCard: ""
  33.           }
  34.         ]
  35.       },
  36.       extras: "",
  37.       totalPrice: "",
  38.       trip: null,
  39.       id: this.props.match.params.id
  40.     };
  41.   }
  42.  
  43.   handleChange(i, event) {
  44.     let passengers = [...this.state.booking.passengers];
  45.     passengers[i] = event.target.value;
  46.     this.setState({ passengers });
  47.   }
  48.  
  49.   addPassenger() {
  50.     this.setState(prevState => ({
  51.       passengers: [...prevState.booking.passengers, []]
  52.     }));
  53.   }
  54.  
  55.   removePassenger(i) {
  56.     let passengers = [...this.state.passengers];
  57.     passengers.splice(i, 1);
  58.     this.setState({
  59.       passengers,
  60.       passengerNumber: this.state.passengerNumber - 1
  61.     });
  62.   }
  63.  
  64.   calculateTotal = () => {
  65.     this.setState({
  66.       totalPrice: totalPrice
  67.     });
  68.   };
  69.  
  70.   submitBooking() {
  71.     const booking = this.state;
  72.     fetch("/api/passenger/create", {
  73.       method: "POST",
  74.       body: JSON.stringify(booking),
  75.       headers: {
  76.         "Content-Type": "application/json"
  77.       }
  78.     }).then(res => console.log("RECT"));
  79.   }
  80.  
  81.   componentDidMount() {
  82.     fetch("/api/trips/get/" + this.state.id)
  83.       .then(res => res.json())
  84.       .then(trip =>
  85.         this.setState(
  86.           {
  87.             trip
  88.           },
  89.           () => console.log("Trips fetched...", trip)
  90.         )
  91.       );
  92.   }
  93.  
  94.   render() {
  95.     const isEnabled = this.state.passengerNumber < 8;
  96.     const isEnabledRemove = this.state.passengerNumber === 1;
  97.     if (this.state.trip && this.state.booking.passengers) {
  98.       return (
  99.         <div className="container">
  100.           <div className="row">
  101.             <div className="col-md-8">
  102.               <div className="row">
  103.                 <div className="col-md-12">
  104.                   <div className="booking-from">
  105.                     <form onSubmit={this.handleSubmit}>
  106.                       <div className="booking-form__group">
  107.                         <h1>Rezervacija</h1>
  108.  
  109.                         <h5>
  110.                           Puno ime i prezime putnika kao što je prikazano u
  111.                           putovnici
  112.                         </h5>
  113.                         <small style={{ display: "block", marginBottom: 10 }}>
  114.                           * Maksimalni broj online rezervacija je 8
  115.                         </small>
  116.                         {this.state.booking.passengers.map((passenger, idx) => {
  117.                           let passengerNameId = `passengerName-${idx}`,
  118.                             passengerSurnameId = `age-${idx}`;
  119.                           return (
  120.                             <React.Fragment key={idx}>
  121.                               <div className="form-row">
  122.                                 <div className="form-group col-md-6">
  123.                                   <label className="has-float-label form-control-upper">
  124.                                     <input
  125.                                       name="passengersName"
  126.                                       value={this.state.booking.passengers.name}
  127.                                       onChange={this.handleChange}
  128.                                       className="name form-control"
  129.                                       placeholder="Ime"
  130.                                       id={passengerNameId}
  131.                                       data-id={idx}
  132.                                     />
  133.                                     <span>Ime</span>
  134.                                   </label>
  135.                                 </div>
  136.                                 <div className="form-group col-md-5">
  137.                                   <label className="has-float-label form-control-upper">
  138.                                     <input
  139.                                       name="passengersSurname"
  140.                                       value={
  141.                                         this.state.booking.passengers.surname
  142.                                       }
  143.                                       onChange={this.handleChange}
  144.                                       className="surname form-control"
  145.                                       placeholder="Prezime"
  146.                                       id={passengerSurnameId}
  147.                                       data-id={idx}
  148.                                     />
  149.                                     <span>Prezime</span>
  150.                                   </label>
  151.                                 </div>
  152.                                 <div className="form-group col-md-1">
  153.                                   <button
  154.                                     className="remove-passenger"
  155.                                     disabled={isEnabledRemove}
  156.                                     onClick={this.removePassenger}
  157.                                     data-id={idx}
  158.                                   >
  159.                                     <Icon
  160.                                       icon={ICONS.CIRCLEMINUS}
  161.                                       color={"#e5223c"}
  162.                                       size={24}
  163.                                     />
  164.                                   </button>
  165.                                 </div>
  166.                               </div>
  167.                               <div className="form-row">
  168.                                 <div className="form-group col-md-3">
  169.                                   <label className="has-float-label">
  170.                                     <input
  171.                                       name="passengerPassport"
  172.                                       value={
  173.                                         this.state.booking.passengers.passport
  174.                                       }
  175.                                       onChange={this.handleChange}
  176.                                       className="form-control"
  177.                                       placeholder="Putovnica"
  178.                                       type="number"
  179.                                       maxLength="9"
  180.                                     />
  181.                                     <span>Putovnica</span>
  182.                                   </label>
  183.                                 </div>
  184.                                 <div className="form-group col-md-3">
  185.                                   <label className="has-float-label">
  186.                                     <input
  187.                                       name="passengerID"
  188.                                       value={
  189.                                         this.state.booking.passengers.idCard
  190.                                       }
  191.                                       onChange={this.handleChange}
  192.                                       className="form-control"
  193.                                       placeholder="Osobna iskaznica"
  194.                                       maxLength="9"
  195.                                     />
  196.                                     <span>Osobna iskaznica</span>
  197.                                   </label>
  198.                                 </div>
  199.                               </div>
  200.                               <div className="form-row">
  201.                                 <div className="form-group col-md-12">
  202.                                   <div className="form-check">
  203.                                     <label className="form-check-label">
  204.                                       <input
  205.                                         className="form-check-input"
  206.                                         type="checkbox"
  207.                                         checked={this.state.insuranceCheck}
  208.                                       />
  209.                                       Polica putnog zdravstvenog osiguranja?{" "}
  210.                                       {this.state.trip.insurance},00 kn
  211.                                     </label>
  212.                                   </div>
  213.                                   <div
  214.                                     className="form-check"
  215.                                     style={{ marginBottom: 5 }}
  216.                                   >
  217.                                     <label className="form-check-label">
  218.                                       <input
  219.                                         className="form-check-input"
  220.                                         type="checkbox"
  221.                                         checked={this.state.insuranceExtraCheck}
  222.                                       />
  223.                                       Polica putnog putnog osiguranja od otkaza?{" "}
  224.                                       {this.state.trip.insuranceExtra},00 kn
  225.                                     </label>
  226.                                   </div>
  227.                                 </div>
  228.                               </div>
  229.                             </React.Fragment>
  230.                           );
  231.                         })}
  232.                         <button
  233.                           className="btn"
  234.                           disabled={!isEnabled}
  235.                           onClick={this.addPassenger}
  236.                         >
  237.                           <Icon icon={ICONS.USERPLUS} size={16} /> Dodaj novog
  238.                           putnika
  239.                         </button>
  240.                       </div>
  241.                       <div className="booking-form__group">
  242.                         <h4 className="booking-form__group-title">
  243.                           Kontakt podaci nositelja rezervacije
  244.                         </h4>
  245.                         <div className="form-group">
  246.                           <label className="has-float-label">
  247.                             <input
  248.                               name="passengerEmail"
  249.                               value={this.state.booking.passengers.email}
  250.                               onChange={this.handleChange}
  251.                               className="form-control"
  252.                               placeholder="Email"
  253.                             />
  254.                             <span>Email</span>
  255.                           </label>
  256.                         </div>
  257.                         <div className="form-group">
  258.                           <label className="has-float-label">
  259.                             <input
  260.                               name="passengerAdress"
  261.                               value={this.state.booking.passengers.address}
  262.                               onChange={this.handleChange}
  263.                               className="form-control"
  264.                               placeholder="Adresa"
  265.                             />
  266.                             <span>Adresa</span>
  267.                           </label>
  268.                         </div>
  269.                         <div className="form-group">
  270.                           <label className="has-float-label">
  271.                             <input
  272.                               name="passengerMobile"
  273.                               value={this.state.booking.passengers.mobile}
  274.                               onChange={this.handleChange}
  275.                               className="form-control"
  276.                               placeholder="Mobitel"
  277.                             />
  278.                             <span>Mobitel</span>
  279.                           </label>
  280.                           <small>
  281.                             Mobitel napišite u obliku +3850123456789
  282.                           </small>
  283.                         </div>
  284.                       </div>
  285.  
  286.                       <div className="booking-form__group">
  287.                         <h4 className="booking-form__group-title">
  288.                           Model plaćanja
  289.                         </h4>
  290.                         <div className="form-group">
  291.                           <select className="custom-select" required>
  292.                             <option value="">Model plaćanja</option>
  293.                             <option value="1">Model A1</option>
  294.                             <option value="1">Model A2</option>
  295.                             <option value="1">Model A3</option>
  296.                             <option value="2">Model A4</option>
  297.                             <option value="3">Model A5</option>
  298.                           </select>
  299.                           <div className="invalid-feedback">
  300.                             Example invalid custom select feedback
  301.                           </div>
  302.                           <div className="option-feedback booking-form__options-description">
  303.                             <h5>MODEL A1</h5>
  304.                             <div>
  305.                               <div>
  306.                                 Gotovinsko plaćanje u jednakim obrocima na žiro
  307.                                 račun ICHTIS TRAVEL agencije:
  308.                               </div>
  309.                               <div>IBAN: HR53 2402006 1100419357</div>
  310.                               <div>
  311.                                 + POZIV NA BROJ: {this.state.trip.tripCode}
  312.                               </div>
  313.                               <div>
  314.                                 Za uplatu depozita popuniti uplatnicu na gore
  315.                                 navedeni žiro račun i iznos.
  316.                               </div>
  317.                               <div>
  318.                                 Uplatnice za preostale rate biti će otisnute i
  319.                                 dostavljene na adresu koju ste nam naveli u
  320.                                 obrascu.
  321.                               </div>
  322.                             </div>
  323.                           </div>
  324.                         </div>
  325.                       </div>
  326.                       <div className="booking-form__group">
  327.                         <p>
  328.                           Upoznat(a) sam i suglasn(a) s opisanim uvijetima
  329.                           putovanja u privitku, odredbama ugovora i općim
  330.                           uvjetima organizacije aranžmana, te ponudom osiguranja
  331.                           opisanom u uvjetima korištenja i odredbama. *
  332.                         </p>
  333.                         <p>
  334.                           Vaši osobni podaci bit će korišteni za obradu vaše
  335.                           narudžbe, podršku vašem iskustvu na ovoj web stranici
  336.                           i za druge svrhe opisane u našim pravilima
  337.                           privatnosti.
  338.                         </p>
  339.                         <label className="form-check-label">
  340.                           <input className="form-check-input" type="checkbox" />
  341.                           Pročitao/la sam i slažem se s{" "}
  342.                           <Link to="/opci-uvjeti">uvjetima korištenja</Link> i
  343.                           odredbama web-stranice. *
  344.                         </label>
  345.                       </div>
  346.                       {/* <input className="btn" type="submit" value="Submit" /> */}
  347.                     </form>
  348.                   </div>
  349.                 </div>
  350.               </div>
  351.             </div>
  352.             <div className="col-md-4">
  353.               <div className="booking-sidebar">
  354.                 <div className="booking-form__description">
  355.                   <span>{this.state.trip.title}</span>
  356.                   <span>Polazak: {this.state.trip.departureDate}</span>
  357.                   <span>Dolazak: {this.state.trip.arrivalDate}</span>
  358.                   <span>Trjanje: 8 dana</span>
  359.                   <span>Odredište: {this.state.trip.destination}</span>
  360.                 </div>
  361.                 <span>
  362.                   Cijena po osobi: {this.state.trip.price}
  363.                   ,00 kn
  364.                 </span>
  365.                 <hr />
  366.                 <span>
  367.                   Dodatne usluge
  368.                   <span>Polica putnog osiguranja:</span>
  369.                   <span>
  370.                     {
  371.                       (this.state.extras =
  372.                         this.state.trip.insurance * this.state.passengerNumber)
  373.                     }
  374.                   </span>
  375.                 </span>
  376.                 <hr />
  377.                 <span>
  378.                   <h5>Ukupno:</h5>{" "}
  379.                   {
  380.                     (this.state.totalPrice =
  381.                       this.state.trip.price * this.state.passengerNumber)
  382.                   }
  383.                   ,00 kn{" "}
  384.                 </span>
  385.                 <input
  386.                   className="btn"
  387.                   style={{ width: "100%" }}
  388.                   type="submit"
  389.                   value="Rezerviraj"
  390.                 />
  391.               </div>
  392.             </div>
  393.           </div>
  394.         </div>
  395.       );
  396.     } else {
  397.       return <Spinner />;
  398.     }
  399.   }
  400. }
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top