More work towards modelling existing database.

Also some more work on a responsive Work Order Page.

app/Asset.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Asset extends Model
+{
+    protected $table = 'pc_owner';
+    protected $primaryKey = 'pcid';
+
+    const CREATED_AT = 'created_date';
+    const UPDATED_AT = 'modified_date';
+
+    public function workOrders()
+    {
+        return $this->hasMany('App\WorkOrder');
+    }
+}

app/Events/AssetUpdated.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+use App\Asset;
+
+class AssetUpdated implements ShouldBroadcast
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    public $data;
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct($asset)
+    {
+        $this->data = $asset->toJson();
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return \Illuminate\Broadcasting\Channel|array
+     */
+    public function broadcastOn()
+    {
+        return new Channel('assets');
+    }
+}

app/Events/WorkOrderUpdated.php

@@ -15,8 +15,7 @@ class WorkOrderUpdated implements ShouldBroadcast
 {
     use Dispatchable, InteractsWithSockets, SerializesModels;
 
-    public $probdesc;
-    public $suggested;
+    public $data;
 
     /**
      * Create a new event instance.
@@ -25,8 +24,8 @@ class WorkOrderUpdated implements ShouldBroadcast
      */
     public function __construct($workOrder)
     {
-        $this->probdesc = $workOrder->probdesc;
-        $this->suggested = $workOrder->suggested;
+        $this->data = $workOrder->toJson();
+
     }
 
     /**

app/Http/Controllers/AssetsController.php

@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Asset;
+use Illuminate\Http\Request;
+
+class AssetsController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  \App\Asset  $asset
+     * @return \Illuminate\Http\Response
+     */
+    public function show(Asset $asset)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  \App\Asset  $asset
+     * @return \Illuminate\Http\Response
+     */
+    public function edit(Asset $asset)
+    {
+        return view('asset.edit', ['asset' => $asset]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \App\Asset  $asset
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, Asset $asset)
+    {
+        $asset->pcmanu = $request->input('pcmanu');
+        $asset->save();
+        event(new \App\Events\AssetUpdated($asset));
+        return redirect('/workorder/1');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \App\Asset  $asset
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(Asset $asset)
+    {
+        //
+    }
+}

app/WorkOrder.php

@@ -10,4 +10,9 @@ class WorkOrder extends Model
     protected $primaryKey = 'woid';
 
     const UPDATED_AT = 'modified_date';
+
+    public function asset()
+    {
+        return $this->belongsTo('App\Asset', 'pcid');
+    }
 }

public/css/app.css

@@ -10884,3 +10884,7 @@ a.text-dark:focus {
   }
 }
 
+.nav-link {
+  padding: 0.5rem 0.5rem;
+}
+

public/js/app.js

@@ -1932,10 +1932,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/probdesc.vue?vue&type=script&lang=js&":
-/*!*******************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/probdesc.vue?vue&type=script&lang=js& ***!
-  \*******************************************************************************************************************************************************************/
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/assetinfo.vue?vue&type=script&lang=js&":
+/*!********************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/assetinfo.vue?vue&type=script&lang=js& ***!
+  \********************************************************************************************************************************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1948,25 +1948,55 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 /* harmony default export */ __webpack_exports__["default"] = ({
+  props: ['asset'],
   data: function data() {
     return {
-      probdesc: "",
-      suggested: ""
+      data: JSON.parse(this.asset)
     };
   },
   mounted: function mounted() {
     var _this = this;
 
-    var url = window.location.href;
-    var id = url.substring(url.lastIndexOf('/') + 1);
-    axios.get('/api/workorder/' + id).then(function (response) {
-      _this.probdesc = response.data.probdesc;
-      _this.suggested = response.data.suggested;
+    Echo.channel('assets').listen('AssetUpdated', function (e) {
+      _this.data = JSON.parse(e.data);
     });
+  }
+});
+
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/woinfo.vue?vue&type=script&lang=js&":
+/*!*****************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/woinfo.vue?vue&type=script&lang=js& ***!
+  \*****************************************************************************************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ __webpack_exports__["default"] = ({
+  props: ['workOrder'],
+  data: function data() {
+    return {
+      data: JSON.parse(this.workOrder)
+    };
+  },
+  mounted: function mounted() {
+    var _this = this;
+
     Echo.channel('work-orders').listen('WorkOrderUpdated', function (e) {
-      _this.probdesc = e.probdesc;
-      _this.suggested = e.suggested;
-      console.log('Received Websocket Update');
+      _this.data = JSON.parse(e.data);
     });
   }
 });
@@ -47237,10 +47267,44 @@ render._withStripped = true
 
 /***/ }),
 
