more socket handlers

resources/js/components/pages/MeetingsAppRoot.vue

@@ -180,6 +180,8 @@ export default {
             }
         })
 
+        /* Meeting Handlers */
+
         this.sockets.subscribe("meeting-activity", data => {
             this.$store.commit("setLobbyActivity", data)
         })
@@ -187,6 +189,28 @@ export default {
         this.sockets.subscribe("meeting-created", data => {
             this.$store.commit("setNewMeetingInLobby", data);
         })
+
+        this.sockets.subscribe("meeting-updated", data => {
+            this.$store.commit("setUpdatedMeetingInLobby", data);
+        })
+
+        /* Lobby Handlers */
+
+        this.sockets.subscribe("lobby-updated", data => {
+            this.$store.commit("setLobbyActivity", data)
+        })
+
+        this.sockets.subscribe("lobby-activated", data => {
+            this.$store.commit("setActivateLobby", data);
+        })
+
+        this.sockets.subscribe("lobby-deactivated", data => {
+            this.$store.commit("setDeactivateLobby", data);
+        })
+
+        this.sockets.subscribe("lobby-created-for-pro", data => {
+            this.$store.commit("addNewLobby", data);
+        })
     }
 };
 </script>

resources/js/components/partials/LobbyList.vue

@@ -1,81 +1,83 @@
 <template>
     <div>
-        <v-card v-for="lobby in lobbies" flat :key="lobby.id" :loading="loading">
-            <div class="d-flex flex-row justify-content-between">
-                <div>
-                    <v-card-title>{{lobby.name}}</v-card-title>
+        <template v-for="lobby in lobbies">
+            <v-card v-if="lobby.is_active" flat :key="lobby.id" :loading="loading">
+                <div class="d-flex flex-row justify-content-between">
+                    <div>
+                        <v-card-title>{{lobby.name}}</v-card-title>
 
-                    <v-card-text>
-                        <div>{{lobby.description || 'No description available.'}}</div>
-                    </v-card-text>
+                        <v-card-text>
+                            <div>{{lobby.description || 'No description available.'}}</div>
+                        </v-card-text>
+                    </div>
                 </div>
-            </div>
 
-            <v-divider class="mx-4"></v-divider>
+                <v-divider class="mx-4"></v-divider>
 
-            <v-list dense v-if="meetingListFiltered(lobby.meetings).length">
-                <v-container class="overflow-y-auto px-0 pt-0">
+                <v-list dense v-if="meetingListFiltered(lobby.meetings).length">
+                    <v-container class="overflow-y-auto px-0 pt-0">
+                        <v-subheader class="d-flex flex-row justify-content-between">
+                            <span>Meetings ({{meetingListFiltered(lobby.meetings).length}})</span>
+                        </v-subheader>
+                    </v-container>
+                    <v-container style="height: 210px" class="overflow-y-auto">
+                        <v-row>
+                            <v-list-item-group class="w-100" v-model="lobby.selected_meeting" color="primary">
+                                <v-list-item v-for="(item, i) in meetingListFiltered(lobby.meetings)" :key="i" :value="item">
+                                    <v-list-item-icon>
+                                        <v-icon v-text="'mdi-clock'"></v-icon>
+                                    </v-list-item-icon>
+                                    <v-list-item-content>
+                                        <v-list-item-title v-text="item.name"></v-list-item-title>
+                                        <v-tooltip top v-if="item.pros_online.length > 0">
+                                            <template v-slot:activator="{ on }">
+                                                <v-list-item-subtitle v-on="on" v-text="item.pros_online.length > 0 ? `PROs Connected (${item.pros_online.length})` : 'No PROs Connected'"></v-list-item-subtitle>
+                                            </template>
+                                            <span v-for="pro in item.pros_online" :key="pro.UID">
+                                                {{pro.name}}
+                                                <br />
+                                            </span>
+                                        </v-tooltip>
+                                        <v-list-item-subtitle v-else v-text="item.pros_online.length > 0 ? `PROs Connected (${item.pros_online.length})` : 'No PROs Connected'"></v-list-item-subtitle>
+                                    </v-list-item-content>
+                                    <v-list-item-action>
+                                        <v-list-item-action-text :class="{'status':true, 'is-active':item.active_members.length > 0}" v-text="'Online: ' + item.active_members.length"></v-list-item-action-text>
+                                    </v-list-item-action>
+                                </v-list-item>
+                            </v-list-item-group>
+                        </v-row>
+                    </v-container>
+                </v-list>
+
+                <v-list v-else>
                     <v-subheader class="d-flex flex-row justify-content-between">
                         <span>Meetings ({{meetingListFiltered(lobby.meetings).length}})</span>
                     </v-subheader>
