1
0
Fork 0
This commit is contained in:
Gregory Eremin 2015-01-25 22:38:47 +07:00
parent 9318fd6d02
commit 34b43b12ee
1 changed files with 47 additions and 38 deletions

View File

@ -11,45 +11,43 @@
* { box-sizing: border-box; } * { box-sizing: border-box; }
.title, td, th { .title, td, th {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.8em; font-size: 1.3em;
padding: 10px; padding: 10px;
font-weight: 300;
} }
.title { .title {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 50%; left: 50%;
width: 500px; width: 600px;
margin-left: -250px; margin-left: -300px;
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.8em;
font-weight: 300; font-weight: 300;
} }
table { table {
position: absolute; position: absolute;
top: 80px; top: 100px;
left: 50%; left: 50%;
width: 500px; width: 600px;
margin-left: -250px; margin-left: -300px;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
} }
th { th {
font-weight: 600; font-weight: 400;
color: #fff;
} }
thead tr { thead tr {
background-color: #8a2be2; border-bottom: #666 1px solid;
} }
tbody tr:nth-child(even) { tbody tr:nth-child(even) {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
tbody tr:nth-child(odd) {
background-color: #fefefe;
}
.name { .name {
width: 200px; width: 300px;
max-width: 200px; max-width: 300px;
text-align: left;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -57,18 +55,23 @@ tbody tr:nth-child(odd) {
.messages, .subscriptions { .messages, .subscriptions {
width: 150px; width: 150px;
max-width: 150px; max-width: 150px;
font-weight: 400;
text-align: right; text-align: right;
} }
.placeholder td { #placeholder td {
text-align: center; text-align: center;
} }
.zero { .zero {
font-weight: 300;
color: #aaa; color: #aaa;
} }
.hot { .fat {
color: #f20;
font-weight: 600; font-weight: 600;
} }
.hot {
font-weight: 600;
color: #f20;
}
</style> </style>
@ -111,6 +114,7 @@ function loadStatus(callback) {
function updateDashboard(queues) { function updateDashboard(queues) {
var queuesList = document.getElementById('queues'), var queuesList = document.getElementById('queues'),
placeholder = document.getElementById('placeholder'), placeholder = document.getElementById('placeholder'),
fatThreshold = 100,
hotThreshold = 1000; hotThreshold = 1000;
if (placeholder) { if (placeholder) {
@ -131,36 +135,41 @@ function updateDashboard(queues) {
queuesList.appendChild(tr); queuesList.appendChild(tr);
} }
var cols = tr.getElementsByTagName('td'); var nmsg = parseInt(meta.messages, 10),
cols[0].innerHTML = queue; nsub = parseInt(meta.subscriptions, 10),
cols[1].innerHTML = meta.messages; cols = tr.getElementsByTagName('td'),
cols[2].innerHTML = meta.subscriptions; nameCol = cols[0],
messagesCol = cols[1],
subscriptionsCol = cols[2];
if (parseInt(meta.messages, 10) > hotThreshold) { nameCol.setAttribute('class', 'name');
cols[0].setAttribute('class', 'name hot'); nameCol.innerHTML = queue;
messagesCol.innerHTML = meta.messages;
subscriptionsCol.innerHTML = meta.subscriptions;
if (nmsg > hotThreshold) {
nameCol.setAttribute('class', 'name hot');
messagesCol.setAttribute('class', 'messages hot');
} else if (nmsg > fatThreshold) {
nameCol.setAttribute('class', 'name fat');
messagesCol.setAttribute('class', 'messages fat');
} else if (nmsg === 0) {
messagesCol.setAttribute('class', 'messages zero');
} else { } else {
cols[0].setAttribute('class', 'name'); messagesCol.setAttribute('class', 'messages');
} }
if (parseInt(meta.messages, 10) === 0) { if (nsub === 0) {
cols[1].setAttribute('class', 'messages zero'); subscriptionsCol.setAttribute('class', 'subscriptions zero');
} else if (parseInt(meta.messages, 10) > hotThreshold) {
cols[1].setAttribute('class', 'messages hot');
} else { } else {
cols[1].setAttribute('class', 'messages'); subscriptionsCol.setAttribute('class', 'subscriptions');
}
if (parseInt(meta.subscriptions, 10) === 0) {
cols[2].setAttribute('class', 'subscriptions zero');
} else {
cols[2].setAttribute('class', 'subscriptions');
} }
} }
} }
function loop(timeout, func) { function loop(timeout, func) {
window.setTimeout(function(){
func(); func();
window.setTimeout(function(){
loop(timeout, func); loop(timeout, func);
}, timeout); }, timeout);
} }