Display notifications on the site, and provide a ajaxy way to acknowledge them

local/context.py

@@ -5,6 +5,7 @@ from django.db.models import Sum
 from donate.models import Donation
 from datetime import datetime
 from django.conf import settings
+from notification.models import Notice
 from django.core.urlresolvers import reverse
 
 def random_quote(request):
@@ -35,6 +36,10 @@ def donation_info(request):
         progress = donationTotal/goal*100
     return {'donation_month_total': donationTotal, 'donation_month_goal': goal, 'donation_goal_progress': progress}
 
+def notifications(request):
+    if request.user.is_authenticated():
+        return {'notices': Notice.objects.filter(unseen=True, user=request.user, on_site=True)}
+
 def javascript_uris(request):
     uris = (
       'local.views.mark_notifications_read',

local/urls.py

@@ -4,6 +4,7 @@ from django.views.generic.simple import direct_to_template
 
 urlpatterns = patterns('local',
     url(r'^me$', 'views.profile', name='user_profile'),
+    url(r'^me/notifications/mark_read$', 'views.mark_notifications_read'),
     url(r'^user/(?P<username>.+)$', 'views.profile'),
     url(r'^player/(?P<mc_username>.+)$', 'views.profile'),
     url(r'^list$', 'views.list'),

local/views.py

@@ -130,3 +130,10 @@ def index(request):
         latestNews = None
     forums = Forum.objects.filter(parent=None)
     return render_to_response('local/index.html', {'news': latestNews, 'forums': forums}, context_instance = RequestContext(request))
+
+@login_required
+def mark_notifications_read(request):
+    for notice in notification.Notice.objects.notices_for(request.user, unseen=True):
+        notice.unseen = False
+        notice.save()
+    return HttpResponseRedirect(reverse('user_profile'))

settings.py

@@ -175,6 +175,7 @@ TEMPLATE_CONTEXT_PROCESSORS = (
     "local.context.login_form",
     "local.context.forum_activity",
     "local.context.donation_info",
+    "local.context.notifications",
     "local.context.javascript_uris",
     "minecraft.context.server_info",
     "appversion.context.git_version",

static/css/main.css

@@ -502,3 +502,30 @@ fieldset {
 .petition-list .petition-title {
     font-size: xx-large;
 }
+
+#notifications-block {
+    border: 1px solid #f80;
+    background-color: #fa4;
+    margin: 1em;
+    color: #000;
+    font-size: large;
+    padding: 3px;
+}
+
+#notifications-block li {
+    padding: 5px;
+    list-style: none;
+    padding-left: 40px;
+}
+
+#notifications-block li.notification-ack {
+    border: none;
+}
+
+#notifications-block input {
+    float:right;
+}
+
+#notifications-block li.notice-badge_awarded {
+    background: url("badges/background.png") left center no-repeat;
+}

static/js/notifications.js

@@ -0,0 +1,7 @@
+$(document).ready(function () {
+  $("#notification-ack-form").submit(function(evt) {
+    evt.preventDefault();
+    $("#notifications-block").slideUp();
+    $.get(uris['local.views.mark_notifications_read']);
+  });
+});

templates/base_full.html

@@ -33,6 +33,7 @@ s.parentNode.insertBefore(po, s);
 <script type="text/javascript" language="javascript" src="{{STATIC_PREFIX}}/js/jquery.js"></script>
 <script type="text/javascript" language="javascript" src="{{STATIC_PREFIX}}/js/jquery-ui.js"></script>
 <script type="text/javascript" language="javascript" src="{{STATIC_PREFIX}}/js/poll.js"></script>
+<script type="text/javascript" language="javascript" src="{{STATIC_PREFIX}}/js/notifications.js"></script>
 {% block extrahead %}{% endblock %}
 <script type="text/javascript">
 
@@ -142,6 +143,17 @@ s.parentNode.insertBefore(po, s);
     </div>
     {% endif %}
     <div class="grid_12">
+        {% if notices %}
+        <div id="notifications-block">
+          <ul>
+            {% for notice in notices %}
+              <li class="notice-unseen-{{notice.unseen}} notice-{{notice.notice_type}}">{{notice.added}} - {{notice.message|safe}}</li>
+            {% endfor %}
+            <li class="notification-ack"><form id="notification-ack-form" action="{% url local.views.mark_notifications_read %}" method="GET"><input type="submit" value="Ok"/></form></li>
+          </ul>
+          <br style="clear:both;"/>
+        </div>
+        {% endif %}
         <div id="donation-slider">
           <div id="donation-text"><a href="{% url donate.views.index %}">Donations this month: ${{donation_month_total}} of ${{donation_month_goal}}</a></div>
           <div id="donation-progress" style="width: {{donation_goal_progress}}%"></div>