Registration, Residential & UnitPage Style

public/img/icon-email.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M51.64,1.42A47.1,47.1,0,1,1,4.46,48.35,46.95,46.95,0,0,1,51.64,1.42ZM51.5,68c6.77,0,13.54,0,20.32,0,3.38,0,4.86-1.48,4.86-4.9q0-14.48,0-29c0-3.38-1.52-4.85-4.9-4.85H31.36c-3.49,0-5,1.47-5,5q0,14.38,0,28.76c0,3.53,1.47,5,5,5Z"/><path class="cls-1" d="M31.2,32.38H71.78c-.78.91-1.33,1.6-1.94,2.25-4,4.28-8,8.53-11.91,12.81s-8.74,4.4-12.84,0c-4-4.28-8-8.53-11.92-12.8C32.6,34,32.05,33.33,31.2,32.38Z"/><path class="cls-1" d="M60.52,49.09l11,15.72H31.35L42.68,49.38c2.53,2.64,5.43,4.4,9.08,4.29A11.61,11.61,0,0,0,60.52,49.09Z"/><path class="cls-1" d="M29.54,35.12,40.66,47,29.54,62.18Z"/><path class="cls-1" d="M73.46,62.29,62.6,46.81,73.46,35.17Z"/></svg>

public/img/icon-facebook.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M98,50A47.08,47.08,0,1,1,51,2.94,47,47,0,0,1,98,50ZM65.23,28q.8-5,1.6-10.15l-.69-.15a65.29,65.29,0,0,0-11-.67,15.89,15.89,0,0,0-8.34,2.41A10.22,10.22,0,0,0,42,25.51a14.59,14.59,0,0,0-.4,3.37c0,3,0,5.94,0,8.91,0,1,.08.89-.87.9-1.73,0-3.46,0-5.19,0-.41,0-.59.1-.59.56q0,4.31,0,8.61c0,.42.14.53.54.52h5.43l.7,0V83h12c.82,0,.82,0,.82-.83V48.37h.76c2.74,0,5.47,0,8.2,0,.51,0,.67-.15.73-.65.24-2.16.52-4.33.78-6.49.1-.83.18-1.65.28-2.56H54.36c.09-2.74.07-5.41.32-8.06A3.65,3.65,0,0,1,58,27.31a7,7,0,0,1,2-.1C61.68,27.41,63.4,27.7,65.23,28Z"/></svg>

public/img/icon-whatsapp.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M50.93,3.6A47.07,47.07,0,1,1,3.83,50.41,47,47,0,0,1,50.93,3.6ZM20.81,81l.83-.24q7.42-2.39,14.87-4.74a1.77,1.77,0,0,1,1.22.09,29.18,29.18,0,0,0,16.48,3.2,30,30,0,0,0,10.54-3,29.54,29.54,0,0,0,12.31-11.7,26.9,26.9,0,0,0,4-14.41,43.35,43.35,0,0,0-.36-4.69,27.8,27.8,0,0,0-3.77-10.89,29.63,29.63,0,0,0-30-14,28.35,28.35,0,0,0-15.08,7.11A29.07,29.07,0,0,0,22,52.43a28.67,28.67,0,0,0,3.83,12.28,1.36,1.36,0,0,1,.1,1C24.28,70.53,22.64,75.36,21,80.2,20.94,80.43,20.9,80.68,20.81,81Z"/><path class="cls-1" d="M28.61,73.28c.43-1.32.82-2.51,1.22-3.69.5-1.49,1-3,1.53-4.46a1.51,1.51,0,0,0-.2-1.53,23.43,23.43,0,0,1-3.83-9.3A23.8,23.8,0,0,1,29,40.12a23.83,23.83,0,0,1,16.6-14A24.5,24.5,0,1,1,56.26,73.92,24,24,0,0,1,38.6,70.75a1.61,1.61,0,0,0-1.49-.17c-2.59.85-5.2,1.67-7.8,2.5Zm30.75-8.49a13.51,13.51,0,0,0,2-.33c3.74-1.16,5.06-2.61,5.43-5.77.08-.68.09-1.3-.63-1.67-2-1-4-2.1-6-3.12-.84-.43-1.15-.32-1.79.41S57,56,56.24,56.76s-.93.85-1.93.4a20.36,20.36,0,0,1-9.62-9c-.45-.8-.39-1.08.22-1.78s1.27-1.5,1.86-2.28a1.51,1.51,0,0,0,.16-1.47c-.74-2-1.47-3.93-2.21-5.9a1.66,1.66,0,0,0-1.9-1.3,1.9,1.9,0,0,1-.53,0,3.12,3.12,0,0,0-2.81.85,8.75,8.75,0,0,0-2.22,9.94,30.84,30.84,0,0,0,2.83,5.28,31.41,31.41,0,0,0,8.53,9,31.64,31.64,0,0,0,6.82,3.19A10.72,10.72,0,0,0,59.36,64.79Z"/></svg>

