Merge branch 'master' of rav.triplestart.com:jmudaka/stagfe2

app/Http/Controllers/AppointmentController.php

@@ -100,6 +100,7 @@ class AppointmentController extends Controller
                 "clientUid" => $appointment->client->uid,
                 "proId" => $appointment->pro->id,
                 "proUid" => $appointment->pro->uid,
+                "proName" => $appointment->pro->displayName(),
                 "start" => convertToTimezone($appointment->start_time, $timeZone),
                 "end" => convertToTimezone($appointment->end_time, $timeZone),
                 "clientOnly" => !in_array($appointment->pro->id, $proIds),

app/Http/Controllers/HomeController.php

@@ -188,13 +188,23 @@ class HomeController extends Controller
 
         $keyNumbers  = [];
 
-        $totalPatients = Client::where('mcp_pro_id', $performer->pro->id)->count();
-        $keyNumbers['totalPatients'] = $totalPatients;
-
-        $patientNotSeenYet = Client::where('mcp_pro_id', $performer->pro->id)
-            ->where(function ($query) {
-                $query->where('has_mcp_done_onboarding_visit', 'UNKNOWN')
-                    ->orWhere('has_mcp_done_onboarding_visit', 'NO');
+        $queryClients = $this->performer()->pro->getAccessibleClientsQuery();
+
+        $keyNumbers['totalPatients'] = $queryClients->count();
+
+        // patientNotSeenYet
+        $patientNotSeenYet = $queryClients
+            ->where(function ($query) use ($performer) {     // own patient and primary OB visit pending
+                $query->where('mcp_pro_id', $performer->pro->id)
+                    ->where('has_mcp_done_onboarding_visit', '!=', 'YES');
+            })
+            ->orWhere(function ($query) {   // mcp of any client program and program OB pending
+                $query->where(function ($_query) {
+                    $_query->select(DB::raw('COUNT(id)'))
+                        ->from('client_program')
+                        ->whereColumn('client_id', 'client.id')
+                        ->where('has_mcp_done_onboarding_visit', '!=', 'YES');
+                }, '>=', 1);
             })->count();
         $keyNumbers['patientsNotSeenYet'] = $patientNotSeenYet;
 
@@ -314,22 +324,26 @@ class HomeController extends Controller
 
     public function patients(Request $request, $filter = '')
     {
-        $proID = $this->performer()->pro->id;
-        if ($this->performer()->pro->pro_type === 'ADMIN') {
-            $query = Client::where('id', '>', 0);
-        } else {
-            $query = Client::where(function ($q) use ($proID) {
-                $q->where('mcp_pro_id', $proID)
-                    ->orWhere('cm_pro_id', $proID)
-                    ->orWhere('rmm_pro_id', $proID)
-                    ->orWhere('rme_pro_id', $proID)
-                    ->orWhereRaw('id IN (SELECT client_id FROM client_pro_access WHERE is_active AND pro_id = ?)', [$proID])
-                    ->orWhereRaw('id IN (SELECT client_id FROM appointment WHERE pro_id = ?)', [$proID]);
-            });
-        }
+        $performer = $this->performer();
+        $query = $performer->pro->getAccessibleClientsQuery();
+
         switch ($filter) {
             case 'not-yet-seen':
-                $query = $query->where('has_mcp_done_onboarding_visit', '<>', 'YES');
+                $query = $query
+                    ->where(function ($query) use ($performer) {
+                        $query
+                            ->where(function ($query) use ($performer) {     // own patient and primary OB visit pending
+                                $query->where('mcp_pro_id', $performer->pro->id)
+                                    ->where('has_mcp_done_onboarding_visit', '<>', 'YES');
+                            })
+                            ->orWhere(function ($query) use ($performer) {   // mcp of any client program and program OB pending
+                                $query->select(DB::raw('COUNT(id)'))
+                                    ->from('client_program')
+                                    ->whereColumn('client_id', 'client.id')
+                                    ->where('mcp_pro_id', $performer->pro->id)
+                                    ->where('has_mcp_done_onboarding_visit', '<>', 'YES');
+                            }, '>=', 1);
+                    });
                 break;
 
                 // more cases can be added as needed
@@ -350,7 +364,7 @@ class HomeController extends Controller
             $q->where('name_first', 'ILIKE', '%' . $term . '%')
                 ->orWhere('name_last', 'ILIKE', '%' . $term . '%');
         });
-        
+
         if($pro->pro_type != 'ADMIN'){
             $clientQuery->whereIn('id', $pro->getMyClientIds());
         }

app/Http/Controllers/PatientController.php

@@ -12,6 +12,7 @@ use App\Models\Facility;
 use App\Models\Handout;
 use App\Models\NoteTemplate;
 use App\Models\Pro;
+use App\Models\Program;
 use App\Models\SectionTemplate;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\File;
@@ -32,7 +33,8 @@ class PatientController extends Controller
             ->where('is_removed', false)
             ->orderBy('content_text', 'asc')
             ->get();
-        return view('app.patient.dashboard', compact('patient', 'facilities', 'devices', 'dxInfoLines'));
+        return view('app.patient.dashboard',
+            compact('patient', 'facilities', 'devices', 'dxInfoLines'));
     }
 
     public function actionItems(Request $request, Client $patient )

app/Models/Client.php

@@ -159,4 +159,14 @@ class Client extends Model
         return $this->hasOne(McpRequest::class, 'id', 'active_mcp_request_id');
     }
 
+    public function clientPrograms() {
+        return $this->hasMany(ClientProgram::class, 'client_id', 'id')
+            ->where('is_active', true);
+    }
+
+    public function tickets() {
+        return $this->hasMany(Ticket::class, 'client_id', 'id')
+            ->orderBy('created_at', 'desc');
+    }
+
 }

app/Models/ClientProgram.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Models;
+
+# use Illuminate\Database\Eloquent\Model;
+
+class ClientProgram extends Model
+{
+    protected $table = "client_program";
+
+    public function mcp() {
+        return $this->hasOne(Pro::class, 'id', 'mcp_pro_id');
+    }
+
+    public function manager() {
+        return $this->hasOne(Pro::class, 'id', 'manager_pro_id');
+    }
+
+}

app/Models/ClientProgramMonthEntry.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Models;
+
+# use Illuminate\Database\Eloquent\Model;
+
+class ClientProgramMonthEntry extends Model
+{
+    protected $table = "client_program_month_entry";
+}

app/Models/Measurement.php

@@ -7,4 +7,13 @@ namespace App\Models;
 class Measurement extends Model
 {
     protected $table = 'measurement';
+
+    public function client()
+    {
+        return $this->hasOne(Client::class, 'id', 'client_id');
+    }
+
+    public function numCPMEntries() {
+        return ClientProgramMonthEntry::where('measurement_id', $this->id)->where('is_cancelled', false)->count();
+    }
 }

app/Models/Pro.php

@@ -6,6 +6,7 @@ namespace App\Models;
 
 use App\Helpers\TimeLine;
 use Exception;
+use Illuminate\Support\Facades\DB;
 
 class Pro extends Model
 {
@@ -301,4 +302,47 @@ class Pro extends Model
             ->get();
     }
 
+    public function getAccessibleClientsQuery() {
+        $proID = $this->id;
+        if ($this->pro_type === 'ADMIN') {
+            $query = Client::where('id', '>', 0);
+        } else {
+            $query = Client::where(function ($q) use ($proID) {
+                $q->where('mcp_pro_id', $proID + 1)
+                    ->orWhere('cm_pro_id', $proID)
+                    ->orWhere('rmm_pro_id', $proID)
+                    ->orWhere('rme_pro_id', $proID)
+                    ->orWhereRaw('id IN (SELECT client_id FROM client_pro_access WHERE is_active AND pro_id = ?)', [$proID])
+                    ->orWhereRaw('id IN (SELECT client_id FROM appointment WHERE pro_id = ?)', [$proID])
+                    ->orWhereRaw('id IN (SELECT mcp_pro_id FROM client_program WHERE client_id = client.id AND is_active = TRUE)')
+                    ->orWhereRaw('id IN (SELECT manager_pro_id FROM client_program WHERE client_id = client.id AND is_active = TRUE)');
+            });
+        }
+        return $query;
+    }
+
+    public function canAddCPMEntryForMeasurement(Measurement $measurement, Pro $pro)
+    {
+        // check if client has any programs where this measurement type is allowed
+        $allowed = false;
+        $client = $measurement->client;
+        $clientPrograms = $client->clientPrograms;
+
+        if($pro->pro_type !== 'ADMIN') {
+            $clientPrograms = $clientPrograms->filter(function($_clientProgram) use ($pro) {
+                return  $_clientProgram->manager_pro_id === $pro->id;
+            });
+        }
+
+        if(count($clientPrograms)) {
+            foreach ($clientPrograms as $clientProgram) {
+                if(strpos(strtolower($clientProgram->measurement_labels), '|' . strtolower($measurement->label) . '|') !== FALSE) {
+                    $allowed = true;
+                    break;
+                }
+            }
+        }
+
+        return $allowed ? $clientPrograms : FALSE;
+    }
 }

app/Models/Ticket.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+# use Illuminate\Database\Eloquent\Model;
+
+class Ticket extends Model
+{
+    protected $table = "ticket";
+
+}

config/app.php

