Minor Fixes and Directions download

package-lock.json

@@ -796,7 +796,6 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.3.tgz",
       "integrity": "sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.2"
       }
@@ -1087,6 +1086,12 @@
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
       "dev": true
     },
+    "@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
@@ -2344,6 +2349,12 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
+      "optional": true
+    },
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
@@ -2610,6 +2621,11 @@
         "node-releases": "^1.1.46"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -2793,6 +2809,28 @@
       "integrity": "sha512-FjwPPtt/I07KyLPkBQ0g7/XuZg6oUkYBVnPHNj3VHJbOjmmJ/GdSo/GUY6MwINEQvjhP6WZVbX8Tvms8xh0D5A==",
       "dev": true
     },
+    "canvg": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.6.tgz",
+      "integrity": "sha512-eFUy8R/4DgocR93LF8lr+YUxW4PYblUe/Q1gz2osk/cI5n8AsYdassvln0D9QPhLXQ6Lx7l8hwtT8FLvOn2Ihg==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/raf": "^3.4.0",
+        "core-js": "3",
+        "raf": "^3.4.1",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+          "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==",
+          "optional": true
+        }
+      }
+    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz",
@@ -3594,6 +3632,15 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
+      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "optional": true,
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      }
+    },
     "css-loader": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
@@ -4252,6 +4299,12 @@
         "domelementtype": "1"
       }
     },
+    "dompurify": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.14.tgz",
+      "integrity": "sha512-oqcjyCLHLjWugZ6VwK0YfmRND/DFy/CuZhdasmymMfnxbzaaQxBSA1ATZIXWESGDj/nvq1vKLmRa7rTdbGgrmQ==",
+      "optional": true
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -6675,6 +6728,15 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-rc.7",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.7.tgz",
+      "integrity": "sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==",
+      "optional": true,
+      "requires": {
+        "css-line-break": "1.1.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -7468,6 +7530,32 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "jspdf": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.1.0.tgz",
+      "integrity": "sha512-NQygqZEKhSw+nExySJxB72Ge/027YEyIM450Vh/hgay/H9cgZNnkXXOQPRspe9EuCW4sq92zg8hpAXyyBdnaIQ==",
+      "requires": {
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.0.12",
+        "html2canvas": "^1.0.0-rc.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+          "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==",
+          "optional": true
+        }
+      }
+    },
+    "jspdf-autotable": {
+      "version": "3.5.9",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.5.9.tgz",
+      "integrity": "sha512-ZRfiI5P7leJuWmvC0jGVXu227m68C2Jfz1dkDckshmDYDeVFCGxwIBYdCUXJ8Eb2CyFQC2ok82fEWO+xRDovDQ=="
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -9853,6 +9941,15 @@
         "fast-diff": "1.1.2"
       }
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -10015,8 +10112,7 @@
     "regenerator-runtime": {
       "version": "0.13.3",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-      "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
-      "dev": true
+      "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
     },
     "regenerator-transform": {
       "version": "0.14.1",
@@ -10318,6 +10414,12 @@
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0=",
+      "optional": true
+    },
     "rimraf": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
@@ -11249,6 +11351,12 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "dev": true
     },
+    "stackblur-canvas": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.4.0.tgz",
+      "integrity": "sha512-Z+HixfgYV0ss3C342DxPwc+UvN1SYWqoz7Wsi3xEDWEnaBkSCL3Ey21gF4io+WlLm8/RIrSnCrDBIEcH4O+q5Q==",
+      "optional": true
+    },
     "stackframe": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.1.1.tgz",

package.json

@@ -16,6 +16,8 @@
     "core-js": "^2.6.11",
     "datatables.net": "^1.10.20",
     "jquery": "^3.4.1",
+    "jspdf": "^2.1.0",
+    "jspdf-autotable": "^3.5.9",
     "lodash": "^4.17.15",
     "material-design-icons-iconfont": "^3.0.3",
     "moment": "^2.24.0",

src/components/property/commercial/commercialSearchResults.vue

@@ -38,7 +38,7 @@
             <img src="img/no-homes.png" />
             <br />
             <br />
-            <p>Sorry no listing where found matching your search</p>
+            <p>Sorry no listings where found matching your search</p>
           </div>
         </div>
       </div>

src/components/property/commercial/createProperty/commercialCreate.vue

@@ -385,6 +385,8 @@ export default {
         this.property.userId = this.user.id;
       }
 
+      console.log(this.property);
+
       this.saveProperty(this.property)
         .then(fulfilled => {
           this.$router.push(`/property/commercial/property/${fulfilled.data.id}`);

src/components/property/mapSection.vue

@@ -92,10 +92,10 @@ export default {
                     this.mapObj.coords = coords;
                     this.$emit("map-location", this.mapObj);
                   }),
-                500
+                1000
               );
             }),
