UnivateProperties/src/components/timeshare/resort/unit/unitPage.vue

<template>
  <main id="main" style="margin-top:-20px">
    <div class="container pb-5">
      <div class="row">
        <div class="col">
          <div class="section-header">
            <h2>{{ week ? week.resort.resortName : "" }}</h2>
          </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-md-6">
          <gallerySection :images="images" />
        </div>
        <div class="col-md-6 summarySection">
          <h3>Summary</h3>
          <div class="row">
            <div align="center" class="col">
              <label for="unit">Unit: </label>
              <h5>{{ week ? week.unitNumber : "" }}</h5>
            </div>
            <div align="center" class="col">
              <label for="week">Module/Week: </label>
              <h5>{{ week ? week.weekNumber : "" }}</h5>
            </div>
          </div>
          <div class="row mt-3">
            <div align="center" class="col">
              <label for="levy">Current Year Levy: </label>
              <h5>R{{ formatPrice(week ? week.levyAmount : 0) }}</h5>
            </div>
          </div>
          <div class="row mt-5">
            <div align="center" class="col">
              <div class="intro-content">
                <h2>Price</h2>
              </div>
              <h4>R {{ formatPrice(week ? week.sellPrice : 0) }}</h4>
            </div>
          </div>
          <div class="row mt-3">
            <div class="col">
              <a href="javascript:history.back()" class="btn-white-border">Back</a>
            </div>
            <div class="col">
              <button
                class="btn-solid-blue"
                style="color:white"
                data-toggle="modal"
                data-target="#myModal"
              >
                Make an Offer
              </button>
              <div class="col-md-12">
                <div id="myModal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">
                    <!-- Modal content-->
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                      </div>
                      <div padding-left="20px">
                        <makeOffer
                          name="MakeOffer"
                          :isMakeOffer="true"
                          :isProperty="false"
                          :item="week"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col">
          <tabSection
            :resortCode="resortCode"
            :resortCoords="resort.prPostAdd1"
            :layoutImages="layouts"
          />
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */

import { mapState, mapActions, mapGetters } from "vuex";

import gallerySection from "../gallerySection";
import tabSection from "./tabSection";

export default {
  name: "unit",
  components: {
    makeOffer,
    gallerySection,
    tabSection
  },
  props: {
    resortCode: {},
    unitNumber: {}
  },
  mounted() {
    this.initResort(this.resortCode);
    if (this.resortCode) {
      this.applyResortFilter(this.resortCode);
    }
    this.layouts.push(this.layout);
    this.getWeeks();
    console.log(this.resort);
  },
  computed: {
    ...mapState("resort", ["resort", "description", "images", "layout"]),

    ...mapGetters({
      weekById: "weekList/weekById"
    }),
    week() {
      return this.weekById(this.resortCode, this.unitNumber);
    },
    layouts() {
      var layouts = [];
      layouts.push(this.layout);
      return layouts;
    }
    // ...mapState('week', ['currentWeek']),
  },
  methods: {
    ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
    ...mapActions("resort", ["initResort"]),
    // ...mapActions('week', ['initWeek']),
    formatPrice(value) {
      if (value) {
        const val = (value / 1).toFixed(2);
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
      }
      return "";
    }
  }
};
</script>

<style lang="scss" scoped>
.summarySection {
  margin-top: -50px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .summarySection {
    margin-top: 1px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .summarySection {
    margin-top: 1px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .summarySection {
    margin-top: -50px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}
</style>