@@ -56,6 +56,9 @@ return [
 
     'asset_url' => env('ASSET_URL', null),
 
+    'agora_appid' => env('AGORA_APPID'),
+    'agora_mode' => env('AGORA_MODE'),
+
     /*
     |--------------------------------------------------------------------------
     | Application Timezone

public/css/style.css

@@ -128,6 +128,12 @@ body.stag_rhs_collapsed .app-right-panel {
 .mcp-theme-1 .on-hover-opaque:hover {
     opacity: 1;
 }
+.mcp-theme-1 .opacity-60 {
+    opacity: .6;
+}
+.mcp-theme-1 .overflow-visible {
+    overflow: visible;
+}
 .mcp-theme-1 .text-secondary-light {
     color: #c9ddef !important;
 }

public/js/mc.js

@@ -250,7 +250,7 @@ function initCreateNote() {
             createNewNote($(this).attr('data-patient-uid'), $(this).attr('data-hcp-uid'), $(this).attr('data-effective-date'));
         });
     if ($('select[name="hasMcpDoneOnboardingVisit"]').length) {
-        $('select[name="hasMcpDoneOnboardingVisit"]')[0].onchange();
+        $('select[name="hasMcpDoneOnboardingVisit"]').trigger('change');
     }
 }
 

public/js/option-list.js

@@ -0,0 +1,13 @@
+(function() {
+    function init() {
+        $(document)
+            .off('mousedown.option-list', '.data-option-list>div')
+            .on('mousedown.option-list', '.data-option-list>div', function() {
+                console.log(12);
+                $(this).parent().prev('input[data-option-list]').val('').focus();
+                document.execCommand('insertText', false, $(this).text());
+                return false;
+            });
+    }
+    addMCInitializer('option-list', init);
+})();

public/js/stag-popup.js

@@ -0,0 +1,51 @@
+function showStagPopup(_key, _noAutoFocus) {
+    $('html, body').addClass('no-scroll');
+    let stagPopup = $('[stag-popup-key="' + _key + '"]');
+    stagPopup.addClass('show');
+    stagPopup.find('[moe][initialized]').removeAttr('initialized');
+    initMoes();
+    if(!_noAutoFocus) {
+        window.setTimeout(function() {
+            stagPopup.find('input[type="text"]:not([readonly]):visible,select:visible').first().focus();
+        }, 150);
+    }
+    return false;
+}
+function submitStagPopup(_form) {
+    if(!_form[0].checkValidity()) {
+        _form[0].reportValidity();
+        return false;
+    }
+    showMask();
+    $.post(_form.attr('action'), _form.serialize(), function(_data) {
+        fastReload();
+    });
+    return false;
+}
+function closeStagPopup() {
+    $('.stag-popup').removeClass('show');
+    $('html, body').removeClass('no-scroll');
+    return false;
+}
+(function() {
+    window.initStagPopupEvents = function () {
+        $(document).on('click', '.stag-popup', function(_e) {
+            if($(_e.target).is('.stag-popup')) {
+                closeStagPopup();
+            }
+        });
+        // catch ESC and discard any visible popups
+        $(document)
+            .off('keydown.stag-popup-escape')
+            .on('keydown.stag-popup-escape', function (e) {
+                if(e.which === 27) {
+                    let visiblePopups = $('.stag-popup.show');
+                    if (visiblePopups.length) {
+                        closeStagPopup();
+                        return false;
+                    }
+                }
+            });
+    }
+    addMCInitializer('stag-popups', window.initStagPopupEvents);
+})();

resources/views/app/dashboard.blade.php

@@ -20,19 +20,19 @@
                             <tbody>
                                 <tr>
                                     <th class="px-2 text-center">{{$keyNumbers['totalPatients']}}</th>
-                                    <th class="pl-2"><a target="_top" href="/mc/patients">Total patients</a></th>
+                                    <th class="pl-2"><a native target="_top" href="/patients">Total patients</a></th>
                                 </tr>
                                 <tr>
                                     <th class="px-2 text-center">{{$keyNumbers['patientsNotSeenYet']}}</th>
-                                    <th class="pl-2"><a target="_top" href="/mc/patients/not-yet-seen">Patients I have not seen yet</a></th>
+                                    <th class="pl-2"><a native target="_top" href="/patients/not-yet-seen">Patients I have not seen yet</a></th>
                                 </tr>
                                 <tr>
                                     <th class="px-2 text-center">{{$keyNumbers['pendingBillsToSign']}}</th>
-                                    <th class="pl-2"><a target="_top" href="/mc/practice-management/bills/not-yet-signed">Pending bills to sign</a></th>
+                                    <th class="pl-2"><a native target="_top" href="/practice-management/bills/not-yet-signed">Pending bills to sign</a></th>
                                 </tr>
                                 <tr>
                                     <th class="px-2 text-center">{{$keyNumbers['pendingNotesToSign']}}</th>
-                                    <th class="pl-2"><a target="_top" href="/mc/practice-management/notes/not-yet-signed">Pending notes to sign</a></th>
+                                    <th class="pl-2"><a native target="_top" href="/practice-management/notes/not-yet-signed">Pending notes to sign</a></th>
                                 </tr>
                             </tbody>
                         </table>

resources/views/app/patient/action-items.blade.php

@@ -3,347 +3,23 @@
 /** @var \App\Models\Client $patient */
 ?>
 @section('inner-content')
-    <div class="">
-        <div class="d-flex align-items-center pb-2">
-            <h4 class="font-weight-bold m-0">ERx</h4>
-            <span class="mx-2 text-secondary">|</span>
-            <div moe>
-                <a start show class="py-0 font-weight-normal">Add</a>
-                <form url="/api/actionItem/create" wide>
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="prescriberProUid" value="{{ $pro->uid }}">
-                    <input type="hidden" name="category" value="DRUG">
-                    <div class="mb-2">
-                        <label for="" class="control-label text-sm text-secondary mb-1">Pharmacy</label>
-                        <select name="toFacilityUid"
-                                class="form-control form-control-sm">
-                            <option value="">-- Pharmacy --</option>
-                            @foreach ($facilities as $facility)
-                                <option value="{{$facility->uid}}">{{$facility->name}}</option>
-                            @endforeach
-                        </select>
-                    </div>
-                    <div class="mb-2">
-                        <input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Title *" required>
-                    </div>
-                    <div class="mb-2">
-                        <input type="text" class="form-control form-control-sm" name="contentDetail" value="" placeholder="Directions">
-                    </div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-        <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
-            <thead>
-            <tr>
-                <th class="px-2 text-secondary border-bottom-0">Pharmacy</th>
-                <th class="px-2 text-secondary border-bottom-0 w-25">Action</th>
-                <th class="px-2 text-secondary border-bottom-0">Created</th>
-                <th class="px-2 text-secondary border-bottom-0">Status</th>
-                <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
-            </tr>
-            </thead>
-            <tbody>
-            <?php $prevItemType = false; ?>
-            @foreach($patient->actionItems as $item)
-                @if($item->action_item_category === 'DRUG')
-                <tr>
-                    <td class="px-2">
-                        {{$item->facility ? $item->facility->name : ''}}
-                        <span moe>
-                            <a start show class="on-hover-opaque"><i class="fa fa-edit"></i></a>
-                            <form url="/api/actionItem/updateToFacility">
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <label for="" class="control-label text-sm text-secondary mb-1">Pharmacy *</label>
-                                    <select name="toFacilityUid" class="form-control form-control-sm" required>
-                                        <option value="">-- Pharmacy --</option>
-                                        @foreach ($facilities as $facility)
-                                            <option {{ $item->to_facility_id === $facility->id ? 'selected' : '' }} value="{{$facility->uid}}">{{$facility->name}}</option>
-                                        @endforeach
-                                    </select>
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                    </td>
-                    <td class="px-2">
-                        {{$item->content_text}}
-                        <span moe>
-                            <a start show class="on-hover-opaque"><i class="fa fa-edit"></i></a>
-                            <form url="/api/actionItem/updateContent" wide>
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="contentText" value="{{ $item->content_text }}" placeholder="Title *" required>
-                                </div>
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="contentDetail" value="{{ $item->content_detail }}" placeholder="Details">
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                        <div class="text-sm text-secondary">{{$item->content_detail}}</div>
-                    </td>
-                    <td class="px-2">{{friendly_date_time($item->created_at, false)}}</td>
-                    <td class="px-2">
-                        {{$item->status_category}}
-                        <span moe>
-                            <a start show class="on-hover-opaque"><i class="fa fa-edit"></i></a>
-                            <form url="/api/actionItem/updateStatus">
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <label for="" class="control-label text-sm text-secondary mb-1">Status *</label>
-                                    <select name="statusCategory" class="form-control form-control-sm" required>
-                                        <option {{ $item->status_category === 'OPEN' ? 'selected' : '' }} value="OPEN">Open</option>
-                                        <option {{ $item->status_category === 'CLOSED' ? 'selected' : '' }} value="CLOSED">Closed</option>
-                                    </select>
-                                </div>
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="statusMemo" value="" placeholder="Memo">
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                    </td>
-                    <td class="px-2 text-center">
-                        <div class="d-flex align-items-center justify-content-start">
-                        @if($item->is_signed_by_prescriber)
-                            <span class="text-secondary">
-                                <i class="fa fa-check"></i>
-                                Signed
-                            </span>
-                            <span class="mx-2 text-secondary">|</span>
-                        @else
-                            @if($pro->id === $item->prescriber_pro_id)
-                                <span moe relative>
-                                    <a start show>Sign</a>
-                                    <form url="/api/actionItem/signAsPrescriber" right>
-                                        <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                        <p class="small min-width-200px text-left">Sign this action items as the prescriber?</p>
-                                        <div class="d-flex align-items-center">
-                                            <button class="btn btn-sm btn-success mr-2" submit>Yes</button>
-                                            <button class="btn btn-sm btn-default mr-2 border" cancel>No</button>
-                                        </div>
-                                    </form>
-                                </span>
-                                <span class="mx-2 text-secondary">|</span>
-                            @endif
-                        @endif
-                        <span moe relative>
-                            <a start show>eFax</a>
-                            <form url="/api/actionItem/efax" right>
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="toFaxNumber" value="" placeholder="To Number *" required>
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Send</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                        </div>
-                    </td>
-                </tr>
-                @endif
-            @endforeach
-            </tbody>
-        </table>
-    </div>
 
-    <div class="mt-5">
-        <div class="d-flex align-items-center pb-2">
-            <h4 class="font-weight-bold m-0">Orders</h4>
-            <span class="mx-2 text-secondary">|</span>
-            <div moe>
-                <a start show class="py-0 font-weight-normal">Add</a>
-                <form url="/api/actionItem/create" wide>
-                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                    <input type="hidden" name="prescriberProUid" value="{{ $pro->uid }}">
-                    <div class="mb-2">
-                        <label for="" class="control-label text-sm text-secondary mb-1">Facility</label>
-                        <select name="toFacilityUid"
-                                class="form-control form-control-sm">
-                            <option value="">-- Facility --</option>
-                            @foreach ($facilities as $facility)
-                                <option value="{{$facility->uid}}">{{$facility->name}}</option>
-                            @endforeach
-                        </select>
-                    </div>
-                    <div class="mb-2">
-                        <label for="" class="control-label text-sm text-secondary mb-1">Category *</label>
-                        <select name="category"
-                                class="form-control form-control-sm" required>
-                            <option value="">-- Category --</option>
-                            <option value="DIAGNOSTIC">Diagnostic</option>
-                            <option value="APPOINTMENT">Appointment</option>
-                            <option value="EXERCISE">Exercise</option>
-                            <option value="DIETETITC">Dietetitc</option>
-                            <option value="EQUIPMENT">Equipment</option>
-                            <option value="OTHER">Other</option>
-                        </select>
-                    </div>
-                    <div class="mb-2">
-                        <input type="text" class="form-control form-control-sm" name="contentText" value="" placeholder="Title *" required>
-                    </div>
-                    <div class="mb-2">
-                        <input type="text" class="form-control form-control-sm" name="contentDetail" value="" placeholder="Details">
-                    </div>
-                    <div class="d-flex align-items-center">
-                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-        <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
-            <thead>
-            <tr>
-                <th class="px-2 text-secondary border-bottom-0">Category</th>
-                <th class="px-2 text-secondary border-bottom-0">Facility</th>
-                <th class="px-2 text-secondary border-bottom-0 w-25">Action</th>
-                <th class="px-2 text-secondary border-bottom-0">Created</th>
-                <th class="px-2 text-secondary border-bottom-0">Status</th>
-                <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
-            </tr>
-            </thead>
-            <tbody>
-            <?php $prevItemType = false; ?>
-            @foreach($patient->actionItems as $item)
-                @if($item->action_item_category !== 'DRUG')
-                @if(!$prevItemType || $prevItemType !== $item->action_item_category)
-                    <tr class="bg-light">
-                        <td colspan="6" class="font-weight-bold px-2">
-                            {{ucwords(str_replace("_", " ", strtolower($item->action_item_category)))}}
-                        </td>
-                    </tr>
-                @endif
-                <tr>
-                    <td class="px-2">
-                        &nbsp;
-                    </td>
-                    <td class="px-2">
-                        {{$item->facility ? $item->facility->name : ''}}
-                        <span moe>
-                            <a start show class="on-hover-opaque"><i class="fa fa-edit"></i></a>
-                            <form url="/api/actionItem/updateToFacility">
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <label for="" class="control-label text-sm text-secondary mb-1">Pharmacy *</label>
-                                    <select name="toFacilityUid" class="form-control form-control-sm" required>
-                                        <option value="">-- Pharmacy --</option>
-                                        @foreach ($facilities as $facility)
-                                            <option {{ $item->to_facility_id === $facility->id ? 'selected' : '' }} value="{{$facility->uid}}">{{$facility->name}}</option>
-                                        @endforeach
-                                    </select>
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                    </td>
-                    <td class="px-2">
-                        {{$item->content_text}}
-                        <span moe>
-                            <a start show class="on-hover-opaque"><i class="fa fa-edit"></i></a>
-                            <form url="/api/actionItem/updateContent" wide>
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="contentText" value="{{ $item->content_text }}" placeholder="Title *" required>
-                                </div>
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="contentDetail" value="{{ $item->content_detail }}" placeholder="Details">
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                        <div class="text-sm text-secondary">{{$item->content_detail}}</div>
-                    </td>
-                    <td class="px-2">{{friendly_date_time($item->created_at, false)}}</td>
-                    <td class="px-2">
-                        {{$item->status_category}}
-                        <span moe>
-                            <a start show class="on-hover-opaque"><i class="fa fa-edit"></i></a>
-                            <form url="/api/actionItem/updateStatus">
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <label for="" class="control-label text-sm text-secondary mb-1">Status *</label>
-                                    <select name="statusCategory" class="form-control form-control-sm" required>
-                                        <option {{ $item->status_category === 'OPEN' ? 'selected' : '' }} value="OPEN">Open</option>
-                                        <option {{ $item->status_category === 'CLOSED' ? 'selected' : '' }} value="CLOSED">Closed</option>
-                                    </select>
-                                </div>
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="statusMemo" value="" placeholder="Memo">
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                    </td>
-                    <td class="px-2 text-center">
-                        <div class="d-flex align-items-center justify-content-start">
-                            @if($item->is_signed_by_prescriber)
-                                <span class="text-secondary">
-                                <i class="fa fa-check"></i>
-                                Signed
-                            </span>
-                                <span class="mx-2 text-secondary">|</span>
-                            @else
-                                @if($pro->id === $item->prescriber_pro_id)
-                                    <span moe relative>
-                                    <a start show>Sign</a>
-                                    <form url="/api/actionItem/signAsPrescriber" right>
-                                        <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                        <p class="small min-width-200px text-left">Sign this action items as the prescriber?</p>
-                                        <div class="d-flex align-items-center">
-                                            <button class="btn btn-sm btn-success mr-2" submit>Yes</button>
-                                            <button class="btn btn-sm btn-default mr-2 border" cancel>No</button>
-                                        </div>
-                                    </form>
-                                </span>
-                                    <span class="mx-2 text-secondary">|</span>
-                                @endif
-                            @endif
-                            <span moe relative>
-                            <a start show>eFax</a>
-                            <form url="/api/actionItem/efax" right>
-                                <input type="hidden" name="uid" value="{{ $item->uid }}">
-                                <div class="mb-2">
-                                    <input type="text" class="form-control form-control-sm" name="toFaxNumber" value="" placeholder="To Number *" required>
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Send</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </span>
-                        </div>
-                    </td>
-                </tr>
-                <?php $prevItemType = $item->action_item_category; ?>
-                @endif
-            @endforeach
-            </tbody>
-        </table>
+    <div class="mb-5">
+
+    @include('app/patient/partials/erx')
+
+    <hr class="m-neg-4 my-4">
+    @include('app/patient/partials/lab')
+
+    <hr class="m-neg-4 my-4">
+    @include('app/patient/partials/imaging')
+
+    <hr class="m-neg-4 my-4">
+    @include('app/patient/partials/equipment')
+
+    <hr class="m-neg-4 my-4">
+    @include('app/patient/partials/other')
+
     </div>
+
 @endsection

resources/views/app/patient/appointment-calendar.blade.php

@@ -515,8 +515,9 @@
                                 selectable: true,
                                 navLinks: true,
                                 dayMaxEvents: false,
-                                slotMinTime: '06:00',
-                                slotMaxTime: '20:00',
+                                slotMinTime: '00:00',
+                                slotMaxTime: '23:59',
+                                scrollTime: '06:00:00',
                                 slotDuration: '00:15:00',
                                 events: function(info, successCallback, failureCallback) {
                                     // if(!self.proIds || !self.proIds.length) {
@@ -578,8 +579,11 @@
                                         }
                                     }, 'json');
                                 },
