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

{% extends "website/base.html" %}

{% load sekizai_tags staticfiles %}


{% block content %}
	 {% addtoblock "css" %}
	 	<style>
	 	
	 		.infoColumn {
	 			text-align: center;
	 			font-size: 11px;
	 		}
	 	
	 		button.eventButton {
	 			width: 32px;
	 			font-size: 10px;
	 		}
			span.eventButton {
				height: 16px;
				width: 18px;
				text-align: center;
				font-size: 10px;
			}	 		
	 		.eventButton i {
	 			margin-right:2px;
	 		}
	 		
	 		.with_comment {
	 			font-style:  italic;
                font-weight: 900;
                font-size: 11px;
	 		}
	 		.usernameHeader {
	 			font-size:10px;
	 			text-align: center;
	 		}
	 		td a {
	 			font-size: 11px;
	 		}
	 		
	 	</style>
	 {% endaddtoblock %}
	
	 {% addtoblock "js" %}
	 	<script>
		$(document).ready(function(){

		    {% if not perms.eventplanner.admin %}
			$(".eventButton").attr('disabled', 'disabled');
			$(".deleteButton").hide();
		    {% endif %}

	 		$('.eventButton').tooltip()
	 		$('.infoColumn').tooltip()

	 		$("button.eventButton").click( function (e) {
	 			e.preventDefault();
				$(this).removeClass("btn-danger")
					   .removeClass("btn-warning")
					   .removeClass("btn-success");
				
				if ( $(this).data('status') == "Yes" ) 
				{
					$(this).data( "status", "?" )
						   .addClass("btn-warning");
					$(this).children("span.text").html("?");
				} else if ( $(this).data('status') == "?" ) 
				{
					$(this).data( "status", "No" )
					       .addClass("btn-danger");
					$(this).children("span.text").html("Nein");

				} else if ( $(this).data('status') == "No" ) 
				{
					$(this).data( "status", "-" );
					$(this).children("span.text").html("-");
				} else if ( $(this).data('status') == "-" )
                {
					$(this).data( "status", "Yes" )
					       .addClass("btn-success");
					$(this).children("span.text").html("Ja");
                }
				
				$('#saveButton').removeAttr('disabled');
		    });		    		    

	 		
	 		
	 		$("#saveButton").click( function(e) {
	 			e.preventDefault();
	 			arr = [];
	 			
	 			$('.userEventTableData').each( function() {
	 				
	 				dataObject = {
	 						"event"   : $(this).data("event"),
	 						"user"    : $(this).data("username"),
	 						"status"  : $(this).children("button").data("status")
	 				};
	 				
	 				arr.push(dataObject);
	 			});

				$.ajax( {
					type: "PUT",
					url: "{% url 'event_api' %}",
					contentType: "application/json",
					data: JSON.stringify(arr)
				});
				$('#saveButton').attr('disabled','true');

	 		});
	 		
	 		
	 		$( ".deleteButton" ).click(function() {
	 			if (confirm('Termin wirklich löschen?')) {
	 				pk = $(this).data( "pk" )
	 				window.location = pk + "/delete"
	 			}
	 		});
	 		
		});
	 	</script>
	 {% endaddtoblock %}


	 <div class="navbar">
	 	<div class="navbar-inner">
	 	    <ul class="nav">
	 		    <li> <a href="/events">{{request.user.username}}</a>     </li>
	 		    <li class="active" ><a>Übersicht</a></li>
	 	    </ul>
	     </div>
     </div>


      <div class="container">
      	<form>
          <div class="row">
			<div class="row-fluid eventTable">
				<div class="span12">

					<h2>Termine</h2>

					<div class="box-content">
						<table class="table table-striped">
		
						  <thead>
							  <tr>
							  	  <th>  </th>
							  	  <th>    </th>							  	  
							  	  {% for name in usernames %}
							  	  	<th class='usernameHeader'> {{ name|capfirst }} </th>
							  	  {% endfor %}
							  	  
							  	  <th> </th>
							  </tr>
						  </thead>   
						  <tbody>
						  	
						  {% for event in events %}
						  	<tr class="eventRow">
						  		<td class="center" > <a href="{{ event.pk }}" >  {{ event.title }}  </a> </td>
						  		<td class="center">
						  			<div class="infoColumn"	 title="{% if event.time %}        Uhrzeit:    {{ event.time | time:"H:i" }}       {% endif %} 
						  									        {% if event.meeting_time %}  ( Treffpunkt: {{event.meeting_time | time:"H:i"}} ) {% endif %} ">
						  										     
						  				      {% if event.location %}  {{ event.location }} <br/> {% endif %} 
						  				       {{ event.date | date:"D,  d.m.y" }}
						  			</div> 
						  		</td>						  		
								
								
								{% for p in event.participation %}
									
								    {% if perms.eventplanner.admin %}
									
									<td class="center userEventTableData" data-username="{{p.user.username}}" data-event="{{event.pk}}">
										{% if p.status == "Yes" %}  
											<button class="btn btn-mini btn-success eventButton" title="{{p.comment}}" data-status="{{p.status}}">
												<span class="text {% if p.comment %}with_comment{% endif %}">Ja</span>
											</button>
										{% elif p.status == "No" %} 
											<button class="btn btn-mini btn-danger eventButton"  title="{{p.comment}}" data-status="{{p.status}}">
												<span class="text {% if p.comment %}with_comment{% endif %}">Nein</span>
											</button>
                                        {% elif p.status == "?" %}
                                           	<button class="btn btn-mini btn-warning eventButton" title="{{p.comment}}" data-status="{{p.status}}">
												<span class="text {% if p.comment %}with_comment{% endif %}">?</span>
											</button>
										{% else %}
											<button class="btn btn-mini eventButton" title="{{p.comment}}" data-status="{{p.status}}">
												<span class="text {% if p.comment %}with_comment{% endif %}">-</span>
											</button>
										{% endif %}
									</td> 
									{% else %}
										<td class="center userEventTableData" data-username="{{p.user.username}}" data-event="{{event.pk}}">
											{% if p.status == "Yes" %}  
												<span class="badge badge-success eventButton" title="{{p.comment}}" data-status="{{p.status}}">
													<span class="text {% if p.comment %}with_comment{% endif %}">Ja</span>
												</span>
											{% elif p.status == "No" %} 
												<span class="badge badge-important eventButton"  title="{{p.comment}}" data-status="{{p.status}}">
													<span class="text {% if p.comment %}with_comment{% endif %}">Nein</span>
												</span>
											{% elif p.status == "?" %}
												<span class="badge badge-warning eventButton" title="{{p.comment}}" data-status="{{p.status}}">
													<span class="text {% if p.comment %}with_comment{% endif %}">?</span>
												</span>
                                            {% else %}
												<span class="badge eventButton" title="{{p.comment}}" data-status="{{p.status}}">
													<span class="text {% if p.comment %}with_comment{% endif %}">-</span>
												</span>
											{% endif %}

										</td> 
									{% endif %}
									
								{% endfor %}

									<td>
										<a class="btn btn-mini btn-inverse deleteButton" data-pk="{{event.pk}}"><i class="icon-trash icon-white"></i> </a>
									</td>
								</tr>
						  {% endfor %}
						  
			  			  {% if perms.eventplanner.admin %}
						  <tr>
						  	  <td class="center" colspan="80"> <a href="add">Termin hinzufügen...</a> </td>
						  <tr>
			  			  {% endif %}
			  			  
			  			  </form>
						  </tbody>
					  </table> 
					  
					</div>
				</div><!--/span-->
						
			</div><!--/row-->


			{% if perms.eventplanner.admin %}
			<div class="row">
				<div class="span12">
					<button id="saveButton" class="btn btn-primary" disabled="true">Speichern</button>
				</div>
			</div>
			{% endif %}</form>
			
       </div>
   </div>

{% endblock %}