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

<template>
  <div>
    <section>
      <section class="intro-single">
        <div class="container">
          <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>
            </div>
          </div>
        </div>
      </section>
      <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 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 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>
  </div>
</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>