-                                eventDidMount: function(view) {
+                                eventDidMount: function(arg) {
                                     self.afterRenderingEvents();
+                                    if(arg.event.extendedProps.type === 'appointment') {
+                                        console.log(arg.event)
+                                    }
                                 },
                                 eventClassNames: function(arg) {
                                     let classes = [];

resources/views/app/patient/canvas-sections/dx/form.blade.php

@@ -1,4 +1,10 @@
 <?php
+if(!isset($contentData['items'])){
+    $contentData['items'] = [];
+}
+if(!is_array($contentData['items'])){
+    $contentData['items'] = [];
+}
 if(!$contentData || !isset($contentData['items']) || !count($contentData['items'])) {
     $contentData = [
         "items" => [

resources/views/app/patient/canvas-sections/dx/summary.php

@@ -7,6 +7,7 @@ if($patient->canvas_data) {
     $canvasData = json_decode($patient->canvas_data, true);
     if(isset($canvasData["dx"])) {
         $contentData = $canvasData["dx"];
+
         if(!isset($contentData['items'])){
             $contentData['items'] = [];
         }

resources/views/app/patient/dashboard.blade.php

@@ -30,9 +30,6 @@
                 {{-- appointments --}}
                 @include('app/patient/partials/appointments')
 
-                {{-- allergies --}}
-                {{--@include('app/patient/partials/allergies')--}}
-
                 {{-- canvas based allergies --}}
                 <div class="pt-2 mt-2 border-top">
                     <div class="d-flex align-items-center pb-2">
@@ -45,9 +42,6 @@
                     </div>
                 </div>
 
-                {{-- rx --}}
-                {{--@include('app/patient/partials/rx')--}}
-
                 {{-- canvas based rx --}}
                 <div class="pt-2 mt-2 border-top">
                     <div class="d-flex align-items-center pb-2">
@@ -60,6 +54,11 @@
                     </div>
                 </div>
 
+                {{-- programs --}}
+                @if($pro->pro_type == 'ADMIN')
+                    @include('app/patient/partials/programs')
+                @endif
+
                 {{-- devices --}}
                 <?php $availableDevices = 0; ?>
                 @foreach($devices as $device)
@@ -172,157 +171,10 @@
                 </div>
 
                 {{-- device measurements --}}
-                <div class="mt-2 pb-1">
-                    <div class="d-flex align-items-center mb-2 py-2 border-top border-bottom">
-                        <h6 class="my-0 font-weight-bold text-secondary">Cellular Measurements</h6>
-                        <span class="mx-2 text-secondary">|</span>
-                        <a start show class="py-0 font-weight-normal"
-                           href="/patients/view/{{ $patient->uid }}/measurements">
-                            View All
-                        </a>
-                    </div>
-                    <table class="table table-sm border-0 my-0 mx-2">
-                        <tbody>
-                        @foreach($patient->deviceMeasurements as $measurement)
-                            <tr>
-                                <td class="text-black p-0 border-0">
-                                    <div class="pb-1 d-flex align-items-center">
-                                        <span class="text-secondary mr-2">{{ $measurement->measurement->device_category }}:</span>
-                                        @if($measurement->measurement->device_category === 'WEIGHT')
-                                            <b>{{ round(($measurement->measurement->value_weight / 1000)*2.20462, 1) }} lb</b>
-                                        @elseif($measurement->measurement->device_category === 'BP')
-                                            <b>{{ $measurement->measurement->systolic_bp_in_mm_hg }}/{{ $measurement->measurement->diastolic_bp_in_mm_hg }} mmHg</b>
-                                        @endif
-                                        <span class="font-weight-normal text-secondary ml-2 text-sm">({{ friendly_date_time($measurement->measurement->created_at, true) }})</span>
-                                        <span class="ml-2 text-sm {{$measurement->status === 'NEW' ? 'text-info' : ($measurement->status === 'ACCEPTED' ? 'text-success' : 'text-sacondary')}}">{{$measurement->status}}</span>
-                                        <span>
-                                            <span moe class="ml-2" relative>
-                                                <a href="#" start show><i class="on-hover-opaque font-size-11 fa fa-edit text-primary"></i></a>
-                                                <form url="/api/clientBdtMeasurement/updateStatus" right>
-                                                    <input type="hidden" name="uid" value="{{ $measurement->uid }}">
-                                                    <div class="mb-2">
-                                                        <select name="status" class="form-control form-control-sm" required>
-                                                            <option value="">-- select --</option>
-                                                            <option {{$measurement->status === 'NEW' ? 'selected' : ''  }} value="NEW">NEW</option>
-                                                            <option {{$measurement->status === 'ACCEPTED' ? 'selected' : ''  }} value="ACCEPTED">ACCEPTED</option>
-                                                            <option {{$measurement->status === 'REJECTED' ? 'selected' : ''  }} value="REJECTED">REJECTED</option>
-                                                        </select>
-                                                    </div>
-                                                    <div class="mb-2">
-                                                        <input type="text" name="statusMemo" placeholder="Status memo" class="form-control form-control-sm">
-                                                    </div>
-                                                    <div class="d-flex align-items-center">
-                                                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                    </div>
-                                                </form>
-                                            </span>
-                                        </span>
-                                    </div>
-                                </td>
-                            </tr>
-                        @endforeach
-                        @if(!$patient->deviceMeasurements || count($patient->deviceMeasurements) === 0)
-                            <tr>
-                                <td class="text-secondary p-0 border-0">
-                                    No measurements
-                                </td>
-                            </tr>
-                        @endif
-                        </tbody>
-                    </table>
-                </div>
-
+                @include('app/patient/partials/device-measurements')
 
                 {{-- measurements --}}
-                <div class="mt-2 pb-1">
-                    <div class="d-flex align-items-center mb-2 py-2 border-top border-bottom">
-                        <h6 class="my-0 font-weight-bold text-secondary">Measurements</h6>
-                        <span class="mx-2 text-secondary">|</span>
-                        <div moe>
-                            <a start show class="py-0 font-weight-normal">Add</a>
-                            <form url="/api/measurement/create">
-                                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                <div class="mb-2">
-                                    <input required autofocus type="text" class="form-control form-control-sm" name="label" value="" placeholder="Type">
-                                </div>
-                                <div class="mb-2">
-                                    <input required type="text" class="form-control form-control-sm" name="value" value="" placeholder="Value">
-                                </div>
-                                <div class="mb-2">
-                                    <input required type="date" class="form-control form-control-sm" name="effectiveDate" max="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}">
-                                </div>
-                                <div class="d-flex align-items-center">
-                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                </div>
-                            </form>
-                        </div>
-                        <span class="mx-2 text-secondary">|</span>
-                        <a start show class="py-0 font-weight-normal"
-                           href="/patients/view/{{ $patient->uid }}/measurements">
-                            View All
-                        </a>
-                    </div>
-                    <table class="table table-sm border-0 m-0">
-                        <tbody>
-                        @foreach($patient->measurements as $measurement)
-                            @if(!empty($measurement->label) && !in_array($measurement->label, $vitalLabels))
-                                <tr>
-                                    <td class="text-black p-0 border-0">
-                                        <div class="d-flex align-items-center">
-                                            <div moe relative class="mr-2">
-                                                <a class="on-hover-opaque" start show title="Delete">
-                                                    <i class="font-size-11 fa fa-trash-alt text-danger"></i>
-                                                </a>
-                                                <form url="/api/measurement/remove">
-                                                    <input type="hidden" name="uid" value="{{ $measurement->uid }}">
-                                                    <p class="small min-width-200px">Are you sure you want to delete this entry?</p>
-                                                    <div class="d-flex align-items-center">
-                                                        <button class="btn btn-sm btn-danger mr-2" submit>Delete</button>
-                                                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                    </div>
-                                                </form>
-                                            </div>
-                                            <div moe class="mr-2">
-                                                <a class="on-hover-opaque" start show title="Update">
-                                                    <i class="font-size-11 fa fa-edit text-primary"></i>
-                                                </a>
-                                                <form url="/api/measurement/create">
-                                                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
-                                                    <div class="mb-2">
-                                                        <input required type="text" class="form-control form-control-sm" name="label" value="{{ $measurement->label }}" placeholder="Type">
-                                                    </div>
-                                                    <div class="mb-2">
-                                                        <input required autofocus type="text" class="form-control form-control-sm" name="value" value="{{ $measurement->value }}" placeholder="Value">
-                                                    </div>
-                                                    <div class="mb-2">
-                                                        <input required type="date" class="form-control form-control-sm" name="effectiveDate" max="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}">
-                                                    </div>
-                                                    <div class="d-flex align-items-center">
-                                                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
-                                                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
-                                                    </div>
-                                                </form>
-                                            </div>
-                                            <span>{{ $measurement->label }}:</span>
-                                            <span class="font-weight-bold ml-1">{{ $measurement->value }}</span>
-                                            <span class="font-weight-normal text-secondary ml-2 text-sm">(as on {{ friendly_date_time($measurement->effective_date, false) }})</span>
-                                        </div>
-                                    </td>
-                                </tr>
-                            @endif
-                        @endforeach
-                        @if(!$patient->measurements || !count($patient->measurements) === 0)
-                            <tr>
-                                <td class="text-secondary p-0 border-0">
-                                    No items to show
-                                </td>
-                            </tr>
-                        @endif
-                        </tbody>
-                    </table>
-                </div>
+                @include('app/patient/partials/measurements')
 
                 {{-- vitals --}}
                 {{--@include('app/patient/partials/vitals')--}}

resources/views/app/patient/partials/device-measurements.blade.php

@@ -0,0 +1,77 @@
+<div class="mt-2 pb-1">
+    <div class="d-flex align-items-center mb-2 py-2 border-top border-bottom">
+        <h6 class="my-0 font-weight-bold text-secondary">Cellular Measurements</h6>
+        <span class="mx-2 text-secondary">|</span>
+        <a start show class="py-0 font-weight-normal"
+           href="/patients/view/{{ $patient->uid }}/measurements">
+            View All
+        </a>
+    </div>
+    <table class="table table-sm border-0 my-0 mx-2">
+        <tbody>
+        <?php
+        $validCount = 0;
+        foreach($patient->deviceMeasurements as $measurement) {
+            $displayMeasurement = true;
+            if($measurement->measurement->device_category === 'WEIGHT') {
+                if(round(($measurement->measurement->value_weight / 1000)*2.20462, 1) <= 0) {
+                    $displayMeasurement = false;
+                }
+            }
+            else if($measurement->measurement->device_category === 'BP') {
+                if(floatval($measurement->measurement->systolic_bp_in_mm_hg) <= 0 || floatval($measurement->measurement->diastolic_bp_in_mm_hg) <= 0) {
+                    $displayMeasurement = false;
+                }
+            }
+            if($displayMeasurement) {
+                $validCount++;
+            ?>
+            <tr>
+                <td class="text-black p-0 border-0">
+                    <div class="pb-1 d-flex align-items-center">
+                        <span class="text-secondary mr-2">{{ $measurement->measurement->device_category }}:</span>
+                        @if($measurement->measurement->device_category === 'WEIGHT')
+                            <b>{{ round(($measurement->measurement->value_weight / 1000)*2.20462, 1) }} lb</b>
+                        @elseif($measurement->measurement->device_category === 'BP')
+                            <b>{{ $measurement->measurement->systolic_bp_in_mm_hg }}/{{ $measurement->measurement->diastolic_bp_in_mm_hg }} mmHg</b>
+                        @endif
+                        <span class="font-weight-normal text-secondary ml-2 text-sm">({{ friendly_date_time($measurement->measurement->created_at, true) }})</span>
+                        <span class="ml-2 text-sm {{$measurement->status === 'NEW' ? 'text-info' : ($measurement->status === 'ACCEPTED' ? 'text-success' : 'text-sacondary')}}">{{$measurement->status}}</span>
+                        <span>
+                                        <span moe class="ml-2" relative>
+                                            <a href="#" start show><i class="on-hover-opaque font-size-11 fa fa-edit text-primary"></i></a>
+                                            <form url="/api/clientBdtMeasurement/updateStatus" right>
+                                                <input type="hidden" name="uid" value="{{ $measurement->uid }}">
+                                                <div class="mb-2">
+                                                    <select name="status" class="form-control form-control-sm" required>
+                                                        <option value="">-- select --</option>
+                                                        <option {{$measurement->status === 'NEW' ? 'selected' : ''  }} value="NEW">NEW</option>
+                                                        <option {{$measurement->status === 'ACCEPTED' ? 'selected' : ''  }} value="ACCEPTED">ACCEPTED</option>
+                                                        <option {{$measurement->status === 'REJECTED' ? 'selected' : ''  }} value="REJECTED">REJECTED</option>
+                                                    </select>
+                                                </div>
+                                                <div class="mb-2">
+                                                    <input type="text" name="statusMemo" placeholder="Status memo" class="form-control form-control-sm">
+                                                </div>
+                                                <div class="d-flex align-items-center">
+                                                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
+                                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                                </div>
+                                            </form>
+                                        </span>
+                                    </span>
+                    </div>
+                </td>
+            </tr>
+        <?php }
+        }
+        if(!$validCount) { ?>
+            <tr>
+                <td class="text-secondary p-0 border-0">
+                    No measurements
+                </td>
+            </tr>
+        <?php } ?>
+        </tbody>
+    </table>
+</div>

resources/views/app/patient/partials/equipment.blade.php

@@ -0,0 +1,174 @@
+<div id="equipmentApp" v-cloak>
+    <div class="d-flex align-items-center pb-2">
+        <h4 class="font-weight-bold m-0 font-size-14"><i class="fa fa-car-battery mr-2"></i>Equipment/Device</h4>
+        <span class="mx-2 text-secondary">|</span>
+        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('equipment-popup')">Add</a>
+    </div>
+    <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
+        <thead>
+        <tr>
+            <th class="px-2 text-secondary border-bottom-0 width-30px">#</th>
+            <th class="px-2 text-secondary border-bottom-0">Items</th>
+            <th class="px-2 text-secondary border-bottom-0">Purpose</th>
+            <th class="px-2 text-secondary border-bottom-0">Memo</th>
+            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
+        </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
+                <td class="px-2">#</td>
+                <td class="px-2" v-html="item.items && Array.isArray(item.items) ? item.items.join('<br>') : item.items"></td>
+                <td class="px-2">@{{item.purpose}}</td>
+                <td class="px-2">@{{item.memo}}</td>
+                <td class="px-2 text-nowrap">
+                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('equipment-popup', item)">Edit</a>
+                    <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                    <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="equipment-popup">
+        <form method="POST" action="/api/appointment/create">
+            <h3 class="stag-popup-title mb-2">
+                <span>@{{ popupMode === 'add' ? 'Add Equipment' : 'Edit Equipment' }}</span>
+                <a href="#" class="ml-auto text-secondary"
+                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+            </h3>
+            <div class="mb-2">
+                <div class="d-flex align-items-center mb-1">
+                    <label class="text-sm text-secondary mb-0">Items</label>
+                    <span class="text-sm mx-2 text-secondary">|</span>
+                    <a href="#" class="text-sm" v-on:click.prevent="popupItem.items.push('')">Add</a>
+                </div>
+                <div class="d-flex align-items-center mb-2" v-for="(item, itemIndex) in popupItem.items">
+                    <div class="position-relative flex-grow-1">
+                        <input required type="text" data-option-list v-model="popupItem.items[itemIndex]" class="form-control form-control-sm">
+                        <div class="data-option-list">
+                            <div>Weight Scale</div>
+                            <div>Pulse Ox</div>
+                            <div>Temperature Gun</div>
+                        </div>
+                    </div>
+                    <a v-if="popupItem.items.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="popupItem.items.splice(itemIndex, 1)">
+                        <i class="fa fa-trash-alt"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="mb-2">
+                <label class="text-sm text-secondary mb-1">Purpose</label>
+                <input type="text" v-model="popupItem.purpose" class="form-control form-control-sm">
+            </div>
+            <div class="mb-2">
+                <label class="text-sm text-secondary mb-1">Memo</label>
+                <input type="text" v-model="popupItem.memo" class="form-control form-control-sm">
+            </div>
+            <div class="d-flex align-items-center justify-content-center mt-3">
+                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePopupItem()">Submit</button>
+                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    (function() {
+        <?php
+        $tickets = $patient->tickets->filter(function($_item) {
+            return $_item->category === 'equipment';
+        });
+        $items = [];
+        foreach ($tickets as $ticket) {
+            $item = json_decode($ticket->data);
+            $item->uid = $ticket->uid;
+            $item->is_open = $ticket->is_open;
+            $items[] = $item;
+        }
+        ?>
+        function init() {
+            let items = [];
+            let equipmentApp = new Vue({
+                el: '#equipmentApp',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    popupMode: 'add',
+                    items: {!! json_encode($items) !!},
+                    popupItem: {
+                        uid: '',
+                        is_open: true,
+                        items: [''],
+                        purpose: '',
+                        memo: '',
+                    },
+                },
+                methods: {
+                    showPopup: function(_name, _item) {
+                        closeStagPopup();
+                        this.popupMode = _item ? 'edit' : 'add';
+                        this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
+                            uid: '',
+                            is_open: true,
+                            items: [''],
+                            purpose: '',
+                            memo: '',
+                        };
+                        showStagPopup('equipment-popup', true);
+                    },
+                    savePopupItem: function() {
+                        let form = $('#equipmentApp form').first();
+                        if(!form[0].checkValidity()) {
+                            form[0].reportValidity();
+                            return false;
+                        }
+
+                        showMask();
+                        let payload = {};
+                        if(this.popupMode === 'add') {
+                            payload.clientUid = '{{ $patient->uid }}';
+                            payload.category = 'equipment';
+                            payload.assignedProUid = '{{ $pro->uid  }}';
+                            payload.managerProUid = '{{ $pro->uid  }}';
+                            payload.orderingProUid = '{{ $pro->uid  }}';
+                            payload.initiatingProUid = '{{ $pro->uid  }}';
+                            payload.data = JSON.stringify(this.popupItem);
+                        }
+                        else {
+                            payload.uid = this.popupItem.uid;
+                            payload.newData = JSON.stringify(this.popupItem);
+                        }
+
+                        $.post(
+                            '/api/ticket/' + (this.popupMode === 'add' ? 'create' : 'updateData'),
+                            payload,
+                            function(_data) {
+                                console.log(_data);
+                                fastReload();
+                            },
+                            'json');
+
+                        return false;
+                    },
+                    closeItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/close', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    openItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/open', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    }
+                },
+                mounted: function () {
+
+                }
+            })
+        }
+        addMCInitializer('equipment', init, '#equipmentApp');
+    })();
+</script>

resources/views/app/patient/partials/erx.blade.php

@@ -0,0 +1,332 @@
+<div id="erxApp" v-cloak>
+    <div class="d-flex align-items-center pb-2">
+        <h4 class="font-weight-bold m-0 font-size-14"><i class="fa fa-prescription mr-2"></i>ERx</h4>
+        <span class="mx-2 text-secondary">|</span>
+        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('erx-popup')">Add</a>
+    </div>
+    <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
+        <thead>
+        <tr>
+            <th class="px-2 text-secondary border-bottom-0 width-30px">#</th>
+            <th class="px-2 text-secondary border-bottom-0">Medication</th>
+            <th class="px-2 text-secondary border-bottom-0">Strength</th>
+            <th class="px-2 text-secondary border-bottom-0">Amount</th>
+            <th class="px-2 text-secondary border-bottom-0">Route</th>
+            <th class="px-2 text-secondary border-bottom-0">Frequency</th>
+            <th class="px-2 text-secondary border-bottom-0">Dispense</th>
+            <th class="px-2 text-secondary border-bottom-0">Refills</th>
+            <th class="px-2 text-secondary border-bottom-0">Purpose</th>
+            <th class="px-2 text-secondary border-bottom-0">Pharmacy</th>
+            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
+        </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
+                <td class="px-2">#</td>
+                <td class="px-2">@{{item.medication}}</td>
+                <td class="px-2">@{{item.strength}}</td>
+                <td class="px-2">@{{item.amount}}</td>
+                <td class="px-2">@{{item.route}}</td>
+                <td class="px-2">@{{item.frequency}}</td>
+                <td class="px-2">@{{item.dispense}} <span class="text-secondary" v-html="inWords(item.dispense)"></span></td>
+                <td class="px-2">@{{item.refills}}</td>
+                <td class="px-2">@{{item.purpose}}</td>
+                <td class="px-2">@{{item.pharmacy}}</td>
+                <td class="px-2 text-nowrap">
+                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('erx-popup', item)">Edit</a>
+                    <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                    <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="erx-popup">
+        <form method="POST" action="/api/appointment/create">
+            <h3 class="stag-popup-title mb-2">
+                <span>@{{ popupMode === 'add' ? 'Add ERx Item' : 'Edit ERx Item' }}</span>
+                <a href="#" class="ml-auto text-secondary"
+                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+            </h3>
+            <div class="row mb-2">
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">Medication</label>
+                    <input required type="text" data-field="medication"
+                           v-model="popupItem.medication" class="form-control form-control-sm">
+                </div>
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">Strength</label>
+                    <input type="text" data-field="strength"
+                           v-model="popupItem.strength" class="form-control form-control-sm">
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">Amount</label>
+                    <input type="text" v-model="popupItem.amount" class="form-control form-control-sm">
+                </div>
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">Route</label>
+                    <input required type="text" v-model="popupItem.route" class="form-control form-control-sm"
+                           data-option-list="route-options">
+                    <div id="route-options" class="data-option-list">
+                        <div>PO (by mouth)</div>
+                        <div>PR (per rectum)</div>
+                        <div>IM (intramuscular)</div>
+                        <div>IV (intravenous)</div>
+                        <div>ID (intradermal)</div>
+                        <div>IN (intranasal)</div>
+                        <div>TP (topical)</div>
+                        <div>SL (sublingual)</div>
+                        <div>BUCC (buccal)</div>
+                        <div>IP (intraperitoneal)</div>
+                    </div>
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">Frequency</label>
+                    <input type="text" v-model="popupItem.frequency" class="form-control form-control-sm"
+                           data-option-list="frequency-options">
+                    <div id="frequency-options" class="data-option-list">
+                        <div>Once a day</div>
+                        <div>Twice a day</div>
+                    </div>
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">Dispense</label>
+                    <input required type="number" v-model="popupItem.dispense" class="form-control form-control-sm">
+                </div>
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">Refills</label>
+                    <input type="number" v-model="popupItem.refills" class="form-control form-control-sm">
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="col-12">
+                    <label class="text-sm text-secondary mb-1">Purpose</label>
+                    <input required type="text" v-model="popupItem.purpose" class="form-control form-control-sm">
+                </div>
+            </div>
+            <hr class="mt-3 mb-2">
+
+            <div class="row mb-2">
+                <div class="col-12">
+                    <label class="text-sm text-secondary mb-1 font-weight-bold">Preferred Pharmacy</label>
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="col-8">
+                    <label class="text-sm text-secondary mb-1">Business Name</label>
+                    <input type="text" v-model="popupItem.pharmacyName" class="form-control form-control-sm">
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">City</label>
+                    <input type="text" v-model="popupItem.pharmacyCity" class="form-control form-control-sm">
+                </div>
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">State</label>
+                    <input type="text" v-model="popupItem.pharmacyState" class="form-control form-control-sm">
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="col-12">
+                    <label class="text-sm text-secondary mb-1">Address Memo</label>
+                    <input type="text" v-model="popupItem.pharmacyAddressMemo" class="form-control form-control-sm">
+                </div>
+            </div>
+            <div class="row mb-2">
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">Phone</label>
+                    <input type="text" v-model="popupItem.pharmacyPhone" class="form-control form-control-sm">
+                </div>
+                <div class="col-6">
+                    <label class="text-sm text-secondary mb-1">Fax</label>
+                    <input type="text" v-model="popupItem.pharmacyFax" class="form-control form-control-sm">
+                </div>
+            </div>
+
+            <div class="d-flex align-items-center justify-content-center mt-3">
+                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePopupItem()">Submit</button>
+                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    (function() {
+        <?php
+        $tickets = $patient->tickets->filter(function($_item) {
+            return $_item->category === 'erx';
+        });
+        $items = [];
+        foreach ($tickets as $ticket) {
+            $item = json_decode($ticket->data);
+            $item->uid = $ticket->uid;
+            $item->is_open = $ticket->is_open;
+            $items[] = $item;
+        }
+        ?>
+        function init() {
+            let items = [];
+            let erxApp = new Vue({
+                el: '#erxApp',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    popupMode: 'add',
+                    items: {!! json_encode($items) !!},
+                    popupItem: {
+                        uid: '',
+                        is_open: true,
+                        medication: '',
+                        strength: '',
+                        amount: '',
+                        route: '',
+                        frequency: '',
+                        dispense: '',
+                        refills: '',
+                        purpose: '',
+                        pharmacyName: '',
+                        pharmacyCity: '',
+                        pharmacyState: '',
+                        pharmacyAddressMemo: '',
+                        pharmacyPhone: '',
+                        pharmacyFax: '',
+                    }
+                },
+                methods: {
+                    showPopup: function(_name, _item) {
+                        closeStagPopup();
+                        this.popupMode = _item ? 'edit' : 'add';
+                        this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
+                            uid: '',
+                            is_open: true,
+                            medication: '',
+                            strength: '',
+                            amount: '',
+                            route: '',
+                            frequency: '',
+                            dispense: '',
+                            refills: '',
+                            purpose: '',
+                            pharmacy: '',
+                            pharmacyName: '',
+                            pharmacyCity: '',
+                            pharmacyState: '',
+                            pharmacyAddressMemo: '',
+                            pharmacyPhone: '',
+                            pharmacyFax: '',
+                        };
+                        showStagPopup('erx-popup');
+                    },
+                    savePopupItem: function() {
+                        let form = $('#erxApp form').first();
+                        if(!form[0].checkValidity()) {
+                            form[0].reportValidity();
+                            return false;
+                        }
+
+                        showMask();
+                        let payload = {};
+                        if(this.popupMode === 'add') {
+                            payload.clientUid = '{{ $patient->uid }}';
+                            payload.category = 'erx';
+                            payload.assignedProUid = '{{ $pro->uid  }}';
+                            payload.managerProUid = '{{ $pro->uid  }}';
+                            payload.orderingProUid = '{{ $pro->uid  }}';
+                            payload.initiatingProUid = '{{ $pro->uid  }}';
+                            payload.data = JSON.stringify(this.popupItem);
+                        }
+                        else {
+                            payload.uid = this.popupItem.uid;
+                            payload.newData = JSON.stringify(this.popupItem);
+                        }
+
+                        $.post(
+                            '/api/ticket/' + (this.popupMode === 'add' ? 'create' : 'updateData'),
+                            payload,
+                            function(_data) {
+                                console.log(_data);
+                                fastReload();
+                            },
+                            'json');
+
+                        return false;
+                    },
+                    closeItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/close', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    openItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/open', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    initRxAutoSuggest: function() {
+                        let self = this;
+                        $('#erxApp input[type="text"][data-field="medication"]:not([ac-initialized])').each(function() {
+                            let elem = this,
+                                randPart = Math.ceil(Math.random() * 1000000),
+                                dynID = 'rx-' + randPart;
+                            $(elem).attr('id', dynID);
+                            var strengthElem = $(elem).closest('.stag-popup').find('[data-field="strength"]')[0],
+                                dynStrengthsID = 'rx-' + randPart + '-strengths';
+                            $(strengthElem).attr('id', dynStrengthsID);
+                            $(strengthElem).attr('rx-id', dynID);
+                            new window.Def.Autocompleter.Prefetch(dynStrengthsID, []);
+                            new window.Def.Autocompleter.Search(dynID,
+                                'https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search?ef=STRENGTHS_AND_FORMS');
+                            window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                                var autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                var strengths = acData[0].data['STRENGTHS_AND_FORMS'];
+                                if (strengths) {
+                                    strengthElem.autocomp.setListAndField(strengths, '');
+                                }
+                                self.popupItem.medication = $(elem).val();
+                            });
+                            window.Def.Autocompleter.Event.observeListSelections(dynStrengthsID, function() {
+                                var autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                self.popupItem.strength = $(strengthElem).val();
+                            });
+                            $(elem).attr('ac-initialized', 1);
+                            $(strengthElem).attr('ac-initialized', 1);
+                        });
+                    },
+                    inWords: function (num) {
+                        try {
+                            num = +num;
+                            var a = ['','one ','two ','three ','four ', 'five ','six ','seven ','eight ','nine ','ten ','eleven ','twelve ','thirteen ','fourteen ','fifteen ','sixteen ','seventeen ','eighteen ','nineteen '];
+                            var b = ['', '', 'twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety'];
+                            if ((num = num.toString()).length > 3) return 'overflow';
+                            let n = ('000000000' + num).substr(-9).match(/^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
+                            if (!n) return; var str = '';
+                            str += (n[1] != 0) ? (a[Number(n[1])] || b[n[1][0]] + ' ' + a[n[1][1]]) + 'crore ' : '';
+                            str += (n[2] != 0) ? (a[Number(n[2])] || b[n[2][0]] + ' ' + a[n[2][1]]) + 'lakh ' : '';
+                            str += (n[3] != 0) ? (a[Number(n[3])] || b[n[3][0]] + ' ' + a[n[3][1]]) + 'thousand ' : '';
+                            str += (n[4] != 0) ? (a[Number(n[4])] || b[n[4][0]] + ' ' + a[n[4][1]]) + 'hundred ' : '';
+                            str += (n[5] != 0) ? ((str != '') ? 'and ' : '') + (a[Number(n[5])] || b[n[5][0]] + ' ' + a[n[5][1]]) : '';
+                            return str ? '(' + $.trim(str) + ')' : '';
+                        }
+                        catch (e) {
+                            return '';
+                        }
+                    }
+                },
+                mounted: function () {
+                    this.initRxAutoSuggest();
+                }
+            })
+        }
+        addMCInitializer('erx', init, '#erxApp');
+    })();
+</script>

resources/views/app/patient/partials/imaging.blade.php

@@ -0,0 +1,216 @@
+<div id="imagingApp" v-cloak>
+    <div class="d-flex align-items-center pb-2">
+        <h4 class="font-weight-bold m-0 font-size-14"><i class="fa fa-image mr-2"></i>Imaging</h4>
+        <span class="mx-2 text-secondary">|</span>
+        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('imaging-popup')">Add</a>
+    </div>
+    <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
+        <thead>
+        <tr>
+            <th class="px-2 text-secondary border-bottom-0 width-30px">#</th>
+            <th class="px-2 text-secondary border-bottom-0">Tests</th>
+            <th class="px-2 text-secondary border-bottom-0">ICDs</th>
+            <th class="px-2 text-secondary border-bottom-0">Memo</th>
+            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
+            <td class="px-2">#</td>
+            <td class="px-2" v-html="item.tests && Array.isArray(item.tests) ? item.tests.join('<br>') : item.tests"></td>
+            <td class="px-2" v-html="item.icds && Array.isArray(item.icds) ? item.icds.join('<br>') : item.icds"></td>
+            <td class="px-2">@{{item.memo}}</td>
+            <td class="px-2 text-nowrap">
+                <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('imaging-popup', item)">Edit</a>
+                <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+    <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="imaging-popup">
+        <form method="POST" action="/api/appointment/create" class="overflow-visible">
+            <h3 class="stag-popup-title mb-2">
+                <span>@{{ popupMode === 'add' ? 'Add Imaging Order Item' : 'Edit Imaging Order Item' }}</span>
+                <a href="#" class="ml-auto text-secondary"
+                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+            </h3>
+            <div class="mb-2">
+                <div class="d-flex align-items-center mb-1">
+                    <label class="text-sm text-secondary mb-0">Tests</label>
+                    <span class="text-sm mx-2 text-secondary">|</span>
+                    <a href="#" class="text-sm" v-on:click.prevent="popupItem.tests.push('')">Add</a>
+                </div>
+                <div class="d-flex align-items-center mb-2" v-for="(test, testIndex) in popupItem.tests">
+                    <div class="position-relative flex-grow-1">
+                        <input required type="text" data-option-list v-model="popupItem.tests[testIndex]" class="form-control form-control-sm">
+                        <div class="data-option-list">
+                            <div>CAT Scan</div>
+                            <div>Fluoroscopy</div>
+                            <div>MRI Scan</div>
+                            <div>Mammography</div>
+                            <div>X-Ray</div>
+                            <div>PET</div>
+                            <div>PET-CT</div>
+                        </div>
+                    </div>
+                    <a v-if="popupItem.tests.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="popupItem.tests.splice(testIndex, 1)">
+                        <i class="fa fa-trash-alt"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="mb-2">
+                <div class="d-flex align-items-center mb-1">
+                    <label class="text-sm text-secondary mb-0">ICDs</label>
+                    <span class="text-sm mx-2 text-secondary">|</span>
+                    <a href="#" class="text-sm" v-on:click.prevent="popupItem.icds.push('')">Add</a>
+                </div>
+                <div class="d-flex align-items-center mb-2" v-for="(icd, icdIndex) in popupItem.icds">
+                    <div class="position-relative flex-grow-1">
+                        <input required type="text" data-field="icd" :data-index="icdIndex"
+                               v-model="popupItem.icds[icdIndex]" class="form-control form-control-sm">
+                    </div>
+                    <a v-if="popupItem.icds.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="popupItem.icds.splice(icdIndex, 1)">
+                        <i class="fa fa-trash-alt"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="mb-2">
+                <label class="text-sm text-secondary mb-1">Memo</label>
+                <input type="text" v-model="popupItem.memo" class="form-control form-control-sm">
+            </div>
+            <div class="d-flex align-items-center justify-content-center mt-3">
+                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePopupItem()">Submit</button>
+                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    (function() {
+        <?php
+        $tickets = $patient->tickets->filter(function($_item) {
+            return $_item->category === 'imaging';
+        });
+        $items = [];
+        foreach ($tickets as $ticket) {
+            $item = json_decode($ticket->data);
+            $item->uid = $ticket->uid;
+            $item->is_open = $ticket->is_open;
+            $items[] = $item;
+        }
+        ?>
+        function init() {
+            let items = [];
+            let imagingApp = new Vue({
+                el: '#imagingApp',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    popupMode: 'add',
+                    items: {!! json_encode($items) !!},
+                    popupItem: {
+                        uid: '',
+                        is_open: true,
+                        tests: [''],
+                        icds: [''],
+                        memo: '',
+                    },
+                },
+                methods: {
+                    showPopup: function(_name, _item) {
+                        closeStagPopup();
+                        this.popupMode = _item ? 'edit' : 'add';
+                        this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
+                            uid: '',
+                            is_open: true,
+                            tests: [''],
+                            icds: [''],
+                            memo: '',
+                        };
+                        let self = this;
+                        Vue.nextTick(function() {
+                            self.initICDAutoSuggest();
+                            showStagPopup('imaging-popup', true);
+                        });
+                    },
+                    savePopupItem: function() {
+                        let form = $('#imagingApp form').first();
+                        if(!form[0].checkValidity()) {
+                            form[0].reportValidity();
+                            return false;
+                        }
+
+                        showMask();
+                        let payload = {};
+                        if(this.popupMode === 'add') {
+                            payload.clientUid = '{{ $patient->uid }}';
+                            payload.category = 'imaging';
+                            payload.assignedProUid = '{{ $pro->uid  }}';
+                            payload.managerProUid = '{{ $pro->uid  }}';
+                            payload.orderingProUid = '{{ $pro->uid  }}';
+                            payload.initiatingProUid = '{{ $pro->uid  }}';
+                            payload.data = JSON.stringify(this.popupItem);
+                        }
+                        else {
+                            payload.uid = this.popupItem.uid;
+                            payload.newData = JSON.stringify(this.popupItem);
+                        }
+
+                        $.post(
+                            '/api/ticket/' + (this.popupMode === 'add' ? 'create' : 'updateData'),
+                            payload,
+                            function(_data) {
+                                console.log(_data);
+                                fastReload();
+                            },
+                            'json');
+
+                        return false;
+                    },
+                    closeItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/close', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    openItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/open', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    initICDAutoSuggest: function() {
+                        let self = this;
+                        $('#imagingApp input[type="text"][data-field="icd"]:not([ac-initialized])').each(function() {
+                            var elem = this,
+                                dynID = 'icd-' + Math.ceil(Math.random() * 1000000),
+                                vueIndex = $(this).attr('data-index');
+                            $(elem).attr('id', dynID);
+                            new window.Def.Autocompleter.Search(dynID,
+                                'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name&ef=name', {
+                                    tableFormat: true,
+                                    valueCols: [0],
+                                    colHeaders: ['Code', 'Name'],
+                                }
+                            );
+                            window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                                let autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                self.popupItem.icds[vueIndex] = acData[0].code;
+                                return false;
+                            });
+                            $(elem).attr('ac-initialized', 1);
+                        });
+                    },
+                },
+                mounted: function () {
+                    this.initICDAutoSuggest();
+                }
+            })
+        }
+        addMCInitializer('imaging', init, '#imagingApp');
+    })();
+</script>

