{% extends g.theme.master %}
{% do g.register_forge_css('css/forge/deck.css') %}
{% block title %}{{c.project.name}} / Tools{% endblock %}
{% block header %}Tools{% endblock %}
{% block content %}
{% if h.has_project_access('tool')() %}
<h3>Click to install</h3>
<div class="nested-grid-container">
{% for tool in installable_tools %}
<span class="tcenter grid-4">
<a class="install_trig" data-tool="{{ tool['name'] }}">
<h3>{{ tool['app'].tool_label }}{{' (%s)' % tool.app.status if tool.app.status != 'production' else ''}}</h3>
<img src="{{ g.theme.app_icon_url(tool['app'], 32) }}">
</a>
</span>
{% endfor %}
<span class="tcenter grid-4">
<a class="install_trig" data-tool="">
<h3>Subproject</h3>
<img src="{{ g.theme.app_icon_url('subproject', 32) }}">
</a>
</span>
</div>
<form method="post" action="update_mounts" id="install_form" style="display:none">
<input type="hidden" name="new.ordinal" value="{{installable_tools|length + c.project.direct_subprojects|length}}"/>
<input type="hidden" name="new.ep_name" class="new_ep_name">
<label class="grid-4">Label</label>
<div class="grid-9"><input name="new.mount_label" class="new_mount_label"></div>
<label class="grid-4">Mount Point</label>
<div class="grid-9"><input name="new.mount_point" class="new_mount_point"></div>
<div class="grid-13"> </div>
<hr>
<div class="grid-13"> </div>
<div class="grid-13">
<input type="submit" value="Save" name="new.install">
</div>
</form>
{{c.install_modal.display(content='<h1>Install <span id="install_tool_label">Tool</span></h1>')}}
{% endif %}
<h3>Installed tools</h3>
<p>
Sortable - define top menu order by moving tools with your mouse.
</p>
<div id="sortable" class="clearfix fourcol">
{% for mount in mounts %}
{% if 'ac' in mount %}
{% set app = mount['ac'].load()(c.project, mount['ac']) %}
{% set links = app.admin_menu() %}
{% set label = mount['ac'].options['mount_label'] if mount['ac'].options['mount_label'] != 'Tool Name' else mount['ac'].options['mount_point'] %}
<div class="fleft">
<ul class="deck">
<li class="tcenter">
<h3>{{ label }}</h3>
<img src="{{ g.theme.app_icon_url(app, 48) }}">
</li>
{% for link in links %}
<li>
<a href="{{ link.url }}" class="{{ link.className }}">{{ link.label }}</a>
</li>
{% endfor %}
{% if app.installable %}
<li>
<form method="post" action="update_mounts" id="mounts_edit_2-{{loop.index0}}">
<input type="hidden" class="mount_point"
name="tool-{{loop.index0}}.mount_point"
value="{{mount['ac'].options.mount_point}}"/>
<input name="tool-{{loop.index0}}.delete" type="hidden" value="Delete"/>
{% if h.has_project_access('tool')() and mount['ac'].load().installable %}
<a href="#" class="mount_delete">Delete</a>
{% endif %}
</form>
</li>
{% else %}
<input type="hidden" class="mount_point" value="{{mount['ac'].options.mount_point}}"/>
{% endif %}
</ul>
</div>
{% endif %}
{% if 'sub' in mount and not mount['sub'].deleted %}
<div class="fleft">
<ul class="deck">
<li class="tcenter">
<h3>{{ mount['sub'].name }}</h3>
<img src="{{ g.theme.app_icon_url('subproject', 48) }}">
</li>
<li>
<form method="post" action="update_mounts" id="mounts_edit_2-{{loop.index0}}">
<input type="hidden" class="shortname"
name="subproject-{{loop.index0}}.shortname"
value="{{mount['sub'].shortname}}"/>
<input name="subproject-{{loop.index0}}.delete" type="hidden" value="Delete"/>
{% if h.has_project_access('tool')() %}
<a href="#" class="mount_delete">Delete</a>
{% endif %}
</form>
</li>
</ul>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<form id="mount_delete_form" style="display:none">
<div class="grid-13">Warning: This will destroy all data in this tool and is non reversable!</div>
<div class="grid-13"> </div>
<hr>
<div class="grid-13"> </div>
<div class="grid-13">
<input type="button" value="Delete" class="continue_delete"> <input type="button" value="Cancel" class="cancel_delete close">
</div>
</form>
{{c.admin_modal.display(content='<h1 id="popup_title"></h1><div id="popup_contents"></div>')}}
{{c.mount_delete.display(content='<h1>Confirm Delete</h1>')}}
{% endblock %}
{% block extra_js %}
<script type="text/javascript">
var defaults = {
{% for tool in installable_tools %}
'{{tool.name}}':{'default_label':'{{tool.app.default_mount_label}}','default_mount':'{{tool.app.default_mount_point}}'},
{% endfor %}
};
// Install popup
var install_popup = $('#lightbox_install_modal');
var install_form = $('#install_form');
var new_ep_name = install_form.find('input.new_ep_name');
var new_mount_point = install_form.find('input.new_mount_point');
var new_mount_label = install_form.find('input.new_mount_label');
var install_tool_label = $('#install_tool_label');
install_popup.append(install_form.show());
$('a.install_trig').click(function () {
var datatool = $(this).attr('data-tool');
if(datatool){
var tool = defaults[datatool];
install_tool_label.html(tool.default_label);
new_ep_name.val(datatool);
new_mount_point.val(tool.default_mount);
new_mount_label.val(tool.default_label);
}
else{
install_tool_label.html("Subproject");
new_ep_name.val('');
new_mount_point.val('');
new_mount_label.val('');
}
});
// Edit popup
var $popup_title = $('#popup_title');
var $popup_contents = $('#popup_contents');
$('a.admin_modal').click(function(){
var link = this;
$popup_title.html('');
$popup_contents.html('Loading...');
$.get(link.href, function (data) {
$popup_title.html($(link).html());
$popup_contents.html(data);
});
});
// delete popup
var form_to_delete = null;
var mount_delete_popup = $('#lightbox_mount_delete');
var mount_delete_form = $('#mount_delete_form');
mount_delete_popup.append(mount_delete_form.show());
mount_delete_form.find('.continue_delete').click(function(){
form_to_delete.submit();
form_to_delete = null;
});
mount_delete_form.find('.cancel_delete').click(function(){
form_to_delete = null;
});
$('a.mount_delete').click(function () {
form_to_delete = this.parentNode;
return false;
});
// sorting
$('#sortable').sortable({items: ".fleft"}).bind( "sortupdate", function (e) {
var sortables = $('#sortable .fleft');
var tools = 0
var subs = 0
var params = {}
for(var i=0,len=sortables.length; i<len; i++){
var item = $(sortables[i])
var mount_point = item.find('input.mount_point');
var shortname = item.find('input.shortname');
if(mount_point.length){
params['tools-'+tools+'.mount_point']=mount_point.val();
params['tools-'+tools+'.ordinal']=i;
tools++;
}
if(shortname.length){
params['subs-'+subs+'.shortname']=shortname.val();
params['subs-'+subs+'.ordinal']=i;
subs++;
}
}
$.post('update_mount_order', params);
});
</script>
{% endblock %}
{% block extra_css %}
<style type="text/css">
.pad .fourcol .fleft{
min-height: 200px;
}
</style>
{% endblock %}