-/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/probdesc.vue?vue&type=template&id=b2bce49e&":
-/*!***********************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/probdesc.vue?vue&type=template&id=b2bce49e& ***!
-  \***********************************************************************************************************************************************************************************************************/
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/assetinfo.vue?vue&type=template&id=4fe1d2e3&":
+/*!************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/assetinfo.vue?vue&type=template&id=4fe1d2e3& ***!
+  \************************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("div", [
+    _c("p", [
+      _vm._v("PCID: "),
+      _c("span", { domProps: { textContent: _vm._s(this.data.pcid) } })
+    ]),
+    _vm._v(" "),
+    _c("p", [
+      _vm._v("Manufacturer: "),
+      _c("span", { domProps: { textContent: _vm._s(this.data.pcmanu) } })
+    ])
+  ])
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/woinfo.vue?vue&type=template&id=33ce32de&":
+/*!*********************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/woinfo.vue?vue&type=template&id=33ce32de& ***!
+  \*********************************************************************************************************************************************************************************************************/
 /*! exports provided: render, staticRenderFns */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -47252,11 +47316,41 @@ var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "list-items" }, [
-    _vm._v("\r\n    Problem Description: "),
-    _c("div", { domProps: { textContent: _vm._s(this.probdesc) } }),
-    _vm._v("\r\n    Suggested Solution: "),
-    _c("div", { domProps: { textContent: _vm._s(this.suggested) } })
+  return _c("div", [
+    _c("p", [
+      _vm._v("Problem Description: "),
+      _c("span", { domProps: { textContent: _vm._s(this.data.probdesc) } })
+    ]),
+    _vm._v(" "),
+    _c("p", [
+      _vm._v("Suggested Solution: "),
+      _c("span", { domProps: { textContent: _vm._s(this.data.suggested) } })
+    ]),
+    _vm._v(" "),
+    _c("p", [
+      _vm._v("Work Order ID: "),
+      _c("span", { domProps: { textContent: _vm._s(this.data.woid) } })
+    ]),
+    _vm._v(" "),
+    _c("p", [
+      _vm._v("Store: "),
+      _c("span", { domProps: { textContent: _vm._s(this.data.storeid) } })
+    ]),
+    _vm._v(" "),
+    _c("p", [
+      _vm._v("Check-in Date: "),
+      _c("span", { domProps: { textContent: _vm._s(this.data.dropdate) } })
+    ]),
+    _vm._v(" "),
+    _c("p", [
+      _vm._v("Check-out Date: "),
+      _c("span", { domProps: { textContent: _vm._s(this.data.pickupdate) } })
+    ]),
+    _vm._v(" "),
+    _c("p", [
+      _vm._v("Accessories: "),
+      _c("span", { domProps: { textContent: _vm._s(this.data.custassets) } })
+    ])
   ])
 }
 var staticRenderFns = []
@@ -59449,7 +59543,8 @@ window.Vue = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.common.
 // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
 
 Vue.component('example-component', __webpack_require__(/*! ./components/ExampleComponent.vue */ "./resources/js/components/ExampleComponent.vue")["default"]);