resources/views/app/patient/partials/lab.blade.php

@@ -0,0 +1,219 @@
+<div id="labApp" v-cloak>
+    <div class="d-flex align-items-center pb-2">
+        <h4 class="font-weight-bold m-0 font-size-14"><i class="fa fa-vials mr-2"></i>Lab</h4>
+        <span class="mx-2 text-secondary">|</span>
+        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('lab-popup')">Add</a>
+    </div>
+    <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
+        <thead>
+        <tr>
+            <th class="px-2 text-secondary border-bottom-0 width-30px">#</th>
+            <th class="px-2 text-secondary border-bottom-0">Tests</th>
+            <th class="px-2 text-secondary border-bottom-0">ICDs</th>
+            <th class="px-2 text-secondary border-bottom-0">Memo</th>
+            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
+        </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
+                <td class="px-2">#</td>
+                <td class="px-2" v-html="item.tests && Array.isArray(item.tests) ? item.tests.join('<br>') : item.tests"></td>
+                <td class="px-2" v-html="item.icds && Array.isArray(item.icds) ? item.icds.join('<br>') : item.icds"></td>
+                <td class="px-2">@{{item.memo}}</td>
+                <td class="px-2 text-nowrap">
+                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('lab-popup', item)">Edit</a>
+                    <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                    <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="lab-popup">
+        <form method="POST" action="/api/appointment/create" class="overflow-visible">
+            <h3 class="stag-popup-title mb-2">
+                <span>@{{ popupMode === 'add' ? 'Add Lab Order Item' : 'Edit Lab Order Item' }}</span>
+                <a href="#" class="ml-auto text-secondary"
+                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+            </h3>
+            <div class="mb-2">
+                <div class="d-flex align-items-center mb-1">
+                    <label class="text-sm text-secondary mb-0">Tests</label>
+                    <span class="text-sm mx-2 text-secondary">|</span>
+                    <a href="#" class="text-sm" v-on:click.prevent="popupItem.tests.push('')">Add</a>
+                </div>
+                <div class="d-flex align-items-center mb-2" v-for="(test, testIndex) in popupItem.tests">
+                    <div class="position-relative flex-grow-1">
+                        <input required type="text" data-option-list v-model="popupItem.tests[testIndex]" class="form-control form-control-sm">
+                        <div class="data-option-list">
+                            <div>Complete Blood Count</div>
+                            <div>Prothrombin Time</div>
+                            <div>Basic Metabolic Panel</div>
+                            <div>Comprehensive Metabolic Panel</div>
+                            <div>Lipid Panel</div>
+                            <div>Liver Panel</div>
+                            <div>Thyroid Stimulating Hormone</div>
+                            <div>Hemoglobin A1C</div>
+                            <div>Urinalysis</div>
+                            <div>Cultures</div>
+                        </div>
+                    </div>
+                    <a v-if="popupItem.tests.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="popupItem.tests.splice(testIndex, 1)">
+                        <i class="fa fa-trash-alt"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="mb-2">
+                <div class="d-flex align-items-center mb-1">
+                    <label class="text-sm text-secondary mb-0">ICDs</label>
+                    <span class="text-sm mx-2 text-secondary">|</span>
+                    <a href="#" class="text-sm" v-on:click.prevent="popupItem.icds.push('')">Add</a>
+                </div>
+                <div class="d-flex align-items-center mb-2" v-for="(icd, icdIndex) in popupItem.icds">
+                    <div class="position-relative flex-grow-1">
+                        <input required type="text" data-field="icd" :data-index="icdIndex"
+                               v-model="popupItem.icds[icdIndex]" class="form-control form-control-sm">
+                    </div>
+                    <a v-if="popupItem.icds.length > 1" class="ml-2 text-danger" href="#" v-on:click.prevent="popupItem.icds.splice(icdIndex, 1)">
+                        <i class="fa fa-trash-alt"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="mb-2">
+                <label class="text-sm text-secondary mb-1">Memo</label>
+                <input type="text" v-model="popupItem.memo" class="form-control form-control-sm">
+            </div>
+            <div class="d-flex align-items-center justify-content-center mt-3">
+                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePopupItem()">Submit</button>
+                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    (function() {
+        <?php
+        $tickets = $patient->tickets->filter(function($_item) {
+            return $_item->category === 'lab';
+        });
+        $items = [];
+        foreach ($tickets as $ticket) {
+            $item = json_decode($ticket->data);
+            $item->uid = $ticket->uid;
+            $item->is_open = $ticket->is_open;
+            $items[] = $item;
+        }
+        ?>
+        function init() {
+            let items = [];
+            let labApp = new Vue({
+                el: '#labApp',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    popupMode: 'add',
+                    items: {!! json_encode($items) !!},
+                    popupItem: {
+                        uid: '',
+                        is_open: true,
+                        tests: [''],
+                        icds: [''],
+                        memo: '',
+                    },
+                },
+                methods: {
+                    showPopup: function(_name, _item) {
+                        closeStagPopup();
+                        this.popupMode = _item ? 'edit' : 'add';
+                        this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
+                            uid: '',
+                            is_open: true,
+                            tests: [''],
+                            icds: [''],
+                            memo: '',
+                        };
+                        let self = this;
+                        Vue.nextTick(function() {
+                            self.initICDAutoSuggest();
+                            showStagPopup('lab-popup', true);
+                        });
+                    },
+                    savePopupItem: function() {
+                        let form = $('#labApp form').first();
+                        if(!form[0].checkValidity()) {
+                            form[0].reportValidity();
+                            return false;
+                        }
+
+                        showMask();
+                        let payload = {};
+                        if(this.popupMode === 'add') {
+                            payload.clientUid = '{{ $patient->uid }}';
+                            payload.category = 'lab';
+                            payload.assignedProUid = '{{ $pro->uid  }}';
+                            payload.managerProUid = '{{ $pro->uid  }}';
+                            payload.orderingProUid = '{{ $pro->uid  }}';
+                            payload.initiatingProUid = '{{ $pro->uid  }}';
+                            payload.data = JSON.stringify(this.popupItem);
+                        }
+                        else {
+                            payload.uid = this.popupItem.uid;
+                            payload.newData = JSON.stringify(this.popupItem);
+                        }
+
+                        $.post(
+                            '/api/ticket/' + (this.popupMode === 'add' ? 'create' : 'updateData'),
+                            payload,
+                            function(_data) {
+                                console.log(_data);
+                                fastReload();
+                            },
+                            'json');
+
+                        return false;
+                    },
+                    closeItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/close', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    openItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/open', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    initICDAutoSuggest: function() {
+                        let self = this;
+                        $('#labApp input[type="text"][data-field="icd"]:not([ac-initialized])').each(function() {
+                            var elem = this,
+                                dynID = 'icd-' + Math.ceil(Math.random() * 1000000),
+                                vueIndex = $(this).attr('data-index');
+                            $(elem).attr('id', dynID);
+                            new window.Def.Autocompleter.Search(dynID,
+                                'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name&ef=name', {
+                                    tableFormat: true,
+                                    valueCols: [0],
+                                    colHeaders: ['Code', 'Name'],
+                                }
+                            );
+                            window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                                let autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                self.popupItem.icds[vueIndex] = acData[0].code;
+                                return false;
+                            });
+                            $(elem).attr('ac-initialized', 1);
+                        });
+                    },
+                },
+                mounted: function () {
+                    this.initICDAutoSuggest();
+                }
+            })
+        }
+        addMCInitializer('lab', init, '#labApp');
+    })();
+</script>

