finally and officially: webinterface home page working ;)

1 files changed, 163 insertions, 32 deletions

diff --git a/module/web/templates/default/home.html b/module/web/templates/default/home.html
index 96f3015d9..02681a23d 100644
--- a/module/web/templates/default/home.html
+++ b/module/web/templates/default/home.html
@@ -9,38 +9,167 @@
 	$("#aktiv_percent").text(parseInt($("#aktiv_percent").text)+1)

 	setTimeout( UpdateLinks( SetInver, index+1 ), SetInver[index]*1000);

 }*/

-$(document).ready(function(){

-	$.getJSON('/json/links', LinksToContent );

+var em;

+

+document.addEvent("domready", function(){

+	em = new EntryManager();

 });

 

-function LinksToContent(data)

-{

-	

-	$.each(data, function(i,item)

-	{

-		//$("#LinksAktiv").append('<tr id="link_'+item.id+'"><td id="link_'+item.id+'_name">'+item.name+'</td><td id="link_'+item.id+'_status">'+item.status+'</td><td>'+SecToRightTime(item.eta)+' @ '+Math.round(item.speed*100)/100+' kb/s</td><td>'+HumanFileSize(item.size)+'</td><td><font id="aktiv_percent">'+item.percent+'</font>% / '+HumanFileSize(item.size-item.kbleft)+'</td></tr>');

-		//SetInver[i] = (item.size / 100 ) / item.speed ;

-		//window.setInterval( $("#aktiv_percent").text(parseInt($("#aktiv_percent").text)+1), ((item.size / 100 ) / item.speed)*100);

-		//$("#LinksAktiv").append('<tr><td colspan="5"><div class="progress_bar" style="width: '+(100/item.size)*(item.size-item.kbleft)+'%;">&nbsp;</div></td></tr>');

-		//$(".progress_bar").animate({ width: "100%"}, (item.size / item.speed)*1000, "linear" );

-		//var width = (100/item.size)*(item.size-item.kbleft);

-		//alert(width);

-		//$(".link_"+item.id+"_pgb").animate({ width: +"%"}, /*(item.size / item.speed)*1000*/1500, "linear" );

-		//$("#link_"+item.id+"_pgb").fadeIn();

-		/*$("#link_"+item.id+"_pgb").progressBar();

-		$("#link_"+item.id+"_pgb").progressBar('option' , 'width' , '100%');

-		$("#link_"+item.id+"_pgb").progressBar('option' , 'showText' , true);

-		$("#link_"+item.id+"_pgb").progressBar('option' , 'textFormat' , 'percentage');*/

-		$("#link_"+item.id+"_pgb").progressBar((100/item.size)*(item.size-item.kbleft));

-		

+var EntryManager = new Class({

+    initialize: function(){

+        this.json = new Request.JSON({

+		url: "json/links",

+		onSuccess: this.update.bind(this),

+		initialDelay: 0,

+		delay: 2500,

+		limit: 30000

 	});

-	//UpdateLinks(SetInver, 0);

-	setTimeout(function()

-   {

-    $.getJSON('/json/links', LinksToContent );

-   }, 1000);

 	

-}

+        this.ids = [{% for link in content %}

+        {% if forloop.last %}

+            {{ link.id }}

+        {% else %}

+         {{ link.id }},

+        {% endif %}

+        {% endfor %}];

+        

+        this.entries = [];

+        this.container = $('LinksAktiv');

+        

+        this.parseFromContent();

+            

+        this.json.startTimer();

+    },

+    parseFromContent: function(){

+        this.ids.each(function(id,index){

+            entry = new LinkEntry(id)

+            entry.parse()

+            this.entries.push(entry)

+            }, this);

+    },

+    update: function(data){

+        

+        try{

+        this.ids = this.entries.map(function(item){

+            return item.id

+            });

+        

+        this.ids.filter(function(id){

+            return !this.ids.contains(id)

+        },data).each(function(id){

+            index = this.ids.indexOf(id);

+            this.entries[index].remove();

+            this.entries = this.entries.remove(index);

+            this.ids = this.ids.remove(index);

+            }, this);

+        

+        data.links.each(function(link, i){

+            if (this.ids.contains(link.id)){

+                

+                index = this.ids.indexOf(link.id)

+                this.entries[index].update(link)

+            

+            }else{

+                entry = new LinkEntry(link.id);

+                entry.insert(link);

+                this.entries.push(entry);

+                this.ids.push(link.id);

+                this.container.adopt(entry.elements.tr,entry.elements.pgbTr);

+                entry.fade.start('opacity', 1);

+                entry.fadeBar.start('opacity', 1);

+                

+            }

+            }, this)

+        }catch(e){alert(e)}

+    }

+})

+

+

+var LinkEntry = new Class({

+        initialize: function(id){

+            this.id = id

+        },

+        parse: function(){

+            this.elements = {

+                tr: $("link_{id}".substitute({id: this.id})),

+                name: $("link_{id}_name".substitute({id: this.id})),

+                status: $("link_{id}_status".substitute({id: this.id})),

+                info: $("link_{id}_info".substitute({id: this.id})),

+                kbleft: $("link_{id}_kbleft".substitute({id: this.id})),

+                percent: $("link_{id}_percent".substitute({id: this.id})),

+                pgbTr: $("link_{id}_pgb_tr".substitute({id: this.id})),

+                pgb: $("link_{id}_pgb".substitute({id: this.id}))

+            }

+            this.initEffects();

+        },

+        insert: function(item){

+            try{

+            info = SecToRightTime(item.eta)+' @ '+Math.round(item.speed*100)/100+' kb/s' ;

+            

+            this.elements = {

+                tr: new Element('tr', {

+                'html': '',

+                'styles':{

+                    'opacity': 0

+                }

+                }),

+                name: new Element('td', {

+                'html': item.name

+                }),

+                status: new Element('td', {

+                'html': item.status

+                }),

+                info: new Element('td', {

+                'html': info

+                }),

+                kbleft: new Element('td', {

+                'html': HumanFileSize(item.size)

+                }),

+                percent: new Element('td', {

+                'html': item.percent+ '% / '+ HumanFileSize(item.size-item.kbleft)

+                }),

+                pgbTr: new Element('tr', {

+                'html':''

+                }),

+                pgb: new Element('div', {

+                'html': '&nbsp;',

+                'styles':{

+                    'height': '4px',

+                    'width': item.percent+'%',

+                    'background-color': '#ddd'

+                }

+                })

+            }

+            

+            this.elements.tr.adopt(this.elements.name,this.elements.status,this.elements.info,this.elements.kbleft,this.elements.percent);

+            this.elements.pgbTr.adopt(new Element('td',{'colspan':5}).adopt(this.elements.pgb));

+            this.initEffects();

+            }catch(e){

+                alert(e)

+            }

+        },

+        initEffects: function(){

+            this.bar = new Fx.Morph(this.elements.pgb, {unit: '%', duration: 3000, link: 'chain', fps:30});

+            this.fade = new Fx.Tween(this.elements.tr);

+            this.fadeBar = new Fx.Tween(this.elements.pgbTr);

+        },

+        update: function(item){

+                this.elements.name.set('text', item.name);

+                this.elements.status.set('text', item.status);

+                this.elements.info.set('text', SecToRightTime(item.eta)+' @ '+Math.round(item.speed*100)/100+' kb/s');

+                this.elements.kbleft.set('text', HumanFileSize(item.size));

+                this.elements.percent.set('text', item.percent+ '% / '+ HumanFileSize(item.size-item.kbleft));

+                this.bar.start({

+                    'width': item.percent,

+                    'background-color': [Math.round(120/100*item.percent),100,100].hsbToRgb().rgbToHex()

+                });

+        },

+        remove: function(){

+                this.fade.start('opacity',0).chain(function(){this.elements.tr.dispose();}.bind(this));

+                this.fadeBar.start('opacity',0).chain(function(){this.elements.pgbTr.dispose();}.bind(this));

+

+        }

+    });

 </script>

 

 {% endblock %}

@@ -51,6 +180,7 @@ Active Downloads
 

 {% block content %}

 <table width="100%" class="queue">

+    <thead>

   <tr class="header">

     <th>Name</th>

     <th>Status</th>

@@ -58,6 +188,7 @@ Active Downloads
     <th>Size</th>

     <th>Progress</th>

   </tr>

+    </thead>

   <tbody id="LinksAktiv">

   

   {% for link in content %}

@@ -66,11 +197,11 @@ Active Downloads
     <td id="link_{{ link.id }}_status">{{ link.status }}</td>

     <td id="link_{{ link.id }}_info">{{ link.info }}</td>

     <td id="link_{{ link.id }}_kbleft">{{ link.size }}</td>

-    <td id="link_{{ link.id }}_percent"><font id="link_{{ link.id }}_aktiv_percent">{{ link.percent }}</font>% / <font id="link_{{ link.id }}_aktiv_percent">{{ link.kbleft }}</font><a href="#" onclick="javascript:$('#pb1').progressBar(50);">load</a></td>

+    <td id="link_{{ link.id }}_percent"><font id="link_{{ link.id }}_aktiv_percent">{{ link.percent }}</font>% / <font id="link_{{ link.id }}_aktiv_percent">{{ link.kbleft }}</font></td>

   </tr>

-  <tr>

-    <td colspan="5">

-        <span id="link_{{ link.id }}_pgb" class="progressBar" style="width: {{ link.percent }}%;"></span>

+  <tr id="link_{{ link.id }}_pgb_tr">

+    <td span="5">

+        <div id="link_{{ link.id }}_pgb" class="progressBar" style="background-color: green; height:4px; width: {{ link.percent }}%;">&nbsp;</div>

     </td>

   </tr>

   {% endfor %}