Skip to content

Gelencsér Szabolcs / cloud

Go to a project
Commit e46644ad by Dányi Bence
Options

ajax store templates

parent 4dbb9645
Showing with 87 additions and 138 deletions
one/static/cloud.js 0 → 100644
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 @@ ...@@ -11,65 +11,8 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/static/jquery.min.js"></script> <script src="/static/jquery.min.js"></script>
<script src="/static/less.min.js"></script> <script src="/static/less.min.js"></script>
<script type="text/javascript"> <script src="/static/knockout.min.js"></script>
var toggleDetails; <script type="text/javascript" src="/static/cloud.js"></script>
$(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>
{{ form.media }} {{ form.media }}
{% block js %}{% endblock %} {% block js %}{% endblock %}
......
one/templates/box-vmlist.html
...@@ -30,15 +30,16 @@ ...@@ -30,15 +30,16 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="details"> <div class="details">
<h3>Részletek</h3> <div class="details-container"><h3>Részletek</h3>
<ul> <ul>
<li class="name">Gép neve: <span class="value">{{i.name}}</span></li> <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="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="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">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 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> <li>&nbsp;<span class="value"><a href="/vm/show/{{i.id}}/" title="{{i.name}}">További részletek</a></span></li>
</ul> </ul>
</div>
</div> </div>
</li> </li>
{% endfor %} {% endfor %}
......
one/templates/home.html
...@@ -184,10 +184,11 @@ ...@@ -184,10 +184,11 @@
</h2> </h2>
<div class="content"> <div class="content">
<ul class="file-list"> <ul class="file-list">
<!-- ko foreach: files -->
<li class="wm"> <li class="wm">
<div class="summary"> <div class="summary">
<div class="name filetype-c">hello.c</div> <div class="name" data-bind="text: NAME, attr: {class: getTypeClass}"></div>
<div class="info">1 Kb</div> <div class="info" data-bind="text: SIZE"></div>
<div class="actions"> <div class="actions">
<a href="#"><img src="/static/icons/pencil.png" alt="rename" /></a> <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/minus-circle.png" alt="delete" /></a>
...@@ -196,77 +197,15 @@ ...@@ -196,77 +197,15 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="details"> <div class="details">
<h3>Részletek</h3> <div class="details-container">
<ul> <ul>
<li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li> <li>Módosítva: <span class="value" data-bind="text: MTIME"></span></li>
<li>Módosítva: <span class="value">2012.12.29. 23:12</span></li> <li>Típus: <span class="value" data-bind="text: TYPE"></span></li>
<li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li> </ul>
<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> </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> </div>
</li> </li>
<!-- /ko -->
<li class="file-details wm" id="load-more-files"> <li class="file-details wm" id="load-more-files">
<div class="summary"> <div class="summary">
<div class="name filetype-more"> <div class="name filetype-more">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment