blechreiz-website/eventplanner/templates/eventplanner/eventplanning_view.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 "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="container">
      	<p>
          <div class="row">
			<div class="row-fluid eventTable">		
				<div class="span12">

					<h2>Termine</h2>
					
					
					<p class="pull-right" ><a href="grid">zur Übersicht</a></p>
					
					
					<div class="box-content">
						<table 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"> {{ event.date | date:"SHORT_DATE_FORMAT" }} </td>
						  		<td class="center">  {% if event.time %} {{ event.time | time:"H:i" }} {% endif %} </td>
						  		<td class="center">  {% if event.meeting_time %} {{ event.meeting_time | time:"H:i" }} {% endif %} </td>
						  		
						  		<td class="center">  {{ event.location }} </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><!--/row-->
       </div>
		<div class="row">
			<div class="span12">
		  <em>Änderungen werden automatisch gespeichert: </em> <em id="saving">Ok</em>
			</div>
		</div> 	
		
	</p>
	
</div>

{% endblock %}