dmr3/Websocket Exercise: Monte Carlo Pi Calculation

## Websocket Exercise: Monte Carlo Pi Calculation
#!/usr/bin/env perl

use Mojolicious::Lite;

any '/' => sub {
    my $self = shift;
    $self->render( 'index', rows => [ [] ] );
};

# setup websocket message handler
websocket '/more_pi' => sub {
    my $self = shift;
    $self->inactivity_timeout(3000);
    $self->on(
        json => sub {
            my $ws   = shift;
            my $args = shift;

            my ( $pi, $total_runs, $new_runs ) = @$args;

            # use the itr to show how to submit multiples

            my $cnt_pi = -1 * ( ( $pi * $total_runs ) / 4 - $total_runs );
            my ( $x, $y );

            foreach ( 1 .. $new_runs ) {
                $x = rand(1);
                $y = rand(1);
                $cnt_pi++ if $x * $x + $y * $y > 1;
            }

            $total_runs += $new_runs;

            $pi = 4 * ( $total_runs - $cnt_pi ) / $total_runs;

            my $html = $ws->render_to_string( 'table',
                rows => [ [ $pi, $total_runs ] ] );
            $ws->send(
                {
                    json => {
                        row    => $html,
                        vals   => [ $pi, $total_runs, $new_runs ],
                        target => '#table',                          #for fun
                    }
                }
            );
        }
    );
};

app->start;

__DATA__
@@ index.html.ep
<!DOCTYPE html>
<html>
<head>
  <title>Monte Carlo pi</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <div class=container>
        %= include 'mcpiform'
        <div class="row"><div class="col-md-6">
            <table class="table table-bordered table-condensed">
                <thead>
                    <tr><th>Calculated &#960;</th><th> Total runs</th></tr>
                </thead>
                <tbody id="table">
                    %= include 'table'
                </tbody>
            </table>
        </div></div>
    </div>
    %= javascript 'js/ws.js'

</body>
</html>

@@ mcpiform.html.ep
    <div class="form-inline" role="form">
        <div class="form-group">
            <label for="mcpi">Starting &#960;</label>
            <input type="text" class="form-control" id="mcpif" value="0">
        </div>
        <div class="form-group">
            <label for="truns"> Total runs</label>
            <input type="text" class="form-control" id="trunsf" value="0">
        </div>
        <div class="form-group">
            <label for="nruns"> New runs</label>
            <input type="text" class="form-control" id="nrunsf" value="10000">
        </div>
        <div class="form-group">
            <label for="nitrs"> Repeats </label>
            <input type="text" class="form-control" id="nitrsf" value="1">
        </div>
        <input type="submit" value="Add" id="pibutton" onclick="update_pi( '<%= url_for('more_pi')->to_abs %>')" >
    </div>

@@ table.html.ep
% foreach my $row (@$rows) {
  <tr>
    % foreach my $text (@$row) {
      <td><%= $text %></td>
    % }
  </tr>
% }

@@ js/ws.js
    function update_pi (url) {
      if (!("WebSocket" in window)) {
        alert('Your browser does not support WebSockets!');
        return;
      }

      $('#pibutton').prop("disabled",true);

      var ws = new WebSocket(url);
      var counter  = $('#nitrsf').val();
      var save_cnt = $('#nitrsf').val();

      ws.onopen = function () {
        var mcpi = $('#mcpif');
        var trun = $('#trunsf');
        var nrun = $('#nrunsf');
        ws.send(JSON.stringify([mcpi.val(),trun.val(),nrun.val()]));
        counter--;
      };
      console.log(counter);

      ws.onmessage = function (evt) {
        var data = JSON.parse(evt.data);
        $(data.target).append(data.row);
        if(counter > 0){
          ws.send(JSON.stringify( [data.vals[0],data.vals[1],data.vals[2]]));
          counter--;
          if (counter === 0) {
            $('#pibutton').prop("disabled",false);
          }
        }

        //$('#table').append(data.row);
        //insert values into form for convenience
        $('#mcpif').val(data.vals[0]);
        $('#trunsf').val(data.vals[1]);
        $('#nrunsf').val(data.vals[2]);
        $('#nitrsf').val(save_cnt);

      };

    }
	#!/usr/bin/env perl

	use Mojolicious::Lite;

	any '/' => sub {
	my $self = shift;
	$self->render( 'index', rows => [ [] ] );
	};

	# setup websocket message handler
	websocket '/more_pi' => sub {
	my $self = shift;
	$self->inactivity_timeout(3000);
	$self->on(
	json => sub {
	my $ws = shift;
	my $args = shift;

	my ( $pi, $total_runs, $new_runs ) = @$args;

	# use the itr to show how to submit multiples

	my $cnt_pi = -1 * ( ( $pi * $total_runs ) / 4 - $total_runs );
	my ( $x, $y );

	foreach ( 1 .. $new_runs ) {
	$x = rand(1);
	$y = rand(1);
	$cnt_pi++ if $x * $x + $y * $y > 1;
	}

	$total_runs += $new_runs;

	$pi = 4 * ( $total_runs - $cnt_pi ) / $total_runs;

	my $html = $ws->render_to_string( 'table',
	rows => [ [ $pi, $total_runs ] ] );
	$ws->send(
	{
	json => {
	row => $html,
	vals => [ $pi, $total_runs, $new_runs ],
	target => '#table', #for fun
	}
	}
	);
	}
	);
	};

	app->start;

	__DATA__
	@@ index.html.ep
	<!DOCTYPE html>
	<html>
	<head>
	<title>Monte Carlo pi</title>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	</head>
	<body>
	<div class=container>
	%= include 'mcpiform'
	<div class="row"><div class="col-md-6">
	<table class="table table-bordered table-condensed">
	<thead>
	<tr><th>Calculated π</th><th> Total runs</th></tr>
	</thead>
	<tbody id="table">
	%= include 'table'
	</tbody>
	</table>
	</div></div>
	</div>
	%= javascript 'js/ws.js'

	</body>
	</html>

	@@ mcpiform.html.ep
	<div class="form-inline" role="form">
	<div class="form-group">
	<label for="mcpi">Starting π</label>
	<input type="text" class="form-control" id="mcpif" value="0">
	</div>
	<div class="form-group">
	<label for="truns"> Total runs</label>
	<input type="text" class="form-control" id="trunsf" value="0">
	</div>
	<div class="form-group">
	<label for="nruns"> New runs</label>
	<input type="text" class="form-control" id="nrunsf" value="10000">
	</div>
	<div class="form-group">
	<label for="nitrs"> Repeats </label>
	<input type="text" class="form-control" id="nitrsf" value="1">
	</div>
	<input type="submit" value="Add" id="pibutton" onclick="update_pi( '<%= url_for('more_pi')->to_abs %>')" >
	</div>

	@@ table.html.ep
	% foreach my $row (@$rows) {
	<tr>
	% foreach my $text (@$row) {
	<td><%= $text %></td>
	% }
	</tr>
	% }

	@@ js/ws.js
	function update_pi (url) {
	if (!("WebSocket" in window)) {
	alert('Your browser does not support WebSockets!');
	return;
	}

	$('#pibutton').prop("disabled",true);

	var ws = new WebSocket(url);
	var counter = $('#nitrsf').val();
	var save_cnt = $('#nitrsf').val();

	ws.onopen = function () {
	var mcpi = $('#mcpif');
	var trun = $('#trunsf');
	var nrun = $('#nrunsf');
	ws.send(JSON.stringify([mcpi.val(),trun.val(),nrun.val()]));
	counter--;
	};
	console.log(counter);

	ws.onmessage = function (evt) {
	var data = JSON.parse(evt.data);
	$(data.target).append(data.row);
	if(counter > 0){
	ws.send(JSON.stringify( [data.vals[0],data.vals[1],data.vals[2]]));
	counter--;
	if (counter === 0) {
	$('#pibutton').prop("disabled",false);
	}
	}

	//$('#table').append(data.row);
	//insert values into form for convenience
	$('#mcpif').val(data.vals[0]);
	$('#trunsf').val(data.vals[1]);
	$('#nrunsf').val(data.vals[2]);
	$('#nitrsf').val(save_cnt);

	};

	}