-          500
+          1000
         );
       });
     }

src/components/property/propertyCard.vue

@@ -15,10 +15,6 @@
                   <img :src="currentProperty.displayImage" alt="" />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
-                <p>
-                  <strong>Week</strong> #000 &nbsp;|&nbsp; <strong>Season</strong> Peak <br />
-                  <strong>Levy</strong> #R0000
-                </p>
                 <a href="#"> </a>
               </div>
             </router-link>
@@ -31,10 +27,6 @@
                   <img :src="currentProperty.displayImage" alt="" />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
-                <p>
-                  <strong>Week</strong> #000 &nbsp;|&nbsp; <strong>Season</strong> Peak <br />
-                  <strong>Levy</strong> #R0000
-                </p>
                 <a href="#"> </a>
               </div>
             </router-link>

src/components/property/residential/residentialSearchResults.vue

@@ -38,7 +38,7 @@
             <img src="img/no-homes.png" />
             <br />
             <br />
-            <p>Sorry no listing where found matching your search</p>
+            <p>Sorry no listings where found matching your search</p>
           </div>
         </div>
       </div>

src/components/timeshare/resort/contentSection.vue

@@ -63,13 +63,7 @@
             </table>
           </div> -->
           <p>
-            {{ resort.prUnitFacilities }}
-            <br />
-            <br />
             {{ resort.prNotes }}
-            <br />
-            <br />
-            {{ resort.prDirections }}
           </p>
           <div class="d-flex mt-3">
             <iframe

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

@@ -2,29 +2,31 @@
   <div class="container">
     <div class="row">
       <div class="col">
+        <label for=""> <strong>Directions From:</strong></label>
+        <br />
         <label v-if="startAddress === null" class="uniSelectLabel" for="weekInfoRegionSelect"
           >SELECT</label
         >
         <select v-model="startAddress" class="uniSelect form-control mb-3" @change="calcRoute()">
           <optgroup label="Cities">
-            <option value="-29.087217,26.154898">Bloemfontein</option>
-            <option value="-33.918861, 18.423300">Cape Town</option>
-            <option value="-29.883333, 31.049999">Durban</option>
-            <option value="-33.0153, 27.9116">East London</option>
-            <option value="-33.977074, 22.457581">George</option>
-            <option value="-26.195246, 28.034088">Johannesburg</option>
-            <option value="-25.4745, 30.9703">Nelspruit</option>
-            <option value="-23.9045, 29.4689">Polokwane</option>
-            <option value="-33.9180, 25.5701">Port Elizabeth</option>
-            <option value="-25.731340, 28.218370">Pretoria</option>
-            <option value="-28.44776, 21.25612">Upington</option>
+            <option value="-29.087217,26.154898,Bloemfontein">Bloemfontein</option>
+            <option value="-33.918861, 18.423300,Cape Town">Cape Town</option>
+            <option value="-29.883333, 31.049999,Durban">Durban</option>
+            <option value="-33.0153, 27.9116,East London">East London</option>
+            <option value="-33.977074, 22.457581,George">George</option>
+            <option value="-26.195246, 28.034088,Johannesburg">Johannesburg</option>
+            <option value="-25.4745, 30.9703,Nelspruit">Nelspruit</option>
+            <option value="-23.9045, 29.4689,Polokwane">Polokwane</option>
+            <option value="-33.9180, 25.5701,Port Elizabeth">Port Elizabeth</option>
+            <option value="-25.731340, 28.218370,Pretoria">Pretoria</option>
+            <option value="-28.44776, 21.25612,Upington">Upington</option>
           </optgroup>
 
           <optgroup label="Airports">
-            <option value="-26.13916667, 28.24611111">OR Tambo</option>
-            <option value="-29.61444444, 31.11638889">King Shaka</option>
-            <option value="-33.9843, 25.6170">Port Elizabeth</option>
-            <option value="-33.96944444, 18.59722222">Cape Town</option>
+            <option value="-26.13916667, 28.24611111,OR Tambo Airport">OR Tambo</option>
+            <option value="-29.61444444, 31.11638889,King Shaka Airport">King Shaka</option>
+            <option value="-33.9843, 25.6170,Port Elizabeth Airport">Port Elizabeth</option>
+            <option value="-33.96944444, 18.59722222,Cape Town Airport">Cape Town</option>
           </optgroup>
         </select>
         <GmapMap
@@ -36,7 +38,7 @@
         >
         </GmapMap>
         <div style="max-height:500px; overflow:auto">
-          <table class="table table-sm">
+          <table id="directionTable" class="table table-sm">
             <tr>
               <td colspan="4">{{ overallRoute }}</td>
             </tr>
