UnivateProperties/src/components/property/commercial/singleView/contentSection.vue

<template>
  <section :class="propertyImages.length > 0 ? 'noImages' : 'images'">
    <div class="container">
      <div class="row" id="resort-profile">
        <div class="col-md-4">
          <div class="resPortfolioSection" style="margin-top:-5px">
            <iframe
              v-if="property.video !== null"
              width="100%"
              :src="'https://www.youtube.com/embed/' + property.video"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
              style="margin-bottom:-6px"
            ></iframe>
            <div v-if="propertyImages.length > 0">
              <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
                <div v-if="i < 3">
                  <img
                    v-if="i === 0"
                    style="width:100%; height:201px;object-fit: cover"
                    :src="image.image"
                  />
                  <div v-else-if="i !== 0">
                    <img
                      v-if="i % 2 === 0"
                      style="width:50%; height:140px; float:right;"
                      :src="image.image"
                    />
                    <img v-else style="width:50%; height:140px; float:left" :src="image.image" />
                  </div>
                </div>
              </div>
              <gallery :images="Images" :index="index" @close="index = null"></gallery>
            </div>
          </div>

          <div
            class="panel-left p-5"
            :class="propertyImages.length > 0 ? 'galleryImages' : 'noGalleryImages'"
          >
            <h2>Property Detail</h2>
            <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
            <p>{{ property.city }}, {{ property.suburb }}</p>
            <div v-if="property.displayData.length > 0">
              <div v-for="(data, i) in property.displayData" :key="i">
                <div v-for="field in data.values" :key="field.id">
                  <p v-if="field.name === 'Floor Size'">{{ field.value }}</p>
                </div>
              </div>
            </div>
            <!-- <div v-for="field in property.displayData[0].values" :key="field.id">
              <p v-if="field.name === 'Floor Size'">{{ field.value }}M<sup>2</sup></p>
              <p v-if="field.name === 'Rates & Taxes'">
                Rates & Taxes: R{{ field.value | toCurrency }}
              </p>
            </div>-->
            <p>{{ property.shortDescription }}</p>

            <p v-if="property.statusString === 'For Sale'">{{ property.price | toCurrency }}</p>
            <p v-else>{{ property.price | toCurrency }} Per Month</p>
          </div>
          <div class="panel-left px-5 pb-5 text-center">
            <h4 class="text-white">Share this Property</h4>
            <a
              href="http://www.facebook.com/sharer.php?u=https://www.univateproperties.co.za/"
              target="_blank"
            >
              <img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1" />
            </a>
            <a
              href="mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://www.univateproperties.co.za/"
            >
              <img src="/img/icon-email.svg" alt="Share on email" class="col-3 p-1 mx-1" />
            </a>
            <a
              href="whatsapp://send?text=Have a look at this property: https://www.univateproperties.co.za"
              data-action="share/whatsapp/share"
              target="_blank"
            >
              <img src="img/icon-whatsapp.svg" alt="Share on whatsapp" class="col-3 p-1 mx-1" />
            </a>
          </div>
        </div>
        <div class="col-md-8 p-5 resort-profile">
          <h2 v-if="property.showAddress">
            <div style="display:inline" v-if="property.propertyName !== null">
              {{ property.propertyName }} /
            </div>
            {{ property.streetNumber }} {{ property.streetName }}
          </h2>
          <h2 v-else>{{ property.propertyName }}</h2>
          <p>{{ property.shortDescription }}</p>
          <h4>Property Features</h4>
          <div v-if="property.displayData.length > 0">
            <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
              <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
                <div
                  :style="field.value.toUpperCase() === 'FALSE' ? 'display:none' : 'display:show'"
                  v-if="field.value.toUpperCase() != 'TRUE'"
                >
                  <i class="fa fa-check-circle"></i>
                  {{ field.value }} {{ field.name }}
                </div>
                <div v-else>
                  <i class="fa fa-check-circle"></i>
                  {{ field.name }}
                </div>
              </div>
            </div>
          </div>

          <div class="mt-5" v-html="property.description"></div>
          <button
            style="float:right; white-space: nowrap;"
            :class="checkStatus() ? 'btn-disabled mt-3' : 'btn-solid-blue mt-3'"
            :disabled="checkStatus()"
            @click="goToSingle()"
          >
            ENQUIRE NOW
          </button>

          <h4 v-if="property.virtualTour !== null" style="margin-top:150px">Virtual Tour</h4>
          <iframe
            v-if="property.virtualTour !== null"
            width="100%"
            height="500px"
            :src="property.virtualTour"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            style="margin-bottom:-6px"
            class="mt-3"
          ></iframe>
          <h4 v-if="property.video !== null" class="mt-5">Video</h4>
          <iframe
            v-if="property.video !== null"
            width="100%"
            height="500px"
            :src="'https://www.youtube.com/embed/' + property.video"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            style="margin-bottom:-6px"
            class="mt-3"
          ></iframe>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import gallery from "../../../shared/gallerySlideShow";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    gallery
  },
  props: {
    property: {},
    propertyImages: {}
  },
  data() {
    return {
      index: null,
      date: new Date()
    };
  },
  computed: {
    ...mapState("status", ["singleStatus"]),
    Images() {
      const list = [];
      if (this.propertyImages) {
        for (let i = 0; i < this.propertyImages.length; i++) {
          list.push(this.propertyImages[i].image);
        }
      }
      return list;
    }
  },
  methods: {
    ...mapActions("status", ["getSingleStatus"]),
    goToSingle() {
      this.$router.push({ name: "EnquireNow", params: { id: this.$route.params.id } });
    },
    checkStatus() {
      this.getSingleStatus(this.property.statusId);
      if (
        this.singleStatus.code === "CIP" ||
        this.singleStatus.code === "S" ||
        this.singleStatus.code === "P"
      ) {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    if (this.property.video === "") {
      this.property.video = null;
    }
    if (this.property.virtualTour === "") {
      this.property.virtualTour = null;
    }
    this.$emit("Loaded", true);
  }
};
</script>

<style lang="scss" scoped>
.btn-disabled {
  font-family: "Muli";
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 32px;
  border-radius: 2px;
  transition: 0.5s;
  margin: 10px;
  color: #fff;
  background: grey;
  border-color: black;
  color: black;
  cursor: not-allowed;
}
.btn-disabled :hover {
  background: grey;
  border-color: black;
  color: black;
  cursor: not-allowed;
}
.images {
  padding-top: 100px;
}

.noImages {
  padding-top: 0px;
}

.galleryImages {
  margin-top: 140px;
}

.noGalleryImages {
  margin-top: 0px;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 575px) {
  .resPortfolioSection {
    margin-bottom: 100px;
  }
}

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

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

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .resPortfolioSection {
    margin-bottom: 60px;
  }
}

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