-Vue.component('probdesc', __webpack_require__(/*! ./components/probdesc.vue */ "./resources/js/components/probdesc.vue")["default"]);
+Vue.component('woinfo', __webpack_require__(/*! ./components/woinfo.vue */ "./resources/js/components/woinfo.vue")["default"]);
+Vue.component('assetinfo', __webpack_require__(/*! ./components/assetinfo.vue */ "./resources/js/components/assetinfo.vue")["default"]);
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application
@@ -59581,17 +59676,86 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./resources/js/components/probdesc.vue":
-/*!**********************************************!*\
-  !*** ./resources/js/components/probdesc.vue ***!
-  \**********************************************/
+/***/ "./resources/js/components/assetinfo.vue":
+/*!***********************************************!*\
+  !*** ./resources/js/components/assetinfo.vue ***!
+  \***********************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _assetinfo_vue_vue_type_template_id_4fe1d2e3___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./assetinfo.vue?vue&type=template&id=4fe1d2e3& */ "./resources/js/components/assetinfo.vue?vue&type=template&id=4fe1d2e3&");
+/* harmony import */ var _assetinfo_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./assetinfo.vue?vue&type=script&lang=js& */ "./resources/js/components/assetinfo.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _assetinfo_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _assetinfo_vue_vue_type_template_id_4fe1d2e3___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _assetinfo_vue_vue_type_template_id_4fe1d2e3___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/assetinfo.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/assetinfo.vue?vue&type=script&lang=js&":
+/*!************************************************************************!*\
+  !*** ./resources/js/components/assetinfo.vue?vue&type=script&lang=js& ***!
+  \************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_assetinfo_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./assetinfo.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/assetinfo.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_assetinfo_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/assetinfo.vue?vue&type=template&id=4fe1d2e3&":
+/*!******************************************************************************!*\
+  !*** ./resources/js/components/assetinfo.vue?vue&type=template&id=4fe1d2e3& ***!
+  \******************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_assetinfo_vue_vue_type_template_id_4fe1d2e3___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./assetinfo.vue?vue&type=template&id=4fe1d2e3& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/assetinfo.vue?vue&type=template&id=4fe1d2e3&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_assetinfo_vue_vue_type_template_id_4fe1d2e3___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_assetinfo_vue_vue_type_template_id_4fe1d2e3___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
+/***/ }),
+
+/***/ "./resources/js/components/woinfo.vue":
+/*!********************************************!*\
+  !*** ./resources/js/components/woinfo.vue ***!
+  \********************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _probdesc_vue_vue_type_template_id_b2bce49e___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./probdesc.vue?vue&type=template&id=b2bce49e& */ "./resources/js/components/probdesc.vue?vue&type=template&id=b2bce49e&");
-/* harmony import */ var _probdesc_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./probdesc.vue?vue&type=script&lang=js& */ "./resources/js/components/probdesc.vue?vue&type=script&lang=js&");
+/* harmony import */ var _woinfo_vue_vue_type_template_id_33ce32de___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./woinfo.vue?vue&type=template&id=33ce32de& */ "./resources/js/components/woinfo.vue?vue&type=template&id=33ce32de&");
+/* harmony import */ var _woinfo_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./woinfo.vue?vue&type=script&lang=js& */ "./resources/js/components/woinfo.vue?vue&type=script&lang=js&");
 /* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
 
 
@@ -59601,9 +59765,9 @@ __webpack_require__.r(__webpack_exports__);
 /* normalize component */
 
 var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
-  _probdesc_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
-  _probdesc_vue_vue_type_template_id_b2bce49e___WEBPACK_IMPORTED_MODULE_0__["render"],
-  _probdesc_vue_vue_type_template_id_b2bce49e___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  _woinfo_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _woinfo_vue_vue_type_template_id_33ce32de___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _woinfo_vue_vue_type_template_id_33ce32de___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
   false,
   null,
   null,
@@ -59613,38 +59777,38 @@ var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_
 
 /* hot reload */
 if (false) { var api; }
-component.options.__file = "resources/js/components/probdesc.vue"
+component.options.__file = "resources/js/components/woinfo.vue"
 /* harmony default export */ __webpack_exports__["default"] = (component.exports);
 
 /***/ }),
 