@@ -52,6 +54,15 @@
             </tr>
           </table>
         </div>
+
+        <button
+          style="float:right"
+          v-if="fromSelected"
+          class="btn-solid-blue"
+          @click="saveDirections()"
+        >
+          Save
+        </button>
       </div>
     </div>
   </div>
@@ -60,6 +71,8 @@
 <script>
 /* eslint-disable */
 import { gmapApi } from "vue2-google-maps";
+import jsPDF from "jspdf";
+import "jspdf-autotable";
 export default {
   computed: {
     google: gmapApi,
@@ -68,17 +81,54 @@ export default {
     }
   },
   props: {
-    resortCoords: {}
+    resortCoords: {},
+    resortName: ""
   },
   data() {
     return {
       directionService: {},
       startAddress: null,
       directionSteps: [],
-      overallRoute: ""
+      overallRoute: "",
+      fromSelected: false,
+      selectedFromName: ""
     };
   },
   methods: {
+    saveDirections() {
+      const doc = new jsPDF();
+
+      doc.setDrawColor(186, 186, 186);
+      doc.line(15, 62, 195, 62);
+      doc.setFontSize(20);
+      doc.text(115, 25, "Directions:");
+      doc.setFontSize(9);
+      doc.text(115, 30, "From " + this.selectedFromName + " to " + this.resortName);
+      doc.addImage("/img/logos/UVProp.png", "PNG", 15, 10, 75, 25);
+      doc.setFontSize(12);
+      doc.autoTable({
+        html: "#directionTable",
+        startY: 47,
+        headStyles: {
+          fillColor: [255, 255, 255],
+          textColor: [0, 0, 0]
+        }
+      });
+
+      doc.setFontSize(10);
+      const pages = doc.internal.getNumberOfPages();
+      const pageWidth = doc.internal.pageSize.width;
+      const pageHeight = doc.internal.pageSize.height;
+      for (let j = 1; j < pages + 1; j++) {
+        let horizontalPos = pageWidth / 2;
+        let verticalPos = pageHeight - 10;
+        doc.setPage(j);
+        doc.text(`${j} of ${pages}`, horizontalPos, verticalPos, {
+          align: "center"
+        });
+      }
+      doc.save("directions.pdf");
+    },
     calcRoute() {
       var resortCoords = this.resortCoords.split(",");
       var resortLatLng = new google.maps.LatLng({
@@ -87,6 +137,7 @@ export default {
       });
 
       var startCoords = this.startAddress.split(",");
+      this.selectedFromName = startCoords[2];
       var startLatLng = new google.maps.LatLng({
         lat: parseFloat(startCoords[0]),
         lng: parseFloat(startCoords[1])
@@ -111,7 +162,7 @@ export default {
       this.directionsService.route(request, (result, status) => {
         if (status == "OK") {
           this.directionSteps = result.routes[0].legs[0].steps;
-          console.log(result.routes[0].legs[0]);
+          console.log(result);
           this.overallRoute =
             result.routes[0].legs[0].distance.text +
             ". About " +
@@ -122,6 +173,7 @@ export default {
           this.directionsRenderer.setDirections(result);
         }
       });
+      this.fromSelected = true;
     }
   }
 };

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

@@ -60,7 +60,7 @@
         <facilities :resortCode="resortCode" />
       </div>
       <div class="tab-pane fade" id="directions" role="tabpanel" aria-labelledby="profile-tab">
-        <directions :resortCoords="resortCoords" />
+        <directions :resortCoords="resortCoords" :resortName="resortName" />
       </div>
       <div class="tab-pane fade mt-3" id="layout" role="tabpanel" aria-labelledby="contact-tab">
         <img :src="layoutImages[0]" @click="index = 0" style="width:100%" />
@@ -98,7 +98,8 @@ export default {
   props: {
     resortCode: {},
     resortCoords: {},
-    layoutImages: {}
+    layoutImages: {},
+    resortName: ""
   }
 };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+  <main id="main" style="padding-bottom:50px">
     <summarySection :resortCode="resortCode" :unitNumber="unitNumber" />
     <div class="container">
       <div class="row mt-5">
@@ -9,6 +9,7 @@
             :resortCode="resortCode"
             :resortCoords="resort.prPostAdd1"
             :layoutImages="layouts"
+            :resortName="resort.prName"
           />
         </div>
       </div>

src/main.js

@@ -23,8 +23,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;
 

vue.config.js

@@ -2,8 +2,8 @@ module.exports = {
   devServer: {
     proxy: {
       "/api": {
-        target: "http://localhost:57260/",
-        //target: "http://training.provision-sa.com:82",
+        //target: "http://localhost:57260/",
+        target: "http://training.provision-sa.com:82",
         changeOrigin: true
       },
       "/nph-srep": {