home.html 4.22 KB
{% extends 'base.html' %}

{% load static i18n django_bootstrap_breadcrumbs permission_tags %}

{% block javascript %}
	<script type="text/javascript">
		var pageNum = {{ page_obj.number }}; // The latest page loaded
		var numberPages = {{ paginator.num_pages }}; // Indicates the number of pages
		var baseUrl = '{% url "app:index" %}';

		// loadOnScroll handler
		var loadOnScroll = function() {
		   // If the current scroll position is past out cutoff point...
		    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
		        // temporarily unhook the scroll event watcher so we don't call a bunch of times in a row
		        $(window).unbind();
		        // execute the load function below that will visit the view and return the content
		        loadItems();
		    }
		};

		var loadItems = function() {
		    // Check if page is equal to the number of pages
		    if (pageNum == numberPages) {
		        return false
		    }
		    // Update the page number
		    pageNum = pageNum + 1;

		    $("#loading").show();
		    // Configure the url we're about to hit
		    setTimeout(function (){
			    $.ajax({
			        url: baseUrl, 
			        data: {'page': pageNum},
			        success: function(data) {
			            $("#loading").hide();
			            
			            $("#timeline").append(data);
			        },
			        complete: function(data, textStatus){
			            // Turn the scroll monitor back on
			            $(window).bind('scroll', loadOnScroll);
			        }
			    });
		    }, 1000)
		};

		$(document).ready(function(){     
		   $(window).bind('scroll', loadOnScroll);
		});
	</script>
{% endblock %}

{% block breadcrumbs %}
  {% clear_breadcrumbs %}
  {% breadcrumb 'Home' 'app:index' %}
{% endblock %}

{% block render_breadcrumbs %}
  {% render_breadcrumbs %}
{% endblock %}

{% block sidebar %}
	<div class="panel panel-primary">
        <div class="panel-heading">
          	<img src="{{ user.image.url }}" id="img" class="img-rounded">
          	<p></p>
          	<div class="row">
            	<div class="col-xs-3 col-md-3">
            		<i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
        		</div>
                <div class="col-xs-3 col-md-3">
                	<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
            	</div>
                <div class="col-xs-3 col-md-3">
                	<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
            	</div>
                <div class="col-xs-3 col-md-3">
                	<i class="fa fa-google-plus-official fa-2x" aria-hidden="true"></i>
            	</div>
          	</div>
    	</div>
    	<div class="panel-body">
          	<ul class="nav nav-pills nav-stacked">
            	<li> <a href="{% url 'app:index' %}">{% trans 'Home' %}</a></li>
                <li> <a href="{% url 'users:profile' %}">{% trans 'Profile' %}</a></li>
                <li> <a href="#">{% trans 'Pending Tasks' %}</a></li>
                {% if user|has_role:'student' %}
                	<li> <a href="#">{% trans 'My courses' %}</a></li>
            	{% endif %}
            	{% if user|has_role:'system_admin' %}
            		<li> <a href="{% url 'users:manage' %}">{% trans 'Manage Users' %}</a></li>
            	{% endif %}
            	{% if user|has_role:'system_admin, professor' %}
            		<li> <a href="{% url 'course:manage' %}">{% trans 'Manage Courses' %}</a></li>
            	{% endif %}
          	</ul>
    	</div>
  	</div>
{% endblock %}

{% block content %}
	{% if user|has_role:'system_admin' %}
		<h3>{% trans 'Courses' %}</h3>

		<div id="timeline">
			{% include page_template %}
		</div>
	{% else %}
		<ul class="timeline" style="-webkit-padding-start: 0px">
			<div id="timeline">
				{% include page_template %}
			</div>
		</ul>
	{% endif %}
	
	<div id="loading" class="alert alert-primary" role="alert" style="display: none">
		<center>
			<span class="fa fa-spin fa-circle-o-notch"></span>
		</center>
	</div>
{% endblock %}

{% block rightbar %}
	<div class="panel panel-warning">
      	<div class="panel-heading">
        	<h3 class="panel-title">Pending Stuffs</h3>
      	</div>
    	<div class="panel-body">
    		<p>{% trans 'No pending tasks at the moment.' %}</p>
      	</div>
    </div>
{% endblock rightbar %}