Home Explore Help
Sign In
tigerphp
/
stagfe
4
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Pro: move WS init and incoming call-alert code to layout

Vijayakrishnan 5 years ago
parent
072bda35e0
commit
e0344e8824
4 changed files with 122 additions and 113 deletions
Unified View Show Diff Stats
  1. 2 0
      resources/views/layouts/guest-meeting.blade.php
  2. 119 11
      resources/views/layouts/pro.blade.php
  3. 0 101
      resources/views/pro/dashboard.blade.php
  4. 1 1
      resources/views/pro/meeting.blade.php

+ 2 - 0
resources/views/layouts/guest-meeting.blade.php
View File 

@@ -3,6 +3,7 @@
 
 <head>
 
 <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
 
 
     <title>X•Y•Z</title>
 
     <title>X•Y•Z</title>
 
 
 
@@ -23,6 +24,7 @@
 
     <script src="/js/sockjs.min.js"></script>
 
     <script src="/js/sockjs.min.js"></script>
 
     <script src="/js/stomp.min.js"></script>
 
     <script src="/js/stomp.min.js"></script>
 
 </head>
 
 </head>
 
+
 
 <body class="p-0 m-0">
 
 <body class="p-0 m-0">
 
 
 
 @yield('content')
 
 @yield('content')

+ 119 - 11
resources/views/layouts/pro.blade.php
View File 

@@ -2,29 +2,37 @@
 
 <html lang="en">
 
 <html lang="en">
 
 
 
 <head>
 
 <head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <meta charset="utf-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
+
 
+    <title>X•Y•Z</title>
 
+
 
+    <!-- Fonts -->
 
+    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600,700" rel="stylesheet">
 
+
 
     <link rel="stylesheet" href="{{asset('css/lumen.min.css')}}">
 
     <link rel="stylesheet" href="{{asset('css/lumen.min.css')}}">
 
     <link rel="stylesheet" href="{{asset('css/toastr.min.css')}}">
 
     <link rel="stylesheet" href="{{asset('css/toastr.min.css')}}">
 
 
 
+    {{-- Bootstrap --}}
 
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
 
+
 
     <script src="{{asset('js/jquery-ui.min.js')}}"></script>
 
     <script src="{{asset('js/jquery-ui.min.js')}}"></script>
 
     <script src="{{asset('js/jquery.form.js')}}"></script>
 
     <script src="{{asset('js/jquery.form.js')}}"></script>
 
     <script src="{{asset('js/toastr.min.js')}}"></script>
 
     <script src="{{asset('js/toastr.min.js')}}"></script>
 
 
 
-    <script src="{{asset('js/sockjs.min.js')}}"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
 
 
-    <script src="{{asset('js/stomp.min.js')}}"></script>
 
-
 
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
 
+    <link rel="stylesheet" href="/css/meeting.css">
 
 
 
-    <title>Document</title>
 
+    {{-- WS --}}
 
+    <script src="/js/sockjs.min.js"></script>
 
+    <script src="/js/stomp.min.js"></script>
 
 </head>
 
 </head>
 
 
 
-<body>
 
+<body class="p-0 m-0">
 
     <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
 
     <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
 
         <a class="navbar-brand" href="#">Stag</a>
 
         <a class="navbar-brand" href="#">Stag</a>
 
         <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
 
         <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
 
@@ -59,10 +67,110 @@
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
 
 
-
 
+    <div class="modal" id="incomingCallModal" tabindex="-1" role="dialog">
 
+        <div class="modal-dialog" role="document">
 
+            <div class="modal-content">
 
+                <div class="modal-header">
 
+                    <h5 class="modal-title">Incoming Call</h5>
 
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 
+                        <span aria-hidden="true">&times;</span>
 
+                    </button>
 
+                </div>
 
+                <div class="modal-body">
 
+                    <p>Click <b>Accept</b> to join the call.</p>
 
+                </div>
 
+                <div class="modal-footer">
 
+                    <button type="button" class="btn btn-success px-4" onclick="joinCall()">Answer</button>
 
+                    <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">Reject</button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
 
 
     <script src="{{asset('js/moe.js')}}"></script>
 
     <script src="{{asset('js/moe.js')}}"></script>
 
 
 
+    <script>
 
+        var stompClient = null;
 
+
 
+        function setConnected(connected) {
 
+            console.log("User is connected");
 
+            $("#connect").prop("disabled", connected);
 
+            $("#disconnect").prop("disabled", !connected);
 
+            if (connected) {
 
+                $("#conversation").show();
 
+            }
 
+            else {
 
+                $("#conversation").hide();
 
+            }
 
+            $("#greetings").html("");
 
+        }
 
+
 
+        function connect() {
 
+            console.log("connecting...");
 
+            var socket = new SockJS('http://localhost:8080/ws');
 
+            stompClient = Stomp.over(socket);
 
+            stompClient.connect({}, function (frame) {
 
+                console.log("Connected");
 
+                setConnected(true);
 
+                console.log('Connected: ' + frame);
 
+
 
+                // stompClient.send("/app/update-participant-status", {}, JSON.stringify({meetingUid:"mymeetinguid", status:'mystatus'}));
 
+
 
+                // stompClient.subscribe('/user/topic/on-participant-status-change', function (message) {
 
+                //     console.log("Participant status changed: ", message);
 
+                // });
 
+
 
+                stompClient.subscribe("/user/topic/on-pro-incoming-call", function(message){
 
+                    console.log("incoming call:", message);
 
+
 
+                    message = JSON.parse(message.body);
 
+                    console.log(message.meetingUid);
 
+
 
+                    $('#incomingCallModal').data('meetingUid', message.meetingUid).modal('show');
 
+
 
+                });
 
+
 
+                // connect
 
+                stompClient.send("/app/pro-connect", {}, JSON.stringify({sessionKey: "<?= request()->cookie('sessionKey') ?>"}));
 
+
 
+                console.log('Pro connected')
 
+
 
+            });
 
+        }
 
