Add competence listing functionality

This commit is contained in:
2015-01-05 16:13:08 +01:00
committed by Gergely Polonkai
parent 2a53041702
commit d2e56db0d9
7 changed files with 79 additions and 11 deletions

View File

@@ -0,0 +1,11 @@
.button {
background-color: #aaa;
display: inline;
padding: .2em;
margin: .1em;
cursor: pointer;
}
.no-close .ui-dialog-titlebar-close {
display: none;
}

View File

@@ -13,7 +13,7 @@
Location: {{ duck.location }}<br>
DPX: {{ duck.dpx }}<br>
<div class="button" id="duck-book-{{ duck.id }}">book-button</div>
<div class="button" id="duck-complist-{{ duck.id }}">complist-button</div>
<div class="button complist-button" id="duck-complist-{{ duck.id }}">Competence list</div>
<div class="button" id="duck-namesugg-{{ duck.id }}">namesugg-button</div>
<div class="button" id="duck-adopt-{{ duck.id }}">adopt-button</div>
</div>
@@ -21,3 +21,46 @@
<br class="clear">
{% endif %}
{% endblock %}
{% block endscript %}
$('.complist-button').click(function() {
duck_id = $(this).attr('id').replace(/^duck-complist-/, '');
if (isNaN(duck_id) || (duck_id.trim() == '')) {
return;
}
var url = Urls['api:complist'](duck_id);
var dialog = $('<div style="display: none;"></div>').appendTo('body');
$.getJSON(url, function(data) {
var items = [];
$.each(data, function(key, item) {
items.push('<li class="competence-' + item.level + '">' + item.name + ' (' + item.level + ')</li>');
});
$('<ul/>', {
'class': 'complist',
'html': items.join('')
}).appendTo(dialog);
dialog.dialog({
title: 'Competence list',
dialogClass: 'no-close',
buttons: [
{
text: 'Close',
click: function() {
$(this).dialog('close');
}
}
],
close: function(event, ui) {
dialog.remove();
},
modal: true
});
});
});
{% endblock %}

View File

@@ -1,9 +1,15 @@
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Rubber Duck Booking Tool</title>
<link rel="stylesheet" type="text/css" href="{% static 'booking.css' %}">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<script src="{% url 'api:js_reverse' %}" type="text/javascript"></script>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
</head>
<body>
<h1>Rubber Duck Booking Tool</h1>
@@ -22,5 +28,8 @@
<a href="{% url 'booking:vocabulary' %}">Vocabulary</a>
<a href="{% url 'booking:disclaimer' %}">Disclaimer</a>
{% block body %}{% endblock %}
<script type="text/javascript">
{% block endscript %}{% endblock %}
</script>
</body>
</html>