Merge branch 'store-ajax'

cloud/urls.py

@@ -27,4 +27,5 @@ urlpatterns = patterns('',
      url(r'^store/$', 'store.views.index', name='store_index'),
      url(r'^store/top/$', 'store.views.toplist', name='store_top'),
      url(r'^ajax/templateWizard$', 'one.views.ajax_template_wizard', name='ajax_template_wizard'),
+     url(r'^ajax/store/list$', 'store.views.ajax_listfolder', name='store_ajax_listfolder'),
 )

one/static/box.less

@@ -35,6 +35,7 @@
 
 #new-wm-tooltip{
     position: relative;
+    z-index: 1;
 }
 #new-wm-tooltip-container{
     margin: 10px 10px 5px 150px;

one/static/cloud.js

+var toggleDetails;
+$(function(){
+    toggleDetails=function(){
+      if($(this).next('.details').is(':hidden')){
+            $(this).next('.details').slideDown(700);
+            $(this).parent('.wm').addClass('opened');
+        } else {
+            var that=this;
+            $(this).next('.details').slideUp(700,function(){
+                $(that).parent('.wm').removeClass('opened');
+            });
+        }
+    }
+    $('.wm .summary').unbind('click').click(toggleDetails);
+    $('#load-more-files').click(function(){
+        $('.actions', this).show();
+        var that=this;
+        setTimeout(function(){
+            $(that).prev('li').slideDown(500,function(){
+                $('.actions', that).hide();
+            });
+        },2000);
+    })
+    $('#new-wm-button').click(function(){
+        $('#modal').show();
+        $('#modal-container').html($('#new-wm').html());
+        $('#modal-container .wm .summary').each(function(){
+            this.originalHeight=parseInt($(this).next('.details').css('height'));
+        })
+        $('#modal-container .wm .summary').click(toggleDetails);
+        });
+    $('#new-template-button').click(function(){
+        $('#modal').show();
+        $('#modal-container').html($('#new-template').html());
+    });
+    $('#shadow').click(function(){
+        $('#modal').hide();
+    })
+    $('#new-template-button').click(function(){
+        $.get('/ajax/templateWizard', function(data){
+            $('#modal-container').html(data);
+        })
+        $('#modal').show();
+    });
+    var Model=function(){
+        var self=this;
+        self.files=ko.observableArray();
+        $.ajax({
+            type: 'POST',
+            url: '/ajax/store/list',
+            dataType: 'json',
+        }).done(function(data){
+            for(var i in data){
+                data[i].getTypeClass=function(t){
+                    return 'name filetype-'+(t=='D'?'folder':'text');
+                }(data[i].TYPE);
+                data[i].SIZE=data[i].TYPE=='D'?'katalógus':(data[i].SIZE+'K');
+                data[i].TYPE=data[i].TYPE=='D'?'katalógus':'fájl';
+            }
+            self.files(data);
+            $('.wm .summary').unbind('click').click(toggleDetails);
+        })
+    }
+    var model=new Model();
+    ko.applyBindings(model);
+})

one/templates/base.html

@@ -11,65 +11,8 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script src="/static/jquery.min.js"></script>
     <script src="/static/less.min.js"></script>
