1 files changed, 62 insertions, 0 deletions
diff --git a/modules-available/imgmanagement/templates/page-imgmanagement.html b/modules-available/imgmanagement/templates/page-imgmanagement.html
new file mode 100644
index 00000000..cdae627b
--- /dev/null
+++ b/modules-available/imgmanagement/templates/page-imgmanagement.html
@@ -0,0 +1,62 @@
+<div class="panel panel-default">
+    <div class="panel-heading">
+        Gerenciamento de Imagens
+    </div>
+
+    <div class="panel-body">
+        <div class="alert alert-info">
+            Imagens em azul indicam imagens criadas pelo usuário
+        </div>
+        
+        <div class="panel-body col-xs-6">
+            <div class="left">
+                <ul class="source connected">
+		    {{#deactives}}
+                    <li>{{name}}</li>
+		    {{/deactives}}
+                </ul>
+            </div>
+        </div>
+
+        <div class="panel-body col-xs-6">
+            <div class="right">
+                <ul class="target connected" id="ativa1">
+		
+		    {{#actives}}
+                    <li>{{name}}</li>
+		    {{/actives}}
+		</ul>
+            </div>
+        </div>
+
+        <div class="panel-body text-center">
+            <input type='button' value='<<' id='move_left' />
+            <input type='button' value='>>' id='move_right' />
+            <a class="btn btn-default" href="#" role="button">Upload de Nova Imagem<a>
+            <a class="btn btn-info" href="#" role="button">Gerar IPXE<a>
+            <a class="btn btn-info" href="#" role="button">Salvar<a>
+        </div>
+
+    </div>
+</div>
+
+<script src="script/jquery.sortable.min.js"></script>
+<script type="text/javascript">
+    $(document).ready(function() {  
+        $(".source, .target").sortable({
+            connectWith: ".connected"
+        });
+	
+    });
+    $('body').on('click', 'li', function() {
+        $(this).toggleClass('selected');
+    });
+
+    $('#move_left').click(function() {
+        $('.source').append($('.target .selected').removeClass('selected'));
+    });
+
+    $('#move_right').click(function() {
+        $('.target').append($('.source .selected').removeClass('selected'));
+    });
+</script>