From d2e56db0d9f096643afe6e20fcb2bda55ec31bd7 Mon Sep 17 00:00:00 2001
From: Gergely Polonkai <gergely@polonkai.eu>
Date: Mon, 5 Jan 2015 16:13:08 +0100
Subject: [PATCH] Add competence listing functionality

---
 api/templates/api/duck_comp_list.json    |  2 +-
 api/tests.py                             |  7 ++--
 api/urls.py                              |  2 +-
 api/views.py                             | 14 ++++----
 booking/static/booking.css               | 11 ++++++
 booking/templates/booking/duck_list.html | 45 +++++++++++++++++++++++-
 booking/templates/front_template.html    |  9 +++++
 7 files changed, 79 insertions(+), 11 deletions(-)
 create mode 100644 booking/static/booking.css

diff --git a/api/templates/api/duck_comp_list.json b/api/templates/api/duck_comp_list.json
index cc57934..2c75b3b 100644
--- a/api/templates/api/duck_comp_list.json
+++ b/api/templates/api/duck_comp_list.json
@@ -1,5 +1,5 @@
 [
-    {% for comp in duck.duckcompetence_set.all %}
+    {% for comp in comp_list %}
     {
         "name": "{{ comp.comp.name }}",
         "level": {{ comp.level }}
diff --git a/api/tests.py b/api/tests.py
index bbafa6a..e9ea725 100644
--- a/api/tests.py
+++ b/api/tests.py
@@ -25,7 +25,10 @@ class ApiTest(TestCase):
         user = User()
         user.save()
 
-        self.duck = Duck(pk = 1, species = species, location = loc, donated_by = user)
+        self.duck = Duck(
+            species = species,
+            location = loc,
+            donated_by = user)
         self.duck.save()
 
         comp = Competence(name = 'test', added_by = user)
@@ -38,4 +41,4 @@ class ApiTest(TestCase):
         response = self.client.get('/api/duck/1/competence.json')
         self.assertEqual(response.status_code, 200)
 
-        self.assertEqual(len(response.context['duck'].duckcompetence_set.all()), 1)
+        self.assertEqual(len(response.context['comp_list']), 1)
diff --git a/api/urls.py b/api/urls.py
index c0cf827..c723272 100644
--- a/api/urls.py
+++ b/api/urls.py
@@ -7,5 +7,5 @@ from . import views
 urlpatterns = patterns(
     '',
     url(r'^reverse.js$', cache_page(3600)(urls_js), name = 'js_reverse'),
-    url(r'^duck/(?P<duck_id>\d+)/competence.json$', views.duck_comp_list)
+    url(r'^duck/(?P<duck_id>\d+)/competence.json$', views.DuckCompListView.as_view(), name = 'complist'),
 )
diff --git a/api/views.py b/api/views.py
index 16632a1..b98a1f2 100644
--- a/api/views.py
+++ b/api/views.py
@@ -1,12 +1,14 @@
 from django.shortcuts import render, get_object_or_404
+from django.views import generic
 
 from booking.models import Duck
 
-def duck_comp_list(request, duck_id):
-    duck = get_object_or_404(Duck, pk = duck_id)
+class DuckCompListView(generic.ListView):
+    template_name = 'api/duck_comp_list.json'
+    context_object_name = 'comp_list'
 
-    context = {
-        'duck': duck
-    }
+    def get_queryset(self):
+        duck_id = self.kwargs['duck_id']
+        duck = get_object_or_404(Duck, pk = duck_id)
 
-    return render(request, 'api/duck_comp_list.json', context)
+        return duck.duckcompetence_set.all()
diff --git a/booking/static/booking.css b/booking/static/booking.css
new file mode 100644
index 0000000..3c306e8
--- /dev/null
+++ b/booking/static/booking.css
@@ -0,0 +1,11 @@
+.button {
+    background-color: #aaa;
+    display: inline;
+    padding: .2em;
+    margin: .1em;
+    cursor: pointer;
+}
+
+.no-close .ui-dialog-titlebar-close {
+    display: none;
+}
diff --git a/booking/templates/booking/duck_list.html b/booking/templates/booking/duck_list.html
index 03b0d5a..1cd16a5 100644
--- a/booking/templates/booking/duck_list.html
+++ b/booking/templates/booking/duck_list.html
@@ -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 %}
diff --git a/booking/templates/front_template.html b/booking/templates/front_template.html
index 31022c6..fb910de 100644
--- a/booking/templates/front_template.html
+++ b/booking/templates/front_template.html
@@ -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>