Merge branch 'master' of rav.triplestart.com:TigerPHP/stagfe

.idea/jsLibraryMappings.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="PROJECT" libraries="{jquery-3.5.1.slim}" />
+    <file url="PROJECT" libraries="{jquery-3.5.1, jquery-3.5.1.slim}" />
   </component>
 </project>

.idea/stagfe.iml

@@ -102,5 +102,6 @@
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
     <orderEntry type="library" name="jquery-3.5.1.slim" level="application" />
+    <orderEntry type="library" name="jquery-3.5.1" level="application" />
   </component>
 </module>

app/Http/Controllers/GuestController.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Pro;
+
+class GuestController extends Controller
+{
+
+    public function meeting(Request $request, $meetingID, $participantID) {
+        return view('meeting', compact('meetingID', 'participantID'));
+    }
+
+}

public/css/meeting.css

@@ -0,0 +1,111 @@
+html, body {
+    background-color: #fff;
+    color: #636b6f;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 200;
+    height: 100vh;
+    margin: 0;
+}
+
+h1 {
+    color: #555;
+    width: 50%;
+    text-align: center;
+}
+
+@media (max-width: 900px) {
+    h1 {
+        width: auto;
+        text-align: center;
+        font-size: 2rem;
+        text-shadow: 1px 1px 2px #c0e4e2;
+    }
+}
+
+@media (max-width: 400px) {
+    h1 {
+        font-size: 1.75rem;
+        text-shadow: 1px 1px 2px #c0e4e2;
+    }
+}
+
+.form-container {
+    width: 50%;
+    margin-right: auto;
+}
+
+@media (max-width: 900px) {
+    .form-container {
+        margin: auto;
+        width: 100%;
+    }
+}
+
+.form-container .form {
+    background: #ffffffd1;
+    max-width: 400px;
+    margin: auto;
+    border-radius: 4px;
+}
+
+.form-container .form h3 {
+    font-size: 1.3rem;
+}
+
+.border-success {
+    border-color: #44bdad85 !important;
+}
+
+.text-dark {
+    color: #555;
+    font-weight: 600;
+}
+
+.form-container .form input {
+    border-color: #44bdad85 !important;
+}
+
+.form-container .form input:focus {
+    box-shadow: 0 0 0 0.2rem #44bdad85;
+}
+
+.form-container .form input.has-error {
+    border-color: #bd424285 !important;
+}
+
+.form-container .form input.has-error:focus {
+    box-shadow: 0 0 0 0.2rem #bd444454;
+}
+
+.field-error {
+    font-size: 0.9rem;
+    font-weight: 600;
+    padding-left: 0.75rem;
+    margin-top: 0.25rem;
+}
+
+.main-view {
+    width: 800px;
+    height: 600px;
+    margin: 0 1rem;
+    background: #444;
+    border-radius: 3px;
+}
+
+.tp-bar {
+    width: 140px;
+}
+
+.tp-bar .tp-item img {
+    border-radius: 3px;
+    opacity: 0.8;
+    cursor: pointer;
+}
+
+.tp-bar .tp-item img:hover, .tp-bar .tp-item.active img {
+    opacity: 1;
+}
+
+.tp-bar .tp-item.active img {
+    box-shadow: 0 0 0 0.3rem #44bdad85;
+}

resources/views/layouts/guest-home.blade.php

@@ -10,20 +10,13 @@
     <link href="https://fonts.googleapis.com/css?family=Nunito:200,600,700" rel="stylesheet">
 
     {{-- Bootstrap --}}
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
 
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
     <!-- Styles for patient home -->
     <style>
-        html, body {
-            background-color: #fff;
-            color: #636b6f;
-            font-family: 'Nunito', sans-serif;
-            font-weight: 200;
-            height: 100vh;
-            margin: 0;
-        }
-
         body {
             background-image: url(/images/patient-home-banner.jpg);
             background-size: 100% auto;
@@ -36,69 +29,8 @@
                 background-size: auto 100%;
             }
         }
