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

<template>
  <section>
    <div class="container pb-5">
      <div class="row" id="resort-profile">
        <div class="col-md-4">
          <div class="resPortfolioSection">
            <iframe
              v-if="property.video != null"
              width="100%"
              src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
              style="margin-bottom:-6px"
            ></iframe>
            <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%" :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 class="panel-left p-5" style="margin-top:130px">
            <h2>Property Detial</h2>
            <!-- TODO: Make it dynamic -->
            <h4 style="color:white">{{ property.price | toCurrency }}</h4>
            <p>#{{ property.propertyRef }}</p>
            <p v-if="property.showAddress">{{ property.addressOther }}</p>
            <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
            <p>{{ property.city }}, {{ property.suburb }}</p>
            <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>
                <p v-if="field.name === 'Bedrooms'">Bedrooms {{ field.value }}</p>
                <p v-if="field.name === 'Bathrooms'">Bathrooms {{ field.value }}</p>
              </div>
            </div>

            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
          </div>
          <div class="panel-left px-5 pb-5 text-center">
            <h4 class="text-white">Share this Property</h4>
            <ShareNetwork
              v-if="currentUrl !== ''"
              network="facebook"
              :url="currentUrl"
              title="Uni-Vate Property Listing"
              description="Check out this property on Uni-Vate Properties!"
              quote="The hot reload is so fast it\'s near instant. - Evan You"
              hashtags="vuejs,vite"
            >
              <img src="img/icon-facebook.svg" alt="Share on Facebook" class="col-3 p-1 mx-1" />
            </ShareNetwork>

            <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=Check out this property!"
              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></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>

          <div class="container">
            <div class="row">
              <div class="col">
                <p v-html="property.description"></p>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <h4>Property Features</h4>
              </div>
            </div>
            <div class="row">
              <div class="col-md-8">
                <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 v-if="field.value !== 'yes'">
                      <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="col-md-4">
                <router-link
                  style="float:right"
                  class="btn-solid-blue mt-3"
                  :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
                  >MORE INFO...</router-link
                >
              </div>
            </div>
          </div>
          <h4 v-if="property.video != null" class="mt-5">Video Tour</h4>
          <iframe
            v-if="property.video != null"
            width="100%"
            src="https://www.youtube.com/embed/watch_popup?v=qKgHJYzWtVA"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            style="margin-bottom:-6px"
            class="mt-3"
          ></iframe>
          <p></p>
          <div class="d-flex mt-3">
            <iframe
              width="100%"
              height="200"
              id="gmap_canvas"
              :src="propertyMap"
              frameborder="0"
              scrolling="no"
              marginheight="0"
              marginwidth="0"
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from "vuex";
import gallery from "../../../shared/gallerySlideShow";
import { ShareFacebook } from "vue-social-sharing";
export default {
  components: {
    gallery,
    ShareFacebook
  },
  props: {
    property: {},
    propertyImages: {}
  },
  created() {
    //this.getListsForPropertyEdit(this.property.id);
  },
  async mounted() {
    this.currentUrl = window.location.origin + this.$route.fullPath;
  },
  data() {
    return {
      index: null,
      date: new Date(),
      currentUrl: ""
    };
  },
  methods: {
    //...mapActions("searchTab", ["getListsForPropertyEdit"])
  },
  computed: {
    //...mapState("searchTab", ["provinces", "cities", "suburbs"]),
    propertyMap() {
      if (this.property.propertCoords) {
        var lat = this.property.propertCoords.split(",")[0];
        var lng = this.property.propertCoords.split(",")[1];
        // var url =
        //   "https://maps.google.com/maps?q=" +
        //   lat.replace(".", ",") +
        //   "," +
        //   lng.replace(".", ",") +
        //   "&hl=es&z=14&amp;output=embed";
        var url = "";
        return url;
      }
      return "";
    },
    propertyFeatures() {
      this.property.displayData.forEach(data => {
        console.log(data);
      });
    },
    Images() {
      const list = [];
      for (let i = 0; i < this.propertyImages.length; i++) {
        list.push(this.propertyImages[i].image);
      }
      return list;
    }
  },
  created() {
    this.$emit("Loaded", true);
  }
};
</script>

<style lang="scss" scoped>
/* 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>