|
|
@@ -0,0 +1,119 @@
|
|
|
+@extends('layouts.guest-meeting')
|
|
|
+@section('content')
|
|
|
+
|
|
|
+ <style>
|
|
|
+ .main-view {
|
|
|
+ width: 800px;
|
|
|
+ height: 600px;
|
|
|
+ margin: 0 1rem;
|
|
|
+ background: #444;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tp-bar {
|
|
|
+ width: 140px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tp-bar .tp-item.active > img {
|
|
|
+ box-shadow: 0 0 0 0.3rem #44bdad85;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
|
|
+ <div id="meetingComponent">
|
|
|
+
|
|
|
+ <h5 class="bg-dark font-weight-bold text-white m-0 py-3 px-4 d-flex">
|
|
|
+ <span>Meeting</span>
|
|
|
+ <span class="ml-auto"><i class="fa fa-clock mr-1 text-light"></i>02:34</span>
|
|
|
+ </h5>
|
|
|
+
|
|
|
+ <div class="d-flex align-items-stretch mt-4 justify-content-center flex-nowrap">
|
|
|
+ <div class="tp-bar">
|
|
|
+ <div v-for="(guest, index) of guests"
|
|
|
+ class="tp-item mb-4"
|
|
|
+ :class="activeParticipant && activeType === 'guest' && activeParticipant.id === guest.id ? 'active' : ''"
|
|
|
+ v-on:click="setActiveView('guest', guest)">
|
|
|
+ <img :src="guest.image" alt="" class="w-100">
|
|
|
+ <p class="font-weight-bold text-center mt-1 mb-0">@{{ guest.name }}</p>
|
|
|
+ </div>
|
|
|
+ <div v-if="!guest" class="tp-item mb-4">
|
|
|
+ <img src="/images/person/guest.png" alt="" class="w-100">
|
|
|
+ <p class="font-weight-bold text-center mt-1">Invite Guest</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main-view" style="width: 800px; min-height: 600px;">
|
|
|
+ <div class="p-4 w-100 h-100 d-flex align-items-stretch justify-content-stretch flex-column">
|
|
|
+ <img :src="activeParticipant.image" class="d-block mw-100 mh-100 mx-auto">
|
|
|
+ <p class="font-weight-bold text-center text-white mt-2">Feed from @{{ activeParticipant.name }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tp-bar">
|
|
|
+ <div v-for="(pro, index) of pros"
|
|
|
+ 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el: '#meetingComponent',
|
|
|
+ delimiters: ['@{{', '}}'],
|
|
|
+ data: {
|
|
|
+ guest: false,
|
|
|
+ activeType: false,
|
|
|
+ activeParticipant: false,
|
|
|
+ guests: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: 'You',
|
|
|
+ image: '/images/person/you.jpg',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pros: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ 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',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ // pros: []
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setActiveView: function(_type, _participant) {
|
|
|
+ this.activeType = _type;
|
|
|
+ this.activeParticipant = _participant;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+
|
|
|
+@endsection
|