resources/views/app/patient/partials/measurements.blade.php

@@ -0,0 +1,135 @@
+<div class="mt-2 pb-1">
+    <div class="d-flex align-items-center mb-2 py-2 border-top border-bottom">
+        <h6 class="my-0 font-weight-bold text-secondary">Measurements</h6>
+        <span class="mx-2 text-secondary">|</span>
+        <div moe>
+            <a start show class="py-0 font-weight-normal">Add</a>
+            <form url="/api/measurement/create">
+                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
+                <div class="mb-2">
+                    <input required autofocus type="text" class="form-control form-control-sm" name="label" value="" placeholder="Type">
+                </div>
+                <div class="mb-2">
+                    <input required type="text" class="form-control form-control-sm" name="value" value="" placeholder="Value">
+                </div>
+                <div class="mb-2">
+                    <input required type="date" class="form-control form-control-sm" name="effectiveDate" max="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}">
+                </div>
+                <div class="d-flex align-items-center">
+                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
+                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                </div>
+            </form>
+        </div>
+        <span class="mx-2 text-secondary">|</span>
+        <a start show class="py-0 font-weight-normal"
+           href="/patients/view/{{ $patient->uid }}/measurements">
+            View All
+        </a>
+    </div>
+    <table class="table table-sm border-0 m-0">
+        <tbody>
+        @foreach($patient->measurements as $measurement)
+            @if(!empty($measurement->label) && !in_array($measurement->label, $vitalLabels))
+                <tr>
+                    <td class="text-black p-0 border-0">
+                        <div class="d-flex align-items-center">
+                            <div moe relative class="mr-2">
+                                <a class="on-hover-opaque" start show title="Delete">
+                                    <i class="font-size-11 fa fa-trash-alt text-danger"></i>
+                                </a>
+                                <form url="/api/measurement/remove">
+                                    <input type="hidden" name="uid" value="{{ $measurement->uid }}">
+                                    <p class="small min-width-200px">Are you sure you want to delete this entry?</p>
+                                    <div class="d-flex align-items-center">
+                                        <button class="btn btn-sm btn-danger mr-2" submit>Delete</button>
+                                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                    </div>
+                                </form>
+                            </div>
+                            <div moe class="mr-2">
+                                <a class="on-hover-opaque" start show title="Update">
+                                    <i class="font-size-11 fa fa-edit text-primary"></i>
+                                </a>
+                                <form url="/api/measurement/create">
+                                    <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
+                                    <div class="mb-2">
+                                        <input required type="text" class="form-control form-control-sm" name="label" value="{{ $measurement->label }}" placeholder="Type">
+                                    </div>
+                                    <div class="mb-2">
+                                        <input required autofocus type="text" class="form-control form-control-sm" name="value" value="{{ $measurement->value }}" placeholder="Value">
+                                    </div>
+                                    <div class="mb-2">
+                                        <input required type="date" class="form-control form-control-sm" name="effectiveDate" max="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}">
+                                    </div>
+                                    <div class="d-flex align-items-center">
+                                        <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
+                                        <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                    </div>
+                                </form>
+                            </div>
+                            <span>{{ $measurement->label }}:</span>
+                            <span class="font-weight-bold ml-1">{{ $measurement->value }}</span>
+                            <span class="font-weight-normal text-secondary ml-2 text-sm">(as on {{ friendly_date_time($measurement->effective_date, false) }})</span>
+                            @php $matchingClientPrograms = $pro->canAddCPMEntryForMeasurement($measurement, $pro); @endphp
+                            @if($matchingClientPrograms && count($matchingClientPrograms))
+                                <div moe>
+                                    <a href="#" class="ml-2 font-weight-normal" start show><i class="fa fa-clock"></i> <b>Entry</b> ({{ $measurement->numCPMEntries() }})</a>
+                                    <form url="/api/clientProgramMonthEntry/create">
+                                        <input type="hidden" name="measurementUid" value="{{ $measurement->uid }}">
+                                        <input type="hidden" name="proUid" value="{{ $pro->uid }}">
+                                        @if(count($matchingClientPrograms) === 1)
+                                            <input type="hidden" name="clientProgramUid" value="{{ $matchingClientPrograms->first()->uid }}">
+                                        @else
+                                            <div class="mb-2">
+                                                <label class="text-sm mb-1 text-secondary">Program</label>
+                                                <select autofocus class="form-control form-control-sm" name="clientProgramUid" required>
+                                                    <option value="">-- select --</option>
+                                                    @foreach($matchingClientPrograms as $clientProgram)
+                                                        <option value="{{$clientProgram->uid}}">{{$clientProgram->title}}</option>
+                                                    @endforeach
+                                                </select>
+                                            </div>
+                                        @endif
+                                        <div class="mb-2">
+                                            <label class="text-sm mb-1 text-secondary">Effective Date</label>
+                                            <input required type="date" class="form-control form-control-sm" name="effectiveDate" value="{{ date('Y-m-d') }}">
+                                        </div>
+                                        <div class="mb-2">
+                                            <label class="text-sm mb-1 text-secondary">Quick Text</label>
+                                            <input autofocus required type="text" class="form-control form-control-sm" name="quickText" value="">
+                                        </div>
+                                        <div class="mb-2">
+                                            <label class="text-sm mb-1 text-secondary">Measurement Determination</label>
+                                            <input type="text" class="form-control form-control-sm" name="measurementDetermination" value="">
+                                        </div>
+                                        <div class="mb-2">
+                                            <label class="text-sm mb-1 text-secondary">Measurement Memo</label>
+                                            <input type="text" class="form-control form-control-sm" name="measurementMemo" value="">
+                                        </div>
+                                        <div class="mb-2">
+                                            <label class="text-sm mb-1 text-secondary">Time (minutes)</label>
+                                            <input required type="number" class="form-control form-control-sm" name="timeInMinutes" value="">
+                                        </div>
+                                        <div class="d-flex align-items-center">
+                                            <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
+                                            <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                        </div>
+                                    </form>
+                                </div>
+                            @endif
+                        </div>
+                    </td>
+                </tr>
+            @endif
+        @endforeach
+        @if(!$patient->measurements || !count($patient->measurements) === 0)
+            <tr>
+                <td class="text-secondary p-0 border-0">
+                    No items to show
+                </td>
+            </tr>
+        @endif
+        </tbody>
+    </table>
+</div>

resources/views/app/patient/partials/other.blade.php

@@ -0,0 +1,160 @@
+<div id="otherApp" v-cloak>
+    <div class="d-flex align-items-center pb-2">
+        <h4 class="font-weight-bold m-0 font-size-14"><i class="fa fa-file-alt mr-2"></i>Other</h4>
+        <span class="mx-2 text-secondary">|</span>
+        <a class="py-0 font-weight-normal c-pointer" v-on:click.prevent="showPopup('other-popup')">Add</a>
+    </div>
+    <table class="table table-sm table-bordered mb-0" style="table-layout: fixed">
+        <thead>
+        <tr>
+            <th class="px-2 text-secondary border-bottom-0 width-30px">#</th>
+            <th class="px-2 text-secondary border-bottom-0">Category</th>
+            <th class="px-2 text-secondary border-bottom-0">Title</th>
+            <th class="px-2 text-secondary border-bottom-0">Description</th>
+            <th class="px-2 text-secondary border-bottom-0">&nbsp;</th>
+        </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(item, index) in items" :class="item.is_open ? '' : 'opacity-60'">
+                <td class="px-2">#</td>
+                <td class="px-2" v-html="item.category"></td>
+                <td class="px-2" v-html="item.title"></td>
+                <td class="px-2" v-html="item.description"></td>
+                <td class="px-2 text-nowrap">
+                    <a class="mr-2 c-pointer" v-on:click.prevent="showPopup('other-popup', item)">Edit</a>
+                    <a class="mr-2 c-pointer" v-if="item.is_open" v-on:click.prevent="closeItem(item)">Close</a>
+                    <a class="mr-2 c-pointer" v-if="!item.is_open" v-on:click.prevent="openItem(item)">Open</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="other-popup">
+        <form method="POST" action="/api/appointment/create" class="overflow-visible">
+            <h3 class="stag-popup-title mb-2">
+                <span>@{{ popupMode === 'add' ? 'Add Item' : 'Edit Item' }}</span>
+                <a href="#" class="ml-auto text-secondary"
+                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+            </h3>
+            <div class="mb-2">
+                <label class="text-sm text-secondary mb-1">Category</label>
+                <input required type="text" v-model="popupItem.category" class="form-control form-control-sm">
+            </div>
+            <div class="mb-2">
+                <label class="text-sm text-secondary mb-1">Title</label>
+                <input required type="text" v-model="popupItem.title" class="form-control form-control-sm">
+            </div>
+            <div class="mb-2">
+                <label class="text-sm text-secondary mb-1">Description</label>
+                <textarea type="text" rows="3" v-model="popupItem.description" class="form-control form-control-sm"></textarea>
+            </div>
+            <div class="d-flex align-items-center justify-content-center mt-3">
+                <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePopupItem()">Submit</button>
+                <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    (function() {
+        <?php
+        $tickets = $patient->tickets->filter(function($_item) {
+            return $_item->category === 'other';
+        });
+        $items = [];
+        foreach ($tickets as $ticket) {
+            $item = json_decode($ticket->data);
+            $item->uid = $ticket->uid;
+            $item->is_open = $ticket->is_open;
+            $items[] = $item;
+        }
+        ?>
+        function init() {
+            let items = [];
+            let otherApp = new Vue({
+                el: '#otherApp',
+                delimiters: ['@{{', '}}'],
+                data: {
+                    popupMode: 'add',
+                    items: {!! json_encode($items) !!},
+                    popupItem: {
+                        uid: '',
+                        is_open: true,
+                        category: '',
+                        title: '',
+                        description: '',
+                    },
+                },
+                methods: {
+                    showPopup: function(_name, _item) {
+                        closeStagPopup();
+                        this.popupMode = _item ? 'edit' : 'add';
+                        this.popupItem = _item ? JSON.parse(JSON.stringify(_item)) : {
+                            uid: '',
+                            is_open: true,
+                            category: '',
+                            title: '',
+                            description: '',
+                        };
+                        let self = this;
+                        Vue.nextTick(function() {
+                            showStagPopup('other-popup', true);
+                        });
+                    },
+                    savePopupItem: function() {
+                        let form = $('#otherApp form').first();
+                        if(!form[0].checkValidity()) {
+                            form[0].reportValidity();
+                            return false;
+                        }
+
+                        showMask();
+                        let payload = {};
+                        if(this.popupMode === 'add') {
+                            payload.clientUid = '{{ $patient->uid }}';
+                            payload.category = 'other';
+                            payload.assignedProUid = '{{ $pro->uid  }}';
+                            payload.managerProUid = '{{ $pro->uid  }}';
+                            payload.orderingProUid = '{{ $pro->uid  }}';
+                            payload.initiatingProUid = '{{ $pro->uid  }}';
+                            payload.data = JSON.stringify(this.popupItem);
+                        }
+                        else {
+                            payload.uid = this.popupItem.uid;
+                            payload.newData = JSON.stringify(this.popupItem);
+                        }
+
+                        $.post(
+                            '/api/ticket/' + (this.popupMode === 'add' ? 'create' : 'updateData'),
+                            payload,
+                            function(_data) {
+                                console.log(_data);
+                                fastReload();
+                            },
+                            'json');
+
+                        return false;
+                    },
+                    closeItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/close', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    },
+                    openItem: function(_item) {
+                        showMask();
+                        $.post('/api/ticket/open', {
+                            uid: _item.uid
+                        }, function(_data) {
+                            fastReload();
+                        });
+                    }
+                },
+                mounted: function () {
+                }
+            })
+        }
+        addMCInitializer('other', init, '#otherApp');
+    })();
+</script>

resources/views/app/patient/partials/programs.blade.php

