Improve charting UI for error cases
This commit is contained in:
@@ -1,13 +1,17 @@
|
||||
@model LeafWeb.Web.ViewModels.Chart.ChartViewModel
|
||||
@{
|
||||
ViewBag.Title = "Chart";
|
||||
var selectText = "Select CurveId";
|
||||
}
|
||||
<h1>@ViewBag.Title</h1>
|
||||
<h3>Identifier: <strong>@Model.LeafInputIdentifier</strong></h3>
|
||||
|
||||
@Html.DropDownList("CurveId", new SelectList(Model.AvailableCurveId, Model.CurveId), "Select CurveId")
|
||||
@Html.DropDownList("CurveId", new SelectList(Model.AvailableCurveId, Model.CurveId), selectText)
|
||||
|
||||
<img id="chart"/>
|
||||
<span class="help-block">
|
||||
<span id="chart-error"></span>
|
||||
</span>
|
||||
|
||||
@section Scripts
|
||||
{
|
||||
@@ -15,17 +19,27 @@
|
||||
$(function () {
|
||||
$('#CurveId')
|
||||
.change(function () {
|
||||
$('#chart-error').removeClass('text-danger').text('');
|
||||
var $chart = $("#chart");
|
||||
var $spinner = $(this).after('<i class="fa fa-spinner fa-spin"></i>').next('i');
|
||||
$chart.attr('src', "");
|
||||
$chart.removeAttr('src');
|
||||
|
||||
var curveId = $("option:selected", this).text();
|
||||
if (curveId === "@Html.Raw(selectText)") {
|
||||
return;
|
||||
}
|
||||
var $spinner = $(this).after('<i class="fa fa-spinner fa-spin"></i>').next('i');
|
||||
var url =
|
||||
"@Html.Raw(Url.Action("ChartCurve", new {leafInputId = Model.LeafInputId, curveId="curveId"}))";
|
||||
url = url.replace("=curveId", "=" + curveId);
|
||||
$chart.attr('src', url)
|
||||
.load(function() {
|
||||
$chart.load(function () {
|
||||
$spinner.remove();
|
||||
});
|
||||
})
|
||||
.error(function () {
|
||||
$chart.removeAttr('src');
|
||||
$spinner.remove();
|
||||
$('#chart-error').addClass('text-danger').text('A problem was encountered loading this chart.');
|
||||
})
|
||||
.attr('src', url);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user