More AJAX for projector control template. Moved projector stuff from agenda overview to new control page.

2012-04-10 20:09:10 +02:00 · 2012-04-10 20:09:10 +02:00 · fdc83048f4
commit fdc83048f4
parent 83ba0cbcf9
10 changed files with 107 additions and 255 deletions
--- a/openslides/agenda/models.py
+++ b/openslides/agenda/models.py
@ -139,4 +139,4 @@ register_slidemodel(Item, category=_('Agenda'), model_name=_('Agenda Item'))
 from projector.api import register_slidefunc
 from agenda.slides import agenda_show

-register_slidefunc('agenda_show', agenda_show, category=_('Agenda'))
+register_slidefunc(_('Agenda'), agenda_show, category=_('Agenda'))
--- a/openslides/agenda/templates/agenda/item_row.html
+++ b/openslides/agenda/templates/agenda/item_row.html
@ -1,45 +1,30 @@
 {% load i18n %}

-<tr id="item_row_{{ item.id }}" class="draggable{% cycle ' odd' '' %}
-    {% if item.active %} activeline{% else %}
-    {% if perms.agenda.can_manage_agenda %} inactiveline{% endif %}
-    {% endif %}">
-    {% if perms.agenda.can_manage_agenda %}
-        <td class="select">
-            <a id="activate_link_{{ item.id }}" class="activate_link" href="{% url item_activate item.id %}">
-                <div></div>
-            </a>
-        </td>
-    {% else %}
+<tr class="draggable{% cycle ' odd' '' %}
+    {% if item.active %}activeline{% endif %}">
    <td>
        {% if item.closed %}
            <img src="/static/images/icons/task-complete.png" title="{% trans 'Item closed' %}">
        {% endif %}
    </td>
-    {% endif %}
    <td>
        {% for p in item.get_ancestors %}
            <div class="indentation">&nbsp;</div>
        {% endfor %}
-
        {% if perms.agenda.can_manage_agenda %}
            <div class="dragcell"></div>
        {% endif %}
-
        {{ item }}
-
    </td>
    <td>
        <span style="width: 1px; white-space: nowrap;">
            <a href="{{ item.get_absolute_url }}"><img src="/static/images/icons/document-preview.png" title="{% trans 'Show projector preview' %}"></a>
-
            {% 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>
                <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 %}">
                    <span></span>
                </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 %}
--- a/openslides/agenda/templates/agenda/overview.html
+++ b/openslides/agenda/templates/agenda/overview.html
@ -52,27 +52,15 @@

            <table id="menu-overview" class="agendatable">
                <tr>
-                    {% if perms.agenda.can_manage_agenda %}
-                        <th style="width: 1px;">{% trans "Projector" %}</th>
-                    {% else %}
                    <th style="width: 1px;">{% trans "Done" %}</th>
-                    {% endif %}
                    <th>{% trans "Item" %}</th>
                    <th style="width: 1px;">{% if perms.agenda.can_manage_agenda %}{% trans "Actions" %}{% endif %}</th>
                    {% if perms.agenda.can_manage_agenda %}
                        <th class="tabledrag-hide">{% trans "Weight" %}</th>
                    {% endif %}
                </tr>
-                <tr id="item_row_0" class="topline{% if overview %} activeline{% else %}{% if perms.agenda.can_manage_agenda %} inactiveline {% endif %}{% endif %}">
-                    {% if perms.agenda.can_manage_agenda %}
-                        <td class="select">
-                            <a href="{% url item_activate 0 %}" class="activate_link">
-                                <div></div>
-                            </a>
-                        </td>
-                    {% else %}
-                        <td></td>
-                    {% endif %}
+                <tr class="topline {% if overview %}activeline{% endif %}">
+                    <td>{{overview}}</td>
                    <td>
                        <b>{% trans "Agenda" %} ({{ items|length }} {% trans "items" %}<span id="hiddencount"></span>)</b>
                    </td>
