kget/extensions/webinterface/www/index.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <!--
   4 Copyright 2008 Urs Wolfer <uwolfer @ kde.org>
   5
   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.
  10
  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.
  15
  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/>.
  18 -->
  19 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  20 <head>
  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">
  27 //<![CDATA[
  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',
  32                 secure: false,
  33                 onComplete: function(jsonObj) {
  34                         listDownloads(jsonObj.downloads);
  35                 }
  36         }).send();
  37     }
  38     refreshList(); // load it at start
  39
  40     function doAction(action, data) {
  41         var log = $('log-res').empty().addClass('ajax-loading');
  42         var parameters = new Object();
  43
  44         if ((typeof data).toLowerCase() == 'string')
  45             parameters['data'] = data;
  46         else
  47             parameters = data;
  48
  49         parameters['action'] = action;
  50
  51         var addRequest = new Request.HTML({url: 'do',
  52                 update: log,
  53                 onComplete: function() {
  54                 log.removeClass('ajax-loading');
  55                 refreshList();
  56             }}).get(parameters)
  57     }
  58
  59     var listDownloads = function(downloads) {
  60         var downloadsList = $('downloads-list').empty();
  61         var table = new Element('table', {'id': 'download-list-table'});
  62
  63         // header
  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);
  74
  75         var i = 0;
  76         downloads.each(function(download) {
  77             i++;
  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);
  91             });
  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);
  97             });
  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);
 103             });
 104             var spacer = new Element('tr', {'class': 'download-list-table-spacer'}).injectAfter(tr);
 105             var spacertd = new Element('td').injectInside(spacer);
 106         });
 107         table.inject(downloadsList);
 108
 109         var toolTips = new Tips($$('.toolTip'), {
 110             className: 'tool-tip'
 111         });
 112     }
 113
 114     $('load-downloads').addEvent('click', function(e) {
 115         e = new Event(e).stop();
 116         refreshList();
 117     });
 118
 119     $('new-download-form').addEvent('submit', function(e) {
 120         new Event(e).stop();
 121         doAction('add', {'data': $('url').value, 'group': $('group').value});
 122         $('url').value = '';
 123     });
 124
 125     $('settings-form').addEvent('submit', function(e) {
 126         new Event(e).stop();
 127         $clear(updateTimer);
 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();
 132     });
 133
 134     $('settings').addEvent('click', function(e) {
 135         e = new Event(e).stop();
 136         var slide = new Fx.Slide('settings-container').toggle();
 137     });
 138     var updateTimer = refreshList.periodical(10000);
 139 });
 140 //]]>
 141 </script>
 142 <style type="text/css">
 143 body {
 144     font-family: sans-serif;
 145     font-size: 12px;
 146     margin: 0;
 147     background-color: #E8E8E8;
 148 }
 149 a, a:active, a:hover, a:visited {
 150     text-decoration: none;
 151     color: #000000;
 152 }
 153 #interval {
 154     width: 30px;
 155     text-align: center;
 156 }
 157 .tool-tip{
 158     color: #000000;
 159     z-index: 13000;
 160     border: 1px solid #B8B8B8;
 161     background: #F9F9F9;
 162 }
 163 .tool-tip h1 {
 164     font-weight: bold;
 165     font-size: 1.3em;
 166     margin: 0;
 167     color: #323232;
 168     padding: 2px;
 169     background: #DDDDDD;
 170     border-bottom: 1px solid #B8B8B8;
 171 }
 172 #background-top-left, #background-top-right {
 173     position: absolute;
 174     height: 55px;
 175     background-color: #CECECE;
 176     top: 0;
 177     width: 5%;
 178     z-index: -1;
 179     border-bottom: 1px solid #bdbdbd;
 180 }
 181 html>body #background-top-left, html>body #background-top-right {
 182     z-index: 1;
 183 }
 184 #background-top-left {
 185     left: 0;
 186 }
 187 #background-top-right {
 188     right: 0;
 189 }
 190 #container {
 191     width: 90%;
 192     margin: 0px auto;
 193     border: 1px solid #bdbdbd;
 194     border-top-width: 0;
 195 }
 196 #header {
 197     height: 81px;
 198     background: url(header-background.png) repeat-x;
 199     color: #FEFEFE;
 200 }
 201 #header a {
 202     color: #FEFEFE;
 203 }
 204 #logo {
 205     float: left;
 206     margin: 8px;
 207 }
 208 #logo-text {
 209     margin-top: 15px;
 210     margin-left: 5px;
 211     float: left;
 212     font-size: 1.8em;
 213 }
 214 #header-actions {
 215     float: right;
 216     height: 81px;
 217     width: 200px;
 218     text-align: center;
 219 }
 220 .header-action {
 221     padding: 5px;
 222     background: url(header-separator.png) repeat-y;
 223     height: 71px;
 224     float: right;
 225     width: 90px;
 226     cursor: pointer;
 227 }
 228 #new-download {
 229     height: 27px;
 230     background: url(new-download-background.png) repeat-x;
 231     padding: 3px;
 232     padding-top: 10px;
 233     vertical-align:bottom;
 234     padding-left: 8px;
 235     color: #000000;
 236     overflow: hidden; /* workaround for IE */
 237 }
 238 html>body #new-download {
 239     overflow: visible;
 240 }
 241 #url {
 242     width: 250px;
 243 }
 244 #h2-downloads {
 245     background: url(title-border-bottom-downloads.png) no-repeat;
 246 }
 247 #h2-settings {
 248     background: url(title-border-bottom-settings.png) no-repeat;
 249 }
 250 #h2-downloads, #h2-settings {
 251     background-position: bottom left;
 252     margin: 2px;
 253     margin-top: 14px;
 254     padding: 2px;
 255     padding-left: 20px;
 256 }
 257 #download-list {
 258     position: relative;
 259     background-color: #FFFFFF;
 260     min-height: 500px;
 261     padding: 1px;
 262 }
 263 html>body #download-list {
 264     padding: 0;
 265 }
 266 #settings-container {
 267     padding: 1px;
 268     padding-left: 0;
 269     background-color: #F2F0E7;
 270     border-bottom: 1px dotted #b3b3b3;
 271 }
 272 #settings-form-box {
 273     padding: 10px;
 274     padding-left: 20px;
 275 }
 276 #downloads-list {
 277     padding: 10px;
 278 }
 279 #download-list-table {
 280     width: 100%;
 281     border-collapse:collapse;
 282 }
 283 .download-list-table-item td {
 284     height: 40px;
 285     border-top: 1px dotted black;
 286     border-bottom: 1px dotted black;
 287     white-space: nowrap;
 288     vertical-align: middle;
 289 }
 290 .download-list-table-item:hover {
 291     background-color: #efefef;
 292 }
 293 #download-list-table-header td {
 294     height: 30px;
 295 }
 296 .download-list-table-spacer td {
 297     height: 6px;
 298 }
 299 .download-left {
 300     padding-left: 10px;
 301 }
 302 .download-center {
 303     text-align: center;
 304 }
 305 .download-number {
 306     background-color: #EFEFEF;
 307     color: #FF8800;
 308     font-size: 1.4em;
 309     text-align: center;
 310     font-weight: bold;
 311     width: 50px;
 312 }
 313 #footer {
 314     color: #000000;
 315     background-color: #DADADA;
 316     padding: 5px;
 317     font-size: 0.8em;
 318     text-align: center;
 319     border-top: 1px solid #bdbdbd;
 320 }
 321 img {
 322     border-width: 0;
 323 }
 324 input {
 325     border: 1px solid #B0B7C5;
 326     background-color: #FFFFFF;
 327 }
 328 .input-button {
 329     cursor: pointer;
 330     background-color: #f1f1f2;
 331 }
 332 .input-checkbox {
 333     border-width: 0;
 334 }
 335 p {
 336     margin: 0;
 337 }
 338 </style>
 339 <script type="text/javascript">
 340 //<![CDATA[
 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>');
 344 }
 345 //]]>
 346 </script>
 347 </head>
 348 <body>
 349 <div id="background-top-left"></div>
 350 <div id="background-top-right"></div>
 351 <div id="container">
 352     <div id="header">
 353         <div id="logo">
 354             <img src="hi64-apps-kget.png" alt="KGet" />
 355         </div>
 356         <div id="logo-text">
 357             <p>KGet<br /><small>#{Webinterface}</small></p>
 358         </div>
 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>
 362         </div>
 363     </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="" />&nbsp;<select name="group" id="group">#{groups}</select>&nbsp;<input type="submit" value="#{OK}" class="input-button" /></p>
 367         </form>
 368         <div id="log">
 369             <div id="log-res"></div>
 370         </div>
 371     </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>&nbsp;&nbsp;&nbsp;&nbsp;
 381                         <input type="submit" value="#{Save Settings}" class="input-button" />
 382                 </div>
 383             </form>
 384         </div>
 385
 386     <h2 id="h2-downloads">#{Downloads}</h2>
 387     <div id="downloads-list">
 388     </div>
 389     </div>
 390     <div id="footer">
 391         #{KGet Webinterface | Valid XHTML 1.0 Strict &amp; CSS}
 392     </div>
 393 </div>
 394 </body>
 395 </html>