以下は、会社が現在取り組んでいるプロジェクトの数に基づいて個別の div を作成するために使用するコードです。各 div には、プロジェクトの最新のビルドが成功したか失敗したかが含まれます。
現在、120 秒から 180 秒の間に自動的に更新されるように設定しています。現時点では、すべての div が同時に更新されます。各divがランダムに独自に更新されるようにしたいと思います。
div を作成する CSHMTL:
@if (Model.Client.ClientStatus != null && Model.Client.ClientStatus.Trim() != "InActive")
{
<div class="span4 dashboard-success">
<div class="well dashboard-well" style="display:none;">
<div class="loading">Loading...</div>
<div>
<div class="dashboard-link">
<h3>@Html.ActionLink(Model.Client.ClientName, "Details", new { controller = "Client", ClientId = Model.Client.ClientID })</h3>
</div>
</div>
@foreach (var project in Model.Client.Projects)
{
<div>
<div class="dashboard-link">
<h4>@Html.ActionLink(project.ProjectName, "Details/" + project.ProjectID, "project", new { controller = "Client", ClientId = Model.Client.ClientID },
new { controller = "Project", ProjectId = project.ProjectID })</h4>
</div>
@if (project.ProjectStatus != null && project.ProjectStatus.Trim() != "InActive")
{
<table class="build table table-condensed">
@foreach (var build in project.Builds)
{
<tr id="@project.ProjectName.Trim().ToLower().Replace(" ", "_").Replace(".", "").Replace("-", "").Replace("[", "").Replace("]", "")@build.BuildConfigID">
<td>
<!--Adds a link back to client project build details-->
<a href = @Url.Content("client/" + Model.Client.ClientID.ToString() + "/project/" +
project.ProjectID + "/build/Details/" + build.BuildID)>@build.BuildName</a>
</td>
<td class="date">
</td>
<td class="user">
</td>
<td class="status">
</td>
</tr>
}
</table>
}
</div>
}
</div>
ページの更新を処理する Javascript:
function random(x) {
return Math.floor(x * (Math.random() % 1))
}
function randomBetween(MinV, MaxV) {
return MinV + random(MaxV - MinV + 1)
}
$(function () {
UpdateStatus();
window.setInterval(UpdateStatus, randomBetween(120000, 180000))
})
現在、これらはすべて部分ビューに配置されています。どんな考えや提案も大歓迎です。
編集: UpdateStatus() の要求されたコード
function UpdateStatus() {
$(".dashboard-well").show().css({ 'background-color': "black", 'overflow': "hidden" })
$(".loading").show()
$("td").hide()
$(".status").hide()
$.ajax
({
url: "/Build/AllStatuses", //New ULRs
dataType: 'json',
success: function (buildstatuses) {
for (var i in buildstatuses) {
var status = buildstatuses[i];
var statusColor = 'black';
switch (status.status) {
case "SUCCESS":
statusColor = "green";
break;
case "FAILURE":
statusColor = "#99182C";
break;
case "ERROR":
statusColor = "#CD950C";
break;
default:
statusColor = "black";
break;
}
var rowID = $.trim(new String(status.teamCityProject).toLowerCase().replace(/ /g, "_").replace(/\./g, "").replace(/-/g, "").replace(/\[/g, "").replace(/]/g, "")) + status.id;
$("tr#" + rowID + " td.status").html(status.status).css({ 'color': statusColor, 'font-weight': 'bolder' })
if (status.status != "SUCCESS") {
var row = $("tr#" + rowID)
row.parent().parent().parent().parent().parent().removeClass("dashboard-success").addClass("dashboard-fail");
row.parent().parent().prepend(row.clone()); // Places Failure at the top by cloning then removing
row.remove();
}
$("tr#" + rowID + " td.date").html(status.date)
$("tr#" + rowID + " td.user").html(status.user)
// jQuery show hide
$(".loading").hide()
$(".dashboard-well").show().css({ 'background-color': "#D8D8D8", 'overflow': "auto" })
$(".status").show()
$("td").show()
}
//Sets Failed results to the left
$("div.dashboard-fail").each(function () {
var div = $(this);
div.parent().prepend(div.clone());
div.remove();
});
// Scroll to the bottom of the Div defined and scroll up --> See scroll function at top
scrollDown();
scrollUp();
scrollDown();
}
})
}
</script>