--- a/openslides/projector/templates/projector/control.html
+++ b/openslides/projector/templates/projector/control.html
@ -5,42 +5,25 @@

 {% block header %}
    <link type="text/css" href="/static/styles/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
-    <link type="text/css" rel="stylesheet" media="all" href="/static/styles/agenda.css" />
+    <link type="text/css" rel="stylesheet" media="all" href="/static/styles/projector-control.css" />
    <script type="text/javascript" src="/static/javascript/jquery-ui-1.8.18.custom.min.js"></script>
    <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(){
-            $("#accordion").accordion({ header: "h2" });
-        });
-    </script>
-    <style>
-    .column { width: 50%; float: left; padding-bottom: 0px; }
-    .portlet { margin: 0 1em 1em 0; }
-    .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
-    .portlet-header .ui-icon { float: right; }
-    .portlet-content { padding: 0.4em; overflow: hidden; }
-    .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
-    .ui-sortable-placeholder * { visibility: hidden; }
-    </style>
-    <script>
    $(function() {
        $( ".column" ).sortable({
            connectWith: ".column"
        });
-
        $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
            .find( ".portlet-header" )
                .addClass( "ui-widget-header ui-corner-all" )
                .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
                .end()
            .find( ".portlet-content" );
-
        $( ".portlet-header .ui-icon" ).click(function() {
            $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
            $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
        });
-
        $( ".column" ).disableSelection();
    });
    </script>
@ -85,9 +68,9 @@
        </a>
    </div>

-
-    {% for category, slides in categories.items %}
    <div class="column">
+    {% for category, slides in categories.items %}
+
        <div class="portlet">
            <div class="portlet-header">{{ category }}</div>
            <div class="portlet-content">
@ -96,24 +79,20 @@
                    <ul style="line-height: 180%">
                    {% for item in slide.get_items %}
                        <li><a href="{% url projector_activate_slide item.sid %}" 
-                        {% if item.active %}
-                            class="inactivate_link"
-                        {% else %}
-                            class="activate_link"
-                        {% endif %}
-                        ><div></div></a>{{ item }}</li>
+                        class="activate_link {% if item.active %}active{% endif %}"
+                        ><div></div></a><a href="{% url projector_edit_slide item.id %}">{{ item }}</a></li>
                    {% endfor %}
                    </ul>
                {% else %}
                    <a href="{% url projector_activate_slide slide.key %}"
-                            class="activate_link"
+                            class="activate_link {% if slide.active %}active{% endif %}"
                    ><div></div></a>{{ slide.key }}
                {% endif %}
            {% endfor %}
            </div>
        </div>
-    </div>
    {% endfor %}
+    </div>

    <div class="column">
        <div class="portlet">
--- a/openslides/projector/urls.py
+++ b/openslides/projector/urls.py
@ -15,6 +15,7 @@ from django.conf.urls.defaults import *
 from utils.views import CreateView

 from views import ControlView, ActivateView
+from agenda.views import ItemUpdate
 from models import ProjectorSlide


@ -32,6 +33,11 @@ urlpatterns = patterns('projector.views',
        name='projector_activate_slide',
    ),