@@ -0,0 +1,213 @@
+<div class="mt-0 pb-1">
+    <div class="d-flex align-items-center mb-1 pt-2 pb-1 border-top">
+        <h6 class="my-0 font-weight-bold text-secondary">Programs</h6>
+        {{--<span class="mx-2 text-secondary on-hover-opaque">|</span>
+        <div moe>
+            <a start show class="py-0 font-weight-normal">Add</a>
+            <form url="/api/clientProgram/create">
+                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
+                <div class="mb-2">
+                    <select class="form-control form-control-sm" name="programUid" required>
+                        <option value="">-- select --</option>
+                        @foreach($programs as $program)
+                            <option value="{{$program->uid}}">{{$program->title}}</option>
+                        @endforeach
+                    </select>
+                </div>
+                <div class="d-flex align-items-center">
+                    <button class="btn btn-sm btn-primary mr-2" submit>Add</button>
+                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                </div>
+            </form>
+        </div>--}}
+    </div>
+    <table class="table table-bordered table-sm table-striped m-0">
+        <tbody>
+        <?php $programNumber = 1; ?>
+        @foreach($patient->clientPrograms as $clientProgram)
+            <?php $program = $clientProgram; ?>
+            <tr>
+                <td class="text-black p-2">
+                    <div class="d-flex align-items-center">
+                        <div moe relative class="mr-2">
+                            <a class="on-hover-opaque" start show title="Delete">
+                                <i class="font-size-11 fa fa-trash-alt text-danger"></i>
+                            </a>
+                            <form url="/api/clientProgram/deactivate">
+                                <input type="hidden" name="uid" value="{{ $clientProgram->uid }}">
+                                <p class="small min-width-200px">Are you sure you want to deactivate this client program?</p>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-danger mr-2" submit>Deactivate</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </div>
+                        <span class="font-weight-bold">{{ $program->title }}</span>
+                    </div>
+                    <?php $programNumber++; ?>
+                    <div class="mt-1 pl-3 d-flex align-items-center flex-wrap">
+                        <span class="pr-1">MCP: <b class="text-secondary">{{ $clientProgram->mcp ? $clientProgram->mcp->displayName() : '' }}</b></span>
+                        <span moe>
+                            <a start show class="py-0 font-weight-normal"><i class="fa fa-pencil-alt"></i></a>
+                            <form url="/api/clientProgram/changeMcp">
+                                <input type="hidden" name="uid" value="{{ $clientProgram->uid }}">
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">MCP</label>
+                                    <select class="form-control form-control-sm bg-light" name="newMcpProUid" required>
+                                        <option value="">-- select --</option>
+                                        @foreach($pros as $iPro)
+                                            <option value="{{$iPro->uid}}" {{ $clientProgram->mcp_pro_id === $iPro->id ? 'selected' : '' }}>{{$iPro->displayName()}}</option>
+                                        @endforeach
+                                    </select>
+                                </div>
+                                <div class="mb-2">
+                                    <label class="mb-1 text-secondary d-flex align-items-center">
+                                        <span class="mr-2">Is Intention To Remove MCP</span>
+                                        <input type="checkbox" name="isIntentionToRemoveMcp">
+                                    </label>
+                                </div>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-primary mr-2" submit>Ok</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </span>
+                        <span class="mx-2 text-secondary on-hover-opaque">|</span>
+                        <span class="pr-1">Manager: <b class="text-secondary">{{ $clientProgram->manager ? $clientProgram->manager->displayName() : '' }}</b></span>
+                        <span moe>
+                            <a start show class="py-0 font-weight-normal"><i class="fa fa-pencil-alt"></i></a>
+                            <form url="/api/clientProgram/changeManager">
+                                <input type="hidden" name="uid" value="{{ $clientProgram->uid }}">
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Manager</label>
+                                    <select class="form-control form-control-sm bg-light" name="newManagerProUid" required>
+                                        <option value="">-- select --</option>
+                                        @foreach($pros as $iPro)
+                                            <option value="{{$iPro->uid}}" {{ $clientProgram->manager_pro_id === $iPro->id ? 'selected' : '' }}>{{$iPro->displayName()}}</option>
+                                        @endforeach
+                                    </select>
+                                </div>
+                                <div class="mb-2">
+                                    <label class="mb-1 text-secondary d-flex align-items-center">
+                                        <span class="mr-2">Is Intention To Remove Manager</span>
+                                        <input type="checkbox" name="isIntentionToRemoveManager">
+                                    </label>
+                                </div>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-primary mr-2" submit>Ok</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </span>
+                        <span class="mx-2 text-secondary on-hover-opaque">|</span>
+                        <span class="pr-1">OB Visit: <b class="text-secondary">{{ $clientProgram->has_mcp_done_onboarding_visit }}</b></span>
+                        <span moe>
+                            <a start show class="py-0 font-weight-normal"><i class="fa fa-pencil-alt"></i></a>
+                            <form url="/api/clientProgram/editMcpOnboardingVisitInfo">
+                                <input type="hidden" name="uid" value="{{ $clientProgram->uid }}">
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">OB Visit Done?</label>
+                                    <select class="form-control form-control-sm bg-light" name="hasMcpDoneOnboardingVisit" required>
+                                        <option value="">-- select --</option>
+                                        <option value="YES" {{ $clientProgram->has_mcp_done_onboarding_visit === 'YES' ? 'selected' : '' }}>Yes</option>
+                                        <option value="NO" {{ $clientProgram->has_mcp_done_onboarding_visit === 'NO' ? 'selected' : '' }}>No</option>
+                                        <option value="UNKNOWN" {{ $clientProgram->has_mcp_done_onboarding_visit === 'UNKNOWN' ? 'selected' : '' }}>Unknown</option>
+                                    </select>
+                                </div>
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Date</label>
+                                    <input type="date" class="form-control form-control-sm" name="mcpOnboardingVisitDate" value="{{ $clientProgram->mcp_onboarding_visit_date }}" placeholder="">
+                                </div>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-primary mr-2" submit>Ok</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </span>
+                    </div>
+                    <div class="mt-1 pl-3 d-flex align-items-center flex-wrap">
+                        <span class="pr-1">Setup: <b class="text-secondary">{{ $clientProgram->is_setup_complete }}</b></span>
+                        <span moe>
+                            <a start show class="py-0 font-weight-normal"><i class="fa fa-pencil-alt"></i></a>
+                            <form url="/api/clientProgram/editSetupInfo">
+                                <input type="hidden" name="uid" value="{{ $clientProgram->uid }}">
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Setup Status</label>
+                                    <select class="form-control form-control-sm bg-light" name="isSetupComplete" required>
+                                        <option value="">-- select --</option>
+                                        <option value="YES" {{ $clientProgram->is_setup_complete === 'YES' ? 'selected' : '' }}>Yes</option>
+                                        <option value="NO" {{ $clientProgram->is_setup_complete === 'NO' ? 'selected' : '' }}>No</option>
+                                        <option value="UNKNOWN" {{ $clientProgram->is_setup_complete === 'UNKNOWN' ? 'selected' : '' }}>Unknown</option>
+                                    </select>
+                                </div>
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Setup Status Memo</label>
+                                    <textarea class="form-control form-control-sm" rows="2" name="setupStatusMemo" value="{{ $clientProgram->setup_status_memo }}" placeholder="Memo"></textarea>
+                                </div>
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Setup Detail</label>
+                                    <textarea class="form-control form-control-sm" rows="2" name="setupDetail" value="{{ $clientProgram->setup_detail }}" placeholder="Detail"></textarea>
+                                </div>
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Device Identifier</label>
+                                    <input type="text" class="form-control form-control-sm" name="deviceIdentifier" value="{{ $clientProgram->device_identifier }}" placeholder="History">
+                                </div>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-primary mr-2" submit>Ok</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </span>
+                        <span class="mx-2 text-secondary on-hover-opaque">|</span>
+                        <span class="pr-1">Work Spec: <b class="text-secondary">{{ $clientProgram->min_monthly_time_in_minutes }}m - {{ $clientProgram->max_monthly_time_in_minutes }}m</b></span>
+                        <span moe>
+                            <a start show class="py-0 font-weight-normal"><i class="fa fa-pencil-alt"></i></a>
+                            <form url="/api/clientProgram/editWorkSpec">
+                                <input type="hidden" name="uid" value="{{ $clientProgram->uid }}">
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Min Monthly Time (minutes)</label>
+                                    <input type="number" class="form-control form-control-sm" name="minMonthlyTimeInMinutes" value="{{ $clientProgram->min_monthly_time_in_minutes }}" placeholder="">
+                                </div>
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Max Monthly Time (minutes)</label>
+                                    <input type="number" class="form-control form-control-sm" name="maxMonthlyTimeInMinutes" value="{{ $clientProgram->max_monthly_time_in_minutes }}" placeholder="">
+                                </div>
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Time In Minutes Memo</label>
+                                    <textarea class="form-control form-control-sm" rows="2" name="timeInMinutesMemo" value="{{ $clientProgram->time_in_minutes_memo }}" placeholder=""></textarea>
+                                </div>
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Goal</label>
+                                    <textarea class="form-control form-control-sm" rows="2" name="goal" value="{{ $clientProgram->goal }}" placeholder=""></textarea>
+                                </div>
+                                <div class="mb-2">
+                                    <label class="text-sm mb-1 text-secondary">Sticky Note</label>
+                                    <textarea class="form-control form-control-sm" rows="2" name="stickyNote" value="{{ $clientProgram->sticky_note }}" placeholder=""></textarea>
+                                </div>
+                                <div class="mb-2">
+                                    <label class="mb-1 text-secondary d-flex align-items-center">
+                                        <span class="mr-2">Change Current Month</span>
+                                        <input type="checkbox" name="changeCurrentMonth">
+                                    </label>
+                                </div>
+                                <div class="d-flex align-items-center">
+                                    <button class="btn btn-sm btn-primary mr-2" submit>Ok</button>
+                                    <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>
+                                </div>
+                            </form>
+                        </span>
+                    </div>
+                </td>
+            </tr>
+        @endforeach
+        </tbody>
+    </table>
+    @if(!$patient->clientPrograms || count($patient->clientPrograms) === 0)
+        <div class="p-2 border-top">
+            <span class="text-secondary">
+                No programs
+            </span>
+        </div>
+    @endif
+</div>
+

resources/views/app/patients.blade.php

@@ -2,6 +2,27 @@
 
 @section('content')
 
+    <?php
+    $showProgramsColumn = false;
+    foreach($patients as $patient) {
+        if(count($patient->clientPrograms)) {
+            if($pro->pro_type === 'ADMIN') {
+                $showProgramsColumn = true;
+                break;
+            }
+            else {
+                foreach($patient->clientPrograms as $clientProgram) {
+                    if(in_array($pro->id, [$clientProgram->mcp_pro_id, $clientProgram->manager_pro_id])) {
+                        $showProgramsColumn = true;
+                        break;
+                    }
+                }
+                if($showProgramsColumn) break;
+            }
+        }
+    }
+    ?>
+
     <div class="p-3 mcp-theme-1">
     <div class="card">
 
@@ -19,15 +40,14 @@
             <table class="table table-condensed p-0 m-0">
                 <thead class="bg-light">
                 <tr>
-                    <th></th>
+                    <th class="border-0"></th>
                     <th class="px-3 border-0">#</th>
-                    <th class="border-0">Name</th>
+                    <th class="border-0">Patient</th>
                     <th class="border-0">Created At</th>
-                    <th class="border-0">DOB</th>
-                    <th class="border-0">Sex</th>
+                    @if($showProgramsColumn)<th class="border-0">Program(s)</th>@endif
                     <th class="border-0">MCN</th>
                     <th class="border-0">PCP</th>
-                    <th class="border-0">RMM</th>
+                    {{--<th class="border-0">RMM</th>--}}
                     <th class="border-0">Upcoming Appointments</th>
                 </tr>
                 </thead>
@@ -45,10 +65,32 @@
                             @if($patient->has_mcp_done_onboarding_visit !== 'YES')
                             <span title="MCP Onboarding Visit Pending"><i class="fa fa-exclamation-triangle"></i></span>
                             @endif
+                            <div>{{ friendly_date_time($patient->dob, false) }}{{ $patient->sex === 'M' ? ', Male' : ($patient->sex === ', F' ? 'Female' : '') }}</div>
                         </td>
                         <td>{{friendly_date_time_short_with_tz($patient->created_at, true, 'EASTERN')}}</td>
-                        <td>{{ friendly_date_time($patient->dob, false) }}</td>
-                        <td>{{ $patient->sex === 'M' ? 'Male' : ($patient->sex === 'F' ? 'Female' : '-') }}</td>
+                        @if($showProgramsColumn)
+                        <td>
+                            <?php $programNumber = 0; ?>
+                            @foreach($patient->clientPrograms as $clientProgram)
+                                <?php
+                                    if($pro->pro_type === 'ADMIN' ||
+                                        in_array($pro->id, [$clientProgram->mcp_pro_id, $clientProgram->manager_pro_id])
+                                    ) {
+                                        // $program = $clientProgram->program;
+                                        $programNumber++;
+                                ?>
+                                <div class="mb-1 text-nowrap">
+                                    {{ $programNumber }}. {{ $clientProgram->title }}
+                                    @if($clientProgram->has_mcp_done_onboarding_visit !== 'YES')
+                                        <span title="Onboarding Pending" class="ml-1"><i class="fa fa-exclamation-triangle"></i></span>
+                                    @else
+                                        <span title="Onboarding Complete" class="ml-1 text-secondary"><i class="fa fa-check"></i></span>
+                                    @endif
+                                </div>
+                                <?php } ?>
+                            @endforeach
+                        </td>
+                        @endif
                         <td>
                             @if($patient->was_medicare_validation_successful && $patient->is_part_b_primary == 'YES')
                             Covered <span style="color:green"><i class="fa fa-check-circle"></i></span>
@@ -69,9 +111,9 @@
                         <td>
                             {{ $patient->mcp ? $patient->mcp->displayName() : '-' }}
                         </td>
-                        <td>
+                        {{--<td>
                             {{ $patient->rmm ? $patient->rmm->displayName() : '-' }}
-                        </td>
+                        </td>--}}
                         <td>
                             <table class="table table-sm border-0 my-0">
                                 <tbody>

resources/views/app/practice-management/calendar.blade.php

@@ -247,7 +247,7 @@
         <div class="stag-popup stag-popup-sm mcp-theme-1" stag-popup-key="client-edit-appointment">
             <form method="POST" action="/api/appointment/update" id="editApptForm">
                 <h3 class="stag-popup-title">
-                    <span>Edit Appointment</span>
+                    <span>Appointment Details</span>
                     <a href="#" class="ml-auto text-secondary"
                        onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
                 </h3>