-
-        h1 {
-            color: #555;
-            width: 50%;
-            text-align: center;
-        }
-
-        @media (max-width: 900px) {
-            h1 {
-                width: auto;
-                text-align: center;
-                font-size: 2rem;
-                text-shadow: 1px 1px 2px #c0e4e2;
-            }
-        }
-
-        @media (max-width: 400px) {
-            h1 {
-                font-size: 1.75rem;
-                text-shadow: 1px 1px 2px #c0e4e2;
-            }
-        }
-
-        .form-container {
-            width: 50%;
-            margin-right: auto;
-        }
-
-        @media (max-width: 900px) {
-            .form-container {
-                margin: auto;
-                width: 100%;
-            }
-        }
-
-        .form-container .form {
-            background: #ffffffd1;
-            max-width: 400px;
-            margin: auto;
-            border-radius: 4px;
-        }
-
-        .form-container .form h3 {
-            font-size: 1.3rem;
-        }
-
-        .border-success {
-            border-color: #44bdad85 !important;
-        }
-
-        .text-dark {
-            color: #555;
-            font-weight: 600;
-        }
-
-        .form-container .form input {
-            border-color: #44bdad85 !important;
-        }
-
-        .form-container .form input:focus {
-            box-shadow: 0 0 0 0.2rem #44bdad85;
-        }
     </style>
+    <link rel="stylesheet" href="/css/meeting.css">
 </head>
 <body class="px-3 px-md-5 py-5">
 

resources/views/layouts/guest-meeting.blade.php

@@ -10,86 +10,14 @@
     <link href="https://fonts.googleapis.com/css?family=Nunito:200,600,700" rel="stylesheet">
 
     {{-- Bootstrap --}}
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
 
     <link rel="stylesheet" href="/fontawesome-free/css/all.min.css">
 
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
-    <!-- Styles for patient home -->
-    <style>
-        html, body {
-            background-color: #fff;
-            color: #636b6f;
-            font-family: 'Nunito', sans-serif;
-            font-weight: 200;
-            height: 100vh;
-            margin: 0;
-        }
-
-        h1 {
-            color: #555;
-            width: 50%;
-            text-align: center;
-        }
-
-        @media (max-width: 900px) {
-            h1 {
-                width: auto;
-                text-align: center;
-                font-size: 2rem;
-                text-shadow: 1px 1px 2px #c0e4e2;
-            }
-        }
-
-        @media (max-width: 400px) {
-            h1 {
-                font-size: 1.75rem;
-                text-shadow: 1px 1px 2px #c0e4e2;
-            }
-        }
-
-        .form-container {
-            width: 50%;
-            margin-right: auto;
-        }
-
-        @media (max-width: 900px) {
-            .form-container {
-                margin: auto;
-                width: 100%;
-            }
-        }
-
-        .form-container .form {
-            background: #ffffffd1;
-            max-width: 400px;
-            margin: auto;
-            border-radius: 4px;
-        }
-
-        .form-container .form h3 {
-            font-size: 1.3rem;
-        }
-
-        .border-success {
-            border-color: #44bdad85 !important;
-        }
-
-        .text-dark {
-            color: #555;
-            font-weight: 600;
-        }
-
-        .form-container .form input {
-            border-color: #44bdad85 !important;
-        }
-
-        .form-container .form input:focus {
-            box-shadow: 0 0 0 0.2rem #44bdad85;
-        }
-    </style>
+    <link rel="stylesheet" href="/css/meeting.css">
 </head>
 <body class="p-0 m-0">
 

resources/views/meeting.blade.php

@@ -1,34 +1,6 @@
 @extends('layouts.guest-meeting')
 @section('content')
 
-    <style>
-        .main-view {
-            width: 800px;
-            height: 600px;
-            margin: 0 1rem;
-            background: #444;
-            border-radius: 3px;
-        }
-
-        .tp-bar {
-            width: 140px;
-        }
-
-        .tp-bar .tp-item img {
-            border-radius: 3px;
-            opacity: 0.8;
-            cursor: pointer;
-        }
-
-        .tp-bar .tp-item img:hover, .tp-bar .tp-item.active img {
-            opacity: 1;
-        }
-
-        .tp-bar .tp-item.active img {
-            box-shadow: 0 0 0 0.3rem #44bdad85;
-        }
-    </style>
-
     <div id="meetingComponent">
 
         <h5 class="bg-dark font-weight-bold text-white m-0 py-3 px-4 d-flex">
