Added paththoght user to Vue.

app/Http/Controllers/MeetingCenterController.php

@@ -6,6 +6,8 @@ use App\Models\Meeting;
 use App\Models\MeetingParticipant;
 use Illuminate\Http\Request;
 use App\Models\Pro;
+use App\Models\AppSession;
+use App\HttpModels\ProModel;
 
 class MeetingCenterController extends Controller
 {
@@ -15,7 +17,13 @@ class MeetingCenterController extends Controller
         if($fragment) {
             $page = '/' . $fragment;
         }
-        return view('mc', compact('page'));
+
+        $sessionKey = $request->cookie("sessionKey");
+
+        $appSession = AppSession::where("session_key",$sessionKey)->first();
+        $user = new ProModel($appSession->pro);
+
+        return view('mc', compact('page','user'));
     }
 
-}
+}

app/HttpModels/LobbyModel.php

@@ -0,0 +1,19 @@
+<?php
+namespace App\HttpModels;
+
+use App\Models\Lobby;
+
+class LobbyModel {
+    public $uid;
+    public $name;
+    public $isStrangerAccessible;
+    public $isClientAccessible;
+
+    public function __construct(Lobby $lobby)
+    {
+        $this->uid = $lobby->uid;
+        $this->name = $lobby->name;
+        $this->isStrangerAccessible = $lobby->is_stranger_accessible;
+        $this->isClientAccessible = $lobby->is_client_accessible;
+    }
+}

app/HttpModels/ProModel.php

@@ -0,0 +1,26 @@
+<?php
+namespace App\HttpModels;
+
+use App\Models\Pro;
+
+class ProModel {
+    public $uid;
+    public $name;
+    public $type;
+    public $avatarFile;
+    public $is_active_and_visible;
+    public $lobbies;
+
+    public function __construct(Pro $pro)
+    {
+        $this->uid = $pro->uid;
+        $this->name = $pro->name_display;
+        $this->type = $pro->pro_type;
+        $this->avatarFile = $pro->profile_picture_base64;
+        $this->is_active_and_visible = $pro->is_currently_clocked_in;
+        $this->lobbies = [];
+        foreach ($pro->lobbies as $lobby) {
+            $this->lobbies[] = new LobbyModel($lobby);
+        }
+    }
+}

app/Models/AppSession.php

@@ -9,5 +9,8 @@ class AppSession extends Model
 
     protected $table = "app_session";
 
-    //
-}
+    public function pro()
+    {
+        return $this->belongsTo(Pro::class);
+    }
+}

app/Models/Lobby.php

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

app/Models/Pro.php

@@ -9,5 +9,8 @@ class Pro extends Model
 
     protected $table = "pro";
 
-    //
-}
+    public function lobbies()
+    {
+        return $this->belongsToMany(Lobby::class, 'lobby_pro', 'pro_id', 'lobby_id');
+    }
+}

resources/js/components/pages/MeetingsAppRoot.vue

@@ -1,33 +1,33 @@
 <template>
     <v-app>
         <v-expansion-panels v-model="active_panel" tile hover multiple>
-                <v-expansion-panel>
-                    <v-expansion-panel-header>Lobby List</v-expansion-panel-header>
-                        <v-expansion-panel-content>
-                            <lobby-list></lobby-list>
-                        </v-expansion-panel-content>
-                </v-expansion-panel>
-
-                <v-expansion-panel>
-                    <v-expansion-panel-header>Meeting Room</v-expansion-panel-header>
-                        <v-expansion-panel-content>
-                            <meeting-room></meeting-room>
-                        </v-expansion-panel-content>
-                </v-expansion-panel>
-
-                <v-expansion-panel>
-                    <v-expansion-panel-header>Messenger</v-expansion-panel-header>
-                        <v-expansion-panel-content>
-                            <messenger></messenger>
-                        </v-expansion-panel-content>
-                </v-expansion-panel>
-
-                <v-expansion-panel>
-                    <v-expansion-panel-header>Settings</v-expansion-panel-header>
-                        <v-expansion-panel-content>
-                            <settings></settings>
-                        </v-expansion-panel-content>
-                </v-expansion-panel>
+            <v-expansion-panel>
+                <v-expansion-panel-header>Lobby List</v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <lobby-list></lobby-list>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+
+            <v-expansion-panel>
+                <v-expansion-panel-header>Meeting Room</v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <meeting-room></meeting-room>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+
+            <v-expansion-panel>
+                <v-expansion-panel-header>Messenger</v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <messenger></messenger>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+
+            <v-expansion-panel>
+                <v-expansion-panel-header>Settings</v-expansion-panel-header>
+                <v-expansion-panel-content>
+                    <settings></settings>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
         </v-expansion-panels>
         <call-bubble :call="incomingCallDetails"></call-bubble>
     </v-app>