src/components/communication/templateDetailNew.vue

@@ -0,0 +1,269 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div style="padding:10px;">
+    <div
+      class="container"
+      style="border:silver solid thin;border-radius:10px;background-color:rgba(235,235,235,0.75);padding:20px;"
+    >
+      <div class="row">
+        <div class="col-md-12">
+          <div class="d-flex">
+            <div class="p-2 mr-auto">
+              <h2>Template - Detail</h2>
+            </div>
+            <div class="p-2">
+              <div class="btn btn-primary myBackground" v-if="!editable" @click="onEdit()">
+                Edit
+              </div>
+            </div>
+            <div class="p-2">
+              <div class="btn btn-primary myBackground" @click="onClose()">Save/Close</div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-12 text-left">
+          <div class="input-group mb-3">
+            <label v-if="!item.name" for="name" class="uniSelectLabel">
+              Name
+            </label>
+            <input
+              class="form-control uniInput"
+              type="text"
+              step="any"
+              name="name"
+              v-model="item.name"
+              :disabled="!CanEdit"
+            />
+          </div>
+        </div>
+        <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-12 text-left">
+          <div class="input-group mb-3">
+            <label for="subject" class="uniSelectLabel">Subject</label>
+            <input
+              class="form-control uniInput"
+              type="text"
+              step="any"
+              name="subject"
+              v-model="item.subject"
+              :disabled="!CanEdit"
+            />
+          </div>
+        </div>
+        <div class="col-md-12">
+          <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"
+                >Html</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"
+                >Preview</a
+              >
+            </li>
+          </ul>
+          <div
+            class="tab-content"
+            id="myTabContent"
+            style="background-color:rgba(255,255,255,0.75);padding:10px;border:silver solid thin;border-radius:10px;"
+          >
+            <div
+              class="tab-pane fade show active"
+              style="background-color:rgba(255,255,255,0.75);padding:10px;"
+              id="directions"
+              role="tabpanel"
+              aria-labelledby="directions-tab"
+            >
+              <div class="text-left">
+                <label for="Sleeps maximum">Body</label>
+                <div class="input-group mb-3">
+                  <textarea
+                    class="form-control uniInput"
+                    id="bodyInput"
+                    ref="bodyInput"
+                    type="text"
+                    rows="10"
+                    step="any"
+                    name="body"
+                    v-model="item.body"
+                    :disabled="!CanEdit"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="tab-pane fade"
+              id="resort-layout"
+              role="tabpanel"
+              aria-labelledby="resort-layout-tab"
+            >
+              <div class="no-style" v-html="item.body"></div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-12">
+          <div class="d-flex">
+            <div class="p-2 mr-auto">
+              <h2>Coded Fields</h2>
+            </div>
+            <!-- <div class="p-2">
+              <div class="btn btn-primary myBackground" @click="addClose()" v-if="CanEdit">
+                {{ btnCaption }}
+              </div>
+            </div> -->
+          </div>
+        </div>
+        <div class="col-md-12">
+          <TemplateInnerItem @onItemAdd="onItemAdd" />
+        </div>
+        <!-- <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-12">
+          <ListView
+            :items="PlaceHolders"
+            :hideSearch="true"
+            :showNew="false"
+            :deleteable="CanEdit"
+            :allowMultipleSelect="true"
+            @onDelete="onItemDelete"
+          />
+        </div> -->
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+import ListView from "../shared/listView.vue";
+import TemplateInnerItem from "./templateInnerItem.vue";
+
+export default {
+  data() {
+    return {
+      showNew: false,
+      openFields: false
+    };
+  },
+  created() {
+    this.item.body =
+      '<HTML> <BODY style="font-family: Poppins, sans-serif; color: #555555;"> <div> [Name] </div> <br/> <div> Please note that a timeshare week has been loaded for sale. </div> <br /> <div> <table class="table table-striped"> <thead> <tr> <th scope="col">Resort</th> <th scope="col">Unit</th> <th scope="col">Module</th> </tr> </thead> <tbody> <tr> <td>[Resort]</td> <td>[UnitNumber]</td> <td>[Module]</td> </tr> </tbody> </table> <div> <br /> <div> Regards, <br/> <img src="http://training.provision-sa.com:89/images/test/uvprop.png" /> </div> </BODY> </HTML>';
+  },
+  components: {
+    ListView,
+    TemplateInnerItem
+  },
+  props: {
+    item: {},
+    placeHolders: [],
+    editable: {
+      default: false
+    }
+  },
+  computed: {
+    CanEdit() {
+      return this.editable || this.item.id === 0 || this.openFields;
+    },
+    btnCaption() {
+      return this.showNew ? "Close" : "New";
+    },
+    ItemList() {
+      return this.item.placeHolders;
+    },
+    PlaceHolders() {
+      return this.placeHolders;
+    }
+  },
+  methods: {
+    ...mapActions("template", ["addItem", "editItem"]),
+    addClose() {
+      if (this.showNew) {
+        this.showNew = false;
+      } else this.showNew = true;
+    },
+    onClose() {
+      if (this.item.id > 0) {
+        // edit
+        this.editItem(this.item);
+      } else {
+        // add.
+        this.addItem(this.item);
+      }
+      this.$emit("onClose");
+    },
+    onItemDelete(item) {
+      this.item.placeHolders = _.remove(this.item.placeHolders, x => x !== item);
+    },
+    onEdit() {
+      this.openFields = true;
+    },
+    onItemAdd(item) {
+      //   const myList = this.item.placeHolders ? this.item.placeHolders : [];
+      //   myList.push({
+      //     name: item.name,
+      //     boundTo: item.property,
+      //     boundToClassDisplay: item.class.name,
+      //     boundToClass: item.class.fullName
+      //   });
+      //   this.placeHolders = myList;
+      //   this.item.placeHolders = this.placeHolders;
+      var placeHolder = "[" + item.property + "]";
+      console.log(placeHolder);
+      // will give the current postion of the cursor
+      var curPos = document.getElementById("bodyInput").selectionStart;
+
+      // will get the value of the text area
+      let x = $("#bodyInput").val();
+
+      // will get the value of the input box
+      let text_to_insert = placeHolder;
+
+      // setting the updated value in the text area
+      $("#bodyInput").val(x.slice(0, curPos) + text_to_insert + x.slice(curPos));
+    }
+  }
+};
+</script>
+<style>
+.no-style {
+  background: #fff;
+  border: none;
+  color: #000;
+  display: block;
+  font: initial;
+  height: auto;
+  letter-spacing: normal;
+  line-height: normal;
+  margin: 0;
+  padding: 0;
+  text-transform: none;
+  visibility: visible;
+  width: auto;
+  word-spacing: normal;
+  z-index: auto;
+  text-align: left;
+}
+</style>

