PageRenderTime 59ms CodeModel.GetById 33ms RepoModel.GetById 0ms app.codeStats 0ms

/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
  1. <!DOCTYPE html>
  2. {% load url from future %}
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>
  7. {% block title %}
  8. GeoCam Talk
  9. {% endblock %}
  10. </title>
  11. <script src="{{ MEDIA_URL }}external/js/jquery-1.5.2.min.js"></script>
  12. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css"/>
  13. <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
  14. <script src="http://jquery.malsup.com/media/jquery.media.js?v.92"></script>
  15. <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  16. <script type="text/javascript">
  17. $(document).bind("mobileinit", function () {
  18. //$.mobile.ajaxEnabled = true;
  19. $.extend($.mobile, {
  20. ajaxFormsEnabled: false/*,
  21. ajaxEnabled: false*/
  22. });
  23. });
  24. var running_timestamp = {{ timestamp }};
  25. var new_message_count = {{ user.profile.getUnreadMessageCount }};
  26. var updateFunction = function() {
  27. var url = '{% url 'geocamTalk_message_list_all_json' %}';
  28. url += '?since=' + running_timestamp;
  29. $.getJSON(url, function(data) {
  30. var html_str = "";
  31. for (var i in data['ms']) {
  32. var msg = data['ms'][i];
  33. var pk = msg['messageId'];
  34. var content = msg['content'];
  35. var has_geolocation = msg['hasGeolocation'];
  36. var authorUsername = msg['authorUsername'];
  37. var authorFullname = msg['authorFullname'];
  38. {% if recipient %}
  39. authorFullname = '<a href="{% url 'geocamTalk_message_list_to' recipient.username %}/' +authorUsername+ '">' +authorFullname+ '</a>' ;
  40. {% endif %}
  41. var msgDate = new Date (msg['contentTimestamp']);
  42. var content_timestamp =
  43. msgDate.getDate() + "/" + msgDate.getMonth() + "/" + msgDate.getFullYear()
  44. + " " + msgDate.getHours() + ":" + msgDate.getMinutes();
  45. html_str += '<li id="message_'+pk+'"><p id="message_'+pk+'_header">';
  46. html_str += 'On '+content_timestamp+' '+authorFullname;
  47. if (has_geolocation == true) {
  48. 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>';
  49. }
  50. html_str += '</p>';
  51. html_str += '<p id="message_'+pk+'_content">'+content+'</p>';
  52. html_str += '</li>';
  53. }
  54. running_timestamp = data['ts'];
  55. new_message_count += data['msgCnt'];
  56. $('div[data-role="page"]').each(function() {
  57. $(this).find('#message_list').prepend(html_str);
  58. $(this).find('#new_message_count').html(new_message_count);
  59. });
  60. if (new_message_count > 0
  61. && $('div[data-role="page"]').find('#clear_link').length == 0) {
  62. 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>');
  63. link.click(function() {
  64. $.get('{% url 'geocamTalk_clear_messages' %}', function(data) {
  65. $('div[data-role="page"]').each(function() {
  66. $(this).find('#clear_link').remove();
  67. $(this).find('#new_message_count').html(0);
  68. });
  69. running_timestamp = data['ts'];
  70. });
  71. });
  72. $('div[data-role="page"]').find('#new_message_link').after(link);
  73. }
  74. });
  75. }
  76. $('div').live('pagebeforeshow', function(event, ui){
  77. $('a.media').media( { width: 300, height: 20 } );
  78. updateFunction();
  79. });
  80. setInterval(updateFunction, 60 * 10 * 1000); // 10 minutes
  81. </script>
  82. {% block css %}{% endblock %}
  83. </head>
  84. <body>
  85. <div id="bodydiv" data-role="page" data-theme="c">
  86. <header>
  87. <div data-role="header">
  88. <h1>{% block pagetitle %}GeoCam Talk{% endblock %}</h1>
  89. <a href="{% url 'geocamTalk_message_list_all' %}" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
  90. <div data-role="navbar">
  91. <ul id="bigsigh">
  92. <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>
  93. <li><a href="{% url 'geocamTalk_message_list_all' %}">All Messages</a></li>
  94. <li><a href="{% url 'geocamTalk_message_map' %}">Talk Map</a></li>
  95. </ul>
  96. </div>
  97. </div>
  98. </header>
  99. <content>
  100. <div data-role="content">
  101. <a id="new_message_link" href="{% url 'geocamTalk_create_message' %}" data-role="button" data-inline="true">New Message</a>
  102. {% block content %}
  103. {% endblock %}
  104. </div>
  105. </content>
  106. <footer>
  107. <div data-role="footer" class="ui-bar">
  108. {% if user.is_authenticated %}
  109. <a href="/accounts/logout/" class="ui-btn-right">Logout {% firstof user.first_name user.username %}</a>
  110. {% else %}
  111. <a href="/accounts/login/">Login</a>
  112. {% endif %}
  113. </div>
  114. </footer>
  115. </div>
  116. {% block js %}
  117. {% endblock js %}
  118. </body>
  119. </html>