User states and scripted demo

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

@@ -15,7 +15,7 @@
 
     <link rel="stylesheet" href="/fontawesome-free/css/all.min.css">
 
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
     <!-- Styles for patient home -->
     <style>

resources/views/meeting.blade.php

@@ -14,17 +14,17 @@
             width: 140px;
         }
 
-        .tp-bar .tp-item > img {
+        .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 {
+        .tp-bar .tp-item img:hover, .tp-bar .tp-item.active img {
             opacity: 1;
         }
 
-        .tp-bar .tp-item.active > img {
+        .tp-bar .tp-item.active img {
             box-shadow: 0 0 0 0.3rem #44bdad85;
         }
     </style>
@@ -61,9 +61,18 @@
                      class="tp-item mb-4"
                      :class="activeParticipant && activeType === 'pro' && activeParticipant.id === pro.id ? 'active' : ''"
                      v-on:click="setActiveView('pro', pro)">
-                    <img :src="pro.image" alt="" class="w-100">
-                    <p class="font-weight-bold text-center mt-1 mb-0">@{{ pro.name }}</p>
-                    <p class="font-weight-normal text-center">@{{ pro.type }}</p>
+                    <div v-if="pro.status === 'active'">
+                        <img :src="pro.image" alt="" class="w-100">
+                        <p class="font-weight-bold text-center mt-1 mb-0">@{{ pro.name }}</p>
+                        <p class="font-weight-normal text-center">@{{ pro.type }}</p>
+                    </div>
+                    <div v-if="pro.status === 'connecting'">
+                        <img src="/images/person/connecting.jpg" alt="" class="w-100">
+                        <p class="font-weight-normal text-center mt-1 d-flex align-items-center justify-content-center">
+                            <img src="/images/loading.gif" class="mr-1">
+                            Connecting
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -83,6 +92,7 @@
                         id: 1,
                         name: 'You',
                         image: '/images/person/you.jpg',
+                        status: 'active',
                     },
                 ],
                 pros: [
@@ -91,27 +101,59 @@
                         name: 'Nancy Drew',
                         type: 'Receptionist',
                         image: '/images/person/nancy.jpg',
-                    },
-                    {
-                        id: 2,
-                        name: 'Dr. Strange',
-                        type: 'Dietitian',
-                        image: '/images/person/strange.0.jpg',
-                    },
-                    {
-                        id: 3,
-                        name: 'Dr. Do Little',
-                        type: 'Cardiologist',
-                        image: '/images/person/dl.jpg',
+                        status: 'connecting',
                     }
                 ]
                 // pros: []
             },
             methods: {
                 setActiveView: function(_type, _participant) {
-                    this.activeType = _type;
-                    this.activeParticipant = _participant;
+                    if(_participant.status === 'active') {
+                        this.activeType = _type;
+                        this.activeParticipant = _participant;
+                    }
                 }
+            },
+            mounted: function() {
+                this.activeType = 'guest';
+                this.activeParticipant = this.guests[0];
+
+                var self = this;
+
+                // after 2 seconds, connect recep
+                window.setTimeout(function() {
+                    self.pros[0].status = 'active';
+
+                    // after 1 second, add 2 docs in connecting state
+                    window.setTimeout(function() {
+                        self.pros.push({
+                            id: 2,
+                            name: 'Dr. Strange',
+                            type: 'Dietitian',
+                            image: '/images/person/strange.0.jpg',
+                            status: 'connecting',
+                        });
+                        self.pros.push({
+                            id: 3,
+                            name: 'Dr. Do Little',
+                            type: 'Cardiologist',
+                            image: '/images/person/dl.jpg',
+                            status: 'connecting',
+                        });
+
+                        // after a second, connect strange
+                        window.setTimeout(function() {
+                            self.pros[1].status = 'active';
+
+                            window.setTimeout(function() {
+                                self.pros[2].status = 'active';
+                            }, 1000);
+
+                        }, 1000);
+
+                    }, 1000);
+
+                }, 2000);
             }
         });
     </script>