meeting panels initial

.env.example

@@ -56,4 +56,6 @@ TWILIO_SID=AC3268825a3a12f00fdb798a37e55f649c
 TWILIO_TOKEN=1c1aa713ee722e1d6dc8a18e82e83308
 TWILIO_NUMBER=+12023359983
 
-MIX_APP_URL="http://app.lobby.localhost"
+MIX_APP_URL="http://app.lobby.localhost"
+
+BACKEND_URL="http://localhost:8080"

package-lock.json

@@ -979,6 +979,11 @@
             "resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.9.18.tgz",
             "integrity": "sha512-BkdtzzeCWOP2RT2NBv8dyHFFxXTYWs1CAlg7YF+PyGD65YS2lVb2i3EY1/svHCt9q2GYU853CrBTLDITdiIIZw=="
         },
+        "@mdi/font": {
+            "version": "5.3.45",
+            "resolved": "https://registry.npmjs.org/@mdi/font/-/font-5.3.45.tgz",
+            "integrity": "sha512-SD5d2vHEKRvDCInZQFXOwiFpBlzpuZOiqwxKf6E+zCt7UDc52TUSrL0+TXqY57VQh/SnTpZVXM+Uvs21OdPFWg=="
+        },
         "@mrmlnc/readdir-enhanced": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

package.json

@@ -39,6 +39,7 @@
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
+        "@mdi/font": "^5.3.45",
         "@opentok/client": "^2.17.1",
         "vue-grid-layout": "^2.3.7",
         "vue-socket.io": "3.0.3",

resources/js/app.js

@@ -43,7 +43,7 @@ Vue.use(
 )
 
 let app = new Vue({
-    el: '#app',
+    el: '#meetingsApp',
     store,
     vuetify: new Vuetify()
 })

resources/js/components/pages/MeetingsAppRoot.vue

@@ -0,0 +1,46 @@
+<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-panels>
+    </v-app>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            active_panel: [0]
+        }
+    }
+}
+</script>
+
+<style>
+    .v-expansion-panel--active {
+        height: 100%;
+    }
+
+    .v-expansion-panel-content__wrap {
+        padding: 24px 16px;
+    }
+</style>

resources/js/components/partials/LobbyList.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    This is a Lobby List
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

resources/js/components/partials/MeetingRoom.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+      This is a meeting room
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

resources/js/components/partials/Messenger.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    This is a messenger
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

resources/sass/app.scss

@@ -1,4 +1,4 @@
 //
-body {
-    
-}
+//Vuetify
+
+@import '~vuetify/dist/vuetify.min.css';

resources/views/mc.blade.php

@@ -5,7 +5,10 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script src="{{ mix('js/app.js') }}" defer></script>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
+    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
     <title>Meeting Center</title>
 </head>
 <body class="d-flex align-items-stretch h-100">
@@ -13,8 +16,8 @@
         <div class="col-9 pr-0 app-left-panel">
             <iframe src="{{ $page }}" frameborder="0" class="h-100 w-100"></iframe>
         </div>
-        <div class="col-3 border-left app-right-panel">
-            Meeting stuff goes here
+        <div id="meetingsApp" class="col-3 border-left app-right-panel">
+            <meetings-app-root></meetings-app-root>
         </div>
     </div>
     <script src="/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>

webpack.mix.js

@@ -41,10 +41,7 @@ mix.webpackConfig({
                 './node_modules/toastr/build/toastr.css'
             ]),
             whitelistPatterns: [
-                /.*q-*/,
-                /.*relative-position*/,
-                /.*expand-*/,
-                /.*vue-grid*/
+                /.*v-*/
             ]
         })
     ]