#XX Countdown: Only show valid controls for the active countdown

When clicking on 'play' the button will morph into 'stop' and vice-versa.
This is persistent across clients e.g. when A starts the countdown and
then B opens the control page B will see a pause button.
(Updates for all but the local client happen only on page reload)

openslides/projector/templates/projector/control.html

@@ -11,6 +11,20 @@
     <script type="text/javascript" src="{% static 'javascript/projector-control.js' %}"></script>
     <script type="text/javascript" src="{% static 'javascript/jquery.cookie.js' %}"></script>
     <script type="text/javascript">
+    
+    function switchButtons(which) {
+        if (which == 'stop') {
+            $( "#countdown_play" ).hide();
+            $( "#countdown_stop" ).show();
+        }
+        else {
+            $( "#countdown_play" ).show();
+            $( "#countdown_stop" ).hide();
+        }
+
+        return true;
+    };
+
     $(function() {
         $( ".column" ).sortable({
             connectWith: ".column"
@@ -30,8 +44,15 @@
             if ($.browser.msie) {
                 $( "#iframe" ).css('zoom', '0.25');
             }
+
+            {% if countdown_state == "active" %}
+            switchButtons('stop');
+            {% else %}
+            switchButtons('play');
+            {% endif %}
         });
     });
+
     </script>
 
 
@@ -115,10 +136,10 @@
                                 <a class="projector_countdown" href="{% url countdown_reset %}" title="{% trans 'Reset countdown' %}">
                                     <img src="{% static 'images/icons/skip-backward.png' %}" />
                                 </a>
-                                <a class="projector_countdown" href="{% url countdown_start %}" title="{% trans 'Start countdown' %}">
+                                <a id="countdown_play" class="projector_countdown" href="{% url countdown_start %}" title="{% trans 'Start countdown' %}" onclick="javascript:switchButtons('stop')">
                                     <img src="{% static 'images/icons/play.png' %}" />
                                 </a>
-                                <a class="projector_countdown" href="{% url countdown_stop %}" title="{% trans 'Stop countdown' %}">
+                                <a id="countdown_stop" class="projector_countdown" href="{% url countdown_stop %}" title="{% trans 'Stop countdown' %}" onclick="javascript:switchButtons('play')">
                                     <img src="{% static 'images/icons/pause.png' %}" />
                                 </a>
                             {% endif %}

openslides/projector/views.py

@@ -94,6 +94,7 @@ class ControlView(TemplateView):
         context.update({
             'categories': categories,
             'countdown_time': config['agenda_countdown_time'],
+            'countdown_state' : config['countdown_state'],
             'overlays': self.get_projector_overlays(),
         })
         return context