-/***/ "./resources/js/components/probdesc.vue?vue&type=script&lang=js&":
-/*!***********************************************************************!*\
-  !*** ./resources/js/components/probdesc.vue?vue&type=script&lang=js& ***!
-  \***********************************************************************/
+/***/ "./resources/js/components/woinfo.vue?vue&type=script&lang=js&":
+/*!*********************************************************************!*\
+  !*** ./resources/js/components/woinfo.vue?vue&type=script&lang=js& ***!
+  \*********************************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_probdesc_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./probdesc.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/probdesc.vue?vue&type=script&lang=js&");
-/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_probdesc_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_woinfo_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./woinfo.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/woinfo.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_woinfo_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
 
 /***/ }),
 
-/***/ "./resources/js/components/probdesc.vue?vue&type=template&id=b2bce49e&":
-/*!*****************************************************************************!*\
-  !*** ./resources/js/components/probdesc.vue?vue&type=template&id=b2bce49e& ***!
-  \*****************************************************************************/
+/***/ "./resources/js/components/woinfo.vue?vue&type=template&id=33ce32de&":
+/*!***************************************************************************!*\
+  !*** ./resources/js/components/woinfo.vue?vue&type=template&id=33ce32de& ***!
+  \***************************************************************************/
 /*! exports provided: render, staticRenderFns */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_probdesc_vue_vue_type_template_id_b2bce49e___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./probdesc.vue?vue&type=template&id=b2bce49e& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/probdesc.vue?vue&type=template&id=b2bce49e&");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_probdesc_vue_vue_type_template_id_b2bce49e___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_woinfo_vue_vue_type_template_id_33ce32de___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./woinfo.vue?vue&type=template&id=33ce32de& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/woinfo.vue?vue&type=template&id=33ce32de&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_woinfo_vue_vue_type_template_id_33ce32de___WEBPACK_IMPORTED_MODULE_0__["render"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_probdesc_vue_vue_type_template_id_b2bce49e___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_woinfo_vue_vue_type_template_id_33ce32de___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
 
 
 

resources/js/app.js

@@ -20,7 +20,8 @@ window.Vue = require('vue');
 // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
 
 Vue.component('example-component', require('./components/ExampleComponent.vue').default);
-Vue.component('probdesc', require('./components/probdesc.vue').default);
+Vue.component('woinfo', require('./components/woinfo.vue').default);
+Vue.component('assetinfo', require('./components/assetinfo.vue').default);
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to

resources/js/components/assetinfo.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <p>PCID: <span v-text="this.data.pcid"></span></p>
+        <p>Manufacturer: <span v-text="this.data.pcmanu"></span></p>
+    </div>
+</template>
+<script>
+export default {
+    props: ['asset'],
+    data() {
+        return {
+            data: JSON.parse(this.asset)
+        }
+    },
+    mounted() {
+        Echo.channel('assets')
+            .listen('AssetUpdated', (e) => {
+                this.data = JSON.parse(e.data);
+            });
+    }
+}
+</script>

resources/js/components/probdesc.vue

@@ -1,30 +0,0 @@
-<template>
-<div class="list-items">
-    Problem Description: <div v-text="this.probdesc"></div>
-    Suggested Solution: <div v-text="this.suggested"></div>
-</div>
-</template>
-<script>
-    export default {
-        data() {
-            return {
-                probdesc: "",
-                suggested: ""
-            }
-        },
-        mounted() {
-            let url = window.location.href;
-            let id = url.substring(url.lastIndexOf('/') + 1);
-            axios.get('/api/workorder/' + id).then((response) => {
-                this.probdesc = response.data.probdesc;
-                this.suggested = response.data.suggested;
-            });
-            Echo.channel('work-orders')
-                .listen('WorkOrderUpdated', (e) => {
-                    this.probdesc = e.probdesc;
-                    this.suggested = e.suggested;
-                    console.log('Received Websocket Update');
-                });
-        }
-    }
-</script>

resources/js/components/woinfo.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <p>Problem Description: <span v-text="this.data.probdesc"></span></p>
+        <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>Accessories: <span v-text="this.data.custassets"></span></p>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['workOrder'],
+        data() {
+            return {
+                data: JSON.parse(this.workOrder)
+            }
+        },
+        mounted() {
+            Echo.channel('work-orders')
+                .listen('WorkOrderUpdated', (e) => {
+                    this.data = JSON.parse(e.data);
+                });
+        }
+    }
+</script>

