doctor selector

resources/js/components/elements/Message.vue

@@ -0,0 +1,13 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

resources/js/components/pages/ClientEntrance.vue

@@ -25,11 +25,6 @@
                     <v-card class="mb-12" color="grey lighten-1" height="200px">
                         <div class="checkin-form d-flex justify-content-center align-items-center">
                             <form ref="baseForm">
-                                <!-- <input type="hidden" name="lobbyUid" value />
-                                <input type="hidden" name="_api" value="/api/meeting/createAsStrangerPerformer" />
-                                <input type="hidden" name="_success" value="/pro/login" />
-                                <input type="hidden" name="_return" value="/" />-->
-
                                 <div class="row mb-3">
                                     <div class="col">
                                         <input type="text" name="strangerFirstName" class="form-control" placeholder="First Name" v-model="user.firstName" required />
@@ -42,6 +37,13 @@
                                 <div class="input-group mb-3">
                                     <input type="date" name="strangerDob" class="form-control" placeholder="Date of Birth" v-model="user.dateOfBirth" required />
                                 </div>
+
+                                <div class="form-group mt-5 mb-3">
+                                    <select class="form-control custom-select" v-model="user.targetLobbyProUid" name="targetLobbyProUid">
+                                        <option value="">Do you wish to speak with particular Doctor?</option>
+                                        <option v-for="pro in prosList" :value="pro.uid" :key="pro.uid">{{pro.name}} - {{pro.type}}</option>
+                                    </select>
+                                </div>
                             </form>
                         </div>
                     </v-card>
@@ -136,12 +138,22 @@ export default {
             required: true
         }
     },
+    computed: {
+        prosList(){
+            return [{
+                name: 'Test',
+                type: 'Cardiologist',
+                uid: 'someuid'
+            }]
+        }
+    },
     data() {
         return {
             user: {
                 firstName: "",
                 lastName: "",
-                dateOfBirth: null
+                dateOfBirth: null,
+                targetLobbyProUid: ""
             },
             meetingUid: "",
             meetingName: sessionStorage.getItem("meeting_name") || "",
@@ -221,7 +233,8 @@ export default {
                     title: this.meetingName,
                     strangerFirstName: this.user.firstName,
                     strangerLastName: this.user.lastName,
-                    strangerDob: this.user.dateOfBirth
+                    strangerDob: this.user.dateOfBirth,
+                    targetLobbyProUid: this.user.targetLobbyProUid
                 },
                 success: data => {
                     if (!data.success) {
@@ -651,6 +664,7 @@ export default {
         }
     },
     mounted() {
+        console.log(this.lobbyProp)
         if (this.meetingProp) {
             this.meetingUid = this.meetingProp.uid;
             this.$nextTick(this.initializePublisher);

resources/js/components/pages/MeetingsAppRoot.vue

@@ -80,6 +80,7 @@ export default {
                 if (newVal && newVal.uid) {
                     this.$socket.emit("meetingJoined", { lobby_uid: newVal.lobby_uid, meeting_name: newVal.name, meeting_uid: newVal.uid, user: this.user });
 
+                    this.$eventBus.$emit("updateMeetingMessages")
                     /* axios
                         .get(`/meeting/${this.meeting.id}/messages`)
                         .then(response => {

resources/js/components/partials/LobbyList.vue

@@ -118,7 +118,7 @@ export default {
                         return;
                     }
                     if (this.meeting.uid === lobby.selected_meeting.uid) {
-                        this.$eventBus.$emit("meetingRejoin");
+                        this.$eventBus.$emit("meetingRejoin")
                     } else {
                         lobby.selected_meeting.lobby = lobby;
                         this.$store.commit("setCurrentMeeting", { lobby_uid: lobby.uid, ...lobby.selected_meeting });

resources/js/components/partials/Messenger.vue

@@ -5,8 +5,51 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+import axios from "axios";
+
 export default {
+  computed: {
+    ...mapState(["meeting", "user"])
+  },
+  sockets: {},
+  data() {
+    return {
+      messages: []
+    };
+  },
+  methods: {
+    getMessages(){
+      axios.get(`/meeting/${this.meeting.id}/messages`)
+          .then(response => {
+              /* this.messages = response.data.map(cur => {
+                  cur.timestamp_formatted = timeago.format(cur.timestamp);
+                  cur.sent = this.user.UID == cur.user.UID ? true : false;
+                  return cur;
+              }); */
+          })
+          .catch(e => {
+              console.log(e);
+          });
+    }
+  },
+  mounted() {
+    this.sockets.subscribe('chat-message', data => {
+      let msg = this.messages.filter(cur => cur.id == data.id);
+
+      if (msg.length) {
+          let date = new Date();
+
+          msg[0].text = data.text;
+          msg[0].timestamp = date;
+          //msg[0].timestamp_formatted = timeago.format(date);
+      } else {
+          this.messages.push(data);
+      }
+    })
 
+    this.$eventBus.$on("updateMeetingMessages", this.getMessages)
+  }
 }
 </script>