@@ -35,94 +35,96 @@
 
 <script>
 import { mapState } from "vuex";
-import VueSocketIO from "vue-socket.io"
-import SocketIO from "socket.io-client"
+import VueSocketIO from "vue-socket.io";
+import SocketIO from "socket.io-client";
 
 Vue.use(
     new VueSocketIO({
         debug: true,
         connection: SocketIO(process.env.MIX_SOCKET_SERVICE_URL)
     })
-)
+);
 
 export default {
     props: {
-        //lobbies:
+        userProp: {
+            type: Object,
+            required: true
+        }
     },
-    data(){
+    data() {
         return {
-            active_panel: [0,1,2],
+            active_panel: [0, 1, 2],
             incomingCallDetails: null,
             lobbies: [
                 {
-                    lobbyUid: '1',
-                    name: 'Test Lobby',
+                    lobbyUid: "1",
+                    name: "Test Lobby",
                     description: null,
                     isStrangerAccessible: true,
                     isClientAccessible: true
                 }
             ]
-        }
+        };
     },
     computed: {
-        ...mapState(['user'])
+        ...mapState(["user"])
     },
     sockets: {
         incomingCall: function(data) {
-            let self = this
+            let self = this;
 
-            if(!data.time_limit){
-                data.time_limit = 10
+            if (!data.time_limit) {
+                data.time_limit = 10;
             }
 
-            self.incomingCallDetails = data
+            self.incomingCallDetails = data;
 
             let timer = setInterval(() => {
-                if(self.incomingCallDetails.time_limit > 0){
-                    self.incomingCallDetails.time_limit--
+                if (self.incomingCallDetails.time_limit > 0) {
+                    self.incomingCallDetails.time_limit--;
 
-                    if(self.incomingCallDetails.time_limit == 0){
-                        clearInterval(timer)
-                        console.log('TIME IS OUT!')
+                    if (self.incomingCallDetails.time_limit == 0) {
+                        clearInterval(timer);
+                        console.log("TIME IS OUT!");
                     }
                 }
-            }, 1000)
+            }, 1000);
         }
     },
     methods: {
         //
     },
-    mounted(){
-        let user = {}
+    mounted() {
+        let lobbies = this.userProp.lobbies;
+        delete this.userProp.lobbies;
 
-        this.$socket.emit("userData", { user: this.user })
+        this.$socket.emit("userData", { user: this.userProp });
 
-        let lobbies = this.lobbies
+        lobbies.map(x => {
+            (x.selected_meeting = null), (x.meetings = []);
+        });
 
-        lobbies.map((x) => {
-            x.selected_meeting = null,
-            x.meetings = []
-        })
+        this.$store.commit("setInitialUser", this.userProp);
+        this.$store.commit("setLobbies", lobbies);
 
-        this.$store.commit('setLobbies', lobbies)
+        this.$socket.emit("lobbyDataRequest", lobbies);
 
-        this.$socket.emit("lobbyDataRequest", lobbies)
-
-        this.sockets.subscribe('lobby-data', data => {
+        this.sockets.subscribe("lobby-data", data => {
             for (let meeting of data.meetings) {
                 this.$store.commit("setLobbyActivity", meeting);
             }
-        })
+        });
     }
-}
+};
 </script>
 
 <style>
-    .v-expansion-panel--active {
-        height: 100%;
-    }
+.v-expansion-panel--active {
+    height: 100%;
+}
 
-    .v-expansion-panel-content__wrap {
-        padding: 24px 16px;
-    }
+.v-expansion-panel-content__wrap {
+    padding: 24px 16px;
+}
 </style>

resources/js/components/vuex/index.js

@@ -9,16 +9,22 @@ export default () => new Vuex.Store({
     },
     state: {
         user: {
-            id: null,
             UID: null,
             name: 'Guest',
             type: 'guest',
-            pin: null,
             avatarFile: null,
-            is_active_and_visible: true,
-            isAdmin: false
+            is_active_and_visible: true
+        },
+        session: {
+            screenSharingAvailable: false,
+            sessionConnected: false,
+            screenSharingActive: false
+        },
+        active_menu_item: {
+            name: 'Lobbies',
+            class: 'mdi mdi-view-dashboard',
+            template: 'lobby-list'
         },
-        lobbies: [],
         meeting: {
             id: '',
             name: '',
@@ -28,18 +34,12 @@ export default () => new Vuex.Store({
             scheduledDate: null,
             startedAt: null
         },
-        session: {
-            screenSharingAvailable: false,
-            sessionConnected: false,
-            screenSharingActive: false
-        },
+        lobbies: [],
         settings: {
             newMeetingNotificationExpanded: localStorage.getItem('newMeetingNotificationExpanded') == 'true' ? true : false
         }
     },
     mutations: {
-        /* User */
-
         setUsername: (state, data) => {
             state.user.name = data
         },
@@ -52,15 +52,15 @@ export default () => new Vuex.Store({
         setUser(state, data) {
             state.user = data
         },
-        /* setUserAvatarFile(state, data) {
+        setUserAvatarFile(state, data) {
             state.user.avatarFile = data
-        }, */
-        /* setUserActivityState: (state, data) => {
+        },
+        setUserActivityState: (state, data) => {
             state.user.is_active_and_visible = data
-        }, */
-
-        /* Lobbies */
-
+        },
+        setScreenShareState: (state, data) => {
+            state.session.screenSharingActive = data
+        },
         setLobbies(state, data) {
             state.lobbies = data
         },
@@ -75,7 +75,7 @@ export default () => new Vuex.Store({
                     m.active_members = []
                     m.associates_online = []
                     return m
-                })
+                });
             }
         },
         setLobbyActivity(state, data) {
@@ -93,13 +93,6 @@ export default () => new Vuex.Store({
             }
 
         },
-
-        /* Meetings */
-
-        setMeeting(state, data) {
-            state.meeting = data
-        },
-
         setNewMeetingInLobby(state, data) {
             let lobby = state.lobbies.filter((cur) => cur.id == parseInt(data.lobby.id))
 
@@ -111,22 +104,16 @@ export default () => new Vuex.Store({
                 })
             }
         },
-
-        /* Session OpenTok */
-
+        setMeeting(state, data) {
+            state.meeting = data
+        },
         setScreesharingAvailability(state, data) {
             state.session.screenSharingAvailable = data
         },
-        setScreenShareState: (state, data) => {
-            state.session.screenSharingActive = data
-        },
         setSessionConnectivityState(state, data) {
             state.session.sessionConnected = data
         },
-
-        /* Settings */
-
-        updateSettings(state, data){
+        updateSettings(state, data) {
             state.settings = data
         }
     },

resources/views/mc.blade.php

@@ -17,7 +17,7 @@
             <iframe src="{{ $page }}" frameborder="0" class="h-100 w-100"></iframe>
         </div>
         <div id="meetingsApp" class="col-3 border-left app-right-panel">
-            <meetings-app-root></meetings-app-root>
+            <meetings-app-root :user-prop="{!! str_replace('"','\'',str_replace('\'','\\\'',json_encode($user))) !!}"></meetings-app-root>
         </div>
     </div>
     <script src="/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>