Adminpage endlich

4 files changed, 452 insertions, 0 deletions

diff --git a/module/web/static/css/default/admin.less b/module/web/static/css/default/admin.less
new file mode 100644
index 000000000..8eaf172c6
--- /dev/null
+++ b/module/web/static/css/default/admin.less
@@ -0,0 +1,23 @@
+@import "style.less";

+

+/* 

+    Admin 

+*/

+

+.popover{

+  width: auto

+}

+.name{

+  position: absolute;

+  left:5px;

+  top: 15px;

+}

+#btn_newuser{

+  float: right;

+}

+#user_permissions{

+  float: right;

+}

+.userperm{

+  width: 115px;

+}
\ No newline at end of file
diff --git a/module/web/static/css/fontawesome-webfont.ttf b/module/web/static/css/fontawesome-webfont.ttf
new file mode 100644
index 000000000..43ff5bd4e
--- /dev/null
+++ b/module/web/static/css/fontawesome-webfont.ttf
diff --git a/module/web/static/css/fontawesome.css b/module/web/static/css/fontawesome.css
new file mode 100644
index 000000000..dcea48514
--- /dev/null
+++ b/module/web/static/css/fontawesome.css
@@ -0,0 +1,205 @@
+/*  Font Awesome 3.0
+    the iconiic font designed for use with Twitter Bootstrap
+    -------------------------------------------------------
+    The full suite of pictographic iconis, examples, and documentation
+    can be found at: http://fortawesome.github.com/Font-Awesome/
+
+    License
+    -------------------------------------------------------
+    • The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
+    • Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
+      http://opensource.org/licenses/mit-license.html
+    • The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
+    • Attribution is no longer required in Font Awesome 3.0, but much appreciated:
+      "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
+
+    Contact
+    -------------------------------------------------------
+    Email: dave@davegandy.com
+    Twitter: http://twitter.com/fortaweso_me
+    Work: Lead Product Designer @ http://kyruus.com
+
+    */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('fontawesome-webfont.eot');
+  src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
+    url('fontawesome-webfont.woff') format('woff'),
+    url('fontawesome-webfont.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+/*  Font Awesome styles
+    ------------------------------------------------------- */
+/* includes sprites.less reset */
+[class^="iconi-"],
+[class*=" iconi-"] {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  display: inline;
+  width: auto;
+  height: auto;
+  line-height: normal;
+  vertical-align: baseline;
+  background-image: none !important;
+  background-position: 0% 0%;
+  background-repeat: repeat;
+}
+[class^="iconi-"]:before,
+[class*=" iconi-"]:before {
+  text-decoration: inherit;
+  display: inline-block;
+  speak: none;
+}
+/* makes sure iconis active on rollover in links */
+a [class^="iconi-"],
+a [class*=" iconi-"] {
+  display: inline-block;
+}
+/* makes the font 33% larger relative to the iconi container */
+.iconi-large:before {
+  vertical-align: -10%;
+  font-size: 1.3333333333333333em;
+}
+.btn [class^="iconi-"],
+.nav [class^="iconi-"],
+.btn [class*=" iconi-"],
+.nav [class*=" iconi-"] {
+  display: inline;
+  /* keeps button heights with and without iconis the same */
+
+  line-height: .6em;
+}
+.btn [class^="iconi-"].iconi-spin,
+.nav [class^="iconi-"].iconi-spin,
+.btn [class*=" iconi-"].iconi-spin,
+.nav [class*=" iconi-"].iconi-spin {
+  display: inline-block;
+}
+li [class^="iconi-"],
+li [class*=" iconi-"] {
+  display: inline-block;
+  width: 1.25em;
+  text-align: center;
+}
+li [class^="iconi-"].iconi-large,
+li [class*=" iconi-"].iconi-large {
+  /* increased font size for iconi-large */
+
+  width: 1.5625em;
+}
+ul.iconis {
+  list-style-type: none;
+  text-indent: -0.75em;
+}
+ul.iconis li [class^="iconi-"],
+ul.iconis li [class*=" iconi-"] {
+  width: .75em;
+}
+.iconi-muted {
+  color: #eeeeee;
+}
+.iconi-border {
+  border: solid 1px #eeeeee;
+  padding: .2em .25em .15em;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.iconi-2x {
+  font-size: 2em;
+}
+.iconi-2x.iconi-border {
+  border-width: 2px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.iconi-3x {
+  font-size: 3em;
+}
+.iconi-3x.iconi-border {
+  border-width: 3px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+.iconi-4x {
+  font-size: 4em;
+}
+.iconi-8x {
+  font-size: 8em;
+}
+.iconi-4x.iconi-border {
+  border-width: 4px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+}
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+[class^="iconi-"].pull-left,
+[class*=" iconi-"].pull-left {
+  margin-right: .35em;
+}
+[class^="iconi-"].pull-right,
+[class*=" iconi-"].pull-right {
+  margin-left: .35em;
+}
+.btn [class^="iconi-"].pull-left.iconi-2x,
+.btn [class*=" iconi-"].pull-left.iconi-2x,
+.btn [class^="iconi-"].pull-right.iconi-2x,
+.btn [class*=" iconi-"].pull-right.iconi-2x {
+  margin-top: .35em;
+}
+.btn [class^="iconi-"].iconi-spin.iconi-large,
+.btn [class*=" iconi-"].iconi-spin.iconi-large {
+  height: .75em;
+}
+.btn.btn-small [class^="iconi-"].pull-left.iconi-2x,
+.btn.btn-small [class*=" iconi-"].pull-left.iconi-2x,
+.btn.btn-small [class^="iconi-"].pull-right.iconi-2x,
+.btn.btn-small [class*=" iconi-"].pull-right.iconi-2x {
+  margin-top: .45em;
+}
+.btn.btn-large [class^="iconi-"].pull-left.iconi-2x,
+.btn.btn-large [class*=" iconi-"].pull-left.iconi-2x,
+.btn.btn-large [class^="iconi-"].pull-right.iconi-2x,
+.btn.btn-large [class*=" iconi-"].pull-right.iconi-2x {
+  margin-top: .2em;
+}
+.iconi-spin {
+  display: inline-block;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+}
+@-moz-keyframes spin {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+  0% { -ms-transform: rotate(0deg); }
+  100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}.iconi-user:before		{ content: "\f007"; }
+.iconi-plus-sign:before		{ content: "\f055"; }
+.iconi-key:before   { content: "\f084"}
diff --git a/module/web/templates/default/admin.html b/module/web/templates/default/admin.html
new file mode 100644
index 000000000..8ed725dda
--- /dev/null
+++ b/module/web/templates/default/admin.html
@@ -0,0 +1,224 @@
+{% extends 'default/base.html' %}

+

+{% block title %}{{ _("Admin") }} - {{ super() }} {% endblock %}

+{% block subtitle %}{{ _("Admin") }}

+{% endblock %}

+

+{% block css %}

+    <link href="static/css/default/admin.less" rel="stylesheet/less" type="text/css" media="screen"/>

+    <link rel="stylesheet" type="text/css" href="static/css/fontawesome.css" />

+{% endblock %}

+

+{% block require %}

+    App.initSettingsView();

+{% endblock %}

+

+{% block content %}

+    <div class="container-fluid">

+      <div class="row-fluid">

+        <div id="userlist" class="span10">

+            <div class="page-header">

+                <h1>Admin Bereich

+                <small>Userverwaltung, Systeminfos</small>

+                    <a id="btn_newuser" class="btn btn-warning btn-large" type="button"><i class="iconi-plus-sign iconi-large "></i></a>

+                </h1>

+                

+

+                

+            </div>

+

+            <div class="dropdown">        

+                <span class="label name">User</span>

+                <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="iconi-user iconi-8x"></i></a>

+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">

+                    <li><a tabindex="-1" id="useredit" href="#" role="button" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true"><i class="icon-pencil"></i>Edit</a></li>

+                    <li><a tabindex="-1" href="#"><i class="icon-tasks"></i>Statistik</a></li>

+                    <li class="divider"></li>

+                    <li><a tabindex="-1" href="#"><i class="icon-remove-sign"></i>Delete</a></li>

+                </ul>

+            </div>

+

+            <div id="event-modal" class="modal hide fade">

+                <div class="modal-header">

+                    <a class="close" id="useredit_close" href="#">x</a>

+                    <h3>User Settings</h3>

+                </div>

+                <div class="modal-body">

+                    <p>Set password and permissions</p>

+                    <table style="width:100%;" class="table ">

+                        <td>

+                            <div class="input-prepend">

+                                <span class="add-on"><i class="iconi-key"></i></span>

+                                <input class="span2" style="min-width:120px;" id="prependedInput" type="text" placeholder="New Password">

+                            </div>

+                            <div class="input-prepend">

+                                <span class="add-on"><i class="icon-repeat"></i></span>

+                                <input class="span2" style="min-width:120px;" id="prependedInput" type="text" placeholder="Repeat">

+                            </div>

+                            <br>

+                            <br>

+                            <br>

+                            <form class="form-horizontal">

+                                <div class="control-group">

+                                    <label class="control-label" for="onoff">Administrator</label>

+

+                                    <div class="controls">

+                                        <div class="btn-group" id="onoff" data-toggle="buttons-radio">

+                                            <button type="button" class="btn btn-primary" >On</button>

+                                            <button type="button" class="btn btn-primary active">Off</button>

+                                        </div>

+                                    </div>

+                                </div>

+                            </form>

+                        </td>

+                        <td>

+                            <div id="user_permissions">

+                                <h3>Permissions</h3>

+                                <div class="btn-group btn-group-vertical" data-toggle="buttons-checkbox">

+                                    <button type="button" class="btn btn-inverse userperm">Accounts</button>

+                                    <button type="button" class="btn btn-inverse userperm active">Add</button>

+                                    <button type="button" class="btn btn-inverse userperm">Delete</button>

+                                    <button type="button" class="btn btn-inverse userperm active">Download</button>

+                                    <button type="button" class="btn btn-inverse userperm active">List</button>

+                                    <button type="button" class="btn btn-inverse userperm">Logs</button>

+                                    <button type="button" class="btn btn-inverse userperm">Modify</button>

+                                    <button type="button" class="btn btn-inverse userperm">Settings</button>

+                                    <button type="button" class="btn btn-inverse userperm active">Status</button>

+                                </div>

+                            </div>

+                        </td>

+                    </table>

+                </div>

+                <div class="modal-footer">

+                    <a class="btn btn-primary" id="useredit_save"href="#">Save</a>

+                    

+                </div>

+            </div>

+

+

+    

+        </div>

+

+        <div class="span2">

+            <br>

+            <h2>Support</h2>

+            <table>

+                <tr>

+                    <td>

+                        <i class="icon-globe"></i>

+                    </td>

+                    <td>

+                        <a href="#">Wiki |</a>

+                        <a href="#">Forum |</a>

+                        <a href="#">Chat</a>

+                    </td>

+                </tr>

+                <tr>

+                    <td>

+                        <i class="icon-book"></i>

+                    </td>

+                    <td>

+                        <a href="#">Documentation</a>

+                    </td>

+                </tr>

+                <tr>

+                    <td>

+                        <i class="icon-fire"></i>

+                    </td>

+                    <td>

+                        <a href="#">Development</a>

+                    </td>

+                </tr>

+                <tr>

+                    <td>

+                        <i class="icon-bullhorn"></i>

+                    </td>

+                    <td>

+                        <a href="#">Issue Tracker</a>

+                    </td>

+                </tr>

+            </table>

+            <br>

+            <a href="#" class="btn btn-inverse" id="info" rel="popover"  data-content="<table class='table table-striped'>

+                <tbody>

+                    <tr>

+                        <td>Python:</td>

+                        <td>2.6.4 </td>

+                    </tr>

+                    <tr>

+                        <td>Betriebssystem:</td>

+                        <td>nt win32</td>

+                    </tr>

+                    <tr>

+                        <td>pyLoad Version:</td>

+                        <td>0.4.9</td>

+                    </tr>

+                    <tr>

+                        <td>Installationsordner:</td>

+                        <td>C:\pyLoad</td>

+                    </tr>

+                    <tr>

+                        <td>Konfigurationsordner:</td>

+                        <td>C:\Users\Marvin\pyload</td>

+                    </tr>

+                    <tr>

+                        <td>Downloadordner:</td>

+                        <td>C:\Users\Marvin\new</td>

+                    </tr>

+                    <tr>

+                        <td>HDD:</td>

+                        <td>1.67 TiB <div class='progress progress-striped active'>

+  <div class='bar' style='width: 40%;'></div>

+</div></td>

+                    </tr>

+                    <tr>

+                        <td>Sprache:</td>

+                        <td>de</td>

+                    </tr>

+                    <tr>

+                        <td>Webinterface Port:</td>

+                        <td>8000</td>

+                    </tr>

+                    <tr>

+                        <td>Remote Interface Port:</td>

+                        <td>7227</td>

+                    </tr>

+                </tbody>

+            </table>" title="Systeminformationen">System</a>

+            

+        </div>

+      </div>

+    </div>

+   

+    <script src="static/js/libs/jquery-1.8.3.js"></script>

+    {##}

+    <script src="static/js/libs/bootstrap-2.2.2.js"></script>

+    <script type="text/javascript">

+        $('#info').popover({

+            placement: 'left',

+            trigger: 'click',

+            html:'true',

+        });

+        

+            $('.dropdown-toggle').dropdown();

+

+            $("#btn_newuser").click(function() {

+                 

+                 str = "<div class='dropdown1'><span class='label name'>User</span><a class='dropdown-toggle' data-toggle='dropdown1' href='#'><i class='iconi-user iconi-8x'></i></a><ul class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu'><li><a tabindex='-1' href='#'>Action</a></li><li><a tabindex='-1' href='#'>Another action</a></li><li><a tabindex='-1' href='#'>Something else here</a></li><li class='divider'></li><li><a tabindex='-1' href='#'>Separated link</a></li></ul></div>";

+

+            $("#userlist").append(str);

+

+            });

+

+            $("#useredit").click(function() {

+                $('#event-modal').modal();

+            });

+            $("#useredit_close").click(function() {

+                $('#event-modal').modal('hide');

+            });

+            $("#useredit_save").click(function() {

+                $('#event-modal').modal('hide');

+            });

+

+    </script>

+{% endblock %} 
\ No newline at end of file