new config page, mootools 1.3, removed old templates

1 files changed, 233 insertions, 196 deletions

diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index 0ef9ce9f4..69ab39292 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -1,217 +1,254 @@
 {% extends 'default/base.html' %}
-{% load i18n %}
-{% load contains %}
-{% load quotepath %}
 
-{% block title %}{% trans "Config" %} - {{block.super}} {% endblock %}
-{% block subtitle %}{% trans "Config" %}{% endblock %}
+{% block title %}{{ _("Config") }} - {{ super() }} {% endblock %}
+{% block subtitle %}{{ _("Config") }}{% endblock %}
 
 {% block head %}
-<script type="text/javascript">
-    window.addEvent('domready', function()
-    {
-        $$('#toptabs a').addEvent('click', function(e)
-        {
-            $$('#toptabs a').removeProperty('class');
-            e.target.set('class', 'selected');
-
-            $$('#tabs span').removeProperty('class');
-            $('g_'+e.target.get('href').substring(1)).set('class', 'selected');
-
-            var firstsel = $$('#tabs span.selected a')[0];
-            firstsel.fireEvent('click', {target: firstsel});
-            return false;
+    <script type="text/javascript" src="/media/default/js/tinytab.js"></script>
+    <script type="text/javascript" src="/media/default/js/MooDropMenu.js"></script>
+    <script type="text/javascript" src="/media/default/js/settings_ui.js"></script>
+
+    <script type="text/javascript">
+        window.addEvent('domready', function() {
+
+            account_dialog = new Fx.Tween($("account_box"));
+
+            new TinyTab($$('#toptabs li a'), $$('#tabs-body > span'));
+
+            $$('ul.nav').each(function(nav) {
+                var dropMenu = new MooDropMenu(nav, {
+                            onOpen: function(el) {
+                                el.fade('in')
+                            },
+                            onClose: function(el) {
+                                el.fade('out');
+                            },
+                            onInitialize: function(el) {
+                                el.fade('hide').set('tween', {duration:500});
+                            }
+                        });
+            });
+
+            new SettingsUI();
         });
 
-	$$('#tabs a').addEvent('click', function(e)
-        {
-            $$('#tabs a').removeProperty('class');
-            e.target.set('class', 'selected');
 
-            $$('div.tabContent').set('class', 'tabContent hide');
-            $(e.target.get('href').substring(1)).set('class', 'tabContent');
-            return false;
-        });
-
-        $$('#toptabs a')[0].set('class', 'selected');
-        $$('#tabs span')[0].set('class', 'selected');
-
-        var firstsel = $$('#tabs span.selected a')[0];
-        firstsel.fireEvent('click', {target: firstsel});
-    });
-
-    
-</script>
+    </script>
 
 {% endblock %}
 
 {% block menu %}
-<li>
-    <a href="/" title=""><img src="{{ MEDIA_URL }}img/head-menu-home.png" alt="" /> {% trans "Home" %}</a>
-</li>
-<li>
-    <a href="/queue/" title=""><img src="{{ MEDIA_URL }}img/head-menu-queue.png" alt="" /> {% trans "Queue" %}</a>
-</li>
-<li>
-    <a href="/collector/" title=""><img src="{{ MEDIA_URL }}img/head-menu-collector.png" alt="" /> {% trans "Collector" %}</a>
-</li>
-<li>
-    <a href="/downloads/" title=""><img src="{{ MEDIA_URL }}img/head-menu-development.png" alt="" /> {% trans "Downloads" %}</a>
-</li>
-<li class="right">
-    <a href="/logs/"  class="action index" accesskey="x" rel="nofollow"><img src="{{ MEDIA_URL }}img/head-menu-index.png" alt="" />{% trans "Logs" %}</a>
-</li>
-<li class="right selected">
-    <a href="/settings/"  class="action index" accesskey="x" rel="nofollow"><img src="{{ MEDIA_URL }}img/head-menu-config.png" alt="" />{% trans "Config" %}</a>
-</li>
+    <li>
+        <a href="/" title=""><img src="/media/default/img/head-menu-home.png" alt=""/> {{ _("Home") }}</a>
+    </li>
+    <li>
+        <a href="/queue/" title=""><img src="/media/default/img/head-menu-queue.png" alt=""/> {{ _("Queue") }}</a>
+    </li>
+    <li>
+        <a href="/collector/" title=""><img src="/media/default/img/head-menu-collector.png"
+                                            alt=""/> {{ _("Collector") }}</a>
+    </li>
+    <li>
+        <a href="/downloads/" title=""><img src="/media/default/img/head-menu-development.png"
+                                            alt=""/> {{ _("Downloads") }}</a>
+    </li>
+    <li class="right">
+        <a href="/logs/" class="action index" accesskey="x" rel="nofollow"><img
+                src="/media/default/img/head-menu-index.png" alt=""/>{{ _("Logs") }}</a>
+    </li>
+    <li class="right selected">
+        <a href="/settings/" class="action index" accesskey="x" rel="nofollow"><img
+                src="/media/default/img/head-menu-config.png" alt=""/>{{ _("Config") }}</a>
+    </li>
 {% endblock %}
 
 {% block content %}
-    
-<ul id="toptabs" class="tabs">
-    {% for configname, config in conf.iteritems  %}
-        <li><a href="#{{configname}}">{{configname}}</a></li>
-    {% endfor %}
-</ul>
-
-<div id="tabsback">
-    <ul id="tabs" class="tabs">
-        {% for configname, config in conf.iteritems  %}
-            <span id="g_{{configname}}">
-				{% ifnotequal configname "Accounts" %}
-					{% for skey, section in config.iteritems  %}
-					    <li><a href="#{{configname}}{{skey}}">{{section.desc}}</a></li>
-					{% endfor %}
-				{% else %}
-					{% for skey, section in config.iteritems  %}
-					    <li><a href="#{{configname}}{{skey}}">{{skey}}</a></li>
-					{% endfor %}
-				{% endifnotequal %}
-            </span>
-        {% endfor %}
+
+    <ul id="toptabs" class="tabs">
+            <li><a class="selected" href="#">{{ _("General") }}</a></li>
+            <li><a href="#">{{ _("Plugins") }}</a></li>
+            <li><a href="#">{{ _("Accounts") }}</a></li>
     </ul>
-</div>
-<form id="horizontalForm" action="" method="POST" autocomplete="off">
-{% for configname, config in conf.iteritems  %}
-	{% ifnotequal configname "Accounts" %}
-    {% for skey, section in config.iteritems  %}
-        <div class="tabContent" id="{{configname}}{{skey}}">
-            <table class="settable">
-                {% for okey, option in section.items %}
-                    {% ifnotequal okey "desc" %}
-                        <tr>
-                            <td><label for="{{configname}}|{{skey}}|{{okey}}" style="color:#424242;">{{option.desc}}:</label></td>
-                            <td>
-                                {% ifequal option.type "bool" %}
-                                    <select id="{{skey}}|{{okey}}" name="{{configname}}|{{skey}}|{{okey}}">
-                                        <option {% if option.value %} selected="selected" {% endif %}value="True">{% trans "on" %}</option>
-                                        <option {% if not option.value %} selected="selected" {% endif %}value="False">{% trans "off" %}</option>
-                                    </select>
-                                {% else %}
-                                    {% if option.type|contains:";" %}
-                                        <select id="{{skey}}|{{okey}}" name="{{configname}}|{{skey}}|{{okey}}">
-                                            {% for entry in option.list %}
-                                                <option {% ifequal option.value entry %} selected="selected" {% endifequal %}>{{entry}}</option>
-                                            {% endfor %}
-                                        </select>
-                                    {% else %}
-                                        {% ifequal option.type "folder" %}
-                                            <input name="{{configname}}|{{skey}}|{{okey}}" type="text" id="{{skey}}|{{okey}}" value="{{option.value}}"/>
-		                                    <input name="browsebutton" type="button" onclick="ifield = document.getElementById('{{skey}}|{{okey}}'); pathchooser = window.open('{% if option.value %}{% url path option.value|quotepath %}{% else %}{% url pathroot %}{% endif %}', 'pathchooser', 'scrollbars=yes,toolbar=no,menubar=no,statusbar=no,width=650,height=300'); pathchooser.ifield = ifield; window.ifield = ifield;" value="{% trans "Browse" %}"/>
-                                        {% else %}
-                                            {% ifequal option.type "file" %}
-                                            <input name="{{configname}}|{{skey}}|{{okey}}" type="text" id="{{skey}}|{{okey}}" value="{{option.value}}"/>
-		                                    <input name="browsebutton" type="button" onclick="ifield = document.getElementById('{{skey}}|{{okey}}'); filechooser = window.open('{% if option.value %}{% url file option.value|quotepath %}{% else %}{% url fileroot %}{% endif %}', 'filechooser', 'scrollbars=yes,toolbar=no,menubar=no,statusbar=no,width=650,height=300'); filechooser.ifield = ifield; window.ifield = ifield;" value="{% trans "Browse" %}"/>
-                                            {% else %}
-                                                <input id="{{skey}}|{{okey}}" name="{{configname}}|{{skey}}|{{okey}}" type="text" value="{{option.value}}"/>
-                                            {% endifequal %}
-                                        {% endifequal %}
-                                    {% endif %}
-                                {% endifequal %}
-                            </td>
-                        </tr>
-                    {% endifnotequal %}
-                {% endfor %}
-            </table>
-        </div>
-    {% endfor %}
-	{% else %}
-	<!-- Accounts -->	
-	{% for plugin, accounts in config.iteritems  %}
-        <div class="tabContent" id="{{configname}}{{plugin}}">
-            <table class="settable">
-                {% for account in accounts %}         
+
+    <div id="tabsback" style="height: 20px; padding-left: 150px; color: white; font-weight: bold;">
+
+    </div>
+
+        <span id="tabs-body">
+            <!-- General -->
+            <span id="general" class="active tabContent">
+                <ul class="nav tabs">
+                    <li class>
+                        <a>Menu</a>
+                        <ul id="general-menu">
+                            {% for entry,name in conf.general %}
+                                <nobr>
+                                    <li id="general|{{ entry }}">{{ name }}</li>
+                                </nobr>
+                                <br>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                </ul>
+
+                <form id="general_form" action="" method="POST" autocomplete="off">
+                    <span id="general_form_content">
+                    <br>
+                    <h3>&nbsp;&nbsp; {{ _("Choose a section from the menu") }}</h3>
+                    <br>
+                    </span>
+
+                  <input id="general|submit" class="styled_button" type="submit" value="{{_("Submit")}}"/>
+                </form>
+            </span>
+
+            <!-- Plugins -->
+            <span id="plugins" class="tabContent">
+                <ul class="nav tabs">
+                    <li class>
+                        <a>Menu</a>
+                        <ul id="plugin-menu">
+                            {% for entry,name in conf.plugin %}
+                                <nobr>
+                                    <li id="plugin|{{ entry }}">{{ name }}</li>
+                                </nobr>
+                                <br>
+                            {% endfor %}
+                        </ul>
+                    </li>
+                </ul>
+
+
+                 <form id="plugin_form" action="" method="POST" autocomplete="off">
+
+                     <span id="plugin_form_content">
+                    <br>
+                    <h3>&nbsp;&nbsp; {{ _("Choose a section from the menu") }}</h3>
+                    <br>
+                         </span>
+                     <input id="plugin|submit" class="styled_button" type="submit" value="{{_("Submit")}}"/>
+                </form>
+
+            </span>
+
+            <!-- Accounts -->
+            <span id="accounts" class="tabContent">
+            <form id="account_form" action="/json/update_accounts" method="POST">
+
+                        <table class="settable wide">
+
+                        <thead>
                         <tr>
-                            <td><label for="{{configname}}|{{plugin}}|password;{{account.login}}" style="color:#424242;">{{account.login}}:</label></td>
-                            <td>
-							<input id="{{plugin}}|password;{{account.login}}" name="{{configname}}|{{plugin}}|password;{{account.login}}" type="password" value="{{account.password}}" size="14"/>
-                            </td>
-                            <td>
-                            {% trans "Status:" %}
-                            {% if account.valid %}
-                                <span style="font-weight: bold; color: #006400;">
-                                {% trans "valid"  %}
-                            {% else %}
-                                <span style="font-weight: bold; color: #8b0000;">
-                                {% trans "not valid"  %}
-                            {% endif %}
-                            </span>
-                            </td>
-                            <td>
-                            {% trans "Valid until:" %}
-                            <span style="font-weight: bold;">
-                            {{ account.validuntil }}
-                            </span>
-                            </td>
-                            <td>
-                            {% trans "Traffic left:" %}
-                            <span style="font-weight: bold;">
-                            {{ account.trafficleft }}
-                            </span>
-                            </td>
-                            <td>
-                            {% trans "Time:" %}
-                            <input id="{{configname}}|{{plugin}}|time;{{account.login}}" name="{{configname}}|{{plugin}}|time;{{account.login}}" type="text" size="7" value="{{account.time}}"/>
-                            </td>
-                            <td>
-                                {% trans "Delete? " %}
-                                <input id="{{configname}}|{{plugin}}|delete;{{account.login}}" name="{{configname}}|{{plugin}}|delete;{{account.login}}" type="checkbox" value="True"/>
-                            </td>
+                            <th>{{ _("Plugin") }}</th>
+                            <th>{{ _("Name") }}</th>
+                            <th>{{ _("Password") }}</th>
+                            <th>{{ _("Status") }}</th>
+                            <th>{{ _("Premium") }}</th>
+                            <th>{{ _("Valid until") }}</th>
+                            <th>{{ _("Traffic left") }}</th>
+                            <th>{{ _("Time") }}</th>
+                            <th>{{ _("Delete?") }}</th>
                         </tr>
-												
-                {% endfor %}
-				<tr><td>&nbsp;</td></tr>
-				
-				<tr>
-					<td><label for="{{configname}}|{{plugin}}|{{account.login}}" style="color:#424242;">{% trans "New account:" %}</label></td>
-                            
-					<td>
-						<input id="{{plugin}}|newacc" name="{{configname}}|{{plugin}}|newacc" type="text" size="14"/>
-					</td>
-				</tr>
-				<tr>
-					<td><label for="{{configname}}|{{plugin}}|{{account.name}}" style="color:#424242;">{% trans "New password:" %}</label></td>
-                            
-					<td>
-						<input id="{{configname}}|{{plugin}}" name="{{configname}}|{{plugin}}|newpw" type="password" size="14"/>
-					</td>
-				</tr>	
-				
-            </table>
-        </div>
-    {% endfor %}
-	
-	{% endifnotequal %}
-{% endfor %}
-{% if conf %}
-<input class="submit" type="submit" value="{% trans "Submit" %}" />
-</form>
+                        </thead>
+
+                         {% for plugin, accounts in conf.accs.iteritems() %}
+
+
+                            {% for account in accounts %}
+                                       <tr>
+                                            <td>
+                                                <span style="padding:5px">{{ plugin }}</span>
+                                            </td>
+                                       
+                                           <td><label for="{{plugin}}|password;{{account.login}}"
+                                                      style="color:#424242;">{{ account.login }}</label></td>
+                                           <td>
+                                               <input id="{{plugin}}|password;{{account.login}}"
+                                                      name="{{plugin}}|password;{{account.login}}"
+                                                      type="password" value="{{account.password}}" size="14"/>
+                                           </td>
+                                           <td>
+                                               {% if account.valid %}
+                                                   <span style="font-weight: bold; color: #006400;">
+                                                   {{ _("valid") }}
+                                               {% else %}
+                                                   <span style="font-weight: bold; color: #8b0000;">
+                                                   {{ _("not valid") }}
+                                               {% endif %}
+                                               </span>
+                                           </td>
+                                          <td>
+                                               {% if account.premium %}
+                                                   <span style="font-weight: bold; color: #006400;">
+                                                   {{ _("yes") }}
+                                               {% else %}
+                                                   <span style="font-weight: bold; color: #8b0000;">
+                                                   {{ _("no") }}
+                                               {% endif %}
+                                               </span>
+                                           </td>
+                                           <td>
+                                   <span style="font-weight: bold;">
+                                   {{ account.validuntil }}
+                                   </span>
+                                           </td>
+                                           <td>
+                                   <span style="font-weight: bold;">
+                                   {{ account.trafficleft }}
+                                   </span>
+                                           </td>
+                                           <td>
+                                               <input id="{{plugin}}|time;{{account.login}}"
+                                                      name="{{plugin}}|time;{{account.login}}" type="text"
+                                                      size="7" value="{{account.time}}"/>
+                                           </td>
+                                           <td>
+                                               <input id="{{plugin}}|delete;{{account.login}}"
+                                                      name="{{plugin}}|delete;{{account.login}}" type="checkbox"
+                                                      value="True"/>
+                                           </td>
+                                       </tr>
+                                    {% endfor %}
+                                {% endfor %}
+                            </table>
+
+
+            <button id="account_submit" type="submit" class="styled_button">{{_("Submit")}}</button>
+            <button id="account_add" style="margin-left: 0" type="submit" class="styled_button">{{_("Add")}}</button>
+            </form>
+            </span>
+        </span>
+
+
+<div id="account_box" class="myform window_box" style="z-index: 2">
+<form id="add_account_form" action="/json/add_account" method="POST" enctype="multipart/form-data">
+<h1>{{_("Add Account")}}</h1>
+<p>{{_("Enter your account data to use premium features.")}}</p>
+<label for="account_login">{{_("Login")}}
+<span class="small">{{_("Your username.")}}</span>
+</label>
+<input id="account_login" name="account_login" type="text" size="20" />
+
+<label for="account_password">{{_("Password")}}
+<span class="small">The password for this account.</span>
+</label>
+<input id="account_password" name="account_password" type="text" size="20" />
+
+<label for="account_type">{{_("Type")}}
+<span class="small">{{_("Choose the hoster for your account.")}}</span>
+</label>
+    <select name=account_type id="account_type">
+        {% for type in conf.accs.iterkeys()|sort %}
+            <option value="{{ type }}">{{ type }}</option>
+        {% endfor %}
+    </select>
 
-<br>
-{% for message in errors %}
-<b>{{message}}</b><br>
-{% endfor %}
 
-{% endif %}
+<button id="account_add_button" type="submit">{{_("Add")}}</button>
+<button id="account_reset" style="margin-left: 0" type="reset">{{_("Reset")}}</button>
+<div class="spacer"></div>
 
+</form>
+
+</div>
 {% endblock %}