+    url(r'^edit/(?P<pk>\d+)/$',
+        ItemUpdate.as_view(),
+        name='projector_edit_slide',
+    ),
+
    url(r'^new/$',
        CreateView.as_view(
            success_url='projector_control',
--- a/openslides/static/javascript/agenda.js
+++ b/openslides/static/javascript/agenda.js
@ -28,22 +28,6 @@ function hideClosedSlides(hide) {
 }

 $(function() {
-    $('.activate_link').click(function(event) {
-        event.preventDefault();
-        $.ajax({
-            type: 'GET',
-            url: $(this).attr('href'),
-            dataType: 'json',
-            data: '',
-            success: function(data) {
-                $('.activeline').removeClass('activeline').addClass('inactiveline');
-                $('#item_row_' + data.active).removeClass('inactiveline').addClass('activeline');
-            },
-            error: function () {
-                alert("Ajax Error");
-            }
-        });
-    });
    $('.close_link').click(function(event) {
        event.preventDefault();
        slide = $(this);
@ -77,48 +61,4 @@ $(function() {
    } else if ($.cookie('Slide.HideClosed') == 1) {
        hideClosedSlides(true);
    }
-
-    // control the projector
-    $('.projector_edit').click(function(event) {
-        event.preventDefault();
-        link = $(this);
-        $.ajax({
-            type: 'GET',
-            url: link.attr('href'),
-            dataType: 'json',
-            success: function(data) {
-            }
-        });
-    });
-
-    // control countdown
-    $('.projector_countdown').click(function(event) {
-        event.preventDefault();
-        link = $(this);
-        $.ajax({
-            type: 'GET',
-            url: link.attr('href'),
-            dataType: 'json',
-            success: function(data) {
-            }
-        });
-    });
-    $('.countdown_visible_link').click(function(event) {
-        event.preventDefault();
-        link = $(this);
-        $.ajax({
-            type: 'GET',
-            url: link.attr('href'),
-            dataType: 'json',
-            success: function(data) {
-                if (data.countdown_visible == "True") {
-                    newclass = 'open';
-                } else {
-                    newclass = 'closed';
-                }
-                link.removeClass('closed open').addClass(newclass);
-                link.attr('href', data.link);
-            }
-        });
-    });
 });
--- a/openslides/static/javascript/projector-control.js
+++ b/openslides/static/javascript/projector-control.js
@ -1,82 +1,22 @@
-function hideLine(object) {
-    if (object == []) {
-        return;
-    }
-    object.hide();
-    id = object.children('td.tabledrag-hide').children('input.menu-mlid').attr('value');
-    $('.menu-plid[value=\'' + id + '\']').parent().parent().each(function() {
-        hideLine($(this));
-    });
-}
-
-function hideClosedSlides(hide) {
-    if (hide) {
-        $('#hidelink').attr('title','show');
-        $('#hidelink').removeClass('hide').addClass('show');
-        $('.close_link.closed').parent().parent().each(function() {
-            hideLine($(this));
-        });
-        hidden = $('#menu-overview tr:hidden').size();
-        $('#hiddencount').text(', davon ' + hidden + ' verborgen.');
-    } else {
-        $('#menu-overview tr').show();
-        $('#hidelink').attr('title','hide');
-        $('#hidelink').removeClass('show').addClass('hide');
-        $('#hiddencount').text('');
-    }
-    return false;
-}
-
 $(function() {
+    // activate an element to show it on projector
    $('.activate_link').click(function(event) {
        event.preventDefault();
+        link = $(this);
        $.ajax({
            type: 'GET',
            url: $(this).attr('href'),
            dataType: 'json',
            data: '',
            success: function(data) {
-                $('.activeline').removeClass('activeline').addClass('inactiveline');
-                $('#item_row_' + data.active).removeClass('inactiveline').addClass('activeline');
+                $('.activate_link').removeClass('active');
+                link.addClass('active');
            },
            error: function () {
                alert("Ajax Error");
            }
        });
    });
-    $('.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);
-            }
-        });
-    });
-    // hide closed items
-    $('#action_field span').after($('<a id="hidelink" class="hidelink hide" title="hide" href="#"><span></span></a>').click(function () {
-        if ($.cookie('Slide.HideClosed') == 1) {
-            $.cookie('Slide.HideClosed', 0);
-            hideClosedSlides(false);
-        } else {
-            $.cookie('Slide.HideClosed', 1);
-            hideClosedSlides(true);
-        }
-    }));
-    if ($.cookie('Slide.HideClosed') === null) {
-        $.cookie('Slide.HideClosed', 0);
-    } else if ($.cookie('Slide.HideClosed') == 1) {
-        hideClosedSlides(true);
-    }

    // control the projector
    $('.projector_edit').click(function(event) {
--- a/openslides/static/styles/agenda.css
+++ b/openslides/static/styles/agenda.css
@ -1,34 +1,3 @@
-a.activate_link div {
-    background-image: url(/static/images/icons/task-accepted-grey.png);
-    background-repeat: no-repeat;
-    float: left;
-    width: 16px;
-    height: 16px;
-    padding-right: 10px;
-}
-a.inactivate_link div {
-    background-image: url(/static/images/icons/task-accepted.png);
-    background-repeat: no-repeat;
-    float: left;
-    width: 16px;
-    height: 16px;
-    padding-right: 10px;
-}
-tr.activeline a.activate_link div {
-    background-image: url(/static/images/icons/task-accepted.png);
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 16px;
-    height: 16px;
-}
-tr.inactiveline a.activate_link div {
-    background-image: url(/static/images/icons/task-accepted-grey.png);
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 16px;
-    height: 16px;
-}
-
 a.close_link.closed span {
    background-image: url(/static/images/icons/user-offline.png);
    background-repeat: no-repeat;
@ -63,33 +32,3 @@ a.hidelink.show span {
    display: inline-block;
 }

-a.countdown_visible_link.closed div {
-    background-image: url(/static/images/icons/user-offline.png);
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 16px;
-    height: 16px;
-    display: inline-block;
-}
-a.countdown_visible_link.open div {
-    background-image: url(/static/images/icons/user-online.png);
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 16px;
-    height: 16px;
-    display: inline-block;
-}
-
-
-#iframe {
-    -moz-transform: scale(0.25, 0.25) translate(-150%, -150%);
-    -webkit-transform: scale(0.25, 0.25) translate(-150%, -150%);
-    -o-transform: scale(0.25, 0.25) translate(-150%, -150%);
-    transform: scale(0.25, 0.25) translate(-150%, -150%);
-    width: 400%;
-    height: 400%;
-}
-#iframewrapper {
-    width: 256px;/*100%;*/
-    height: 192px;/*230px;*/
-}
--- a/openslides/static/styles/projector-control.css
+++ b/openslides/static/styles/projector-control.css
@ -0,0 +1,76 @@
+/**
+ * OpenSlides projector control template style
+ */
+
+/* Portlet */
+.column {
+    width: 50%;
+    float: left;
+    padding-bottom: 0px;
+}
+.portlet {
+    margin: 0 1em 1em 0;
+}
+.portlet-header {
+    margin: 0.3em;
+    padding-bottom: 4px;
+    padding-left: 0.2em;
+}
+.portlet-header .ui-icon {
+    float: right;
+}
+.portlet-content {
+    padding: 0.4em;
+    overflow: hidden;
+}
+.ui-sortable-placeholder {
+    border: 1px dotted black;
+    visibility: visible !important;
+    height: 50px !important;
+}
+.ui-sortable-placeholder * {
+    visibility: hidden;
+}
+
+/* iframe */
+#iframe {
+    -moz-transform: scale(0.25, 0.25) translate(-150%, -150%);
+    -webkit-transform: scale(0.25, 0.25) translate(-150%, -150%);
+    -o-transform: scale(0.25, 0.25) translate(-150%, -150%);
+    transform: scale(0.25, 0.25) translate(-150%, -150%);
+    width: 400%;
+    height: 400%;
+}
+#iframewrapper {
+    width: 256px;/*100%;*/
+    height: 192px;/*230px;*/
+}
+/* countdown */
+a.countdown_visible_link.closed div {
+    background-image: url(/static/images/icons/user-offline.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+}
+a.countdown_visible_link.open div {
+    background-image: url(/static/images/icons/user-online.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+}
+/* activate link */
+a.activate_link div {
+    background-image: url(/static/images/icons/task-accepted-grey.png);
+    background-repeat: no-repeat;
+    float: left;
+    width: 16px;
+    height: 16px;
+    padding-right: 10px;
+}
+a.activate_link.active div {
+    background-image: url(/static/images/icons/task-accepted.png);
+}
--- a/openslides/static/styles/projector.css
+++ b/openslides/static/styles/projector.css
@ -166,4 +166,3 @@ tr.total td {
    border-top: 1px solid #333333;
    background-color: #e3e3e3;
 }
-