1 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Copyright 2008 Urs Wolfer <uwolfer @ kde.org>
6 This program is free software; you can redistribute it and/or
7 modify it under the terms of the GNU General Public License as
8 published by the Free Software Foundation; either version 2 of
9 the License, or (at your option) any later version.
11 This program is distributed in the hope that it will be useful,
12 but WITHOUT ANY WARRANTY; without even the implied warranty of
13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14 GNU General Public License for more details.
16 You should have received a copy of the GNU General Public License
17 along with this program. If not, see <http://www.gnu.org/licenses/>.
19 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"en" lang=
"en">
21 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
22 <link rel=
"icon" href=
"favicon.ico" />
23 <title>#{KGet Webinterface}
</title>
24 <script type=
"text/javascript" src=
"mootools-core-yc.js"></script>
25 <script type=
"text/javascript" src=
"mootools-more.js"></script>
26 <script type=
"text/javascript">
28 window
.addEvent('domready', function() {
29 var slide
= new Fx
.Slide('settings-container').hide();
30 function refreshList() {
31 var request
= new Request
.JSON({url
: 'data.json',
33 onComplete: function(jsonObj
) {
34 listDownloads(jsonObj
.downloads
);
38 refreshList(); // load it at start
40 function doAction(action
, data
) {
41 var log
= $('log-res').empty().addClass('ajax-loading');
42 var parameters
= new Object();
44 if ((typeof data
).toLowerCase() == 'string')
45 parameters
['data'] = data
;
49 parameters
['action'] = action
;
51 var addRequest
= new Request
.HTML({url
: 'do',
53 onComplete: function() {
54 log
.removeClass('ajax-loading');
59 var listDownloads = function(downloads
) {
60 var downloadsList
= $('downloads-list').empty();
61 var table
= new Element('table', {'id': 'download-list-table'});
64 var headertr
= new Element('tr', {'id': 'download-list-table-header'}).injectInside(table
);
65 var headernumber
= new Element('td', {'class': 'download-left', 'html': '#{Nr}'}).injectInside(headertr
);
66 var headername
= new Element('td', {'class': 'download-left', 'html': '#{File name}'}).injectAfter(headernumber
);
67 var headersize
= new Element('td', {'html': 'Size'}).injectAfter(headername
);
68 var headerprogress
= new Element('td', {'class': 'download-center', 'html': '#{Finished}'}).injectAfter(headersize
);
69 var headerspeed
= new Element('td', {'class': 'download-center', 'html': '#{Speed}'}).injectAfter(headerprogress
);
70 var headerstatus
= new Element('td', {'class': 'download-center', 'html': '#{Status}'}).injectAfter(headerspeed
);
71 var headerstartaction
= new Element('td', {'html': '#{Start}'}).injectAfter(headerstatus
);
72 var headerstopaction
= new Element('td', {'html': '#{Stop}'}).injectAfter(headerstartaction
);
73 var headerremoveaction
= new Element('td', {'html': '#{Remove}'}).injectAfter(headerstopaction
);
76 downloads
.each(function(download
) {
78 var toolTipText
= '<h1>' + download
.name
+ '</h1>#{Source:} ' + download
.src
+ '<br />#{Saving to:} ' + download
.dest
;
79 var tr
= new Element('tr', {'class': 'toolTip download-list-table-item', 'title': toolTipText
}).injectInside(table
);
80 var number
= new Element('td', {'class': 'download-number', 'html': ((i
< 10) ? '0' + i
: i
)}).injectInside(tr
);
81 var name
= new Element('td', {'class': 'download-left', 'html': download
.name
}).injectAfter(number
);
82 var size
= new Element('td', {'html': download
.size
}).injectAfter(name
);
83 var progress
= new Element('td', {'class': 'download-center', 'html': download
.progress
}).injectAfter(size
);
84 var speed
= new Element('td', {'class': 'download-center', 'html': download
.speed
}).injectAfter(progress
);
85 var status
= new Element('td', {'class': 'download-center', 'html': download
.status
}).injectAfter(speed
);
86 var startaction
= new Element('td').injectAfter(status
);
87 var start
= new Element('a', {'href': '#', 'html': '#{Start}'}).injectInside(startaction
);
88 start
.addEvent('click', function(e
) {
89 e
= new Event(e
).stop();
90 doAction('start', download
.src
);
92 var stopaction
= new Element('td').injectAfter(startaction
);
93 var stop
= new Element('a', {'href': '#', 'html': '#{Stop}'}).injectInside(stopaction
);
94 stop
.addEvent('click', function(e
) {
95 e
= new Event(e
).stop();
96 doAction('stop', download
.src
);
98 var removeaction
= new Element('td').injectAfter(stopaction
);
99 var remove
= new Element('a', {'href': '#', 'html': '#{Remove}'}).injectInside(removeaction
);
100 remove
.addEvent('click', function(e
) {
101 e
= new Event(e
).stop();
102 doAction('remove', download
.src
);
104 var spacer
= new Element('tr', {'class': 'download-list-table-spacer'}).injectAfter(tr
);
105 var spacertd
= new Element('td').injectInside(spacer
);
107 table
.inject(downloadsList
);
109 var toolTips
= new Tips($$('.toolTip'), {
110 className
: 'tool-tip'
114 $('load-downloads').addEvent('click', function(e
) {
115 e
= new Event(e
).stop();
119 $('new-download-form').addEvent('submit', function(e
) {
121 doAction('add', {'data': $('url').value
, 'group': $('group').value
});
125 $('settings-form').addEvent('submit', function(e
) {
128 var interval
= parseInt($('interval').value
);
129 if ($('enable-refresh').checked
&& interval
>= 1)
130 updateTimer
= refreshList
.periodical(interval
* 1000);
131 var slide
= new Fx
.Slide('settings-container').toggle();
134 $('settings').addEvent('click', function(e
) {
135 e
= new Event(e
).stop();
136 var slide
= new Fx
.Slide('settings-container').toggle();
138 var updateTimer
= refreshList
.periodical(10000);
142 <style type=
"text/css">
144 font-family: sans-serif
;
147 background-color: #E8E8E8;
149 a
, a:active
, a:hover
, a:visited
{
150 text-decoration: none
;
160 border: 1px solid
#B8B8B8;
170 border-bottom: 1px solid
#B8B8B8;
172 #background-top-left, #background
-top
-right
{
175 background-color: #CECECE;
179 border-bottom: 1px solid
#bdbdbd;
181 html
>body
#background
-top
-left
, html
>body
#background
-top
-right
{
184 #background-top-left {
187 #background-top-right {
193 border: 1px solid
#bdbdbd;
198 background: url
(header-background
.png
) repeat-x
;
222 background: url
(header-separator
.png
) repeat-y
;
230 background: url
(new-download-background
.png
) repeat-x
;
233 vertical-align:bottom
;
236 overflow: hidden
; /* workaround for IE */
238 html
>body #new-download
{
245 background: url
(title-border-bottom-downloads
.png
) no-repeat
;
248 background: url
(title-border-bottom-settings
.png
) no-repeat
;
250 #h2-downloads, #h2-settings
{
251 background-position: bottom left
;
259 background-color: #FFFFFF;
263 html
>body #download-list
{
266 #settings-container {
269 background-color: #F2F0E7;
270 border-bottom: 1px dotted
#b3b3b3;
279 #download-list-table {
281 border-collapse: collapse
;
283 .download-list-table-item td {
285 border-top: 1px dotted black
;
286 border-bottom: 1px dotted black
;
288 vertical-align: middle
;
290 .download-list-table-item:hover {
291 background-color: #efefef;
293 #download-list-table-header td
{
296 .download-list-table-spacer td {
306 background-color: #EFEFEF;
315 background-color: #DADADA;
319 border-top: 1px solid
#bdbdbd;
325 border: 1px solid
#B0B7C5;
326 background-color: #FFFFFF;
330 background-color: #f1f1f2;
339 <script type=
"text/javascript">
341 /* IE hack for transparent PNGs */
342 if (navigator
.userAgent
.toLowerCase().indexOf('msie') >= 1) {
343 document
.writeln('<style type="text/css">.header-action img, #logo img { behavior: url("iepngfix.htc") }</style>');
349 <div id=
"background-top-left"></div>
350 <div id=
"background-top-right"></div>
354 <img src=
"hi64-apps-kget.png" alt=
"KGet" />
357 <p>KGet
<br /><small>#{Webinterface}
</small></p>
359 <div id=
"header-actions">
360 <div class=
"header-action" id=
"settings"><img src=
"preferences-system.png" alt=
"#{Settings}" /><br />Settings
</div>
361 <div class=
"header-action" id=
"load-downloads"><img src=
"view-refresh.png" alt=
"#{Refresh}" /><br />Refresh
</div>
364 <div id=
"new-download">
365 <form id=
"new-download-form" action=
"do" method=
"post">
366 <p><label for=
"url">#{Enter URL: }
</label><input type=
"text" name=
"url" id=
"url" value=
"" /> <select name=
"group" id=
"group">#{groups}
</select> <input type=
"submit" value=
"#{OK}" class=
"input-button" /></p>
369 <div id=
"log-res"></div>
372 <div id=
"download-list">
373 <div id=
"settings-container">
374 <h2 id=
"h2-settings">#{Settings}
</h2>
375 <form id=
"settings-form" action=
"#" method=
"post">
376 <div id=
"settings-form-box">
377 <input type=
"checkbox" name=
"enable-refresh" id=
"enable-refresh" checked=
"checked" class=
"input-checkox" />
378 <label for=
"enable-refresh"> #{Refresh download list every}
</label>
379 <input type=
"text" name=
"interval" id=
"interval" value=
"10" />
380 <label for=
"interval"> #{seconds}
</label>
381 <input type=
"submit" value=
"#{Save Settings}" class=
"input-button" />
386 <h2 id=
"h2-downloads">#{Downloads}
</h2>
387 <div id=
"downloads-list">
391 #{KGet Webinterface | Valid XHTML
1.0 Strict
& CSS}