-                </v-container>
-                <v-container style="height: 210px" class="overflow-y-auto">
-                    <v-row>
-                        <v-list-item-group class="w-100" v-model="lobby.selected_meeting" color="primary">
-                            <v-list-item v-for="(item, i) in meetingListFiltered(lobby.meetings)" :key="i" :value="item">
-                                <v-list-item-icon>
-                                    <v-icon v-text="'mdi-clock'"></v-icon>
-                                </v-list-item-icon>
-                                <v-list-item-content>
-                                    <v-list-item-title v-text="item.name"></v-list-item-title>
-                                    <v-tooltip top v-if="item.pros_online.length > 0">
-                                        <template v-slot:activator="{ on }">
-                                            <v-list-item-subtitle v-on="on" v-text="item.pros_online.length > 0 ? `PROs Connected (${item.pros_online.length})` : 'No PROs Connected'"></v-list-item-subtitle>
-                                        </template>
-                                        <span v-for="pro in item.pros_online" :key="pro.UID">
-                                            {{pro.name}}
-                                            <br />
-                                        </span>
-                                    </v-tooltip>
-                                    <v-list-item-subtitle v-else v-text="item.pros_online.length > 0 ? `PROs Connected (${item.pros_online.length})` : 'No PROs Connected'"></v-list-item-subtitle>
-                                </v-list-item-content>
-                                <v-list-item-action>
-                                    <v-list-item-action-text :class="{'status':true, 'is-active':item.active_members.length > 0}" v-text="'Online: ' + item.active_members.length"></v-list-item-action-text>
-                                </v-list-item-action>
-                            </v-list-item>
-                        </v-list-item-group>
-                    </v-row>
-                </v-container>
-            </v-list>
-
-            <v-list v-else>
-                <v-subheader class="d-flex flex-row justify-content-between">
-                    <span>Meetings ({{meetingListFiltered(lobby.meetings).length}})</span>
-                </v-subheader>
-                <v-container style="height: 210px" class="overflow-y-auto">
-                    <v-row>
-                        <v-list-item-group class="w-100 text-center" color="primary">
-                            <v-list-item>
-                                <v-list-item-content>
-                                    <v-list-item-title muted v-text="'No Meetings found for this lobby.'"></v-list-item-title>
-                                </v-list-item-content>
-                            </v-list-item>
-                        </v-list-item-group>
-                    </v-row>
-                </v-container>
-            </v-list>
+                    <v-container style="height: 210px" class="overflow-y-auto">
+                        <v-row>
+                            <v-list-item-group class="w-100 text-center" color="primary">
+                                <v-list-item>
+                                    <v-list-item-content>
+                                        <v-list-item-title muted v-text="'No Meetings found for this lobby.'"></v-list-item-title>
+                                    </v-list-item-content>
+                                </v-list-item>
+                            </v-list-item-group>
+                        </v-row>
+                    </v-container>
+                </v-list>
 
-            <transition-expand>
-                <div v-if="meetingListFiltered(lobby.meetings).length">
-                    <v-divider class="mx-4"></v-divider>
+                <transition-expand>
+                    <div v-if="meetingListFiltered(lobby.meetings).length">
+                        <v-divider class="mx-4"></v-divider>
 
-                    <v-card-actions>
-                        <v-btn :disabled="lobby.selected_meeting !== 0 && !lobby.selected_meeting" color="deep-purple accent-4" text @click="joinMeeting(lobby)">Join</v-btn>
-                        <v-btn :disabled="lobby.selected_meeting !== 0 && !lobby.selected_meeting" color="deep-purple accent-4" text @click="inviteToMeeting(lobby)">Invite</v-btn>
-                    </v-card-actions>
-                </div>
-            </transition-expand>
-        </v-card>
+                        <v-card-actions>
+                            <v-btn :disabled="lobby.selected_meeting !== 0 && !lobby.selected_meeting" color="deep-purple accent-4" text @click="joinMeeting(lobby)">Join</v-btn>
+                            <v-btn :disabled="lobby.selected_meeting !== 0 && !lobby.selected_meeting" color="deep-purple accent-4" text @click="inviteToMeeting(lobby)">Invite</v-btn>
+                        </v-card-actions>
+                    </div>
+                </transition-expand>
+            </v-card>
+        </template>
     </div>
 </template>
 

resources/js/components/vuex/index.js

@@ -65,6 +65,20 @@ export default () => new Vuex.Store({
         addNewLobby(state, data) {
             state.lobbies.push(data)
         },
+        setActivateLobby(state, data) {
+            let lobby = state.lobbies.filter((cur) => cur.uid == data.uid)
+
+            if(lobby.length){
+                lobby.is_active = true
+            }
+        },
+        setDeactivateLobby(state, data) {
+            let lobby = state.lobbies.filter((cur) => cur.uid == data.uid)
+
+            if(lobby.length){
+                lobby.is_active = false
+            }
+        },
         setSingleLobby(state, data) {
             let lobby = state.lobbies.findIndex((cur) => cur.id == data.id)
 
@@ -105,6 +119,19 @@ export default () => new Vuex.Store({
                 })
             }
         },
+        setUpdatedMeetingInLobby(state, data) {
+            let lobby = state.lobbies.filter((cur) => cur.uid == data.lobby.uid)
+
+            if (lobby.length) {
+                let meeting = lobby[0].meetings.filter((cur) => cur.uid == data.uid)
+
+                if(meeting.length){
+                    for(let prop in data){
+                        meeting[0][prop] = data[prop]
+                    }
+                }
+            }
+        },
         setMeeting(state, data) {
             state.meeting = data
         },