Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from "react";
- import { Link } from "react-router-dom";
- import Spinner from "../components/spinner";
- import Icon from "../components/icon";
- import { ICONS } from "../components/constants";
- import { bookingStatus } from "../components/booking/booking_status";
- import { paymentMethod } from "../components/booking/payment_method";
- export default class Booking extends Component {
- constructor(props) {
- super(props);
- this.state = {
- passengerNumber: 1,
- booking: {
- id: "",
- number: "",
- date: "",
- bookingStatus: "OPCIJA",
- paymentMethod: "MODELA1",
- tripID: 1,
- passengers: [
- {
- id: "",
- holder: {
- email: "",
- address: "",
- mobile: ""
- },
- name: "",
- surname: "",
- passport: "",
- idCard: ""
- }
- ]
- },
- extras: "",
- totalPrice: "",
- trip: null,
- id: this.props.match.params.id
- };
- }
- handleChange(i, event) {
- let passengers = [...this.state.booking.passengers];
- passengers[i] = event.target.value;
- this.setState({ passengers });
- }
- addPassenger() {
- this.setState(prevState => ({
- passengers: [...prevState.booking.passengers, []]
- }));
- }
- removePassenger(i) {
- let passengers = [...this.state.passengers];
- passengers.splice(i, 1);
- this.setState({
- passengers,
- passengerNumber: this.state.passengerNumber - 1
- });
- }
- calculateTotal = () => {
- this.setState({
- totalPrice: totalPrice
- });
- };
- submitBooking() {
- const booking = this.state;
- fetch("/api/passenger/create", {
- method: "POST",
- body: JSON.stringify(booking),
- headers: {
- "Content-Type": "application/json"
- }
- }).then(res => console.log("RECT"));
- }
- componentDidMount() {
- fetch("/api/trips/get/" + this.state.id)
- .then(res => res.json())
- .then(trip =>
- this.setState(
- {
- trip
- },
- () => console.log("Trips fetched...", trip)
- )
- );
- }
- render() {
- const isEnabled = this.state.passengerNumber < 8;
- const isEnabledRemove = this.state.passengerNumber === 1;
- if (this.state.trip && this.state.booking.passengers) {
- return (
- <div className="container">
- <div className="row">
- <div className="col-md-8">
- <div className="row">
- <div className="col-md-12">
- <div className="booking-from">
- <form onSubmit={this.handleSubmit}>
- <div className="booking-form__group">
- <h1>Rezervacija</h1>
- <h5>
- Puno ime i prezime putnika kao što je prikazano u
- putovnici
- </h5>
- <small style={{ display: "block", marginBottom: 10 }}>
- * Maksimalni broj online rezervacija je 8
- </small>
- {this.state.booking.passengers.map((passenger, idx) => {
- let passengerNameId = `passengerName-${idx}`,
- passengerSurnameId = `age-${idx}`;
- return (
- <React.Fragment key={idx}>
- <div className="form-row">
- <div className="form-group col-md-6">
- <label className="has-float-label form-control-upper">
- <input
- name="passengersName"
- value={this.state.booking.passengers.name}
- onChange={this.handleChange}
- className="name form-control"
- placeholder="Ime"
- id={passengerNameId}
- data-id={idx}
- />
- <span>Ime</span>
- </label>
- </div>
- <div className="form-group col-md-5">
- <label className="has-float-label form-control-upper">
- <input
- name="passengersSurname"
- value={
- this.state.booking.passengers.surname
- }
- onChange={this.handleChange}
- className="surname form-control"
- placeholder="Prezime"
- id={passengerSurnameId}
- data-id={idx}
- />
- <span>Prezime</span>
- </label>
- </div>
- <div className="form-group col-md-1">
- <button
- className="remove-passenger"
- disabled={isEnabledRemove}
- onClick={this.removePassenger}
- data-id={idx}
- >
- <Icon
- icon={ICONS.CIRCLEMINUS}
- color={"#e5223c"}
- size={24}
- />
- </button>
- </div>
- </div>
- <div className="form-row">
- <div className="form-group col-md-3">
- <label className="has-float-label">
- <input
- name="passengerPassport"
- value={
- this.state.booking.passengers.passport
- }
- onChange={this.handleChange}
- className="form-control"
- placeholder="Putovnica"
- type="number"
- maxLength="9"
- />
- <span>Putovnica</span>
- </label>
- </div>
- <div className="form-group col-md-3">
- <label className="has-float-label">
- <input
- name="passengerID"
- value={
- this.state.booking.passengers.idCard
- }
- onChange={this.handleChange}
- className="form-control"
- placeholder="Osobna iskaznica"
- maxLength="9"
- />
- <span>Osobna iskaznica</span>
- </label>
- </div>
- </div>
- <div className="form-row">
- <div className="form-group col-md-12">
- <div className="form-check">
- <label className="form-check-label">
- <input
- className="form-check-input"
- type="checkbox"
- checked={this.state.insuranceCheck}
- />
- Polica putnog zdravstvenog osiguranja?{" "}
- {this.state.trip.insurance},00 kn
- </label>
- </div>
- <div
- className="form-check"
- style={{ marginBottom: 5 }}
- >
- <label className="form-check-label">
- <input
- className="form-check-input"
- type="checkbox"
- checked={this.state.insuranceExtraCheck}
- />
- Polica putnog putnog osiguranja od otkaza?{" "}
- {this.state.trip.insuranceExtra},00 kn
- </label>
- </div>
- </div>
- </div>
- </React.Fragment>
- );
- })}
- <button
- className="btn"
- disabled={!isEnabled}
- onClick={this.addPassenger}
- >
- <Icon icon={ICONS.USERPLUS} size={16} /> Dodaj novog
- putnika
- </button>
- </div>
- <div className="booking-form__group">
- <h4 className="booking-form__group-title">
- Kontakt podaci nositelja rezervacije
- </h4>
- <div className="form-group">
- <label className="has-float-label">
- <input
- name="passengerEmail"
- value={this.state.booking.passengers.email}
- onChange={this.handleChange}
- className="form-control"
- placeholder="Email"
- />
- <span>Email</span>
- </label>
- </div>
- <div className="form-group">
- <label className="has-float-label">
- <input
- name="passengerAdress"
- value={this.state.booking.passengers.address}
- onChange={this.handleChange}
- className="form-control"
- placeholder="Adresa"
- />
- <span>Adresa</span>
- </label>
- </div>
- <div className="form-group">
- <label className="has-float-label">
- <input
- name="passengerMobile"
- value={this.state.booking.passengers.mobile}
- onChange={this.handleChange}
- className="form-control"
- placeholder="Mobitel"
- />
- <span>Mobitel</span>
- </label>
- <small>
- Mobitel napišite u obliku +3850123456789
- </small>
- </div>
- </div>
- <div className="booking-form__group">
- <h4 className="booking-form__group-title">
- Model plaćanja
- </h4>
- <div className="form-group">
- <select className="custom-select" required>
- <option value="">Model plaćanja</option>
- <option value="1">Model A1</option>
- <option value="1">Model A2</option>
- <option value="1">Model A3</option>
- <option value="2">Model A4</option>
- <option value="3">Model A5</option>
- </select>
- <div className="invalid-feedback">
- Example invalid custom select feedback
- </div>
- <div className="option-feedback booking-form__options-description">
- <h5>MODEL A1</h5>
- <div>
- <div>
- Gotovinsko plaćanje u jednakim obrocima na žiro
- račun ICHTIS TRAVEL agencije:
- </div>
- <div>IBAN: HR53 2402006 1100419357</div>
- <div>
- + POZIV NA BROJ: {this.state.trip.tripCode}
- </div>
- <div>
- Za uplatu depozita popuniti uplatnicu na gore
- navedeni žiro račun i iznos.
- </div>
- <div>
- Uplatnice za preostale rate biti će otisnute i
- dostavljene na adresu koju ste nam naveli u
- obrascu.
- </div>
- </div>
- </div>
- </div>
- </div>
- <div className="booking-form__group">
- <p>
- Upoznat(a) sam i suglasn(a) s opisanim uvijetima
- putovanja u privitku, odredbama ugovora i općim
- uvjetima organizacije aranžmana, te ponudom osiguranja
- opisanom u uvjetima korištenja i odredbama. *
- </p>
- <p>
- Vaši osobni podaci bit će korišteni za obradu vaše
- narudžbe, podršku vašem iskustvu na ovoj web stranici
- i za druge svrhe opisane u našim pravilima
- privatnosti.
- </p>
- <label className="form-check-label">
- <input className="form-check-input" type="checkbox" />
- Pročitao/la sam i slažem se s{" "}
- <Link to="/opci-uvjeti">uvjetima korištenja</Link> i
- odredbama web-stranice. *
- </label>
- </div>
- {/* <input className="btn" type="submit" value="Submit" /> */}
- </form>
- </div>
- </div>
- </div>
- </div>
- <div className="col-md-4">
- <div className="booking-sidebar">
- <div className="booking-form__description">
- <span>{this.state.trip.title}</span>
- <span>Polazak: {this.state.trip.departureDate}</span>
- <span>Dolazak: {this.state.trip.arrivalDate}</span>
- <span>Trjanje: 8 dana</span>
- <span>Odredište: {this.state.trip.destination}</span>
- </div>
- <span>
- Cijena po osobi: {this.state.trip.price}
- ,00 kn
- </span>
- <hr />
- <span>
- Dodatne usluge
- <span>Polica putnog osiguranja:</span>
- <span>
- {
- (this.state.extras =
- this.state.trip.insurance * this.state.passengerNumber)
- }
- </span>
- </span>
- <hr />
- <span>
- <h5>Ukupno:</h5>{" "}
- {
- (this.state.totalPrice =
- this.state.trip.price * this.state.passengerNumber)
- }
- ,00 kn{" "}
- </span>
- <input
- className="btn"
- style={{ width: "100%" }}
- type="submit"
- value="Rezerviraj"
- />
- </div>
- </div>
- </div>
- </div>
- );
- } else {
- return <Spinner />;
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement