update the polling test page to be more user-friendly

This commit is contained in:
Jesse D. McDonald 2020-04-27 17:53:49 -05:00
parent 3653f3db99
commit 012bc7ea09
1 changed files with 35 additions and 11 deletions

View File

@ -4,11 +4,13 @@
<title>Polling Test</title>
</head>
<body>
<div id="current"></div>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>
let gameId = '5b687c23df28945e';
let currentRequest = null;
function logResult(result) {
$('<p></p>').text(JSON.stringify(result)).prependTo('#current');
}
function startPoll(fromTime) {
const thisRequest = currentRequest = $.ajax({
dataType: 'json',
@ -22,13 +24,13 @@
if (jqXHR.status == 204) {
startPoll(fromTime);
} else {
$('<p></p>').text(JSON.stringify(data)).appendTo('#current');
logResult(data);
startPoll(data.modified);
}
}
}).fail((jqXHR, textStatus, errorThrown) => {
if (currentRequest === thisRequest) {
$('#current').empty().text(JSON.stringify({ textStatus, errorThrown }));
logResult({ textStatus, errorThrown });
setTimeout(() => {
if (currentRequest === thisRequest) {
startPoll(0);
@ -44,27 +46,49 @@
request.abort();
}
}
function doPost(data) {
stopPoll();
function doUpdate(gameId, data) {
$.ajax({
dataType: 'json',
contentType: 'application/json',
url: `https://jessemcdonald.info/pacosako/api/posttest`,
url: `https://jessemcdonald.info/pacosako/api/game/${gameId}`,
method: 'POST',
cache: false,
data: JSON.stringify(data),
timeout: 5000,
}).done((responseData, textStatus, jqXHR) => {
$('#current').empty().text(JSON.stringify(responseData));
logResult({ [jqXHR.status]: responseData });
if ('modified' in responseData) {
data.modified = responseData.modified;
$('#json').val(JSON.stringify(data));
}
}).fail((jqXHR, textStatus, errorThrown) => {
$('#current').empty().text(JSON.stringify({ textStatus, errorThrown }));
logResult({ status: jqXHR.status, textStatus, errorThrown });
});
}
$(() => {
let counter = 0;
$('<button>Start Polling</button>').appendTo('body').on('click', () => startPoll());
$('<button>Stop Polling</button>').appendTo('body').on('click', () => stopPoll());
$('<button>Do Post</button>').appendTo('body').on('click', () => doPost({ counter: ++counter }));
let row1 = $('<div></div>').appendTo('body');
$('<button id="start">Start Polling</button>').appendTo('body').on('click', () => {
$('#start').prop('disabled', true);
$('#stop').prop('disabled', false);
startPoll();
});
$('<button id="stop">Stop Polling</button>').prop('disabled', true).appendTo('body').on('click', () => {
$('#start').prop('disabled', false);
$('#stop').prop('disabled', true);
stopPoll()
});
let row2 = $('<div></div>').appendTo('body');
$('<input id="gameId">').appendTo(row2);
$('<input id="json">').appendTo(row2);
$('<button id="update">Update</button>').appendTo(row2).on('click', () => {
try {
doUpdate($('#gameId').val(), JSON.parse($('#json').val()));
} catch(err) {
logResult({ exception: err });
}
});
$('<div id="current"></div>').appendTo('body');
});
</script>
</body>