Adds helper functions for Dates.Also employs them on the WorkOrder page.

public/css/app.css

@@ -10884,11 +10884,15 @@ a.text-dark:focus {
   }
 }
 
+.dashed-underline {
+  border-bottom: 1px dashed;
+}
+
 .nav-link {
   padding: 0.5rem 0.5rem;
 }
 
-.xs-collapse {
+.collapse {
   display: block;
 }
 

public/js/app.js

@@ -1974,6 +1974,7 @@ __webpack_require__.r(__webpack_exports__);
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _mixins_dateMixin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../mixins/dateMixin */ "./resources/js/mixins/dateMixin.js");
 //
 //
 //
@@ -1985,7 +1986,17 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+
 /* harmony default export */ __webpack_exports__["default"] = ({
+  mixins: [_mixins_dateMixin__WEBPACK_IMPORTED_MODULE_0__["default"]],
   props: ['workOrder'],
   data: function data() {
     return {
@@ -47338,13 +47349,51 @@ var render = function() {
     ]),
     _vm._v(" "),
     _c("p", [
-      _vm._v("Check-in Date: "),
-      _c("span", { domProps: { textContent: _vm._s(this.data.dropdate) } })
+      _vm._v("Check-in Date: \n        "),
+      _c(
+        "span",
+        {
+          staticClass: "dashed-underline",
+          attrs: {
+            "data-toggle": "tooltip",
+            "data-placement": "bottom",
+            title: this.getHRDate(this.data.dropdate)
+          }
+        },
+        [
+          _vm._v(
+            "\n            " +
+              _vm._s(Math.floor(this.daysSinceToday(this.data.dropdate))) +
+              " days ago\n        "
+          )
+        ]
+      )
     ]),
     _vm._v(" "),
     _c("p", [
-      _vm._v("Check-out Date: "),
-      _c("span", { domProps: { textContent: _vm._s(this.data.pickupdate) } })
+      _vm._v("Check-out Date: \n        "),
+      !this.isZero(this.data.pickupdate)
+        ? _c(
+            "span",
+            {
+              staticClass: "dashed-underline",
+              attrs: {
+                "data-toggle": "tooltip",
+                "data-placement": "bottom",
+                tittle: this.getHRDate(this.data.pickupdate)
+              }
+            },
+            [
+              _vm._v(
+                "\n            " +
+                  _vm._s(
+                    Math.floor(this.daysSinceToday(this.data.pickupdate))
+                  ) +
+                  " days ago\n        "
+              )
+            ]
+          )
+        : _vm._e()
     ]),
     _vm._v(" "),
     _c("p", [
@@ -59554,6 +59603,9 @@ Vue.component('assetinfo', __webpack_require__(/*! ./components/assetinfo.vue */
 var app = new Vue({
   el: '#app'
 });
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip();
+});
 
 /***/ }),
 
@@ -59812,6 +59864,47 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./resources/js/mixins/dateMixin.js":
+/*!******************************************!*\
+  !*** ./resources/js/mixins/dateMixin.js ***!
+  \******************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony default export */ __webpack_exports__["default"] = ({
+  methods: {
+    treatAsUTC: function treatAsUTC(date) {
+      var result = new Date(date);
+      result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
+      return result;
+    },
+    daysSinceToday: function daysSinceToday(date) {
+      var currentDate = new Date();
+      var millisecondsPerDay = 24 * 60 * 60 * 1000;
+      return (this.treatAsUTC(currentDate) - this.treatAsUTC(date)) / millisecondsPerDay;
+    },
+    getHRDate: function getHRDate(dateString) {
+      var date = new Date(dateString);
+      var year = date.getFullYear();
+      var month = date.toLocaleString('default', {
+        month: 'short'
+      });
+      var day = date.getDate();
+      var hour = date.getHours() % 12;
+      var minute = date.getMinutes();
+      var period = date.getHours() < 24 ? 'AM' : 'PM';
+      return month + " " + day + ", " + year + " " + hour + ":" + minute + " " + period;
+    },
+    isZero: function isZero(dateString) {
+      return dateString === '0000-00-00 00:00:00';
+    }
+  }
+});
+
 /***/ }),
 
 /***/ "./resources/sass/app.scss":

resources/js/app.js

@@ -32,3 +32,7 @@ Vue.component('assetinfo', require('./components/assetinfo.vue').default);
 const app = new Vue({
     el: '#app',
 });
+
+$(function () {
+    $('[data-toggle="tooltip"]').tooltip()
+  })

resources/js/components/woinfo.vue

@@ -4,17 +4,27 @@
         <p>Suggested Solution: <span v-text="this.data.suggested"></span></p>
         <p>Work Order ID: <span v-text="this.data.woid"></span></p>
         <p>Store: <span v-text="this.data.storeid"></span></p>
-        <p>Check-in Date: <span v-text="this.data.dropdate"></span></p>
-        <p>Check-out Date: <span v-text="this.data.pickupdate"></span></p>
+        <p>Check-in Date: 
+            <span class="dashed-underline" data-toggle="tooltip" data-placement="bottom" v-bind:title=this.getHRDate(this.data.dropdate)>
+                {{ Math.floor(this.daysSinceToday(this.data.dropdate)) }} days ago
+            </span>
+        </p>
+        <p>Check-out Date: 
+            <span class="dashed-underline" data-toggle="tooltip" data-placement="bottom" v-if="!this.isZero(this.data.pickupdate)" v-bind:tittle=this.getHRDate(this.data.pickupdate)>
+                {{ Math.floor(this.daysSinceToday(this.data.pickupdate)) }} days ago
+            </span>
+        </p>
         <p>Accessories: <span v-text="this.data.custassets"></span></p>
     </div>
 </template>
 <script>
+    import dateMixin from '../mixins/dateMixin'
     export default {
+        mixins: [dateMixin],
         props: ['workOrder'],
         data() {
             return {
-                data: JSON.parse(this.workOrder)
+                data: JSON.parse(this.workOrder),
             }
         },
         mounted() {

resources/js/mixins/dateMixin.js

@@ -0,0 +1,28 @@
+export default {
+    methods: {
+        treatAsUTC: function (date) {
+            var result = new Date(date);
+            result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
+            return result;
+        },
+        daysSinceToday: function (date) {
+            var currentDate = new Date();
+            var millisecondsPerDay = 24*60*60*1000;
+            return (this.treatAsUTC(currentDate) - this.treatAsUTC(date)) / millisecondsPerDay;
+        },
+        getHRDate: function (dateString) {
+            var date = new Date(dateString);
+            var year = date.getFullYear();
+            var month = date.toLocaleString('default', {month: 'short'});
+            var day = date.getDate();
+            var hour = date.getHours() % 12;
+            var minute = date.getMinutes();
+            var period = date.getHours() < 24 ? 'AM' : 'PM';
+
+            return month + " " + day + ", " + year + " " + hour + ":" + minute + " " + period;
+        },
+        isZero: function(dateString) {
+            return dateString === '0000-00-00 00:00:00'
+        }
+    }
+}

resources/sass/app.scss

@@ -7,11 +7,15 @@
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
 
+.dashed-underline {
+    border-bottom: 1px dashed;
+}
+
 .nav-link {
     padding: 0.5rem 0.5rem;
 }
 
-.xs-collapse {
+.collapse {
     display: block;
 }