-    <script type="text/javascript">
-    var toggleDetails;
-$(function(){
-    $('.wm .summary').each(function(){
-      this.originalHeight=parseInt($(this).next('.details').css('height'));
-    })
-    toggleDetails=function(){
-      if($(this).next('.details').is(':hidden')){
-            $(this).next('.details')
-                .show()
-                .css('height',0)
-                .css('padding','0px 5px')
-                .animate({height:this.originalHeight,paddingTop:15,paddingBottom:15},700);
-            $(this).parent('.wm').addClass('opened');
-        } else {
-            var that=this;
-            $(this).next('.details')
-              //2*15px paddingot le kell vonni, a jQuery szar
-                .css('height',this.originalHeight-30)
-                .css('padding','15px 5px')
-                .animate({height:0,paddingTop:0,paddingBottom:0},700,function(){
-                $(that).parent('.wm').removeClass('opened');
-                $(that).next('.details').hide();
-            });
-        }
-    }
-    $('.wm .summary').click(toggleDetails);
-    $('#load-more-files').click(function(){
-        $('.actions', this).show();
-        var that=this;
-        setTimeout(function(){
-            $(that).prev('li').slideDown(500,function(){
-                $('.actions', that).hide();
-            });
-        },2000);
-    })
-    $('#new-wm-button').click(function(){
-        $('#modal').show();
-        $('#modal-container').html($('#new-wm').html());
-        $('#modal-container .wm .summary').each(function(){
-            this.originalHeight=parseInt($(this).next('.details').css('height'));
-        })
-        $('#modal-container .wm .summary').click(toggleDetails);
-        });
-    $('#new-template-button').click(function(){
-        $('#modal').show();
-        $('#modal-container').html($('#new-template').html());
-    });
-    $('#shadow').click(function(){
-        $('#modal').hide();
-    })
-    $('#new-template-button').click(function(){
-        $.get('/ajax/templateWizard', function(data){
-            $('#modal-container').html(data);
-        })
-        $('#modal').show();
-    });
-})
-        </script>
+    <script src="/static/knockout.min.js"></script>
+    <script type="text/javascript" src="/static/cloud.js"></script>
 
     {{ form.media }}
     {% block js %}{% endblock %}

one/templates/box-vmlist.html

@@ -30,15 +30,16 @@
         <div class="clear"></div>
     </div>
     <div class="details">
-        <h3>Részletek</h3>
-        <ul>
-            <li class="name">Gép neve: <span class="value">{{i.name}}</span></li>
-            <li class="os-linux">Operációs rendszer: <span class="value">{{i.template.disk.name}}</span></li>
-            <li class="type">Instance típus: <span class="value">{{i.template.instance_type.name}}</span></li>
-            <li class="date">Létrehozás dátuma: <span class="value">{{i.created_at}}</span></li>
-            <li class="date">Lejáratig: <span class="value"><abbr title="1 nap, 5 óra, 34 perc">1 nap</abbr></span></li>
-            <li>&nbsp;<span class="value"><a href="/vm/show/{{i.id}}/" title="{{i.name}}">További részletek</a></span></li>
-        </ul>
+        <div class="details-container"><h3>Részletek</h3>
+            <ul>
+                <li class="name">Gép neve: <span class="value">{{i.name}}</span></li>
+                <li class="os-linux">Operációs rendszer: <span class="value">{{i.template.disk.name}}</span></li>
+                <li class="type">Instance típus: <span class="value">{{i.template.instance_type.name}}</span></li>
+                <li class="date">Létrehozás dátuma: <span class="value">{{i.created_at}}</span></li>
+                <li class="date">Lejáratig: <span class="value"><abbr title="1 nap, 5 óra, 34 perc">1 nap</abbr></span></li>
+                <li>&nbsp;<span class="value"><a href="/vm/show/{{i.id}}/" title="{{i.name}}">További részletek</a></span></li>
+            </ul>
+        </div>
     </div>
 </li>
 {% endfor %}

one/templates/home.html

@@ -184,10 +184,11 @@
         </h2>
         <div class="content">
             <ul class="file-list">
+                <!-- ko foreach: files -->
                 <li class="wm">
                     <div class="summary">
-                        <div class="name filetype-c">hello.c</div>
-                        <div class="info">1 Kb</div>
+                        <div class="name" data-bind="text: NAME, attr: {class: getTypeClass}"></div>
+                        <div class="info" data-bind="text: SIZE"></div>
                         <div class="actions">
                             <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
                             <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
@@ -196,77 +197,15 @@
                         <div class="clear"></div>
                     </div>
                     <div class="details">
