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

This commit is contained in:
Emanuel Schuetze 2012-04-10 20:09:10 +02:00
parent 83ba0cbcf9
commit fdc83048f4
10 changed files with 107 additions and 255 deletions

View File

@ -139,4 +139,4 @@ register_slidemodel(Item, category=_('Agenda'), model_name=_('Agenda Item'))
from projector.api import register_slidefunc from projector.api import register_slidefunc
from agenda.slides import agenda_show from agenda.slides import agenda_show
register_slidefunc('agenda_show', agenda_show, category=_('Agenda')) register_slidefunc(_('Agenda'), agenda_show, category=_('Agenda'))

View File

@ -1,45 +1,30 @@
{% load i18n %} {% load i18n %}
<tr id="item_row_{{ item.id }}" class="draggable{% cycle ' odd' '' %} <tr class="draggable{% cycle ' odd' '' %}
{% if item.active %} activeline{% else %} {% if item.active %}activeline{% endif %}">
{% 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 %}
<td> <td>
{% if item.closed %} {% if item.closed %}
<img src="/static/images/icons/task-complete.png" title="{% trans 'Item closed' %}"> <img src="/static/images/icons/task-complete.png" title="{% trans 'Item closed' %}">
{% endif %} {% endif %}
</td> </td>
{% endif %}
<td> <td>
{% for p in item.get_ancestors %} {% for p in item.get_ancestors %}
<div class="indentation">&nbsp;</div> <div class="indentation">&nbsp;</div>
{% endfor %} {% endfor %}
{% if perms.agenda.can_manage_agenda %} {% if perms.agenda.can_manage_agenda %}
<div class="dragcell"></div> <div class="dragcell"></div>
{% endif %} {% endif %}
{{ item }} {{ item }}
</td> </td>
<td> <td>
<span style="width: 1px; white-space: nowrap;"> <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> <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 %} {% 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_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 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 %}"> <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> <span></span>
</a> </a>
{% if item.children.exists %} {% 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> <a href="{% url item_activate_summary item.id %}"><img src="/static/images/icons/view-list-tree.png" title="{% trans 'Select item overview' %}"></a>
{% endif %} {% endif %}

View File

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

View File

@ -5,42 +5,25 @@
{% block header %} {% block header %}
<link type="text/css" href="/static/styles/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" /> <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/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/projector-control.js"></script>
<script type="text/javascript" src="/static/javascript/jquery.cookie.js"></script> <script type="text/javascript" src="/static/javascript/jquery.cookie.js"></script>
<script type="text/javascript"> <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() { $(function() {
$( ".column" ).sortable({ $( ".column" ).sortable({
connectWith: ".column" connectWith: ".column"
}); });
$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" ) .find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" ) .addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick'></span>") .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
.end() .end()
.find( ".portlet-content" ); .find( ".portlet-content" );
$( ".portlet-header .ui-icon" ).click(function() { $( ".portlet-header .ui-icon" ).click(function() {
$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" ); $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle(); $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
}); });
$( ".column" ).disableSelection(); $( ".column" ).disableSelection();
}); });
</script> </script>
@ -85,9 +68,9 @@
</a> </a>
</div> </div>
{% for category, slides in categories.items %}
<div class="column"> <div class="column">
{% for category, slides in categories.items %}
<div class="portlet"> <div class="portlet">
<div class="portlet-header">{{ category }}</div> <div class="portlet-header">{{ category }}</div>
<div class="portlet-content"> <div class="portlet-content">
@ -96,24 +79,20 @@
<ul style="line-height: 180%"> <ul style="line-height: 180%">
{% for item in slide.get_items %} {% for item in slide.get_items %}
<li><a href="{% url projector_activate_slide item.sid %}" <li><a href="{% url projector_activate_slide item.sid %}"
{% if item.active %} class="activate_link {% if item.active %}active{% endif %}"
class="inactivate_link" ><div></div></a><a href="{% url projector_edit_slide item.id %}">{{ item }}</a></li>
{% else %}
class="activate_link"
{% endif %}
><div></div></a>{{ item }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
{% else %} {% else %}
<a href="{% url projector_activate_slide slide.key %}" <a href="{% url projector_activate_slide slide.key %}"
class="activate_link" class="activate_link {% if slide.active %}active{% endif %}"
><div></div></a>{{ slide.key }} ><div></div></a>{{ slide.key }}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div>
{% endfor %} {% endfor %}
</div>
<div class="column"> <div class="column">
<div class="portlet"> <div class="portlet">

View File

@ -15,6 +15,7 @@ from django.conf.urls.defaults import *
from utils.views import CreateView from utils.views import CreateView
from views import ControlView, ActivateView from views import ControlView, ActivateView
from agenda.views import ItemUpdate
from models import ProjectorSlide from models import ProjectorSlide
@ -32,6 +33,11 @@ urlpatterns = patterns('projector.views',
name='projector_activate_slide', name='projector_activate_slide',
), ),
url(r'^edit/(?P<pk>\d+)/$',
ItemUpdate.as_view(),
name='projector_edit_slide',
),
url(r'^new/$', url(r'^new/$',
CreateView.as_view( CreateView.as_view(
success_url='projector_control', success_url='projector_control',

View File

@ -28,22 +28,6 @@ function hideClosedSlides(hide) {
} }
$(function() { $(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) { $('.close_link').click(function(event) {
event.preventDefault(); event.preventDefault();
slide = $(this); slide = $(this);
@ -77,48 +61,4 @@ $(function() {
} else if ($.cookie('Slide.HideClosed') == 1) { } else if ($.cookie('Slide.HideClosed') == 1) {
hideClosedSlides(true); 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);
}
});
});
}); });

View File

@ -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() { $(function() {
// activate an element to show it on projector
$('.activate_link').click(function(event) { $('.activate_link').click(function(event) {
event.preventDefault(); event.preventDefault();
link = $(this);
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: $(this).attr('href'), url: $(this).attr('href'),
dataType: 'json', dataType: 'json',
data: '', data: '',
success: function(data) { success: function(data) {
$('.activeline').removeClass('activeline').addClass('inactiveline'); $('.activate_link').removeClass('active');
$('#item_row_' + data.active).removeClass('inactiveline').addClass('activeline'); link.addClass('active');
}, },
error: function () { error: function () {
alert("Ajax Error"); 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 // control the projector
$('.projector_edit').click(function(event) { $('.projector_edit').click(function(event) {

View File

@ -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 { a.close_link.closed span {
background-image: url(/static/images/icons/user-offline.png); background-image: url(/static/images/icons/user-offline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -63,33 +32,3 @@ a.hidelink.show span {
display: inline-block; 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;*/
}

View File

@ -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);
}

View File

@ -166,4 +166,3 @@ tr.total td {
border-top: 1px solid #333333; border-top: 1px solid #333333;
background-color: #e3e3e3; background-color: #e3e3e3;
} }