blechreiz-website/eventplanner/templates/eventplanner/eventplanning_view.html

265 lines
7.2 KiB
HTML

{% extends "website/base.html" %}
{% load sekizai_tags staticfiles %}
<!-- No Feature slider -->
{% block feature_slider %}
{% endblock %}
<!-- Static Navbar at top -->
{% block navbar_options %} navbar navbar-inverse navbar-static-top {% endblock %}
{% block content %}
{% addtoblock "css" %}
<style>
/*
@media (max-width: 600px) {
#eventTable td:nth-child(7),
#eventTable th:nth-child(7) {display: none;}
}*/
table {
width: 100%;
border-collapse: collapse;
}
td input[type="text"]{
width: 130px !important;
}
@media only screen and (max-width: 760px)
{
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50% !important;
padding-right: 1px !important;
border: none;
border-top: 0px solid rgb(221, 221, 221) !important;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
td.empty {
display:none;
}
td input[type="text"]{
width: 105px !important;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "Termin"; }
td:nth-of-type(2):before { content: "Datum"; }
td:nth-of-type(3):before { content: "Uhrzeit"; }
td:nth-of-type(4):before { content: "Treffpunkt"; }
td:nth-of-type(5):before { content: "Ort"; }
td:nth-of-type(6):before { content: "Status"; }
td:nth-of-type(7):before { content: "Kommentar"; }
}
</style>
{% endaddtoblock %}
{% addtoblock "js" %}
<script>
function setEventButtonStatus( button, status ) {
others = button.siblings();
all = button.add( button.siblings() );
all.removeClass("btn-danger").
removeClass("btn-warning").
removeClass("btn-success").
removeClass("btn-info");
others.addClass("btn-info");
if ( status === "Yes" ) {
button.addClass("btn-success");
}
else if ( status === "No" ) {
button.addClass("btn-danger");
}
else if ( status === "?" ) {
button.addClass("btn-warning");
}
}
function putStatus( button, status )
{
$("#saving").html("Speichere..");
p = button.parent();
putObject = [ { "event": p.data("event-id"),
"user": p.data("username"),
"status": status } ];
request = $.ajax( {
type: "PUT",
url: "{% url 'event_api' %}",
contentType: "application/json",
data: JSON.stringify(putObject),
success: function() { $("#saving").html("Ok"); },
error: function(jqXHR, text, errorText) { console.log("Ajax failed " + errorText + JSON.stringify(putObject) ); }
});
setEventButtonStatus( button, status );
}
$(function(){
$(".event-comment").bindWithDelay("keypress", function() {
$("#saving").html("Speichere..");
putObject = [ { "event": $(this).data("event-id"),
"user": $(this).data("username"),
"comment": $(this).val() } ];
$.ajax( {
type: "PUT",
url: "{% url 'event_api' %}",
contentType: "application/json",
data: JSON.stringify(putObject),
success: function() { $("#saving").html("Ok"); }
});
}, 800 );
$(".event-status-yes").click(function () {
putStatus( $(this), "Yes" );
});
$(".event-status-no").click(function () {
putStatus( $(this), "No" );
});
$(".event-status-dontknow").click(function () {
putStatus( $(this), "?" );
});
});
</script>
{% endaddtoblock %}
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"> <a>{{request.user.username}}</a> </li>
<li><a href="grid">Übersicht</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row-fluid eventTable">
<h2>Termine</h2>
<div class="span12">
<div class="box-content">
<table id="eventTable" class="table table-striped">
<thead>
<tr>
<th id='eventTitle'>Termin</th>
<th id='date' >Datum</th>
<th id='time' >Uhrzeit</th>
<th id='time' >Treffpunkt</th>
<th id='place' >Ort</th>
<th id='status' >Status ändern</th>
<th id='comment' >Kommentar</th>
</tr>
</thead>
<tbody>
{% for event in events %}
<tr>
{% if not perms.eventplanner.change_event %}
<td class="center">{{ event.title }}</td>
{% else %}
<td class="center"> <a href="{{ event.pk }}">{{ event.title }}</a> </td>
{% endif %}
<td class="center {% if not event.date %}empty{% endif %}">{{ event.date | date:"D, d.m.y" }} </td>
<td class="center {% if not event.time %}empty{% endif %}">{% if event.time %} {{ event.time | time:"H:i" }} {% endif %} </td>
<td class="center {% if not event.meeting_time %}empty{% endif %}">{% if event.meeting_time %} {{ event.meeting_time | time:"H:i" }} {% endif %}</td>
<td class="center {% if not event.location %}empty{% endif %}">
{% if event.map_location and request.device.android %}
<a href="geo:{{event.map_location}}"> {{event.location}}</a>
{% else %}
{{event.location}}
{% endif %}
</td>
<td class="center">
<div class="btn-group event-status-select" data-event-id="{{event.pk}}" data-username="{{user.username}}" >
<button class="btn event-status-yes {% if event.participation.status == "Yes" %} btn-success {% else %} btn-info {% endif %}">
<i class="icon-ok-sign icon-white"></i>
</button>
<button class="btn event-status-dontknow {% if event.participation.status == "?" %} btn-warning {% else %} btn-info {% endif %}">
<i class="icon-question-sign icon-white "></i>
</button>
<button class="btn event-status-no {% if event.participation.status == "No" %} btn-danger {% else %} btn-info {% endif %}">
<i class="icon-remove-sign icon-white"></i>
</button>
</div>
</td>
<td>
<div class="input-append">
<input size="16" type="text" data-event-id="{{event.pk}}" data-username="{{user.username}}" class="event-comment" value="{{ event.participation.comment }}" >
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div><!--/span-->
</div>
<div class="row">
<div class="span12">
<p>
<em>Änderungen werden automatisch gespeichert: </em> <em id="saving">Ok</em>
</p>
</div>
</div>
</div>
{% endblock %}