@@ -257,9 +257,10 @@
                         Patient
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <input type="text"
-                               class="form-control form-control-sm"
-                               :value="editAppointment.clientName" readonly>
+                        @{{ editAppointment.clientName }}
+                        <a :href="'/patients/view/' + editAppointment.clientUid + '/calendar/' + editAppointment.uid" class="ml-2">
+                            <i class="fa fa-calendar"></i>
+                        </a>
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -267,15 +268,7 @@
                         Pro
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <select id="editApptPro" name="proUid" required
-                                v-model="editAppointment.proUid"
-                                class="form-control form-control-sm">
-                            @foreach($pros as $iPro)
-                                <option value="{{$iPro->uid}}">
-                                    {{$iPro->displayName()}}
-                                </option>
-                            @endforeach
-                        </select>
+                        @{{ editAppointment.proName }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -283,9 +276,7 @@
                         Date
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <input type="date" name="date" required
-                               class="form-control form-control-sm"
-                               v-model="editAppointment.date">
+                        @{{ editAppointment.date }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -293,9 +284,7 @@
                         Start Time
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <input type="time" name="startTime" required
-                               class="form-control form-control-sm"
-                               v-model="editAppointment.startTime">
+                        @{{ editAppointment.startTime ? editAppointment.startTime : '-' }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -303,9 +292,7 @@
                         End Time
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <input type="time" name="endTime"
-                               class="form-control form-control-sm"
-                               v-model="editAppointment.endTime">
+                        @{{ editAppointment.endTime ? editAppointment.endTime : '-' }}
                     </div>
                 </div>
                 <input type="hidden" name="timeZone" :value="timezone">
@@ -314,9 +301,7 @@
                         Timezone
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <input type="text"
-                               class="form-control form-control-sm"
-                               :value="timezone" readonly>
+                        @{{ timezone }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -324,15 +309,7 @@
                         Status
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <select id="editApptStatus" name="status" required
-                                v-model="editAppointment.status"
-                                class="form-control form-control-sm font-weight-bold px-1">
-                            <option value="CREATED">CREATED</option>
-                            <option value="CONFIRMED">CONFIRMED</option>
-                            <option value="CANCELLED">CANCELLED</option>
-                            <option value="COMPLETED">COMPLETED</option>
-                            <option value="ABANDONED">ABANDONED</option>
-                        </select>
+                        @{{ editAppointment.status ? editAppointment.status : '-' }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -340,9 +317,7 @@
                         Title
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <input type="text" name="title"
-                               class="form-control form-control-sm"
-                               v-model="editAppointment.title">
+                        @{{ editAppointment.title ? editAppointment.title : '-' }}
                     </div>
                 </div>
                 <div class="row mb-2">
@@ -350,17 +325,12 @@
                         Description
                     </div>
                     <div class="col-9 font-weight-bold">
-                        <textarea name="description"
-                                  class="form-control form-control-sm"
-                                  v-model="editAppointment.description"></textarea>
+                        @{{ editAppointment.description ? editAppointment.description : '-' }}
                     </div>
                 </div>
                 <div class="d-flex align-items-center justify-content-center">
-                    <button class="btn btn-sm btn-primary mr-2"
-                            :disabled="inProgress"
-                            v-on:click.prevent="updateAppointment()">Submit</button>
                     <button class="btn btn-sm btn-default border"
-                            onclick="return closeStagPopup()">Cancel</button>
+                            onclick="return closeStagPopup()">Close</button>
                 </div>
             </form>
         </div>
@@ -398,7 +368,9 @@
                         // edit appt.
                         editAppointment: {
                             proUid: '',
+                            clientUid: '',
                             clientName: '',
+                            proName: '',
                             date: '',
                             startTime: '',
                             endTime: '',
@@ -733,9 +705,11 @@
                         },
                         showEditAppointmentModal: function() {
                             // setup model data
-                            /*this.inProgress = false;
+                            this.inProgress = false;
                             this.editAppointment.uid = this.selectedEvent.extendedProps.appointmentUid;
+                            this.editAppointment.clientUid = this.selectedEvent.extendedProps.clientUid;
                             this.editAppointment.clientName = this.selectedEvent.extendedProps.clientName;
+                            this.editAppointment.proName = this.selectedEvent.extendedProps.proName;
                             this.editAppointment.proUid = this.selectedEvent.extendedProps.proUid;
                             this.editAppointment.date = this.dateStr(this.selectedEvent.start);
                             this.editAppointment.startTime = this.timeStr(this.selectedEvent.start);
@@ -745,9 +719,9 @@
                             this.editAppointment.description = this.selectedEvent.extendedProps.description;
                             this.editAppointment.status = this.selectedEvent.extendedProps.status;
                             Vue.nextTick(function() {
-                                $('#editApptPro').trigger('change');
                                 showStagPopup('client-edit-appointment');
-                            });*/
+                                initFastLoad($('[stag-popup-key="client-edit-appointment"]'));
+                            });
                         },
                         updateAppointment: function() {
                             let form = $('#editApptForm');

resources/views/app/video/call-agora.blade.php

@@ -49,7 +49,7 @@
                 </h6>
             </div>
             <div class="main-view mx-auto">
-                <div id="self-view" class="full-view" data-name="{{ $pro->name_display }}" data-type="PRO"></div>
+                <div id="self-view" class="full-view" data-stream="self" data-name="You" data-type="PRO"></div>
                 <div class="thumbs">
 
                 </div>
@@ -71,7 +71,6 @@
         </div>
         @endif
 
-
     </div>
 
     <div class="border-top patient-queue mcp-theme-1" id="queueComponent">
@@ -100,7 +99,8 @@
                 delimiters: ['@{{', '}}'],
                 data: {
 
-                    appId: '{{ env('AGORA_APPID') }}',
+                    agoraClient: null,
+                    appId: '{{ config('app.agora_appid') }}',
                     channel: '{{ $client ? $client->uid : '' }}',
                     uid: '{{ $session->id + 1000000 }}',
 
@@ -115,12 +115,6 @@
 
                     clientUid: '',
 
-                    otSessionId: '',
-
-                    publisher: false,
-
-                    otSession: false,
-
                     selfUserType: 'PRO',
                     noOneElseInCall: true,
                     patientInQueue: false,
@@ -132,6 +126,18 @@
                     ringer: {{ $pro->is_ring_on ? 'true' : 'false' }},
                 },
                 methods: {
+                    resolveParticipantNames: function() {
+                        $('[data-stream]:not([data-name])').each(function() {
+                            let elem = this;
+                            $.post('/pro/meet/get-participant-info', {
+                                _token: '{{ csrf_token() }}',
+                                uid: $(elem).attr('data-stream')
+                            }, function(_data) {
+                                $(elem).attr('data-type', _data.type);
+                                $(elem).attr('data-name', _data.name);
+                            }, 'json');
+                        });
+                    },
                     toggleRinger: function () {
                         let self = this, endPoint = this.ringer ? 'turnOffRing' : 'turnOnRing';
                         $.post('/api/pro/' + endPoint, function (_data) {
@@ -165,51 +171,22 @@
                     },
                     hangUp: function () {
                         var self = this;
-                        if (this.otSession) {
-                            try {
-                                this.otSession.unpublish(this.publisher);
-                                this.otSession.disconnect();
-                            } catch (e) {
-                                console.log('Was already disconnected.');
+                        async function _leave() {
+                            if(self.agoraClient) {
+                                await self.agoraClient.leave();
+                                window.top.hideRHS();
+                                window.location.reload();
                             }
-                            this.otSession = false;
-                            this.otSessionId = '';
-                            this.started = false;
-                            this.startTime = false;
-                            this.videoActive = false;
-                             if(self.publisher){
-                                self.publisher.destroy();
-                             }
-                             window.top.hideRHS();
-                            // this.client = false;
                         }
+                        _leave();
                     },
                     initAgora: function () {
 
-                        /* fake video feed (temp) */
-                        const randomColour = () => {
-                            return Math.round(Math.random() * 255);
-                        };
-
-                        const canvas = document.createElement('canvas');
-                        canvas.width = 640;
-                        canvas.height = 480;
-                        const ctx = canvas.getContext('2d');
-                        var pos = 100;
-                        window.setInterval(function () {
-                            ctx.clearRect(0, 0, canvas.width, canvas.height);
-                            ctx.font = "20px Georgia";
-                            ctx.fillStyle = `rgb(220, 220, 220)`;
-                            ctx.fillText("Video feed from {{ $pro->name_display }}", 20, pos);
-                            pos += 5;
-                            if (pos > canvas.height) pos = 100;
-                        }, 1000);
-
                         let self = this;
 
                         async function _initAgora(){
 
-                            const client = AgoraRTC.createClient({mode:'rtc', codec:'h264'})
+                            self.agoraClient = AgoraRTC.createClient({mode:'rtc', codec:'h264'})
                             let camera, mic
                             try { mic = await AgoraRTC.createMicrophoneAudioTrack() } catch {
                                 console.log('ALIX: error in getting mic');
@@ -219,7 +196,9 @@
                             }
 
                             // testing
-                            try { camera = await AgoraRTC.createScreenVideoTrack() } catch { }
+                            @if(config('app.agora_mode') === 'screen')
+                                try { camera = await AgoraRTC.createScreenVideoTrack() } catch { }
+                            @endif
 
                             if (!mic && !camera){
                                 alert('Do you have camera/mic? Unable to hear or see you.')
@@ -227,14 +206,12 @@
                             }
 
                             // Add myself to the page.
-                            // createUserEl(agora.uid)
-                            // addUserVideo(agora.uid, camera)
                             if(camera) {
                                 camera.play($('#self-view')[0]);
                             }
 
                             // events
-                            client.on('user-joined', user => {
+                            self.agoraClient.on('user-joined', user => {
 
                                 // add a div for remove view
                                 $('[data-stream="' + user.uid + '"]').remove();
@@ -242,11 +219,6 @@
                                 var remoteElem = $('<div id="' + remoteViewID + '" class="remote-view thumb-view" data-stream="' + user.uid + '"></div>');
                                 remoteElem.appendTo('.thumbs');
 
-                                // TODO
-                                // if (connectionData.type === 'CLIENT') {
-                                //     self.client = true;
-                                // }
-
                                 if (!self.startTime) {
                                     self.startTime = new Date().getTime();
                                     window.setInterval(function () {
@@ -256,8 +228,9 @@
                                 }
                                 self.activateParty(user.uid);
                                 self.noOneElseInCall = false;
+                                self.resolveParticipantNames();
                             })
-                            client.on('user-left', user => {
+                            self.agoraClient.on('user-left', user => {
 
                                 if ($('.full-view[data-stream="' + user.uid + '"]').length) {
                                     var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):not(.disconnected-view):visible');
@@ -275,12 +248,6 @@
 
                                 $('[data-stream="' + user.uid + '"]').remove();
 
-                                // TODO:
-                                // var connectionData = JSON.parse(data);
-                                // if (connectionData.type === 'CLIENT') {
-                                //     self.client = false;
-                                // }
-
                                 // if no other parties in call, hang up
                                 if (!$('[data-stream]:not([data-stream="' + {{ $session->id }} + '"])').length) {
                                     console.warn('No other parties in the call!');
@@ -289,15 +256,15 @@
                                     self.noOneElseInCall = true;
                                 }
                             })
-                            client.on('user-published', async function(user, mediaType){
-                                await client.subscribe(user, mediaType)
+                            self.agoraClient.on('user-published', async function(user, mediaType){
+                                await self.agoraClient.subscribe(user, mediaType)
                                 mediaType === 'audio'
                                     ? user.audioTrack.play()
                                     : user.videoTrack.play($('[data-stream="' + user.uid + '"]')[0]);
                             })
 
-                            await client.join(self.appId, self.channel, self.selfToken, self.uid)
-                            await client.publish([mic, camera].filter(Boolean))
+                            await self.agoraClient.join(self.appId, self.channel, self.selfToken, self.uid)
+                            await self.agoraClient.publish([mic, camera].filter(Boolean))
 
                             // assume connected by this point, notify backend & show self video
                             if (mic || camera) {
@@ -310,23 +277,6 @@
 
                         _initAgora();
 
-                        // TODO:
-                        // self disconnected
-                        /*self.otSession.on('sessionDisconnected', function sessionDisconnected(event) {
-                            console.log('You were disconnected from the session.', event.reason);
-
-                            // turn pro video off
-                            $.post('/api/clientVideoVisit/turnProVideoOff', {}, function (_data) {
-                                console.log(_data);
-
-                                // stop heart beat
-                                if (self.heartbeatTimer) {
-                                    window.clearInterval(self.heartbeatTimer);
-                                    self.heartbeatTimer = false;
-                                }
-                            });
-                        });
-                        */
                     },
                     joinMeetingAsPro: function (_type) {
                         var self = this;
@@ -384,12 +334,6 @@
                         return false;
                     });
 
-                    window.onbeforeunload = function () {
-                        if (self.started) {
-                            return "A call is in progress";
-                        }
-                    };
-
                     @if(isset($client))
                         self.client = true;
                         self.clientUid = '{{ $client->uid }}';

resources/views/app/video/call.blade.php

@@ -11,7 +11,7 @@
     <link href="/css/meeting.css" rel="stylesheet">
     <link href="/css/style.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-    <script defer src=//download.agora.io/sdk/web/AgoraRTC_N-4.1.0.js></script>
+    <script src="https://static.opentok.com/v2/js/opentok.js"></script>
 </head>
 
 <body class="p-0 m-0">
@@ -26,6 +26,20 @@
         </div>
         @endif
 
+        {{--
+        <div v-show="!videoActive" class="align-items-center justify-content-center py-3 border-bottom" style="display: flex;">
+            <button class="btn btn-sm btn-primary px-4 font-weight-bold stag-primary-bg stag-primary-border"
+                    v-on:click.prevent="nextPatient()"
+                    :disabled="client || checkingForNextPatient || started || !(patientInQueue && !started)">Next Patient</button>
+            <span v-if="patientInQueue && !started" class="text-success text-sm ml-3 small">
+                <i class="fa fa-circle"></i>
+            </span>
+            <span v-if="!patientInQueue && !started" class="text-secondary text-sm ml-3 small cancelled-item">
+                <i class="fa fa-circle"></i>
+            </span>
+        </div>
+        --}}
+
         <div class="py-2 d-flex align-items-center justify-content-center border-bottom">
             <a href="#" v-if="ringer" v-on:click.prevent="toggleRinger()"
                class="font-weight-bold btn btn-sm btn-success">
@@ -39,6 +53,8 @@
             </a>
         </div>
 
+        <div v-if="!started && noNextPatient" class="bg-light rounded text-center py-1 font-weight-bold text-sm my-3 mx-3">@{{ noNextPatient }}</div>
+
         <div class="" v-show="videoActive">
             <div class="py-3 text-center" v-if="started">
                 <h6 class="text-black font-weight-bold m-0">Call in progress: @{{ timeDisplay() }}</h6>
@@ -49,7 +65,7 @@
                 </h6>
             </div>
             <div class="main-view mx-auto">
-                <div id="self-view" class="full-view" data-stream="self" data-name="You" data-type="PRO"></div>
+                <div id="self-view" class="full-view" data-name="{{ $pro->name_display }}" data-type="PRO"></div>
                 <div class="thumbs">
 
                 </div>
@@ -62,15 +78,6 @@
             </div>
         </div>
 
-        @if($client)
-        <div class="" v-show="!videoActive && client">
-            <button class="btn btn-sm btn-primary font-weight-bold mx-auto mt-4 d-block"
-                    v-on:click.prevent="connect()">
-                Start video call with {{ $client->displayName() }}
-            </button>
-        </div>
-        @endif
-
     </div>
 
     <div class="border-top patient-queue mcp-theme-1" id="queueComponent">
@@ -98,12 +105,6 @@
                 el: '#proCallComponent',
                 delimiters: ['@{{', '}}'],
                 data: {
-
-                    agoraClient: null,
-                    appId: '{{ config('AGORA_APPID') }}',
-                    channel: '{{ $client ? $client->uid : '' }}',
-                    uid: '{{ $session->id + 1000000 }}',
-
                     time: 0,
                     startTime: 0,
                     started: false,
@@ -115,7 +116,17 @@
 
                     clientUid: '',
 
+                    otSessionId: '',
+
+                    publisher: false,
+
+                    checkingForNextPatient: false,
+                    noNextPatient: false,
+
+                    otSession: false,
+
                     selfUserType: 'PRO',
+                    selfStreamId: '',
                     noOneElseInCall: true,
                     patientInQueue: false,
 
@@ -126,18 +137,6 @@
                     ringer: {{ $pro->is_ring_on ? 'true' : 'false' }},
                 },
                 methods: {
-                    resolveParticipantNames: function() {
-                        $('[data-stream]:not([data-name])').each(function() {
-                            let elem = this;
-                            $.post('/pro/meet/get-participant-info', {
-                                _token: '{{ csrf_token() }}',
-                                uid: $(elem).attr('data-stream')
-                            }, function(_data) {
-                                $(elem).attr('data-type', _data.type);
-                                $(elem).attr('data-name', _data.name);
-                            }, 'json');
-                        });
-                    },
                     toggleRinger: function () {
                         let self = this, endPoint = this.ringer ? 'turnOffRing' : 'turnOnRing';
                         $.post('/api/pro/' + endPoint, function (_data) {
@@ -152,15 +151,50 @@
                             }
                         }, 'json');
                     },
-                    connect: function () {
+                    pollForNextPatient: function () {
+                        if (!this.started) {
+                            this.nextPatient(true);
+                        }
+                    },
+                    nextPatient: function (_pollOnly = false) {
                         var self = this;
-                        self.selfName = '{{ $pro->name_display  }}';
-                        $.get('/api/agora/getClientToken', {
-                            clientUid: self.clientUid,
-                        }, function (_data) {
-                            console.log(_data);
-                            self.selfToken = _data.data;
-                            self.initAgora();
+                        if (!_pollOnly) this.checkingForNextPatient = true;
+                        $.post('/api/client/getNextClientForVideoVisit', {}, function (_data) {
+                            if (_pollOnly) {
+                                self.patientInQueue = _data.success;
+                            } else {
+                                self.checkingForNextPatient = false;
+                                if (!_data.success) {
+                                    self.noNextPatient = _data.message;
+                                    window.setTimeout(function () {
+                                        self.noNextPatient = false;
+                                    }, 2000);
+                                } else {
+                                    // get ot session key from client record
+                                    self.client = true;
+                                    self.clientUid = _data.data;
+                                    self.videoActive = true;
+                                    self.startOpenTokSession();
+                                }
+                            }
+                        }, 'json');
+                    },
+                    startOpenTokSession: function () {
+                        var self = this;
+                        self.getOpenTokSessionId(function () {
+                            self.selfName = '{{ $pro->name_display  }}';
+                            $.post('/api/openTok/getClientToken', {
+                                opentokSessionId: self.otSessionId,
+                                data: JSON.stringify({
+                                    uid: '{{ $pro->uid  }}',
+                                    name: self.selfName,
+                                    type: 'PRO'
+                                })
+                            }, function (_data) {
+                                console.log(_data);
+                                self.selfToken = _data.data;
+                                self.initOpenTok();
+                            });
                         });
                     },
                     timeDisplay: function () {
@@ -171,113 +205,264 @@
                     },
                     hangUp: function () {
                         var self = this;
-                        async function _leave() {
-                            if(self.agoraClient) {
-                                await self.agoraClient.leave();
-                                window.top.hideRHS();
-                                window.location.reload();
+                        if (this.otSession) {
+                            try {
+                                this.otSession.unpublish(this.publisher);
+                                this.otSession.disconnect();
+                            } catch (e) {
+                                console.log('Was already disconnected.');
                             }
+                            this.otSession = false;
+                            this.otSessionId = '';
+                            this.started = false;
+                            this.startTime = false;
+                            this.videoActive = false;
+                             if(self.publisher){
+                                self.publisher.destroy();
+                             }
+                             window.top.hideRHS();
+                            // this.client = false;
                         }
-                        _leave();
                     },
-                    initAgora: function () {
+                    initOpenTok: function () {
+
+                        /* fake video feed (temp) */
+                        const randomColour = () => {
+                            return Math.round(Math.random() * 255);
+                        };
+
+                        const canvas = document.createElement('canvas');
+                        canvas.width = 640;
+                        canvas.height = 480;
+                        const ctx = canvas.getContext('2d');
+                        var pos = 100;
+                        window.setInterval(function () {
+                            ctx.clearRect(0, 0, canvas.width, canvas.height);
+                            ctx.font = "20px Georgia";
+                            ctx.fillStyle = `rgb(220, 220, 220)`;
+                            ctx.fillText("Video feed from {{ $pro->name_display }}", 20, pos);
+                            pos += 5;
+                            if (pos > canvas.height) pos = 100;
+                        }, 1000);
 
-                        let self = this;
+                        var self = this;
+
+                        var apiKey = '<?= env('TOKBOX_API_KEY', '46678902') ?>';
+                        var sessionId = this.otSessionId;
+                        var token = this.selfToken;
+
+                        // destroy if existing
+                        // self.hangUp();
+
+                        self.otSession = OT.initSession(apiKey, sessionId);
+
+                        // peer connected
+                        self.otSession.on('streamCreated', function streamCreated(event) {
+                            console.log('streamCreated', arguments);
+                            var subscriberOptions = {
+                                insertMode: 'append',
+                                width: '100%',
+                                height: '100%'
+                            };
+
+                            var connectionData = JSON.parse(event.stream.connection.data);
 
-                        async function _initAgora(){
+                            // add a div for remove view
+                            var remoteViewID = 'remote-view-' + event.stream.id;
+                            var remoteElem = $('<div id="' + remoteViewID + '" class="remote-view thumb-view" ' +
+                                'data-stream="' + event.stream.id + '" ' +
+                                'data-connection-data="' + event.stream.connection.data + '" ' +
+                                'data-name="' + connectionData.name + '" ' +
+                                'data-type="' + connectionData.type + '"></div>');
+                            remoteElem.appendTo('.thumbs');
 
-                            self.agoraClient = AgoraRTC.createClient({mode:'rtc', codec:'h264'})
-                            let camera, mic
-                            try { mic = await AgoraRTC.createMicrophoneAudioTrack() } catch {
-                                console.log('ALIX: error in getting mic');
+                            self.otSession.subscribe(event.stream, remoteViewID, subscriberOptions, self.handleOpenTokError);
+
+                            if (connectionData.type === 'CLIENT') {
+                                self.client = true;
                             }
-                            try { camera = await AgoraRTC.createCameraVideoTrack() } catch {
-                                console.log('ALIX: error in getting camera');
+
+                            if (!self.startTime) {
+                                self.startTime = new Date().getTime();
+                                window.setInterval(function () {
+                                    self.time = new Date().getTime() - self.startTime;
+                                }, 1000);
+                                self.started = true;
                             }
 
-                            // testing
-                            @if(env('AGORA_MODE') === 'screen')
-                                try { camera = await AgoraRTC.createScreenVideoTrack() } catch { }
-                            @endif
+                            self.activateParty(event.stream.id);
+
+                            self.noOneElseInCall = false;
+                        });
 
-                            if (!mic && !camera){
-                                alert('Do you have camera/mic? Unable to hear or see you.')
-                                return
+                        // peer disconnected
+                        self.otSession.on("streamDestroyed", function (event) {
+                            onPeerDisconnection(event, event.stream.connection.data);
+                        });
+                        // self.otSession.on("connectionDestroyed", function(event) {
+                        //     debugger;
+                        //     console.log('connectionDestroyed from ' + event.connection.data);
+                        //     onPeerDisconnection(event, event.connection.data);
+                        // });
+
+                        self.otSession.on("connectionCreated", function (event) {
+                            console.log('connectionCreated');
+                            console.log(event);
+                        });
+
+                        function onPeerDisconnection(event, data) {
+
+                            if (event.stream && $('.full-view[data-stream="' + event.stream.id + '"]').length) {
+                                var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):not(.disconnected-view):visible');
+                                if (allThumbs.length) {
+                                    $('.thumbs [data-stream]:not([data-stream=""])').each(function () {
+                                        if ($(this).attr('data-stream') !== event.stream.id) {
+                                            self.activateParty($(this).attr('data-stream'));
+                                            return false;
+                                        }
+                                    });
+                                } else {
+                                    self.noOneElseInCall = true;
+                                }
                             }
 
-                            // Add myself to the page.
-                            if(camera) {
-                                camera.play($('#self-view')[0]);
+                            if (event.stream) {
+                                var remoteViewElem = $('[data-stream="' + event.stream.id + '"]');
+                                remoteViewElem.remove();
+                                // if(remoteViewElem.length) {
+                                //     remoteViewElem.attr('data-stream', '');
+                                //     remoteViewElem.attr('data-connection-data', '');
+                                //     remoteViewElem.attr('data-type', '');
+                                //     remoteViewElem.attr('data-name', '');
+                                // }
+                                // remoteViewElem.addClass('disconnected-view')
                             }
 
-                            // events
-                            self.agoraClient.on('user-joined', user => {
-
-                                // add a div for remove view
-                                $('[data-stream="' + user.uid + '"]').remove();
-                                var remoteViewID = 'remote-view-' + user.uid;
-                                var remoteElem = $('<div id="' + remoteViewID + '" class="remote-view thumb-view" data-stream="' + user.uid + '"></div>');
-                                remoteElem.appendTo('.thumbs');
-
-                                if (!self.startTime) {
-                                    self.startTime = new Date().getTime();
-                                    window.setInterval(function () {
-                                        self.time = new Date().getTime() - self.startTime;
-                                    }, 1000);
-                                    self.started = true;
+                            var connectionData = JSON.parse(data);
+                            if (connectionData.type === 'CLIENT') {
+                                self.client = false;
+                            }
+
+                            // if no other parties in call, hang up
+                            if (!$('[data-stream]:not([data-stream="' + self.selfStreamId + '"])').length) {
+                                console.warn('No other parties in the call!');
+                                self.startTime = 0;
+                                self.started = false;
+                                self.noOneElseInCall = true;
+                            }
+                        }
+
+                        // self connected
+                        self.otSession.on("sessionConnected", function (event) {
+                            self.joinMeetingAsPro(self.selfUserType);
+                        });
+
+                        // self disconnected
+                        self.otSession.on('sessionDisconnected', function sessionDisconnected(event) {
+                            console.log('You were disconnected from the session.', event.reason);
+
+                            // turn pro video off
+                            $.post('/api/clientVideoVisit/turnProVideoOff', {}, function (_data) {
+                                console.log(_data);
+
+                                // stop heart beat
+                                if (self.heartbeatTimer) {
+                                    window.clearInterval(self.heartbeatTimer);
+                                    self.heartbeatTimer = false;
                                 }
-                                self.activateParty(user.uid);
-                                self.noOneElseInCall = false;
-                                self.resolveParticipantNames();
-                            })
-                            self.agoraClient.on('user-left', user => {
-
-                                if ($('.full-view[data-stream="' + user.uid + '"]').length) {
-                                    var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):not(.disconnected-view):visible');
-                                    if (allThumbs.length) {
-                                        $('.thumbs [data-stream]:not([data-stream=""])').each(function () {
-                                            if ($(this).attr('data-stream') !== user.uid) {
-                                                self.activateParty($(this).attr('data-stream'));
-                                                return false;
-                                            }
-                                        });
-                                    } else {
-                                        self.noOneElseInCall = true;
+                            });
+                        });
+
+                        // initialize the publisher
+                        var publisherOptions = {
+                            // videoSource: canvas.captureStream(1).getVideoTracks()[0], // TODO: Comment this line to use webcam
+                            insertMode: 'append',
+                            width: '100%',
+                            height: '100%',
+                        };
+                        var publisher = OT.initPublisher('self-view', publisherOptions, self.handleOpenTokError);
+
+                        publisher.on('streamCreated', function (event) {
+                            var selfView = $('#self-view');
+                            selfView.attr('data-stream', event.stream.id);
+                            selfView.attr('data-connection-data', event.stream.connection.data);
+                            self.selfStreamId = event.stream.id;
+                        });
+
+                        publisher.on('streamCreated', function (event) {
+                            console.log('publisher->streamCreated');
+                            var selfView = $('#self-view');
+                            selfView.attr('data-stream', event.stream.id);
+                            selfView.attr('data-connection-data', event.stream.connection.data);
+                            selfView.attr('data-type', 'PRO');
+                            self.activateParty('self');
+                            $('#self-view').show();
+
+                            // turn pro video on
+                            $.post('/api/clientVideoVisit/turnProVideoOn', {}, function (_data) {
+                                console.log(_data);
+
+                                // start heart beat
+                                self.heartbeatTimer = window.setInterval(function () {
+                                    $.post('/api/clientVideoVisit/registerProMeetingHeartbeat', {}, function (_data) {
+                                        console.log(_data);
+                                    });
+                                }, 5000);
+                            });
+                        });
+
+                        publisher.on('streamDestroyed', function (event) {
+                            event.preventDefault();
+                            console.log('publisher->streamDestroyed');
+                            $('#self-view').hide();
+                            var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):not(.disconnected-view):visible');
+                            if (allThumbs.length) {
+                                $('.thumbs [data-stream]:not([data-stream=""])').each(function () {
+                                    if ($(this).attr('data-stream') !== $('#self-view').attr('data-stream')) {
+                                        self.activateParty($(this).attr('data-stream'));
+                                        return false;
                                     }
-                                }
+                                });
+                            } else {
+                                self.hangUp();
+                            }
 
-                                $('[data-stream="' + user.uid + '"]').remove();
+                            // turn pro video off
+                            $.post('/api/clientVideoVisit/turnProVideoOff', {}, function (_data) {
+                                console.log(_data);
 
-                                // if no other parties in call, hang up
-                                if (!$('[data-stream]:not([data-stream="' + {{ $session->id }} + '"])').length) {
-                                    console.warn('No other parties in the call!');
-                                    self.startTime = 0;
-                                    self.started = false;
-                                    self.noOneElseInCall = true;
+                                // stop heart beat
+                                if (self.heartbeatTimer) {
+                                    window.clearInterval(self.heartbeatTimer);
+                                    self.heartbeatTimer = false;
                                 }
-                            })
-                            self.agoraClient.on('user-published', async function(user, mediaType){
-                                await self.agoraClient.subscribe(user, mediaType)
-                                mediaType === 'audio'
-                                    ? user.audioTrack.play()
-                                    : user.videoTrack.play($('[data-stream="' + user.uid + '"]')[0]);
-                            })
-
-                            await self.agoraClient.join(self.appId, self.channel, self.selfToken, self.uid)
-                            await self.agoraClient.publish([mic, camera].filter(Boolean))
+                            });
+                        });
+                        self.publisher = publisher;
 
-                            // assume connected by this point, notify backend & show self video
-                            if (mic || camera) {
-                                self.joinMeetingAsPro(self.selfUserType);
-                                $('#self-view').attr('data-type', 'PRO').show();
-                                self.activateParty('self');
-                                self.videoActive = true;
+                        // Connect to the session
+                        self.otSession.connect(token, function callback(error) {
+                            if (error) {
+                                self.handleOpenTokError(error);
+                            } else {
+                                // If the connection is successful, publish the publisher to the session
+                                self.otSession.publish(publisher, self.handleOpenTokError);
                             }
-                        }
+                        });
+                    },
+                    handleOpenTokError: function (e) {
 
-                        _initAgora();
+                    },
 
+                    getOpenTokSessionId: function (_done) {
+                        var self = this;
+                        $.get('/pro/get-opentok-session-key/' + self.clientUid, function (_data) {
+                            self.otSessionId = _data.data;
+                            console.log(_data);
+                            _done();
+                        }, 'json');
                     },
+
                     joinMeetingAsPro: function (_type) {
                         var self = this;
                         $.ajax({
@@ -301,6 +486,7 @@
                                 alert(_data.message);
                             });
                     },
+
                     activateParty: function (_stream = 'self') {
                         var current = $('.full-view');
                         if (current.attr('data-stream') === _stream) return;
@@ -324,6 +510,7 @@
                                 .prependTo('.main-view');
                         }
                     }
+
                 },
                 mounted: function () {
 
@@ -334,10 +521,22 @@
                         return false;
                     });
 
+                    // poll for new patients and alert
+                    // window.setInterval(function () {
+                    //     self.pollForNextPatient();
+                    // }, 5000);
+
+                    window.onbeforeunload = function () {
+                        if (self.started) {
+                            return "A call is in progress";
+                        }
+                    };
+
                     @if(isset($client))
                         self.client = true;
-                        self.clientUid = '{{ $client->uid }}';
-                        self.videoActive = false;
+                    self.clientUid = '{{ $client->uid }}';
+                    self.videoActive = true;
+                    self.startOpenTokSession();
                     @endif
                 }
             });

resources/views/layouts/template.blade.php

@@ -277,73 +277,8 @@
             }, 15000); // once in 15 seconds
         });
     </script>
-    <script>
-        function showStagPopup(_key, _noAutoFocus) {
-            $('html, body').addClass('no-scroll');
-            let stagPopup = $('[stag-popup-key="' + _key + '"]');
-            stagPopup.addClass('show');
-            stagPopup.find('[moe][initialized]').removeAttr('initialized');
-            initMoes();
-            if(!_noAutoFocus) {
-                window.setTimeout(function() {
-                    stagPopup.find('input[type="text"]:not([readonly]):visible,select:visible').first().focus();
-                }, 150);
-            }
-            return false;
-        }
-        function submitStagPopup(_form) {
-            if(!_form[0].checkValidity()) {
-                _form[0].reportValidity();
-                return false;
-            }
-            showMask();
-            $.post(_form.attr('action'), _form.serialize(), function(_data) {
-                fastReload();
-            });
-            return false;
-        }
-        function closeStagPopup() {
-            $('.stag-popup').removeClass('show');
-            $('html, body').removeClass('no-scroll');
-            return false;
-        }
-        (function() {
-            window.initStagPopupEvents = function () {
-                $(document).on('click', '.stag-popup', function(_e) {
-                    if($(_e.target).is('.stag-popup')) {
-                        closeStagPopup();
-                    }
-                });
-                // catch ESC and discard any visible popups
-                $(document)
-                    .off('keydown.stag-popup-escape')
-                    .on('keydown.stag-popup-escape', function (e) {
-                        if(e.which === 27) {
-                            let visiblePopups = $('.stag-popup.show');
-                            if (visiblePopups.length) {
-                                closeStagPopup();
-                                return false;
-                            }
-                        }
-                    });
-            }
-            addMCInitializer('stag-popups', window.initStagPopupEvents);
-        })();
-    </script>
-    <script>
-        (function() {
-            function init() {
-                $(document)
-                    .off('mousedown.option-list', '.data-option-list>div')
-                    .on('mousedown.option-list', '.data-option-list>div', function() {
-                        let input = $(this).parent().prev('input[data-option-list]');
-                        $(this).parent().prev('input[data-option-list]').val('').focus();
-                        document.execCommand('insertText', false, $(this).text());
-                    });
-            }
-            addMCInitializer('option-list', init);
-        })();
-    </script>
+    <script src="/js/stag-popup.js"></script>
+    <script src="/js/option-list.js"></script>
     @include('app/pdf/viewer')
 
     <script>