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 <title>KGet Webinterface</title>
  23 <script type="text/javascript" src="mootools.js"></script>
  24 <script type="text/javascript">
  25 window.addEvent('domready', function() {
  26     function refreshList() {
  27         var request = new Request.JSON({url: 'data.json',
  28                 secure: false,
  29                 onComplete: function(jsonObj) {
  30                         listDownloads(jsonObj.downloads);
  31                 }
  32         }).send();
  33     }
  34     refreshList(); // load it at start
  35
  36     var listDownloads = function(downloads) {
  37         var downloadsList = $('downloadsList').empty();
  38         var table = new Element('table', {'id': 'downloadList'});
  39         downloads.each(function(download) {
  40                 var tr = new Element('tr').injectInside(table);
  41                 var name = new Element('td').setHTML(download.name).injectInside(tr);
  42                 var desc = new Element('td', {'class': 'center'}).setHTML(download.status).injectAfter(name);
  43                 var size = new Element('td', {'class': 'center'}).setHTML(download.size).injectAfter(desc);
  44                 var progress = new Element('td', {'class': 'center'}).setHTML(download.progress).injectAfter(size);
  45         });
  46         table.inject(downloadsList);
  47     }
  48
  49     $('loadDownloads').addEvent('click', function(e) {
  50         e = new Event(e).stop();
  51         refreshList();
  52     });
  53
  54     $('newDownloadForm').addEvent('submit', function(e) {
  55         new Event(e).stop();
  56         var log = $('log_res').empty().addClass('ajax-loading');
  57         var addRequest = new Request.HTML({url: 'add',
  58                 update: log,
  59                 onComplete: function() {
  60                 log.removeClass('ajax-loading');
  61                 $('url').value = '';
  62                 var slide = new Fx.Slide('newDownloadFormContainer').toggle();
  63                 refreshList();
  64             }}).get({'url': $('url').value})
  65     });
  66
  67     $('newDownload').addEvent('click', function(e) {
  68         e = new Event(e).stop();
  69         var slide = new Fx.Slide('newDownloadFormContainer').toggle();
  70     });
  71     var slide = new Fx.Slide('newDownloadFormContainer').hide(); // hide it at startup
  72 });
  73 </script>
  74 <style type="text/css">
  75 body {
  76     font-family: sans-serif;
  77 }
  78 #newDownloadFormContainer {
  79     padding: 10px;
  80 }
  81 #downloadList {
  82     width: 100%;
  83     font-size: 0.8em;
  84 }
  85 #downloadList .center {
  86     text-align: center;
  87     white-space: nowrap;
  88 }
  89 </style>
  90 </head>
  91 <body>
  92 <h2>KGet Webinterface</h2>
  93 <p><a href="#" title="Refresh List" id="loadDownloads">Refresh List</a> | <a href="#" title="New" id="newDownload">New Download</a></p>
  94
  95 <div id="newDownloadFormContainer">
  96     <form id="newDownloadForm" action="add" method="post">
  97         <div id="form_box">
  98             <div>
  99                 <p>URL:</p>
 100                 <input type="text" name="url" id="url" value="" />
 101             </div>
 102             <!--div>
 103                 <p>Group:</p>
 104                 <select name="new">
 105                     <option value="yes" selected="selected">yes</option>
 106                     <option value="no">no</option>
 107                 </select>
 108             </div-->
 109             <input type="submit" />
 110         </div>
 111     </form>
 112     <div id="log">
 113         <div id="log_res"></div>
 114     </div>
 115 </div>
 116
 117 <h3>Downloads</h3>
 118 <div id="downloadsList"></div>
 119
 120 </body>
 121 </html>