Update #74: Friendly disconnected messages
When the live connection to the server is interrupted some ui elements are disabled. If the connection fails (due to errors or failed reconnection) a dialog instructs the user to check their connection and refresh the browser. Relates to Device, Job and User pages (logs and attachments).
This commit is contained in:
Gary Sharp
@@ -44,7 +44,7 @@
|
||||
{
|
||||
<div class="commentInput clearfix">
|
||||
<textarea class="commentInput" placeholder="write comment..." accesskey="l"></textarea>
|
||||
<span class="action post commentInputPost fa fa-comment" title="Post Comment"></span>
|
||||
<span class="action post commentInputPost fa fa-comment disabled" title="Post Comment"></span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -77,7 +77,7 @@
|
||||
{
|
||||
<div class="Disco-AttachmentUpload-Progress"></div>
|
||||
<div class="attachmentInput clearfix">
|
||||
<span class="action upload fa fa-upload" title="Attach File"></span><span class="action photo fa fa-camera" title="Capture Image"></span>
|
||||
<span class="action upload fa fa-upload disabled" title="Attach File"></span><span class="action photo fa fa-camera disabled" title="Capture Image"></span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -140,29 +140,39 @@
|
||||
});
|
||||
|
||||
function postComment() {
|
||||
if ($Comments.find('.commentInputPost').hasClass('disabled')) {
|
||||
alert('Disconnected from the Disco ICT Server, please refresh this page and try again');
|
||||
return;
|
||||
}
|
||||
|
||||
var comment = $CommentInput.val();
|
||||
if (comment != '') {
|
||||
var data = { comment: comment }
|
||||
$.ajax({
|
||||
url: '@Url.Action(MVC.API.Job.CommentPost(Model.Job.Id, null))',
|
||||
dataType: 'json',
|
||||
data: data,
|
||||
success: function (d) {
|
||||
if (d.Result == 'OK') {
|
||||
// Should be added via Repository Notifications
|
||||
// addComment(d.Comment, false);
|
||||
$CommentInput.val('').attr('disabled', false).focus();
|
||||
} else {
|
||||
alert('Unable to post comment: ' + d.Result);
|
||||
$CommentInput.attr('disabled', false);
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
alert('Unable to post comment: ' + textStatus);
|
||||
|
||||
if (comment == '') {
|
||||
alert('Enter a comment to post');
|
||||
$CommentInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
var data = { comment: comment }
|
||||
$.ajax({
|
||||
url: '@Url.Action(MVC.API.Job.CommentPost(Model.Job.Id, null))',
|
||||
dataType: 'json',
|
||||
data: data,
|
||||
success: function (d) {
|
||||
if (d.Result == 'OK') {
|
||||
// Should be added via Repository Notifications
|
||||
// addComment(d.Comment, false);
|
||||
$CommentInput.val('').attr('disabled', false).focus();
|
||||
} else {
|
||||
alert('Unable to post comment: ' + d.Result);
|
||||
$CommentInput.attr('disabled', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
alert('Unable to post comment: ' + textStatus);
|
||||
$CommentInput.attr('disabled', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//#endregion
|
||||
@@ -314,10 +324,16 @@
|
||||
|
||||
var $attachmentInput = $Attachments.find('.attachmentInput');
|
||||
$attachmentInput.find('.photo').click(function () {
|
||||
attachmentUploader.uploadImage();
|
||||
if ($(this).hasClass('disabled'))
|
||||
alert('Disconnected from the Disco ICT Server, please refresh this page and try again');
|
||||
else
|
||||
attachmentUploader.uploadImage();
|
||||
});
|
||||
$attachmentInput.find('.upload').click(function () {
|
||||
attachmentUploader.uploadFiles();
|
||||
if ($(this).hasClass('disabled'))
|
||||
alert('Disconnected from the Disco ICT Server, please refresh this page and try again');
|
||||
else
|
||||
attachmentUploader.uploadFiles();
|
||||
});
|
||||
|
||||
var resourcesTab;
|
||||
@@ -556,13 +572,51 @@
|
||||
</text>}
|
||||
|
||||
$.connection.hub.qs = { JobId: jobId };
|
||||
$.connection.hub.error(onHubError);
|
||||
$.connection.hub.error(onHubFailed);
|
||||
$.connection.hub.disconnected(onHubFailed);
|
||||
|
||||
$.connection.hub.reconnecting(function () {
|
||||
$('#CommentsContainer').find('span.action').addClass('disabled');
|
||||
$('#AttachmentsContainer').find('span.action').addClass('disabled');
|
||||
});
|
||||
$.connection.hub.reconnected(function () {
|
||||
$('#CommentsContainer').find('span.action').removeClass('disabled');
|
||||
$('#AttachmentsContainer').find('span.action').removeClass('disabled');
|
||||
});
|
||||
|
||||
// Start Connection
|
||||
$.connection.hub.start().fail(onHubError);
|
||||
$.connection.hub.start(function () {
|
||||
$('#CommentsContainer').find('span.action').removeClass('disabled');
|
||||
$('#AttachmentsContainer').find('span.action').removeClass('disabled');
|
||||
}).fail(onHubFailed);
|
||||
|
||||
function onHubError(error) {
|
||||
alert('Live-update Error: ' + error);
|
||||
function onHubFailed(error) {
|
||||
// Disable UI
|
||||
$('#CommentsContainer').find('textarea.commentInput').attr('readonly', 'readonly');
|
||||
$('#CommentsContainer').find('span.action').addClass('disabled');
|
||||
$('#AttachmentsContainer').find('span.action').addClass('disabled');
|
||||
|
||||
// Show Dialog Message
|
||||
if ($('.disconnected-dialog').length == 0) {
|
||||
$('<div>')
|
||||
.addClass('dialog disconnected-dialog')
|
||||
.html('<h3><span class="fa-stack fa-lg"><i class="fa fa-wifi fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x error"></i></span>Disconnected from the Disco ICT Server</h3><div>Please ensure you are connected to the server, then refresh this page to enable features.</div>')
|
||||
.dialog({
|
||||
resizable: false,
|
||||
title: 'Disconnected',
|
||||
width: 400,
|
||||
modal: true,
|
||||
buttons: {
|
||||
'Refresh Now': function () {
|
||||
$(this).dialog('option', 'buttons', null);
|
||||
window.location.href = window.location.href;
|
||||
},
|
||||
'Close': function () {
|
||||
$(this).dialog('destroy');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//#endregion
|
||||
|
||||
Reference in New Issue
Block a user