stagfe/resources/views/pro/dashboard.blade.php

@extends('layouts.pro')

@section('content')
@if(Session::get('message'))
<div class="alert-alert-info">{{Session::get('message')}}</div>
@endif
<h1>Pro dashboard</h1>
<a href="{{route('pro-logout')}}">Log out</a>

<ul>
    <li>
        <a href="{{route('pro-index')}}">Pros</a>
    </li>
</ul>

<div moe>
    <a start show href="">create pro</a>
    <form url="/api/dev/createSystemAdmin" style="display:none">
        <h1>Form to create pro</h1>
        <button submit>submit</button>
        <button cancel>Cancel</button>
    </form>
</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