From 9dc2f58872b9f170621bd583f73f9fe144238972 Mon Sep 17 00:00:00 2001
From: Wugy <wugy@mally-soft.com>
Date: Wed, 6 Jan 2010 22:14:56 +0100
Subject: Webinterface - AddBox
---
module/web/media/default/js/home.js | 409 +++++++++++-----------
module/web/media/default/js/jquery.progressbar.js | 8 +-
module/web/templates/default/base.html | 35 +-
module/web/templates/default/home.html | 4 -
module/web/templates/default/window.html | 37 +-
5 files changed, 252 insertions(+), 241 deletions(-)
(limited to 'module/web')
diff --git a/module/web/media/default/js/home.js b/module/web/media/default/js/home.js
index 025dcfcc7..61a1f60d0 100644
--- a/module/web/media/default/js/home.js
+++ b/module/web/media/default/js/home.js
@@ -1,205 +1,204 @@
-var dwProgressBar = new Class({
-
- //implements
- Implements: [Options],
-
- //options
- options: {
- container: $$('body')[0],
- boxID: '',
- percentageID: '',
- displayID: '',
- startPercentage: 0,
- displayText: false,
- speed: 10
- },
-
- //initialization
- initialize: function(options) {
- //set options
- this.setOptions(options);
- //create elements
- this.createElements();
- },
-
- //creates the box and percentage elements
- createElements: function() {
- var box = new Element('div', {
- id: this.options.boxID + this.options.id,
- 'class': this.options.boxID
- });
- var perc = new Element('div', {
- id: this.options.percentageID + this.options.id,
- 'style': 'width:0px;',
- 'class': this.options.percentageID
- });
- perc.inject(box);
- box.inject(this.options.container);
- if (this.options.displayText) {
- var text = new Element('div', {
- id: this.options.displayID + this.options.id,
- 'class': this.options.displayID
- });
- text.inject(this.options.container);
- }
- this.set(this.options.startPercentage);
- },
-
- //calculates width in pixels from percentage
- calculate: function(percentage) {
- return (document.id(this.options.boxID + this.options.id).getStyle('width').replace('px', '') * (percentage / 100)).toInt();
- },
-
- //animates the change in percentage
- animate: function(to) {
- document.id(this.options.percentageID + this.options.id).set('morph', {
- duration: this.options.speed,
- link: 'cancel'
- }).morph({
- width: this.calculate(to.toInt())
- });
- if (this.options.displayText) {
- document.id(this.options.displayID + this.options.id).set('text', to.toInt() + '%');
- }
- },
-
- //sets the percentage from its current state to desired percentage
- set: function(to) {
- this.animate(to);
- }
-
-});
-
-req = new Request.JSON({
- onSuccess: renderTable,
- method: 'get',
- url: '/json/links',
- initialDelay: 0,
- delay: 1000,
- limit: 20000
-});
-
-var dls = []
-var pbs = []
-
-function renderTable(data) {
-
- data.downloads.each(function(dl) {
-
- if (dls.contains(dl.id)) {
-
- var div = $('dl' + dl.id)
-
- pbs[dl.id].set(dl.percent)
-
- div.getChildren("b")[0].textContent = dl.name
-
- if (dl.status == "downloading") {
-
- size = Math.round((dl.size - dl.kbleft) / 1024) + "/" + Math.round(dl.size / 1024) + " MB";
- speed = Math.round(dl.speed) + " kb/s";
- eta = dl.eta;
-
- } else if (dl.status == "waiting") {
-
- size = "waiting " + dl.wait;
- speed = "";
- eta = "";
-
- }
- div.getChildren(".dlsize")[0].textContent = size;
- div.getChildren(".dlspeed")[0].textContent = speed;
- div.getChildren(".dltime")[0].textContent = eta;
-
- } else {
-
- dls.push(dl.id)
-
- container = $("dlcontainer")
-
- dldiv = new Element('div', {
- 'id': 'dl' + dl.id,
- 'class': 'download',
- 'styles': {
- 'display': 'None'
- }
- })
-
- new Element('p').inject(dldiv)
-
- new Element('b', {
- 'html': dl.name
- }).inject(dldiv)
-
- new Element('br').inject(dldiv)
-
- dldiv.inject(container)
-
- pbs[dl.id] = new dwProgressBar({
- container: $(dldiv),
- startPercentage: 0,
- speed: 1000,
- id: dl.id,
- boxID: 'box',
- percentageID: 'perc',
- displayText: true,
- displayID: 'boxtext'
- });
-
- new Element('div', {
- 'class': 'dlsize',
- 'html': Math.round((dl.size - dl.kbleft) / 1024) + "/" + Math.round(dl.size / 1024) + " MB"
- }).inject(dldiv)
-
- new Element('div', {
- 'class': 'dlspeed',
- 'html': Math.round(dl.speed) + " kb/s"
- }).inject(dldiv)
-
- new Element('div', {
- 'class': 'dltime',
- 'html': dl.eta
- }).inject(dldiv)
-
- //dldiv.dissolve({duration : 0})
- dldiv.reveal()
-
- }
- })
-
- dls.each(function(id, index) {
-
- if (data.ids.contains(id)) {
-
-} else {
-
- //$("dl"+id).reveal()
- dls.erase(id);
- $('dl' + id).nix()
-
- }
-
- })
-
-}
-
-window.addEvent('domready',
-function() {
-
- /*
-//create the progress bar for example 1
-pb = new dwProgressBar({
- container: $$('.level1 p')[0],
- startPercentage: 25,
- speed: 1000,
- id: 1,
- boxID: 'box',
- percentageID: 'perc',
- displayText: true,
- displayID: 'boxtext'
-});
-*/
-
- req.startTimer();
-
-});
\ No newline at end of file
+var dwProgressBar = new Class({
+
+ //implements
+ Implements: [Options],
+
+ //options
+ options: {
+ container: $$('body')[0],
+ boxID: '',
+ percentageID: '',
+ displayID: '',
+ startPercentage: 0,
+ displayText: false,
+ speed: 10
+ },
+
+ //initialization
+ initialize: function(options) {
+ //set options
+ this.setOptions(options);
+ //create elements
+ this.createElements();
+ },
+
+ //creates the box and percentage elements
+ createElements: function() {
+ var box = new Element('div', {
+ id: this.options.boxID + this.options.id,
+ 'class': this.options.boxID
+ });
+ var perc = new Element('div', {
+ id: this.options.percentageID + this.options.id,
+ 'style': 'width:0px;',
+ 'class': this.options.percentageID
+ });
+ perc.inject(box);
+ box.inject(this.options.container);
+ if (this.options.displayText) {
+ var text = new Element('div', {
+ id: this.options.displayID + this.options.id,
+ 'class': this.options.displayID
+ });
+ text.inject(this.options.container);
+ }
+ this.set(this.options.startPercentage);
+ },
+
+ //calculates width in pixels from percentage
+ calculate: function(percentage) {
+ return (document.id(this.options.boxID + this.options.id).getStyle('width').replace('px', '') * (percentage / 100)).toInt();
+ },
+
+ //animates the change in percentage
+ animate: function(to) {
+ document.id(this.options.percentageID + this.options.id).set('morph', {
+ duration: this.options.speed,
+ link: 'cancel'
+ }).morph({
+ width: this.calculate(to.toInt())
+ });
+ if (this.options.displayText) {
+ document.id(this.options.displayID + this.options.id).set('text', to.toInt() + '%');
+ }
+ },
+
+ //sets the percentage from its current state to desired percentage
+ set: function(to) {
+ this.animate(to);
+ }
+
+});
+/*
+req = new Request.JSON({
+ onSuccess: renderTable,
+ method: 'get',
+ url: '/json/links',
+ initialDelay: 0,
+ delay: 1000,
+ limit: 20000
+});
+*/
+var dls = []
+var pbs = []
+
+function renderTable(data) {
+
+ data.downloads.each(function(dl) {
+
+ if (dls.contains(dl.id)) {
+
+ var div = $('dl' + dl.id)
+
+ pbs[dl.id].set(dl.percent)
+
+ div.getChildren("b")[0].textContent = dl.name
+
+ if (dl.status == "downloading") {
+
+ size = Math.round((dl.size - dl.kbleft) / 1024) + "/" + Math.round(dl.size / 1024) + " MB";
+ speed = Math.round(dl.speed) + " kb/s";
+ eta = dl.eta;
+
+ } else if (dl.status == "waiting") {
+
+ size = "waiting " + dl.wait;
+ speed = "";
+ eta = "";
+
+ }
+ div.getChildren(".dlsize")[0].textContent = size;
+ div.getChildren(".dlspeed")[0].textContent = speed;
+ div.getChildren(".dltime")[0].textContent = eta;
+
+ } else {
+
+ dls.push(dl.id)
+
+ container = $("dlcontainer")
+
+ dldiv = new Element('div', {
+ 'id': 'dl' + dl.id,
+ 'class': 'download',
+ 'styles': {
+ 'display': 'None'
+ }
+ })
+
+ new Element('p').inject(dldiv)
+
+ new Element('b', {
+ 'html': dl.name
+ }).inject(dldiv)
+
+ new Element('br').inject(dldiv)
+
+ dldiv.inject(container)
+
+ pbs[dl.id] = new dwProgressBar({
+ container: $(dldiv),
+ startPercentage: 0,
+ speed: 1000,
+ id: dl.id,
+ boxID: 'box',
+ percentageID: 'perc',
+ displayText: true,
+ displayID: 'boxtext'
+ });
+
+ new Element('div', {
+ 'class': 'dlsize',
+ 'html': Math.round((dl.size - dl.kbleft) / 1024) + "/" + Math.round(dl.size / 1024) + " MB"
+ }).inject(dldiv)
+
+ new Element('div', {
+ 'class': 'dlspeed',
+ 'html': Math.round(dl.speed) + " kb/s"
+ }).inject(dldiv)
+
+ new Element('div', {
+ 'class': 'dltime',
+ 'html': dl.eta
+ }).inject(dldiv)
+
+ //dldiv.dissolve({duration : 0})
+ dldiv.reveal()
+
+ }
+ })
+
+ dls.each(function(id, index) {
+
+ if (data.ids.contains(id)) {
+
+} else {
+
+ //$("dl"+id).reveal()
+ dls.erase(id);
+ $('dl' + id).nix()
+
+ }
+
+ })
+
+}
+
+window.addEvent('domready',
+function() {
+
+ /*
+//create the progress bar for example 1
+pb = new dwProgressBar({
+ container: $$('.level1 p')[0],
+ startPercentage: 25,
+ speed: 1000,
+ id: 1,
+ boxID: 'box',
+ percentageID: 'perc',
+ displayText: true,
+ displayID: 'boxtext'
+});
+*/
+});
+
+
diff --git a/module/web/media/default/js/jquery.progressbar.js b/module/web/media/default/js/jquery.progressbar.js
index 7ddf4a558..e240109b4 100644
--- a/module/web/media/default/js/jquery.progressbar.js
+++ b/module/web/media/default/js/jquery.progressbar.js
@@ -26,11 +26,11 @@ USAGE:
width : 1000, // Width of the progressbar - don't forget to adjust your image too!!! // Image to use in the progressbar. Can be a single image too: 'images/progressbg_green.gif'
height : 12, // Height of the progressbar - don't forget to adjust your image too!!!
callback : null, // Calls back with the config object that has the current percentage, target percentage, current image, etc
- boxImage : '/media/img/progressbar.gif', // boxImage : image around the progress bar
+ boxImage : '/media/default/img/progressbar.gif', // boxImage : image around the progress bar
barImage : {
- 0: '/media/img/progressbg_red.gif',
- 30: '/media/img/progressbg_orange.gif',
- 70: '/media/img/progressbg_green.gif'
+ 0: '/media/default/img/progressbg_red.gif',
+ 30: '/media/default/img/progressbg_orange.gif',
+ 70: '/media/default/img/progressbg_green.gif'
},
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index ecaec98f2..cd0b85903 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -17,6 +17,7 @@
<script type="text/javascript">
$(document).ready(function(){
+ $.getJSON('/json/status', LoadJsonToContent );
$.getJSON('/json/links', LinksToContent );
});
@@ -38,7 +39,38 @@ function LoadJsonToContent(data)
setTimeout(function()
{
$.getJSON('/json/status', LoadJsonToContent );
- }, 2000);
+ }, 4000);
+ req.startTimer();
+
+}
+
+function AddBox()
+{
+ if (!$("#add_box").is(":hidden"))
+ {
+ $("#add_box").fadeOut(800);
+ $("#add_bg").fadeOut(800);
+ }
+ else
+ {
+ $("#add_box").fadeIn(800);
+ $("#add_bg").fadeIn(800);
+ }
+}
+
+function AddSubmit()
+{
+ $("#add_form").submit();
+ /*
+ $.post("/json/add_package", { links: $("#add_links").text() } );
+ return false;
+ if( $("#add_cf").val() != "" )
+ {
+ //$("#add_form").submit();
+ }
+ */
+ AddBox();
+
}
</script>
@@ -97,6 +129,7 @@ function LoadJsonToContent(data)
<li id="action_play"><a href="/json/unpause" class="action play" accesskey="o" rel="nofollow">Play</a></li>
<li id="action_stop"><a href="" class="action cancel" accesskey="o" rel="nofollow">Cancel</a></li>
<li id="action_stop"><a href="/json/pause" class="action stop" accesskey="o" rel="nofollow">Stop</a></li>
+ <li id="action_add"><a href="javascript:AddBox();" class="action stop" accesskey="o" rel="nofollow" >Add</a></li>
</ul>
{% endif %}
diff --git a/module/web/templates/default/home.html b/module/web/templates/default/home.html
index 12fa55539..49633f94a 100644
--- a/module/web/templates/default/home.html
+++ b/module/web/templates/default/home.html
@@ -3,10 +3,6 @@
{% block head %}
<script type="text/javascript">
-$(document).ready(function(){
- $.getJSON('/json/links', LinksToContent );
-});
-
/*function UpdateLinks( SetInver, index )
{
diff --git a/module/web/templates/default/window.html b/module/web/templates/default/window.html
index 602622719..ec4ca496a 100644
--- a/module/web/templates/default/window.html
+++ b/module/web/templates/default/window.html
@@ -1,28 +1,11 @@
-<div id="add_window" class="StickyWinInstance SWclearfix" style="overflow: visible;visibility: visible;display: none; position: absolute; z-index: 10000; opacity: 1; left: 0px; top: 0px;">
-<div class="DefaultStickyWin" style="width: 100px;">
-
-<div class="top">
-<div class="top_ul"></div>
-<div class="top_ur"><h1 class="caption dragHandle">Title</h1>
-</div></div>
-
-<div class="middle">
-<div class="body">Body here
-</div></div>
-
-<div class="closeBody">
-<div class="closeButtons">
-<a class="closeSticky button" id="button_id">Button</a><a class="closeSticky button">Close</a>
+<div id="add_bg" style="filter:alpha(opacity:80);KHTMLOpacity:0.80;MozOpacity:0.80;opacity:0.80; background:#000; width:100%; height: 100%; position:absolute; top:0px; left:0px; display:none;"> </div>
+<div id="add_box" style="left:50%; top:200px; margin-left: -450px; width: 900px; position: absolute; background: #FFF; padding: 10px 10px 10px 10px; display:none;">
+ <div style="width: 900px; text-align: right;"><b onclick="AddBox();">[Close]</b></div>
+ <h1>Add</h1>
+ <form id="add_form" action="" method="post" onsubmit="return AddSubmit();">
+ <textarea rows="5" style="width: 890px;" name="add_links" id="add_links"></textarea>
+ <br />
+ <input type="file" name="add_cf" id="add_cf" />
+ <input type="submit" value="Add Links" />
+ </form>
</div>
-</div>
-
-<div class="bottom">
-<div class="bottom_ll">
-</div>
-
-<div class="bottom_lr"></div>
-</div>
-<div class="closeButton closeSticky"></div>
-
-</div>
-</div>
\ No newline at end of file
--
cgit v1.2.3