@(implicit request: RequestHeader)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Notifications</title>
        <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("lib/bootstrap/css/bootstrap.min.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("lib/bootstrap/css/bootstrap-theme.min.css")">
        <script src="@routes.Assets.versioned("lib/jquery/jquery.min.js")"  type="text/javascript"></script>
        <script src="@routes.Assets.versioned("lib/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
        	<div class="panel panel-default">
			 	<div class="panel-heading">Users Over Websockets</div>
			 	<div id="users" class="panel-body">
			 	</div>
        	</div>
        </div>
        
        <div class="container">
        	<div class="panel panel-default">
			 	<div class="panel-heading">Users Over SSE</div>
			 	<div id="sse" class="panel-body">
			 	</div>
        	</div>        
        </div>
    </body>
    
    <script type="text/javascript">
        var socket = new WebSocket("@routes.NotificationController.usersWs().webSocketURL()")
        socket.onmessage = function(event) {
            var user = jQuery.parseJSON(event.data);
            $("#users").append("User added: " + user.email + " (" + user.firstName + " " + user.lastName + ")" + "<br/>");
        }
        
        $('#users').bind('unload',function() {
            socket.close();
        }); 
        
        if(!!window.EventSource) {
            var event = new EventSource("@routes.NotificationController.usersSse().absoluteURL()");
            event.addEventListener('message', function(event) {
                var user = jQuery.parseJSON(event.data);
                $("#sse").append("User added: " + user.email + " (" + user.firstName + " " + user.lastName + ")" + "<br/>");
            });
            
            $('#sse').bind('unload',function() {
                event.close();
            }); 
        }
    </script>
</html>
