close and open a slide with ajax

openslides/agenda/templates/agenda/overview.html

@@ -13,6 +13,7 @@
     <script type="text/javascript" src="/static/javascript/tabledrag.js"></script>
     <script type="text/javascript" src="/static/javascript/knockout-1.2.1.js"></script>
     <script type="text/javascript" src="/static/javascript/agenda.js"></script>
+    <script type="text/html" src="/static/javascript/agenda.slideTemplate.js"></script>
 
     <script type="text/javascript">
     <!--//--><![CDATA[//><!--
@@ -131,11 +132,11 @@
                     {% if  perms.agenda.can_manage_agenda %}
                     <a href="{% url item_edit item.id %}"><img src="/static/images/icons/document-edit.png" title="{% trans 'Edit item' %}"></a>
                     <a href="{% url item_delete item.id %}"><img src="/static/images/icons/edit-delete.png" title="{% trans 'Delete item' %}"></a>
-                    {% if item.closed %}
-                        <a href="{% url item_open item.id %}"><img src="/static/images/icons/user-offline.png" title="{% trans 'Click to open item' %}"></a>
-                    {% else %}
-                        <a href="{% url item_close item.id  %}"><img src="/static/images/icons/user-online.png" title="{% trans 'Click to close item' %}"></a>
-                    {% endif %}
+
+                    <a class="close_link {% if item.closed %}closed{% else %}open{% endif %}" href="{% if item.closed %}{% url item_open item.id %}{% else %}{% url item_close item.id %}{% endif %}">
+                        <div></div>
+                    </a>
+
                     {% if item.children.exists %}
                         <a href="{% url item_activate_summary item.id %}"><img src="/static/images/icons/view-list-tree.png" title="{% trans 'Select item overview' %}"></a>
                     {% endif %}

openslides/agenda/views.py

@@ -179,6 +179,14 @@ def set_closed(request, item_id, closed=True):
         item.set_closed(closed)
     except Item.DoesNotExist:
         messages.error(request, _('Item ID %d does not exist.') % int(item_id))
+    if request.is_ajax():
+        if closed:
+            link = reverse('item_open', args=[item.id])
+        else:
+            link = reverse('item_close', args=[item.id])
+        jsondata = {'closed': closed,
+                    'link': link}
+        return HttpResponse(json.dumps(jsondata))
     return redirect(reverse('item_overview'))
 
 

openslides/static/javascript/agenda.js

@@ -18,7 +18,13 @@ function getSlideByID(id) {
     return false;
 }
 
+function renderSlide(slide) {
+    return
+}
+
+
 $(function() {
+    // Set Active Slide with Ajax
     $('.activate_link').click(function(event) {
         event.preventDefault();
         $.ajax({
@@ -35,5 +41,23 @@ $(function() {
             }
         });
     });
+    $('.close_link').click(function(event) {
+        event.preventDefault();
+        slide = $(this);
+        $.ajax({
+            type: 'GET',
+            url: slide.attr('href'),
+            dataType: 'json',
+            success: function(data) {
+                if (data.closed) {
+                    newclass = 'closed';
+                } else {
+                    newclass = 'open';
+                }
+                slide.removeClass('closed open').addClass(newclass);
+                slide.attr('href', data.link);
+            }
+        });
+    });
     ko.applyBindings(ViewModel);
 });

openslides/static/styles/agenda.css

@@ -13,3 +13,24 @@ tr.inactiveline a.activate_link div {
     width: 20px;
     height: 20px;
 }
+
+
+a.close_link.closed div {
+    background-image: url(/static/images/icons/user-offline.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+}
+
+a.close_link.open div {
+    background-image: url(/static/images/icons/user-online.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+}
+
+