src/components/communication/templateInnerItem.vue

@@ -3,7 +3,7 @@
     <div class="col-md-12" v-if="message !== undefined">
       <Alert :text="message" :type="'ERROR'" />
     </div>
-    <div class="col-md-3">
+    <!-- <div class="col-md-3">
       <input
         class="form-control"
         type="text"
@@ -12,29 +12,29 @@
         placeholder="Name"
         v-model="item.name"
       />
-    </div>
-    <div class="col-md-3">
+    </div> -->
+    <div class="col-md-4">
       <select class="form-control" v-model="item.class" @change="onClassChanged()">
-        <option v-for="(item, i) in classes" :key="i" :value="item">{{item.name}}</option>
+        <option v-for="(item, i) in classes" :key="i" :value="item">{{ item.name }}</option>
       </select>
     </div>
-    <div class="col-md-3">
-      <select class="form-control" v-model="item.property">
-        <option v-for="(item, i) in properties" :key="i">{{item}}</option>
+    <div class="col-md-4">
+      <select class="form-control" v-model="item.property" :disabled="!item.class">
+        <option v-for="(item, i) in properties" :key="i">{{ item }}</option>
       </select>
     </div>
-    <div class="col-md-3">
-      <div class="btn btn-primary myBackground w-100" @click="onItemAdd()">Add</div>
+    <div class="col-md-4">
+      <div class="btn-solid-blue" style="margin-top:-5px" @click="onItemAdd()">Insert</div>
     </div>
   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
-import Alert from '../shared/alert.vue';
+import { mapState, mapActions } from "vuex";
+import Alert from "../shared/alert.vue";
 
 export default {
   components: {
-    Alert,
+    Alert
   },
   mounted() {
     this.init();
@@ -45,36 +45,36 @@ export default {
       item: {
         name: undefined,
         class: undefined,
-        property: undefined,
-      },
+        property: undefined
+      }
     };
   },
   computed: {
-    ...mapState('info', ['classes', 'properties']),
+    ...mapState("info", ["classes", "properties"])
   },
   methods: {
-    ...mapActions('info', ['init', 'getClasses', 'getProperties']),
+    ...mapActions("info", ["init", "getClasses", "getProperties"]),
     onClassChanged() {
       this.getProperties(this.item.class);
     },
     onItemAdd() {
       this.message = undefined;
-      let msg = '';
-      if (this.item.name === undefined) {
-        msg += 'Please give a name...';
-      }
+      let msg = "";
+      // if (this.item.name === undefined) {
+      //   msg += "Please give a name...";
+      // }
       if (this.item.class === undefined) {
-        msg += 'Please choose a class...';
+        msg += "Please choose a class...";
       }
       if (this.item.property === undefined) {
-        msg += 'Please choose a property...';
+        msg += "Please choose a property...";
       }
       if (msg.length > 0) {
         this.message = msg;
       } else {
-        this.$emit('onItemAdd', this.item);
+        this.$emit("onItemAdd", this.item);
       }
-    },
-  },
+    }
+  }
 };
 </script>

src/components/communication/templatePage.vue