@@ -90,6 +62,8 @@
             el: '#meetingComponent',
             delimiters: ['@{{', '}}'],
             data: {
+                meetingID: '<?= $meetingID ?>',
+                participantID: '<?= $participantID ?>',
                 time: 0,
                 startTime: 0,
                 started: false,

resources/views/start.blade.php

@@ -1,26 +1,85 @@
 @extends('layouts.guest-home')
 @section('content')
 
-    <div class="d-flex">
-        <h1 class="font-weight-bold">Consult your doctor from the comfort of your home!</h1>
-    </div>
+    <div id="createMeetingComponent">
 
-    <div class="d-flex mt-4 mt-sm-5">
-        <div class="form-container">
-            <div class="form">
-                <h3 class="border-bottom border-success text-center font-weight-bold py-3 m-0">Start Meeting</h3>
-                <p class="px-4 text-dark m-0 py-3">Please enter your name and date of birth to start a meeting.</p>
-                <div class="px-4 mb-4" autofocus="true">
-                    <input type="text" class="form-control py-3" placeholder="Your name">
-                </div>
-                <div class="px-4 mb-4">
-                    <input type="date" class="form-control py-3" placeholder="Your date of birth">
-                </div>
-                <div class="px-4 pb-4">
-                    <button class="btn btn-success font-weight-bold w-100">Start Meeting</button>
+        <div class="d-flex">
+            <h1 class="font-weight-bold">Consult your doctor from the comfort of your home!</h1>
+        </div>
+
+        <div class="d-flex mt-4 mt-sm-5">
+            <div class="form-container">
+                <div class="form">
+                    <h3 class="border-bottom border-success text-center font-weight-bold py-3 m-0">Start Meeting</h3>
+                    <p class="px-4 text-dark m-0 py-3">Please enter your name and date of birth to start a meeting.</p>
+                    <div class="px-4 mb-4" autofocus="true">
+                        <input type="text" class="form-control py-3" :class="nameError ? 'has-error' : ''" v-model="name" placeholder="Your name">
+                        <div class="field-error text-danger" v-if="nameError">Your name is required</div>
+                    </div>
+                    <div class="px-4 mb-4">
+                        <input type="date" class="form-control py-3" :class="dobError ? 'has-error' : ''" v-model="dob" placeholder="Your date of birth">
+                        <div class="field-error text-danger" v-if="dobError">Your date of birth is required</div>
+                    </div>
+                    <div class="px-4 pb-4">
+                        <button class="btn btn-success font-weight-bold w-100"
+                                :disabled="process"
+                                v-on:click.prevent="doStart()">
+                            <span v-if="!process">Start Meeting</span>
+                            <span v-if="process">@{{ process }}</span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
+
     </div>
 
+    <script>
+        new Vue({
+            el: '#createMeetingComponent',
+            delimiters: ['@{{', '}}'],
+            data: {
+                name: 'Vj',
+                dob: '1990-02-01',
+                // name: '',
+                // dob: '',
+                process: false,
+                nameError: false,
+                dobError: false,
+            },
+            methods: {
+                validate: function () {
+                    this.nameError = false;
+                    this.dobError = false;
+                    if (!$.trim(this.name)) {
+                        this.nameError = true;
+                    }
+                    if (!$.trim(this.dob)) {
+                        this.dobError = true;
+                    }
+                    return !(this.nameError || this.dobError);
+                },
+                doStart: function () {
+                    var self = this;
+                    if(!this.validate()) return;
+                    this.process = 'Creating ...';
+                    $.post('/api/meeting/create-via-api', {
+                        name: this.name,
+                        dob: this.dob,
+                    }, function (_data) {
+                        if(_data.data && _data.data.meetingUid && _data.data.meetingParticipantUid) {
+                            self.process = 'Redirecting ...';
+                            window.location.href = '/meeting/' + _data.data.meetingUid + '/' + _data.data.meetingParticipantUid;
+                        }
+                        else {
+                            self.process = false;
+                        }
+                    }, 'json');
+                }
+            },
+            mounted: function() {
+            }
+        });
+    </script>
+
 @endsection

routes/web.php

@@ -21,9 +21,7 @@ Route::get('/join/{meetingID}', function () {
     return view('join');
 });
 
-Route::get('/meeting/{meetingID}', function () {
-    return view('meeting');
-});
+Route::get('/meeting/{meetingID}/{participantID}', 'GuestController@meeting');
 
 Route::middleware('ensureNoValidSession')->group(function(){
     Route::get('/pro/request-sms-login-token', 'AppSessionController@proRequestSmsLogInToken')->name('pro-request-sms-login-token');