UnivateProperties/src/components/timeshare/resort/resortPage.vue

<template>
  <!-- eslint-disable max-len -->
  <section>
    <div class="container intro-single">
      <div class="row">
        <div class="col-md-12 col-lg-8">
          <div class="title-single-box">
            <h1 class="title-single" style="text-align:left;">{{resort.prName}}</h1>
          </div>
          <br />
        </div>
        <div class="row mb-4">
          <div class="col-md-4">
            <img class="img-fluid" :src="image1" alt="Resort Image" />
          </div>
          <div class="col-md-4">
            <img class="img-fluid" :src="image2" alt="Resort Image" />
          </div>
          <div class="col-md-4">
            <img class="img-fluid" :src="image3" alt="Resort Image" />
          </div>
        </div>
      </div>
    </div>
    <div class="myMargin">
      <div class="row">
        <div class="col-md-3">
          <h3>Filter Resort</h3>
          <form
            id="mainForm"
            method="POST"
            action="/filter"
            accept-charset="UTF-8"
            enctype="multipart/form-data"
          >
            <div class="form-group">
              <select class="form-control" name="season">
                <option value>
                  <span style="color:white;">Season</span>
                </option>
              </select>
            </div>
            <div class="form-group">
              <select class="form-control" name="bedrooms">
                <option value>Bedrooms</option>
              </select>
            </div>

            <div class="form-group">
              <input
                class="form-control"
                type="number"
                step="any"
                id="minPrice"
                name="minPrice"
                placeholder="Minimum Price"
              />
            </div>
            <div class="form-group">
              <input
                class="form-control"
                type="number"
                step="any"
                id="maxPrice"
                name="maxPrice"
                placeholder="Maximum Price"
              />
            </div>
            <div class="form-group">
              <label>Filter Arrival Date From</label>
              <input type="date" class="form-control" name="arrivaldate" value />
            </div>
            <div class="form-group">
              <label>Filter Arrival Date To</label>
              <input type="date" class="form-control" name="arrivaldate" value />
            </div>

            <br />

            <button class="btn btn-b-n" type="submit">Search</button>
          </form>
        </div>
        <div class="col-md-9">
          <WeekList :resortCode="resortCode" />
          <div>
            <div class="btn btn-b-n" @click="routerGoTo('/timeshare/buy')">Back to Region</div>
            <hr />
          </div>
          {{description}}
          <hr />

          <div class="row">
            <div class="col-md-10 mb-4">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                  <a
                    class="nav-link active"
                    id="directions-tab"
                    data-toggle="tab"
                    href="#directions"
                    role="tab"
                    aria-controls="directions"
                    aria-selected="false"
                  >Directions</a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    id="resort-layout-tab"
                    data-toggle="tab"
                    href="#resort-layout"
                    role="tab"
                    aria-controls="resort-layout"
                    aria-selected="true"
                  >Resort Layout</a>
                </li>
              </ul>
              <div class="tab-content" id="myTabContent">
                <div
                  class="tab-pane fade show active"
                  id="directions"
                  role="tabpanel"
                  aria-labelledby="directions-tab"
                >
                  <iframe
                    :src="mapUrl"
                    width="100%"
                    height="450"
                    frameborder="0"
                    style="border:0"
                    allowfullscreen
                  ></iframe>
                  <br />

                  <small>
                    <a
                      :href="mapUrl"
                      style="color:#60CBEB;text-align:left"
                      target="_blank"
                    >See map bigger</a>
                  </small>
                </div>
                <div
                  class="tab-pane fade"
                  id="resort-layout"
                  role="tabpanel"
                  aria-labelledby="resort-layout-tab"
                >
                  <img class="img-fluid" :src="layout" alt="Resort Layout" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import WeekList from '../buy/weekListComponent.vue';

export default {
  props: {
    resortCode: {},
  },
  components: {
    WeekList,
  },
  mounted() {
    this.initResort(this.resortCode);
  },
  computed: {
    ...mapState('resort', [
      'resort',
      'description',
      'image1',
      'image2',
      'image3',
      'layout',
    ]),
    mapUrl() {
      return this.resort
        ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
        : '';
    },
  },
  methods: {
    ...mapActions('resort', ['initResort']),
    routerGoTo(goto) {
      this.$router.push(goto);
    },
  },
};
</script>
<style>
.myMargin {
  margin-left: 2%;
  margin-right: 2%;
}
</style>