@@ -35,7 +35,7 @@
 <script>
 import { mapState, mapActions } from "vuex";
 import ListView from "../shared/listView.vue";
-import DetailView from "./templateDetail.vue";
+import DetailView from "./templateDetailNew.vue";
 
 export default {
   data() {

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

@@ -22,20 +22,46 @@
           </div>
           <div class="panel-left p-5" style="margin-top:130px">
             <h2>Property Detial</h2>
+            <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.suburb }}, {{ property.city }}</p>
-            <p>{{ property.shortDescription }}</p>
-            <p>{{ property.price | toCurrency }}</p>
-            <div class="btn-white-border">
-              <i class="fa fa-search"></i>BOOK A VIEWING
-            </div>
+            <p>{{ property.city }}, {{ property.suburb }}</p>
+            <p>
+              Bedrooms {{ property.displayData[1].values[0].value }}, Bathrooms
+              {{ property.displayData[1].values[1].value }}
+            </p>
+            <p>
+              Yard Size {{ property.displayData[0].values[1].value }}M<sup>2</sup>, Floor Size
+              {{ property.displayData[0].values[2].value }}M<sup>2</sup>
+            </p>
+
+            <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>
+            <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"
-          >{{ property.propertyName }} / {{ property.streetNumber }} {{ property.streetName }}</h2>
+          <h2 v-if="property.showAddress">
+            {{ property.propertyName }} / {{ property.streetNumber }} {{ property.streetName }}
+          </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
           <div class="container">
             <div class="row">
@@ -75,20 +101,16 @@
               <table class="table table-striped">
                 <thead>
                   <tr>