+
 
+        connect();
 
+
 
+        function joinCall() {
 
+            var meetingUid = $('#incomingCallModal').data('meetingUid');
 
+            window.location.href = '/pro/meeting/' + meetingUid;
 
+        }
 
+
 
+        function disconnect() {
 
+            if (stompClient !== null) {
 
+                stompClient.disconnect();
 
+            }
 
+            setConnected(false);
 
+            console.log("Disconnected");
 
+        }
 
+
 
+        function sendName() {
 
+            stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
 
+        }
 
+
 
+        function showGreeting(message) {
 
+            $("#greetings").append("<tr><td>" + message + "</td></tr>");
 
+        }
 
+
 
+        $(function () {
 
+            $("form").on('submit', function (e) {
 
+                e.preventDefault();
 
+            });
 
+            $( "#connect" ).click(function() { connect(); });
 
+            $( "#disconnect" ).click(function() { disconnect(); });
 
+            $( "#send" ).click(function() { sendName(); });
 
+        });
 
+    </script>
 
+
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 0 - 101
resources/views/pro/dashboard.blade.php
View File 

@@ -22,105 +22,4 @@
 
     </form>
 
     </form>
 
 </div>
 
 </div>
 
 
 
-<div class="modal" id="incomingCallModal" tabindex="-1" role="dialog">
 
-    <div class="modal-dialog" role="document">
 
-        <div class="modal-content">
 
-            <div class="modal-header">
 
-                <h5 class="modal-title">Incoming Call</h5>
 
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 
-                    <span aria-hidden="true">&times;</span>
 
-                </button>
 
-            </div>
 
-            <div class="modal-body">
 
-                <p>Click <b>Accept</b> to join the call.</p>
 
-            </div>
 
-            <div class="modal-footer">
 
-                <button type="button" class="btn btn-success px-4" onclick="joinCall()">Answer</button>
 
-                <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">Reject</button>
 
-            </div>
 
-        </div>
 
-    </div>
 
-</div>
 
-
 
-<script>
 
-var stompClient = null;
 
-
 
-function setConnected(connected) {
 
-    console.log("User is connected");
 
-    $("#connect").prop("disabled", connected);
 
-    $("#disconnect").prop("disabled", !connected);
 
-    if (connected) {
 
-        $("#conversation").show();
 
-    }
 
-    else {
 
-        $("#conversation").hide();
 
-    }
 
-    $("#greetings").html("");
 
-}
 
-
 
-function connect() {
 
-    console.log("connecting...");
 
-    var socket = new SockJS('http://localhost:8080/ws');
 
-    stompClient = Stomp.over(socket);
 
-    stompClient.connect({}, function (frame) {
 
-        console.log("Connected");
 
-        setConnected(true);
 
-        console.log('Connected: ' + frame);
 
-
 
-        // stompClient.send("/app/update-participant-status", {}, JSON.stringify({meetingUid:"mymeetinguid", status:'mystatus'}));
 
-
 
-        // stompClient.subscribe('/user/topic/on-participant-status-change', function (message) {
 
-        //     console.log("Participant status changed: ", message);
 
-        // });
 
-
 
-        stompClient.subscribe("/user/topic/on-pro-incoming-call", function(message){
 
-            console.log("incoming call:", message);
 
-
 
-            message = JSON.parse(message.body);
 
-            console.log(message.meetingUid);
 
-
 
-            $('#incomingCallModal').data('meetingUid', message.meetingUid).modal('show');
 
-
 
-        });
 
-
 
-        // connect
 
-        stompClient.send("/app/pro-connect", {}, JSON.stringify({sessionKey: "<?= $sessionKey ?>"}));
 
-
 
-        console.log('Pro connected')
 
-
 
-    });
 
-}
 
-
 
-connect();
 
-
 
-function joinCall() {
 
-    var meetingUid = $('#incomingCallModal').data('meetingUid');
 
-    window.location.href = '/pro/meeting/' + meetingUid;
 
-}
 
-
 
-function disconnect() {
 
-    if (stompClient !== null) {
 
-        stompClient.disconnect();
 
-    }
 
-    setConnected(false);
 
-    console.log("Disconnected");
 
-}
 
-
 
-function sendName() {
 
-    stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
 
-}
 
-
 
-function showGreeting(message) {
 
-    $("#greetings").append("<tr><td>" + message + "</td></tr>");
 
-}
 
-
 
-$(function () {
 
-    $("form").on('submit', function (e) {
 
-        e.preventDefault();
 
-    });
 
-    $( "#connect" ).click(function() { connect(); });
 
-    $( "#disconnect" ).click(function() { disconnect(); });
 
-    $( "#send" ).click(function() { sendName(); });
 
-});
 
-</script>
 
 @endsection
 
 @endsection

+ 1 - 1
resources/views/pro/meeting.blade.php
View File 

@@ -1,4 +1,4 @@
 
-@extends('layouts.guest-meeting')
 
+@extends('layouts.pro')
 
 @section('content')
 
 @section('content')
 
 
 
     <div id="meetingComponent">
 
     <div id="meetingComponent">