-                        <h3>Részletek</h3>
-                        <ul>
-                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Típus: <span class="value">text/plain</span></li>
-                        </ul>
-                    </div>
-                </li>
-                <li class="wm">
-                    <div class="summary">
-                        <div class="name filetype-image">suna.jpg</div>
-                        <div class="info">1 Kb</div>
-                        <div class="actions">
-                            <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
-                            <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
-                            <a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
+                        <div class="details-container">
+                            <ul>
+                                <li>Módosítva: <span class="value" data-bind="text: MTIME"></span></li>
+                                <li>Típus: <span class="value" data-bind="text: TYPE"></span></li>
+                            </ul>
                         </div>
-                        <div class="clear"></div>
-                    </div>
-                    <div class="details">
-                        <h3>Részletek</h3>
-                        <ul>
-                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Típus: <span class="value">image/jpg</span></li>
-                        </ul>
-                    </div>
-                </li>
-                <li class="wm">
-                    <div class="summary">
-                        <div class="name filetype-folder">poresz</div>
-                        <div class="info">katalógus</div>
-                        <div class="actions">
-                            <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
-                            <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
-                        </div>
-                        <div class="clear"></div>
-                    </div>
-                    <div class="details">
-                        <h3>Részletek</h3>
-                        <ul>
-                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Fájlok: <span class="value">666 db</span></li>
-                        </ul>
-                    </div>
-                </li>
-                <li class="wm" style="display: none">
-                    <div class="summary">
-                        <div class="name filetype-text">matlab_serial.txt</div>
-                        <div class="info">358 Kb</div>
-                        <div class="actions">
-                            <a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a>
-                            <a href="#"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
-                            <a href="#"><img src="/static/icons/download-cloud.png" alt="download" /></a>
-                        </div>
-                        <div class="clear"></div>
-                    </div>
-                    <div class="details">
-                        <h3>Részletek</h3>
-                        <ul>
-                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
-                            <li>Típus: <span class="value">text/plain</span></li>
-                        </ul>
                     </div>
                 </li>
+                <!-- /ko -->
                 <li class="file-details wm" id="load-more-files">
                     <div class="summary">
                         <div class="name filetype-more">

store/views.py

@@ -5,7 +5,9 @@ from django.template import RequestContext
 from store.api import StoreApi
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.models import User
+from django.views.decorators.csrf import csrf_exempt
 import os
+import json
 
 @login_required
 def index(request):
@@ -17,7 +19,7 @@ def index(request):
         for key in request.user.sshkey_set.all():
             key_list.append(key.key)
     except:
-        return HttpResponse('Can not acces to django database!')
+        return HttpResponse('Can not acces to django database!', status_code=404)
     if StoreApi.userexist(user) != True:
         #Create user
         if not StoreApi.createuser(user,password,key_list):
@@ -66,6 +68,32 @@ def index(request):
     file_list = StoreApi.listfolder(user,path)
     return render_to_response('store/list.html', RequestContext(request, {'file_list': file_list, 'path' : path, 'backpath' : backpath, 'username' : user}))
 
+@csrf_exempt
+@login_required
+def ajax_listfolder(request):
+    user = request.user.username
+    try:
+        details = request.user.userclouddetails_set.all()[0]
+        password = details.smb_password
+        key_list = []
+        for key in request.user.sshkey_set.all():
+            key_list.append(key.key)
+    except:
+        return HttpResponse('Can not acces to django database!', status_code=404)
+    if StoreApi.userexist(user) != True:
+        #Create user
+        if not StoreApi.createuser(user,password,key_list):
+            return HttpResponse('User does not exist on store! And could not create!', status_code=404)
+    path = '/'
+    try:
+        path = request.POST['path']
+    except:
+        pass
+    #Normalize path (Need double dirname /folder/ -> /folder -> /
+    backpath = os.path.normpath(os.path.dirname(os.path.dirname(path)))
+    file_list = StoreApi.listfolder(user,path)
+    return HttpResponse(json.dumps(file_list))
+
 @login_required
 def toplist(request):
     user = request.user.username