From 9bff9c69d6983dc190c189647821e12d0f134883 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Mon, 11 Jan 2010 22:16:31 +0100
Subject: finally and officially: webinterface home page working ;)

---
 module/web/templates/default/base.html   |  78 +++++++++----
 module/web/templates/default/home.html   | 195 ++++++++++++++++++++++++++-----
 module/web/templates/default/window.html |   2 +-
 3 files changed, 217 insertions(+), 58 deletions(-)

(limited to 'module/web/templates')

diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 6f9d5ff46..e4d11ce34 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -6,26 +6,45 @@
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/default.css">
-<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/jquery-ui-1.7.2.custom.css">
+<!--<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/jquery-ui-1.7.2.custom.css">-->
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/window.css">
-<script src="{{ MEDIA_URL }}js/jquery-1.3.2.min.js"></script>
-<!--<script src="{{ MEDIA_URL }}js/jquery-ui-1.7.2.custom.min.js"></script>-->
+<!--<script src="{{ MEDIA_URL }}js/jquery-1.3.2.min.js"></script>-->
 <script src="{{ MEDIA_URL }}js/sprintf.js"></script>
 <script src="{{ MEDIA_URL }}js/funktions.js"></script>
-<script src="{{ MEDIA_URL }}js/jquery.progressbar.js"></script>
-<script src="{{ MEDIA_URL }}js/jquery.form.js"></script>
+<script src="{{ MEDIA_URL }}js/mootools-1.2.4-core.js"></script>
+<script src="{{ MEDIA_URL }}js/mootools-1.2.4.2-more.js"></script>
+
+<!--<script src="{{ MEDIA_URL }}js/jquery.progressbar.js"></script>-->
+<!--<script src="{{ MEDIA_URL }}js/jquery.form.js"></script>-->
 
 <title>{% block title %}pyLoad Webinterface{% endblock %}</title>
 
 <script type="text/javascript">
-$(document).ready(function(){
-	$.getJSON('/json/status', LoadJsonToContent );
-	$('#add_form').ajaxForm(function() {
-		AddBox();
-	}); 
-});
+var add_bg,add_box
+document.addEvent("domready", function(){
+
+	add_bg = new Fx.Tween($('add_bg'));
+	add_box = new Fx.Tween($('add_box'));
 
+	new Form.Request("add_form", $('none_existent'), { onSuccess: function(){
+		out();
+		}});
 
+	$('add_reset').addEvent('click', function(){
+		out();
+	});
+	
+	var jsonStatus = new Request.JSON({
+		url: "json/status",
+		onSuccess: LoadJsonToContent,
+		initialDelay: 0,
+		delay: 4000,
+		limit: 30000
+	})
+	
+	jsonStatus.startTimer();
+	
+});
 
 /*function UpdateLinks( SetInver, index )
 {
@@ -35,30 +54,39 @@ $(document).ready(function(){
 
 function LoadJsonToContent(data)
 {
-	JSONDATA = data;
-	$("#speed").text(Math.round(data.speed*100)/100);
-	$("#aktiv").text(data.queue);
-	$("#queue").text(data.total);
+	$("speed").textContent = Math.round(data.speed*100)/100;
+	$("aktiv").textContent = data.queue;
+	$("queue").textContent = data.total;
+}
+function show(){
+	add_bg.set('opacity', 0);
+	$("add_bg").setStyle('display', 'block');
+	add_bg.start('opacity',0.8);
 	
-	setTimeout(function()
-   {
-    $.getJSON('/json/status', LoadJsonToContent );
-   }, 4000);
-	req.startTimer();
+	add_box.set('opacity', 0)
+	$("add_box").setStyle('display', 'block');
+	add_box.start('opacity',1)
+}
+
+function out(){
+	add_bg.start('opacity',0).chain(function(){
+		$('add_bg').setStyle('display', 'none');
+	});
 	
+	add_box.start('opacity',0).chain(function(){
+		$('add_box').setStyle('display', 'none');
+	});
 }
 
 function AddBox()
 {
-	if (!$("#add_box").is(":hidden"))
+	if ($("add_box").getStyle("display") == "hidden" || $("add_box").getStyle("display") == "none" || $("add_box").getStyle("opacity" == 0))
 	{
-		$("#add_box").fadeOut(800);
-		$("#add_bg").fadeOut(800);
+		show();
 	}
 	else
 	{
-		$("#add_box").fadeIn(800);
-		$("#add_bg").fadeIn(800);
+		out();
 	}
 }
 
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 %}
diff --git a/module/web/templates/default/window.html b/module/web/templates/default/window.html
index 7ef02e04a..daf305892 100644
--- a/module/web/templates/default/window.html
+++ b/module/web/templates/default/window.html
@@ -22,7 +22,7 @@
 <input type="file" name="add_file" id="add_file"  />
 
 <button type="submit">Add Package</button>
-<button style="margin-left:0px;" type="reset" onclick="AddBox();">Reset</button>
+<button id="add_reset" style="margin-left:0px;" type="reset">Reset</button>
 <div class="spacer"></div>
 
 </form>
-- 
cgit v1.2.3