pro-logged-in.blade.php 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Stag | Pro</title>
  7. <!-- Tell the browser to be responsive to screen width -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <!-- Font Awesome -->
  10. <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
  11. <!-- Ionicons -->
  12. <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  13. <!-- Tempusdominus Bbootstrap 4 -->
  14. <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  15. <!-- iCheck -->
  16. <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  17. <!-- JQVMap -->
  18. <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/jqvmap/jqvmap.min.css">
  19. <!-- Theme style -->
  20. <link rel="stylesheet" href="/AdminLTE-3.0.5/dist/css/adminlte.min.css">
  21. <!-- overlayScrollbars -->
  22. <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  23. <!-- Daterange picker -->
  24. <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/daterangepicker/daterangepicker.css">
  25. <!-- summernote -->
  26. <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/summernote/summernote-bs4.css">
  27. <!-- Google Font: Source Sans Pro -->
  28. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  29. </head>
  30. <body class="hold-transition sidebar-mini layout-fixed">
  31. <div class="wrapper">
  32. <!-- Navbar -->
  33. <nav class="main-header navbar navbar-expand navbar-white navbar-light">
  34. <!-- Left navbar links -->
  35. <ul class="navbar-nav">
  36. <li class="nav-item">
  37. <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
  38. </li>
  39. </ul>
  40. <!-- SEARCH FORM -->
  41. <form class="form-inline ml-3 w-25">
  42. <div class="input-group input-group-sm w-100">
  43. <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
  44. <div class="input-group-append">
  45. <button class="btn btn-navbar" type="submit">
  46. <i class="fas fa-search"></i>
  47. </button>
  48. </div>
  49. </div>
  50. </form>
  51. <!-- Right navbar links -->
  52. <ul class="navbar-nav ml-auto">
  53. <li class="nav-item">
  54. <a class="nav-link" href="#" role="button" onclick="window.location.reload(); return false">
  55. <i class="fa fa-sync"></i>
  56. </a>
  57. </li>
  58. {{--<li class="nav-item">
  59. <a class="nav-link" href="#" role="button">
  60. <i class="fas fa-sign-out-alt"></i>
  61. </a>
  62. </li>--}}
  63. </ul>
  64. </nav>
  65. <!-- /.navbar -->
  66. <!-- Main Sidebar Container -->
  67. <aside class="main-sidebar sidebar-dark-primary elevation-4">
  68. <!-- Brand Logo -->
  69. <a href="/AdminLTE-3.0.5/index3.html" class="brand-link">
  70. <img src="/AdminLTE-3.0.5/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
  71. style="opacity: .8">
  72. <span class="brand-text font-weight-light">Stag | Pro</span>
  73. </a>
  74. <!-- Sidebar -->
  75. <div class="sidebar">
  76. <!-- Sidebar Menu -->
  77. <nav class="mt-2">
  78. <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
  79. <li class="nav-item">
  80. <a href="/pro/dashboard" class="nav-link">
  81. <i class="nav-icon fa fa-palette"></i>
  82. <p>
  83. Dashboard
  84. </p>
  85. </a>
  86. @if(\Illuminate\Support\Facades\View::exists('layouts.generated-links'))
  87. @include('layouts.generated-links')
  88. @endif
  89. </ul>
  90. </nav>
  91. <!-- /.sidebar-menu -->
  92. </div>
  93. <!-- /.sidebar -->
  94. </aside>
  95. <!-- Content Wrapper. Contains page content -->
  96. <div class="content-wrapper">
  97. <!-- Main content -->
  98. <section class="content">
  99. <div class="container-fluid py-3">
  100. <div class="row mb-2">
  101. <div class="col-12">
  102. @yield('content')
  103. </div>
  104. </div>
  105. </div><!-- /.container-fluid -->
  106. </section>
  107. <!-- /.content -->
  108. </div>
  109. <div class="modal" id="incomingCallModal" tabindex="-1" role="dialog">
  110. <div class="modal-dialog" role="document">
  111. <div class="modal-content">
  112. <div class="modal-header">
  113. <h5 class="modal-title">Incoming Call</h5>
  114. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  115. <span aria-hidden="true">&times;</span>
  116. </button>
  117. </div>
  118. <div class="modal-body">
  119. <p>Click <b>Accept</b> to join the call.</p>
  120. </div>
  121. <div class="modal-footer">
  122. <button type="button" class="btn btn-success px-4" onclick="joinCall()">Answer</button>
  123. <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">Reject</button>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <script src="{{asset('js/moe.js')}}"></script>
  129. <script>
  130. var stompClient = null;
  131. function setConnected(connected) {
  132. console.log("User is connected");
  133. $("#connect").prop("disabled", connected);
  134. $("#disconnect").prop("disabled", !connected);
  135. if (connected) {
  136. $("#conversation").show();
  137. }
  138. else {
  139. $("#conversation").hide();
  140. }
  141. $("#greetings").html("");
  142. }
  143. function connect() {
  144. console.log("connecting...");
  145. var socket = new SockJS('http://localhost:8080/ws');
  146. stompClient = Stomp.over(socket);
  147. stompClient.connect({}, function (frame) {
  148. console.log("Connected");
  149. setConnected(true);
  150. console.log('Connected: ' + frame);
  151. // stompClient.send("/app/update-participant-status", {}, JSON.stringify({meetingUid:"mymeetinguid", status:'mystatus'}));
  152. // stompClient.subscribe('/user/topic/on-participant-status-change', function (message) {
  153. // console.log("Participant status changed: ", message);
  154. // });
  155. stompClient.subscribe("/user/topic/on-pro-incoming-call", function(message){
  156. console.log("incoming call:", message);
  157. message = JSON.parse(message.body);
  158. console.log(message.meetingUid);
  159. $('#incomingCallModal')
  160. .data('meetingUid', message.meetingUid)
  161. .modal('show');
  162. });
  163. // connect
  164. stompClient.send("/app/pro-connect", {}, JSON.stringify({sessionKey: "<?= request()->cookie('sessionKey') ?>"}));
  165. console.log('Pro connected')
  166. });
  167. }
  168. connect();
  169. function joinCall() {
  170. var modal = $('#incomingCallModal');
  171. window.location.href = '/pro/meeting/' +
  172. modal.data('meetingUid');
  173. }
  174. function disconnect() {
  175. if (stompClient !== null) {
  176. stompClient.disconnect();
  177. }
  178. setConnected(false);
  179. console.log("Disconnected");
  180. }
  181. function sendName() {
  182. stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
  183. }
  184. function showGreeting(message) {
  185. $("#greetings").append("<tr><td>" + message + "</td></tr>");
  186. }
  187. $(function () {
  188. $("form").on('submit', function (e) {
  189. e.preventDefault();
  190. });
  191. $( "#connect" ).click(function() { connect(); });
  192. $( "#disconnect" ).click(function() { disconnect(); });
  193. $( "#send" ).click(function() { sendName(); });
  194. });
  195. </script>
  196. </div>
  197. <!-- ./wrapper -->
  198. <!-- jQuery -->
  199. <script src="/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
  200. <!-- jQuery UI 1.11.4 -->
  201. <script src="/AdminLTE-3.0.5/plugins/jquery-ui/jquery-ui.min.js"></script>
  202. <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
  203. <script>
  204. $.widget.bridge('uibutton', $.ui.button)
  205. </script>
  206. <!-- Bootstrap 4 -->
  207. <script src="/AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  208. <!-- ChartJS -->
  209. <script src="/AdminLTE-3.0.5/plugins/chart.js/Chart.min.js"></script>
  210. <!-- Sparkline -->
  211. <script src="/AdminLTE-3.0.5/plugins/sparklines/sparkline.js"></script>
  212. <!-- JQVMap -->
  213. <script src="/AdminLTE-3.0.5/plugins/jqvmap/jquery.vmap.min.js"></script>
  214. <script src="/AdminLTE-3.0.5/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
  215. <!-- jQuery Knob Chart -->
  216. <script src="/AdminLTE-3.0.5/plugins/jquery-knob/jquery.knob.min.js"></script>
  217. <!-- daterangepicker -->
  218. <script src="/AdminLTE-3.0.5/plugins/moment/moment.min.js"></script>
  219. <script src="/AdminLTE-3.0.5/plugins/daterangepicker/daterangepicker.js"></script>
  220. <!-- Tempusdominus Bootstrap 4 -->
  221. <script src="/AdminLTE-3.0.5/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
  222. <!-- Summernote -->
  223. <script src="/AdminLTE-3.0.5/plugins/summernote/summernote-bs4.min.js"></script>
  224. <!-- overlayScrollbars -->
  225. <script src="/AdminLTE-3.0.5/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
  226. <!-- AdminLTE App -->
  227. <script src="/AdminLTE-3.0.5/dist/js/adminlte.js"></script>
  228. <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  229. <script src="/AdminLTE-3.0.5/dist/js/pages/dashboard.js"></script>
  230. <!-- AdminLTE for demo purposes -->
  231. <script src="/AdminLTE-3.0.5/dist/js/demo.js"></script>
  232. <script>
  233. if(window === window.top) {
  234. window.location.href = '/mc?page=' + window.location.pathname;
  235. }
  236. </script>
  237. </body>
  238. </html>