-                    <th
-                      v-for="(tableHead, j) in data.values"
-                      :key="j"
-                      scope="col"
-                    >{{ tableHead.name }}</th>
+                    <th v-for="(tableHead, j) in data.values" :key="j" scope="col">
+                      {{ tableHead.name }}
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr>
-                    <td
-                      v-for="(tableVal, k) in data.values"
-                      :key="k"
-                      scope="col"
-                    >{{ tableVal.value }}</td>
+                    <td v-for="(tableVal, k) in data.values" :key="k" scope="col">
+                      {{ tableVal.value }}
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -119,11 +141,11 @@ import { mapState, mapActions } from "vuex";
 import gallery from "../../../shared/gallerySlideShow";
 export default {
   components: {
-    gallery,
+    gallery
   },
   props: {
     property: {},
-    propertyImages: {},
+    propertyImages: {}
   },
   created() {
     //this.getListsForPropertyEdit(this.property.id);
@@ -132,7 +154,7 @@ export default {
   data() {
     return {
       index: null,
-      date: new Date(),
+      date: new Date()
     };
   },
   methods: {
@@ -154,8 +176,8 @@ export default {
         return url;
       }
       return "";
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/property/residential/singleView/singleResidentialPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <carouselSection v-if="propertyImages.length > 0" :propertyImages="propertyImages" />
-    <main id="main">
+    <main id="main" style="margin-top:-20px">
       <contentSection
         v-if="propertyImages.length > 0"
         :property="property"

src/components/shared/navBar.vue

@@ -253,7 +253,12 @@
                     >
                   </li>
 
-                  <li v-if="!isLoggedIn" class="menu-has-children">
+                  <li v-if="!isLoggedIn">
+                    <router-link class=" btn-solid-blue pt-2 pb-2" to="/user/register"
+                      >Register</router-link
+                    >
+                  </li>
+                  <!-- <li v-if="!isLoggedIn" class="menu-has-children">
                     <div
                       @mouseover="registerClass = 'ts-display'"
                       @mouseleave="registerClass = 'no-display'"
@@ -269,7 +274,7 @@
                         <router-link to="/user/registeragency">Agency Registration</router-link>
                       </li>
                     </ul>
-                  </li>
+                  </li> -->
                 </ul>
               </nav>
             </div>

src/components/timeshare/resort/unit/carouselSection.vue

@@ -0,0 +1,48 @@
+<template>
+  <section id="intro">
+    <div v-if="loaded">
+      <carousel
+        :nav="false"
+        :dots="false"
+        :items="10"
+        :autoplay="true"
+        :loop="true"
+        :autoHeight="true"
+        id="intro-carousel"
+        style="margin-top:-50px;"
+        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+      >
+        <div v-for="(image, i) in resortImages" :key="i">
+          <img class="item" style="object-fit:cover" :src="image" :key="i" />
+        </div>
+      </carousel>
+    </div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import carousel from "vue-owl-carousel";
+export default {
+  components: {
+    carousel
+  },
+  props: {
+    resortImages: {}
+  },
+  data() {
+    return {
+      images: [],
+      loaded: false
+    };
+  },
+  async created() {
+    this.images = await this.resortImages;
+    setTimeout(() => {
+      this.loaded = true;
+    }, 500);
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/timeshare/resort/unit/summarySection.vue

@@ -12,31 +12,38 @@
         <gallerySection :images="images" />
       </div>
       <div class="col-md-12 col-lg-8 summarySection">
-        <h3>Summary</h3>
-        <div class="row">
-          <div align="center" class="col-md-12">#{{ week.id }}</div>
-        </div>
-        <div class="row mb-3">
-          <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>
+        <h4>
+          Unit {{ week ? week.unitNumber : "" }} | {{ week ? week.bedrooms : "" }} Bedroom/{{
+            week ? week.maxSleep : ""
+          }}
+          Sleeper
+        </h4>
+        <p style="text-align:left">Reference: #{{ week.id }}</p>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th scope="col">Unit</th>
+              <th scope="col">Week / Module</th>
+              <th scope="col">2020 Arrival Date</th>
+              <th scope="col">Bedrooms</th>
+              <th scope="col">Season</th>
+              <th scope="col">Current Year Levy</th>
+              <th scope="col">Price Incl VAT</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{{ week ? week.unitNumber : "" }}</td>
+              <td>{{ week ? week.weekNumber : "" }}</td>
+              <td>{{ week ? week.arrivalDate : "" }}</td>
+              <td>{{ week ? week.bedrooms : "" }}</td>
+              <td>{{ week ? week.season : "" }}</td>
+              <td>R{{ week ? week.levyAmount : "" }}</td>
+              <td>R{{ week ? week.sellPrice : "" }}</td>
+            </tr>
+          </tbody>
+        </table>
 
-        <div class="row mt-5">
-          <div align="center" class="col">
-            <label for="levy">Current Year Levy: </label>
-            <h5>R{{ formatPrice(week ? week.levyAmount : 0) }}</h5>
-          </div>
-          <div align="center" class="col">
-            <label for="price">Module/Week: </label>
-            <h5>R {{ formatPrice(week ? week.sellPrice : 0) }}</h5>
-          </div>
-        </div>
         <div class="row mt-5">
           <div align="center" class="col-md-6">
             <a href="javascript:history.back()" class="btn-white-border">Back</a>

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

@@ -1,5 +1,6 @@
 <template>
   <main id="main" style="padding-bottom:50px">
+    <carouselSection :resortImages="images" />
     <summarySection :resortCode="resortCode" :unitNumber="unitNumber" />
     <div class="container">
       <div class="row mt-5">
@@ -23,13 +24,15 @@ import { mapState, mapActions, mapGetters } from "vuex";
 import gallerySection from "../gallerySection";
 import tabSection from "./tabSection";
 import summarySection from "./summarySection";
+import carouselSection from "./carouselSection";
 
 export default {
   name: "unit",
   components: {
     gallerySection,
     tabSection,
-    summarySection
+    summarySection,
+    carouselSection
   },
   props: {
     resortCode: {},

src/components/user/registerAgencySection.vue

@@ -1,205 +1,143 @@
 <template>
-  <main id="main">
-    <section id="intro">
-      <div class="container">
-        <div class="row justify-content-center">
-          <div class="col-md-8">
-            <div class="intro-content" style="margin-top:-25px">
-              <div class="col-10 mx-auto">
-                <div class="card card-signin my-5">
-                  <div class="card-body">
-                    <h3 class="card-title text-center">Agency Details</h3>
-                    <form class="form-signin">
-                      <div class="row">
-                        <div class="col-sm-12 col-md-6">
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputName"
-                              v-model="registerAgency.name"
-                              class="form-control"
-                              placeholder="Agency Name"
-                              required
-                              autofocus
-                            />
-                          </div>
-                        </div>
-                        <div class="col-sm-12 col-md-6">
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputName"
-                              v-model="registerAgency.eaabeffcNumber"
-                              class="form-control"
-                              placeholder="EAAB FFC Number"
-                              required
-                              autofocus
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      <div class="row">
-                        <div class="col-sm-12">
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputName"
-                              v-model="registerAgency.companyRegNumber"
-                              class="form-control"
-                              placeholder="Company Registration Number"
-                              required
-                              autofocus
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      <h3 class="card-title text-center">Agency Administrator</h3>
-                      <hr />
-                      <div class="row">
-                        <div class="col-sm-12 col-md-6">
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputName"
-                              v-model="registerAgency.user.name"
-                              class="form-control"
-                              placeholder="Name"
-                              required
-                              autofocus
-                            />
-                          </div>
+  <div class="col-10 mx-auto">
+    <h3 class="card-title text-center">Agency Details</h3>
+    <div class="row my-3">
+      <div class="col-sm-12 col-md-6">
+        <input
+          type="text"
+          id="inputName"
+          v-model="registerAgency.name"
+          class="form-control uniInput"
+          placeholder="Agency Name"
+          required
+          autofocus
+        />
+      </div>
+      <div class="col-sm-12 col-md-6">
+        <input
+          type="text"
+          id="inputName"
+          v-model="registerAgency.eaabeffcNumber"
+          class="form-control uniInput"
+          placeholder="EAAB FFC Number"
+          required
+          autofocus
+        />
+      </div>
+    </div>
+    <div class="row my-3">
+      <div class="col-sm-12">
+        <input
+          type="text"
+          id="inputName"
+          v-model="registerAgency.companyRegNumber"
+          class="form-control uniInput"
+          placeholder="Company Registration Number"
+          required
+          autofocus
+        />
+      </div>
+    </div>
+    <h3 class="card-title text-center">Agency Administrator</h3>
+    <hr />
+    <div class="row my-3">
+      <div class="col-sm-12 col-md-6">
+        <input
+          type="text"
+          id="inputName"
+          v-model="registerAgency.user.name"
+          class="form-control uniInput my-3"
+          placeholder="Name"
+          required
+          autofocus
+        />
 
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputSurname"
-                              v-model="registerAgency.user.surname"
-                              class="form-control"
-                              placeholder="Surname"
-                              required
-                              autofocus
-                            />
-                          </div>
+        <input
+          type="text"
+          id="inputSurname"
+          v-model="registerAgency.user.surname"
+          class="form-control uniInput my-3"
+          placeholder="Surname"
+          required
+          autofocus
+        />
 
-                          <div class="form-label-group">
-                            <input
-                              type="email"
-                              id="inputEmail"
-                              v-model="registerAgency.user.email"
-                              class="form-control"
-                              placeholder="Email"
-                              required
-                              autofocus
-                            />
-                          </div>
-                        </div>
-                        <div class="col-sm-12 col-md-6">
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputCellphone"
-                              v-model="registerAgency.user.cellNumber"
-                              class="form-control"
-                              placeholder="Cellphone Number"
-                              required
-                              autofocus
-                            />
-                          </div>
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputLandLine"
-                              v-model="registerAgency.user.telephone"
-                              class="form-control"
-                              placeholder="Landline Number"
-                              required
-                              autofocus
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      <hr />
-                      <div class="row">
-                        <div class="col-sm-12">
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputUsername"
-                              v-model="registerAgency.user.username"
-                              class="form-control"
-                              placeholder="Username"
-                              required
-                              autofocus
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      <div class="row">
-                        <div class="col-sm-12 col-md-6">
-                          <div class="form-label-group">
-                            <input
-                              type="password"
-                              placeholder="Password"
-                              v-model="registerAgency.user.password"
-                              id="inputPassword"
-                              class="form-control"
-                              required
-                            />
-                          </div>
-                        </div>
-                        <div class="col">
-                          <div class="form-label-group">
-                            <input
-                              type="password"
-                              placeholder="Confirm Password"
-                              v-model="registerAgency.user.password"
-                              id="inputPasswordConfirm"
-                              class="form-control"
-                              required
-                            />
-                          </div>
-                        </div>
-                      </div>
+        <input
+          type="email"
+          id="inputEmail"
+          v-model="registerAgency.user.email"
+          class="form-control uniInput my-3"
+          placeholder="Email"
+          required
+          autofocus
+        />
+      </div>
+      <div class="col-sm-12 col-md-6">
+        <input
+          type="text"
+          id="inputCellphone"
+          v-model="registerAgency.user.cellNumber"
+          class="form-control uniInput my-3"
+          placeholder="Cellphone Number"
+          required
+          autofocus
+        />
 
-                      <button v-on:click="SubmitData()" class="btn-solid-blue" type="submit">
-                        SUBMIT
-                      </button>
-                      <router-link
-                        to="/user/login"
-                        class="btn-white-border"
-                        style="float:right"
-                        type="submit"
-                      >
-                        Cancel
-                      </router-link>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <input
+          type="text"
+          id="inputLandLine"
+          v-model="registerAgency.user.telephone"
+          class="form-control uniInput"
+          placeholder="Landline Number"
+          required
+          autofocus
+        />
+      </div>
+    </div>
+    <hr />
+    <div class="row my-3">
+      <div class="col-sm-12">
+        <input
+          type="text"
+          id="inputUsername"
+          v-model="registerAgency.user.username"
+          class="form-control uniInput"
+          placeholder="Username"
+          required
+          autofocus
+        />
+      </div>
+    </div>
+    <div class="row my-3">
+      <div class="col-sm-12 col-md-6">
+        <input
+          type="password"
+          placeholder="Password"
+          v-model="registerAgency.user.password"
+          id="inputPassword uniInput"
+          class="form-control uniInput"
+          required
+        />
+      </div>
+      <div class="col">
+        <input
+          type="password"
+          placeholder="Confirm Password"
+          v-model="registerAgency.user.password"
+          id="inputPasswordConfirm"
+          class="form-control uniInput"
+          required
+        />
       </div>
+    </div>
 
-      <carousel
-        :nav="false"
-        :dots="false"
-        :items="1"
-        :autoplay="true"
-        :loop="true"
-        id="intro-carousel"
-        style="margin-top:-50px"
-        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
-      >
-        <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-2.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-3.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-4.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-6.jpg" alt="" />
-      </carousel>
-    </section>
-  </main>
+    <button v-on:click="SubmitData()" class="btn-solid-blue" type="submit">
+      SUBMIT
+    </button>
+    <router-link to="/user/login" class="btn-white-border mb-5" style="float:right" type="submit">
+      Cancel
+    </router-link>
+  </div>
 </template>
 
 <script>

src/components/user/registerIndividual.vue

@@ -0,0 +1,163 @@
+<template>
+  <main id="main" style="padding-top:10px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-12 col-md-6 ">
+          <input
+            type="text"
+            id="inputName"
+            v-model="registerIndividual.name"
+            class="form-control uniInput my-2"
+            placeholder="Name"
+            required
+            autofocus
+          />
+
+          <input
+            type="text"
+            id="inputSurname"
+            v-model="registerIndividual.surname"
+            class="form-control uniInput my-2"
+            placeholder="Surname"
+            required
+            autofocus
+          />
+
+          <input
+            type="email"
+            id="inputEmail"
+            v-model="registerIndividual.email"
+            class="form-control uniInput my-2"
+            placeholder="Email"
+            required
+            autofocus
+          />
+        </div>
+        <div class="col-sm-12 col-md-6">
+          <input
+            type="text"
+            id="inputCellphone"
+            v-model="registerIndividual.cellNumber"
+            class="form-control uniInput my-2"
+            placeholder="Cellphone Number"
+            required
+            autofocus
+          />
+
+          <input
+            type="text"
+            id="inputLandLine"
+            v-model="registerIndividual.telephone"
+            class="form-control uniInput my-2"
+            placeholder="Landline Number"
+            required
+            autofocus
+          />
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-sm-12">
+          <input
+            type="text"
+            id="inputUsername"
+            v-model="registerIndividual.username"
+            class="form-control uniInput my-2"
+            placeholder="Username"
+            required
+            autofocus
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-12 col-md-6">
+          <input
+            type="password"
+            placeholder="Password "
+            v-model="registerIndividual.password"
+            id="inputPassword"
+            class="form-control uniInput my-2"
+            required
+          />
+        </div>
+        <div class="col">
+          <input
+            type="password"
+            placeholder="Confirm Password"
+            v-model="registerIndividual.confirmpassword"
+            id="inputPasswordConfirm"
+            class="form-control uniInput my-2"
+            required
+          />
+        </div>
+      </div>
+
+      <button v-on:click="SubmitData()" class="btn-solid-blue" type="submit">
+        SUBMIT
+      </button>
+      <router-link to="/user/login" class="btn-white-border" style="float:right" type="submit">
+        Cancel
+      </router-link>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import carousel from "vue-owl-carousel";
+export default {
+  components: {
+    carousel
+  },
+  props: {
+    RegisterHeader: { type: String, default: undefined }
+  },
+  name: "PrivateIndividual",
+  data() {
+    return {
+      user: undefined,
+      isPasswordShown: "password",
+      selectItems: [{ text: "password", value: 0 }],
+      selectErrors: "Some error with the field",
+      select: undefined,
+      textErrors: "Some error with the field",
+      text: "",
+      showPassword: false
+    };
+  },
+  computed: {
+    ...mapState("register", ["registerIndividual"]),
+
+    Header() {
+      return this.RegisterHeader ? "Agency Administrator Details" : "Private Individual";
+    }
+  },
+  methods: {
+    ...mapActions("register", [
+      "getIndividual",
+      "saveIndividual",
+      "updateIndividual",
+      "clearIndividual"
+    ]),
+    togglePassword() {
+      this.showPassword = true;
+      this.isPasswordShown = "text";
+    },
+    passwordToggled() {
+      this.showPassword = false;
+      this.isPasswordShown = "password";
+    },
+    SubmitData() {
+      this.saveIndividual(this.registerIndividual);
+
+      this.$router.push("/user/login");
+    },
+    Close() {
+      this.$router.push("/user/login");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/user/registerPage.vue

@@ -1,169 +1,74 @@
 <template>
   <main id="main">
-    <section id="intro">
-      <div class="container">
-        <div class="row justify-content-center">
-          <div class="col-md-8">
-            <div class="intro-content">
-              <div class="col-10 mx-auto">
-                <div class="card card-signin my-5">
-                  <div class="card-body">
-                    <h3 class="card-title text-center">Registration</h3>
-                    <form class="form-signin">
-                      <div class="row">
-                        <div class="col-sm-12 col-md-6">
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputName"
-                              v-model="registerIndividual.name"
-                              class="form-control"
-                              placeholder="Name"
-                              required
-                              autofocus
-                            />
-                          </div>
-
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputSurname"
-                              v-model="registerIndividual.surname"
-                              class="form-control"
-                              placeholder="Surname"
-                              required
-                              autofocus
-                            />
-                          </div>
-
-                          <div class="form-label-group">
-                            <input
-                              type="email"
-                              id="inputEmail"
-                              v-model="registerIndividual.email"
-                              class="form-control"
-                              placeholder="Email"
-                              required
-                              autofocus
-                            />
-                          </div>
-                        </div>
-                        <div class="col-sm-12 col-md-6">
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputCellphone"
-                              v-model="registerIndividual.cellNumber"
-                              class="form-control"
-                              placeholder="Cellphone Number"
-                              required
-                              autofocus
-                            />
-                          </div>
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputLandLine"
-                              v-model="registerIndividual.telephone"
-                              class="form-control"
-                              placeholder="Landline Number"
-                              required
-                              autofocus
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      <hr />
-                      <div class="row">
-                        <div class="col-sm-12">
-                          <div class="form-label-group">
-                            <input
-                              type="text"
-                              id="inputUsername"
-                              v-model="registerIndividual.username"
-                              class="form-control"
-                              placeholder="Username"
-                              required
-                              autofocus
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      <div class="row">
-                        <div class="col-sm-12 col-md-6">
-                          <div class="form-label-group">
-                            <input
-                              type="password"
-                              placeholder="Password"
-                              v-model="registerIndividual.password"
-                              id="inputPassword"
-                              class="form-control"
-                              required
-                            />
-                          </div>
-                        </div>
-                        <div class="col">
-                          <div class="form-label-group">
-                            <input
-                              type="password"
-                              placeholder="Confirm Password"
-                              v-model="registerIndividual.confirmpassword"
-                              id="inputPasswordConfirm"
-                              class="form-control"
-                              required
-                            />
-                          </div>
-                        </div>
-                      </div>
-
-                      <button v-on:click="SubmitData()" class="btn-solid-blue" type="submit">
-                        SUBMIT
-                      </button>
-                      <router-link
-                        to="/user/login"
-                        class="btn-white-border"
-                        style="float:right"
-                        type="submit"
-                      >
-                        Cancel
-                      </router-link>
-                    </form>
-                  </div>
-                </div>
-              </div>
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Register</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <ul class="nav nav-tabs mb-3 nav-justified" id="pills-tab" role="tablist">
+            <li class="nav-item">
+              <a
+                class="nav-link active"
+                id="pills-home-tab"
+                data-toggle="pill"
+                href="#pills-indiv"
+                role="tab"
+                aria-controls="pills-indiv"
+                aria-selected="true"
+                ><h2>Register</h2>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                id="pills-profile-tab"
+                data-toggle="pill"
+                href="#pills-agency"
+                role="tab"
+                aria-controls="pills-agency"
+                aria-selected="false"
+                ><h2>Agency Registration</h2></a
+              >
+            </li>
+          </ul>
+          <div class="tab-content" id="pills-tabContent">
+            <div
+              class="tab-pane fade show active"
+              id="pills-indiv"
+              role="tabpanel"
+              aria-labelledby="pills-indiv-tab"
+            >
+              <RegisterIndividual />
+            </div>
+            <div
+              class="tab-pane fade"
+              id="pills-agency"
+              role="tabpanel"
+              aria-labelledby="pills-agency-tab"
+            >
+              <RegisterAgency />
             </div>
           </div>
         </div>
       </div>
-
-      <carousel
-        :nav="false"
-        :dots="false"
-        :items="1"
-        :autoplay="true"
-        :loop="true"
-        id="intro-carousel"
-        style="margin-top:-50px"
-        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
-      >
-        <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-2.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-3.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-4.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
-        <img class="item" src="/img/intro-carousel/home-6.jpg" alt="" />
-      </carousel>
-    </section>
+    </div>
   </main>
 </template>
 
 <script>
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
-import carousel from "vue-owl-carousel";
+import RegisterIndividual from "./registerIndividual";
+import RegisterAgency from "./registerAgencySection";
 export default {
   components: {
-    carousel
+    RegisterIndividual,
+    RegisterAgency
   },
   props: {
     RegisterHeader: { type: String, default: undefined }
@@ -215,4 +120,27 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.nav-tabs li a {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom-color: rgb(221, 221, 221);
+}
+
+.nav-tabs li :hover {
+  background-color: rgb(27, 117, 187);
+}
+
+.nav-tabs li a.active {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom-color: rgb(221, 221, 221);
+}
+
+.nav-tabs li a :hover {
+  background-color: transparent;
+  color: white;
+}
+</style>

src/main.js

@@ -25,8 +25,8 @@ Vue.use(VueGoogleMaps, {
 });
 Vue.config.productionTip = false;
 //axios.defaults.baseURL = "http://localhost:57260";
-axios.defaults.baseURL = "http://training.provision-sa.com:82";
-//axios.defaults.baseURL = "http://localhost:8080/";
+//axios.defaults.baseURL = "http://training.provision-sa.com:82";
+axios.defaults.baseURL = "http://localhost:8080/";
 
 Vue.prototype.$axios = axios;