styled log page.
This commit is contained in:
parent
27c7ed1e6d
commit
8f9b9c901c
|
@ -64,6 +64,7 @@ module.exports = function (grunt) {
|
|||
'UI/AddSeries/addSeries.less',
|
||||
'UI/Calendar/calendar.less',
|
||||
'UI/Cells/cells.less',
|
||||
'UI/Logs/logs.less',
|
||||
'UI/Settings/settings.less',
|
||||
],
|
||||
dest : '_output/',
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
<link href="/Content/base.css" rel='stylesheet' type='text/css'/>
|
||||
<link href="/Cells/Cells.css" rel='stylesheet' type='text/css'>
|
||||
<link href="/Series/Series.css" rel='stylesheet' type='text/css'/>
|
||||
<link href="/Logs/logs.css" rel='stylesheet' type='text/css'/>
|
||||
<link href="/Settings/settings.css" rel='stylesheet' type='text/css'/>
|
||||
<link href="/AddSeries/Addseries.css" rel='stylesheet' type='text/css'/>
|
||||
<link href="/Calendar/calendar.css" rel='stylesheet' type='text/css'/>
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,11 +1,13 @@
|
|||
'use strict';
|
||||
define([
|
||||
'marionette',
|
||||
'backgrid',
|
||||
'Shared/Grid/Pager',
|
||||
'Logs/Collection'
|
||||
],
|
||||
function (Marionette,Backgrid, GridPager, LogCollection) {
|
||||
define(
|
||||
[
|
||||
'marionette',
|
||||
'backgrid',
|
||||
'Logs/LogTimeCell',
|
||||
'Logs/LogLevelCell',
|
||||
'Shared/Grid/Pager',
|
||||
'Logs/Collection'
|
||||
], function (Marionette, Backgrid, LogTimeCell, LogLevelCell, GridPager, LogCollection) {
|
||||
return Marionette.Layout.extend({
|
||||
template: 'Logs/LayoutTemplate',
|
||||
|
||||
|
@ -15,41 +17,49 @@ define([
|
|||
pager : '#x-pager'
|
||||
},
|
||||
|
||||
columns: [
|
||||
{
|
||||
name : 'level',
|
||||
label : 'Level',
|
||||
sortable: true,
|
||||
cell : Backgrid.StringCell
|
||||
},
|
||||
{
|
||||
name : 'logger',
|
||||
label : 'Component',
|
||||
sortable: true,
|
||||
cell : Backgrid.StringCell
|
||||
},
|
||||
{
|
||||
name : 'message',
|
||||
label : 'Message',
|
||||
sortable: false,
|
||||
cell : Backgrid.StringCell
|
||||
},
|
||||
{
|
||||
name : 'time',
|
||||
label: 'Time',
|
||||
cell : Backgrid.DatetimeCell
|
||||
}
|
||||
],
|
||||
attributes: {
|
||||
id: 'logs-screen'
|
||||
},
|
||||
|
||||
columns:
|
||||
[
|
||||
{
|
||||
name : 'level',
|
||||
label : '',
|
||||
sortable: true,
|
||||
cell : LogLevelCell
|
||||
},
|
||||
{
|
||||
name : 'logger',
|
||||
label : 'Component',
|
||||
sortable: true,
|
||||
cell : Backgrid.StringCell.extend({
|
||||
className: 'log-logger-cell'
|
||||
})
|
||||
},
|
||||
{
|
||||
name : 'message',
|
||||
label : 'Message',
|
||||
sortable: false,
|
||||
cell : Backgrid.StringCell.extend({
|
||||
className: 'log-message-cell'
|
||||
})
|
||||
},
|
||||
{
|
||||
name : 'time',
|
||||
label: 'Time',
|
||||
cell : LogTimeCell
|
||||
}
|
||||
],
|
||||
|
||||
showTable: function () {
|
||||
|
||||
this.grid.show(new Backgrid.Grid(
|
||||
{
|
||||
row : Backgrid.Row,
|
||||
columns : this.columns,
|
||||
collection: this.collection,
|
||||
className : 'table table-hover'
|
||||
}));
|
||||
this.grid.show(new Backgrid.Grid({
|
||||
row : Backgrid.Row,
|
||||
columns : this.columns,
|
||||
collection: this.collection,
|
||||
className : 'table table-hover'
|
||||
}));
|
||||
|
||||
this.pager.show(new GridPager({
|
||||
columns : this.columns,
|
||||
|
@ -66,7 +76,5 @@ define([
|
|||
this.showTable();
|
||||
}
|
||||
|
||||
})
|
||||
;
|
||||
})
|
||||
;
|
||||
});
|
||||
});
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
'use strict';
|
||||
define(
|
||||
[
|
||||
'Cells/NzbDroneCell'
|
||||
], function (NzbDroneCell) {
|
||||
return NzbDroneCell.extend({
|
||||
|
||||
className: 'log-level-cell',
|
||||
|
||||
render: function () {
|
||||
|
||||
var level = this._getValue();
|
||||
this.$el.html('<i class="icon-{0}" title="{1}"/>'.format(this._getValue().toLowerCase(), level));
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
});
|
|
@ -0,0 +1,20 @@
|
|||
'use strict';
|
||||
define(
|
||||
[
|
||||
'Cells/NzbDroneCell',
|
||||
'moment'
|
||||
], function (NzbDroneCell, Moment) {
|
||||
return NzbDroneCell.extend({
|
||||
|
||||
className: 'log-time-cell',
|
||||
|
||||
render: function () {
|
||||
|
||||
var date = Moment(this._getValue());
|
||||
this.$el.html(date.format('LT'));
|
||||
this.$el.attr('title', date.format('LLLL'));
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
});
|
|
@ -0,0 +1,50 @@
|
|||
@import "../Content/icons";
|
||||
|
||||
#logs-screen {
|
||||
|
||||
.log-time-cell{
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.log-level-cell{
|
||||
width: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
td{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
.icon-info:before {
|
||||
.icon(@info-sign);
|
||||
color : dodgerblue;
|
||||
}
|
||||
|
||||
.icon-debug:before {
|
||||
.icon(@info-sign);
|
||||
color : gray;
|
||||
}
|
||||
|
||||
.icon-trace:before {
|
||||
.icon(@info-sign);
|
||||
color : lightgrey;
|
||||
}
|
||||
|
||||
.icon-warn:before {
|
||||
.icon(@exclamation-sign);
|
||||
color : orange;
|
||||
}
|
||||
|
||||
.icon-error:before {
|
||||
.icon(@bug);
|
||||
color : red;
|
||||
}
|
||||
|
||||
.icon-fatal:before {
|
||||
.icon(@remove-sign);
|
||||
color : purple;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ require.config({
|
|||
paths: {
|
||||
'backbone' : 'JsLibraries/backbone',
|
||||
'sugar' : 'JsLibraries/sugar',
|
||||
'moment' : 'JsLibraries/moment',
|
||||
'handlebars' : 'JsLibraries/handlebars.runtime',
|
||||
'handlebars.helpers' : 'JsLibraries/handlebars.helpers',
|
||||
'bootstrap' : 'JsLibraries/bootstrap',
|
||||
|
|
Loading…
Reference in New Issue