resources/sass/app.scss

@@ -6,3 +6,7 @@
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+
+.nav-link {
+    padding: 0.5rem 0.5rem;
+}

resources/views/asset/edit.blade.php

@@ -0,0 +1,12 @@
+@extends('layouts.app')
+
+@section('content')
+    <form method="POST" action="{{ route('updateasset', ['asset' => $asset]) }}">
+        @csrf
+        @method('PUT')
+        <label for="pcmanu">PC Manufacturer</label>
+        <input type="text" id="pcamnu" name="pcmanu" value="{{ $asset->pcmanu }}" autofous>
+        
+        <button type="submit">Update</button>
+
+@endsection

resources/views/workorders/show.blade.php

@@ -3,8 +3,60 @@
 @section('content')
 
 <div id="app">
-    <probdesc />
+    <div class="d-flex flex-wrap">
+        <div class="card m-3 flex-fill">
+            <div class="card-header">
+                <ul class="nav nav-tabs card-header-tabs nav-justified" id="assetTab" role="tablist">
+                    <li class="nav-item">
+                        <a class="nav-link active" id="assetinfo-tab" data-toggle="tab" href="#assetinfo" role="tab" aria-controls="assetinfo" aria-selected="true">Asset Info</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab" aria-controls="history" aria-selected="false">History</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" id="credentials-tab" data-toggle="tab" href="#credentials" role="tab" aria-controls="credentials" aria-selected="false">Credentials</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="card-body">
+                <div class="tab-content">
+                    <div class="tab-pane active" id="assetinfo" role="tabpanel" aria-labelledby="assetinfo-tab">
+                        <assetinfo asset="{{$workOrder->asset}}"></assetinfo>
+                        <a href="{{ route('editasset', ['asset' => $workOrder->asset]) }}" class="btn btn-primary">Edit</a>
+                    </div>
+                    <div class="tab-pane" id="history" role="tabpanel" aria-labelledby="history-tab">
+                        TODO
+                    </div>
+                    <div class="tab-pane" id="credentials" role="tabpanel" aria-labelledby="credentials-tab">
+                        TODO
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="card m-3 flex-fill">
+            <div class="card-header">
+                <ul class="nav nav-tabs card-header-tabs nav-justified" id="workorderTab" role="tablist">
+                    <li class="nav-item">
+                        <a class="nav-link active" id="workorderinfo-tab" data-toggle="tab" href="#workorderinfo" role="tab" aria-controls="workorderinfo" aria-selected="true">Work Order Info</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" id="attachments-tab" data-toggle="tab" href="#attachments" role="tab" aria-controls="attachments" aria-selected="false">Attachments</a>
+                    </li>
+                </ul>
+            </div>
+            <div class='card-body'>
+                <div class='tab-content'>
+                    <div class="tab-pane active" id="workorderinfo" role="tabpanel" aria-labelledby="workorderinfo-tab">
+                        <woinfo work-order="{{$workOrder}}"></woinfo>
+                        <a href="{{ route('editwo', ['workOrder' => $workOrder]) }}" class="btn btn-primary">Edit</a>
+                    </div>
+                    <div class="tab-pane" id="attachments" role="tabpanel" aria-labelledby="attachments-tab">
+                        TODO 2
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
-<a href={{ route('editwo', ['workOrder' => $workOrder]) }}>Edit</a>
 
 @endsection

routes/web.php

@@ -23,4 +23,7 @@ Route::get('/workorder/{workOrder}', 'WorkOrdersController@show');
 
 Route::get('/workorder/{workOrder}/edit', 'WorkOrdersController@edit')->name('editwo');
 
-Route::put('/workorder/{workOrder}/edit', 'WorkOrdersController@update')->name('updatewo');
+Route::put('/workorder/{workOrder}', 'WorkOrdersController@update')->name('updatewo');
+
+Route::get('/asset/{asset}/edit', 'AssetsController@edit')->name('editasset');
+Route::put('asset/{asset}', 'AssetsController@update')->name('updateasset');