q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Re-organization of the main page: mini graph is on top of download list (one click on it to enlarge / reduce it) + fixed message when nothing on download list.

Browse Source
This commit is contained in:
Florent Viard 2014-02-18 01:10:45 +01:00
parent b1da2b0a84
commit d3d9b6fd42
3 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/download.css
View File

@ -19,12 +19,15 @@
} }
.download-graph { .download-graph {
width: 80%; width: 30%;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.large-graph {
width: 80%;
}
.stats { .stats {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;

30
index.html
View File

@ -237,12 +237,26 @@
<!--}}} --> <!--}}} -->
<!-- {{{ downloads --> <!-- {{{ downloads -->
<div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit"> <!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">-->
<h3>Currently no downloads in line to display, use the Add download button to start downloading files!</h3> <div ng-show="!totalAria2Downloads()" class="hero-unit">
Currently no download in line to display, use the '<strong>Add</strong>' download button to start downloading files!
</div> </div>
<!-- {{{ global statistics -->
<h3 ng-show="totalAria2Downloads()">Global Statistics</h3>
<div ng-class="{'large-graph': large_graph}" class="download-graph"
dspeed="gstats.downloadSpeed"
uspeed="gstats.uploadSpeed"
dgraph ng-show="totalAria2Downloads()"
ng-click="large_graph = !large_graph">
</div>
<!-- }}} -->
<!-- {{{ download template --> <!-- {{{ download template -->
<h3 ng-show="totalAria2Downloads()">Download List</h3>
<form class="row" ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length"> <form class="row" ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length">
<fieldset> <fieldset>
@ -555,16 +569,7 @@
</div> </div>
<!-- }}} --> <!-- }}} -->
<!-- {{{ global statistics -->
<h3 ng-show="totalAria2Downloads()">Global Statistics</h3>
<div class="download-graph"
dspeed="gstats.downloadSpeed"
uspeed="gstats.uploadSpeed"
dgraph ng-show="totalAria2Downloads()">
</div>
<!-- }}} -->
</div> </div>
@ -820,5 +825,8 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
</div> </div>
<!-- }}} --> <!-- }}} -->
<!-- Bottom Padding -->
<br /><br /><br /><br /><br />
</body> </body>
</html> </html>

4
js/directives/dgraph.js
View File

@ -1,5 +1,5 @@
// graph takes dspeed and uspeed, it queries them every second and draws // graph takes dspeed and uspeed, it queries them every second and draws
// the last 20 secs, it also takes draw as an optional attribute and only // the last 180 secs, it also takes draw as an optional attribute and only
// draws the graph when it is true, if not given then graph is always drawn // draws the graph when it is true, if not given then graph is always drawn
angular angular
.module('webui.directives.dgraph', ['webui.filters.bytes', 'webui.services.deps']) .module('webui.directives.dgraph', ['webui.filters.bytes', 'webui.services.deps'])
@ -7,7 +7,7 @@ angular
return function(scope, elem, attrs) { return function(scope, elem, attrs) {
var canDraw = true; var canDraw = true;
var graphSize = 20 var graphSize = 180
, dspeed = 0, uspeed = 0 , dspeed = 0, uspeed = 0
, dconf = { , dconf = {
label: "Download Speed", label: "Download Speed",