base.html | searchcode

/geocamTalk/templates/geocamTalk/base.html

https://github.com/geocam/geocamMemoWeb
HTML | 127 lines | 119 code | 8 blank | 0 comment | 0 complexity | 9018b95677a6bc110ce620c6228b364f MD5 | raw file

<!DOCTYPE html>
{% load url from future %}
<html>
    <head>
    	<meta charset="utf-8">
        <title>
            {% block title %}
            GeoCam Talk
            {% endblock %}
        </title>
        <script src="{{ MEDIA_URL }}external/js/jquery-1.5.2.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css"/>
        <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
        <script src="http://jquery.malsup.com/media/jquery.media.js?v.92"></script>

        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			$(document).bind("mobileinit", function () {
				//$.mobile.ajaxEnabled = true;
				$.extend($.mobile, {
					ajaxFormsEnabled: false/*,
					ajaxEnabled: false*/
				});
			});
			var running_timestamp = {{ timestamp }};
			var new_message_count = {{ user.profile.getUnreadMessageCount }};
			
			var updateFunction = function() {
				var url = '{% url 'geocamTalk_message_list_all_json' %}';
		    		
		    	url += '?since=' + running_timestamp;
		    	$.getJSON(url, function(data) {
		    		var html_str = "";
		    		for (var i in data['ms']) {
		    			var msg = data['ms'][i];
		    			var pk = msg['messageId'];
		    			var content = msg['content'];
		    			var has_geolocation = msg['hasGeolocation'];
		    			var authorUsername = msg['authorUsername'];
		    			var authorFullname = msg['authorFullname'];
		    			{% if recipient %}
		    			    authorFullname = '<a href="{% url 'geocamTalk_message_list_to' recipient.username %}/' +authorUsername+ '">' +authorFullname+ '</a>' ;
		    			{% endif %}
		    			
		    			var msgDate = new Date (msg['contentTimestamp']);
		    			var content_timestamp =
		    			msgDate.getDate() + "/" + msgDate.getMonth() + "/" + msgDate.getFullYear()
		    			+ " " + msgDate.getHours() + ":" + msgDate.getMinutes();
		    				
			       		html_str += '<li id="message_'+pk+'"><p id="message_'+pk+'_header">';
			       		html_str += 'On '+content_timestamp+' '+authorFullname;
			       		if (has_geolocation == true) {
			       			html_str += '<a href="#" data-rel="dialog" data-transition="pop" data-inline="true" data-role="button" data-icon="geoCam-map" data-iconpos="notext" title="Map Info" data-theme="c" class="ui-btn ui-btn-inline ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Map Info</span><span class="ui-icon ui-icon-geoCam-map ui-icon-shadow"></span></span></a>';
			       		}
			       		html_str += '</p>';
			       		html_str += '<p id="message_'+pk+'_content">'+content+'</p>';
			       		html_str += '</li>';
			       	}
	        	
			       	running_timestamp = data['ts'];
			       	new_message_count += data['msgCnt'];
			       	
			       	$('div[data-role="page"]').each(function() {
			       		$(this).find('#message_list').prepend(html_str);
			       		$(this).find('#new_message_count').html(new_message_count);
					});
					
					if (new_message_count > 0
						&& $('div[data-role="page"]').find('#clear_link').length == 0) {
						var link = $('<a href="#" id="clear_link" data-role="button" data-inline="true" data-theme="c" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Clear Received Messages</span></span></a>');
						link.click(function() {
							$.get('{% url 'geocamTalk_clear_messages' %}', function(data) {
								$('div[data-role="page"]').each(function() {
									$(this).find('#clear_link').remove();
									$(this).find('#new_message_count').html(0);
								});
								running_timestamp = data['ts'];
							});
						});
						$('div[data-role="page"]').find('#new_message_link').after(link);
					}
			    });
			}
			$('div').live('pagebeforeshow', function(event, ui){
				$('a.media').media( { width: 300, height: 20 } );
				updateFunction();
			});
			setInterval(updateFunction, 60 * 10 * 1000); // 10 minutes
		</script>
        {% block css %}{% endblock %}
    </head>
    <body>
    	<div id="bodydiv" data-role="page" data-theme="c">
	        <header>
	        	<div data-role="header">
	        		<h1>{% block pagetitle %}GeoCam Talk{% endblock %}</h1>
	        		<a href="{% url 'geocamTalk_message_list_all' %}" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
	        		<div data-role="navbar">
		        		<ul id="bigsigh">
		        			<li><a id="my_messages_link" href="{% url 'geocamTalk_message_list_to' user.username %}">My Messages (<span id="new_message_count">{{user.profile.getUnreadMessageCount}}</span>)</a></li>
                			<li><a href="{% url 'geocamTalk_message_list_all' %}">All Messages</a></li>
                			<li><a href="{% url 'geocamTalk_message_map' %}">Talk Map</a></li>
		        		</ul>
	        		</div>
	        	</div>
	        </header>
	        <content>
	            <div data-role="content">
	            <a id="new_message_link" href="{% url 'geocamTalk_create_message' %}" data-role="button" data-inline="true">New Message</a>
	            {% block content %}
	            {% endblock %}
	            </div>
	        </content>
	        <footer>
	        	<div data-role="footer" class="ui-bar">
	        		{% if user.is_authenticated %}
	        	        <a href="/accounts/logout/" class="ui-btn-right">Logout {% firstof user.first_name user.username %}</a>
	        	    {% else %}
		                <a href="/accounts/login/">Login</a>
		            {% endif %}
	        	</div>
	        </footer>
        </div>
	        {% block js %}
                {% endblock js %}
    </body>
</html>