dashboard: add notifications templates and view

e62d7a9b · Kálmán Viktor · Őry Máté · 12426296 · e62d7a9b · e62d7a9b
Commit e62d7a9b authored Feb 25, 2014 by Kálmán Viktor Committed by Őry Máté Feb 26, 2014
8 changed files
--- a/circle/dashboard/static/dashboard/dashboard.css
+++ b/circle/dashboard/static/dashboard/dashboard.css
@@ -331,3 +331,30 @@ a.hover-black {
 	display: block;
 }
+.notification-messages {
+  padding: 10px 8px;
+  width: 350px;
+}
+.notification-message {
+  margin-bottom: 10px;
+  padding: 0 0 4px 0;
+  border-bottom: 1px dotted #D3D3D3;
+}
+.notification-messages .notification-message:last-child {
+  margin-bottom: 0px;
+  padding: 0px;
+  border-bottom: none;
+}
+.notification-message-text {
+  padding: 8px 15px;
+  display: none;
+}
+.notification-message .notification-message-subject {
+  cursor: pointer;
+}
--- a/circle/dashboard/static/dashboard/dashboard.js
+++ b/circle/dashboard/static/dashboard/dashboard.js
@@ -206,6 +206,26 @@ $(function () {
    }
  });
+  /* notification message toggle */
+  $(".notification-message-subject").click(function() {
+    $(".notification-message-text", $(this).parent()).slideToggle();
+    return false;
+  });
+  /* notification read */
+  $("#notification-button").click(function() {
+    $.ajax({
+      type: "POST",
+      url: "/dashboard/notifications/",
+      headers: {"X-CSRFToken": getCookie('csrftoken')}, 
+      success: function(re, textStatus, xhr) { 
+        //console.log("success");
+      },
+      error: function(xhr, textStatus, error) {
+        addMessage('Uh oh :(', 'danger')
+      }
+    });
+  });
 });
 function generateVmHTML(pk, name, fav) {

--- a/circle/dashboard/templates/dashboard/_notifications-timeline.html
+++ b/circle/dashboard/templates/dashboard/_notifications-timeline.html
+{% for n in notifications %}
+  <li class="notification-message">
+    <span class="notification-message-subject">
+      {% if n.status == "new" %}<i class="icon-envelope-alt"></i> {% endif %}
+      {{ n.subject }}
+    </span>
+    <span class="notification-message-date pull-right">
+      {{ n.created|timesince }}
+    </span>
+    <div style="clear: both;"></div>
+    <div class="notification-message-text">
+      {{ n.message }}
+    </div>
+  </li>
+{% endfor %}
--- a/circle/dashboard/templates/dashboard/base.html
+++ b/circle/dashboard/templates/dashboard/base.html
@@ -23,8 +23,19 @@
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
-      <a class="navbar-brand" href="/dashboard/">{% block header-site %}CIRCLE{% endblock %}</a>
+        <div class="navbar-header">  
-      <!-- temporarily -->
+          <a class="navbar-brand" href="{% url "dashboard.index" %}">CIRCLE</a>
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+        </div><!-- .navbar-header -->
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav pull-right">
+            {% block navbar-ul %}
+            {% endblock %}    
+          </ul>
          <a class="navbar-brand pull-right" href="/network/" style="color: white; font-size: 10px;">Network</a>
          <a class="navbar-brand pull-right" href="/admin/" style="color: white; font-size: 10px;">Admin</a>
          {% if user.is_authenticated %}
@@ -32,7 +43,8 @@
          {% else %}
          <a class="navbar-brand pull-right" href="{% url "login" %}?next={% url "dashboard.index" %}" style="color: white; font-size: 10px;">Login</a>
          {% endif %}
-    </div>
+        </div><!-- .collapse .navbar-collapse -->
+    </div><!-- navbar navbar-inverse navbar-fixed-top -->
    <div class="container">
      {% block messages %}

--- a/circle/dashboard/templates/dashboard/index.html
+++ b/circle/dashboard/templates/dashboard/index.html
@@ -3,6 +3,17 @@
 {% block title-page %}{% trans "Dashboard" %}{% endblock %}
+{% block navbar-ul %}
+  <li class="dropdown" id="notification-button">
+    <a href="{% url "dashboard.views.notifications" %}" style="color: white; font-size: 12px;" class="dropdown-toggle" data-toggle="dropdown">
+      Notifications{% if new_notifications > 0 %} <span class="badge">{{ new_notifications }}</span>{% endif %}
+    </a>
+    <ul class="dropdown-menu notification-messages">
+      {% include "dashboard/_notifications-timeline.html" %}
+    </ul>
+  </li>
+{% endblock %}
 {% block content %}
 <div class="body-content dashboard-index">
  <div class="row">

--- a/circle/dashboard/templates/dashboard/notifications.html
+++ b/circle/dashboard/templates/dashboard/notifications.html
+{% extends "dashboard/base.html" %}
+{% load i18n %}
+{% block content %}
+<div class="row">
+  <div class="col-md-12">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Notifications" %}</h3>
+      </div>
+      <div class="panel-body">
+        <ul style="list-style: none;">
+          {% include "dashboard/_notifications-timeline.html" %}
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
--- a/circle/dashboard/urls.py
+++ b/circle/dashboard/urls.py
@@ -8,7 +8,7 @@ from .views import (
    TemplateList, LeaseDetail, NodeCreate, LeaseCreate, TemplateCreate,
    FavouriteView, NodeStatus, GroupList, TemplateDelete, LeaseDelete,
    VmGraphView, TemplateAclUpdateView, GroupDetailView, GroupDelete,
-    GroupAclUpdateView, GroupUserDelete, NodeGraphView
+    GroupAclUpdateView, GroupUserDelete, NotificationView, NodeGraphView,
 )
 urlpatterns = patterns(
@@ -81,4 +81,7 @@ urlpatterns = patterns(
        name='dashboard.views.group-acl'),
    url(r'^groupuser/delete/(?P<pk>\d+)/$', GroupUserDelete.as_view(),
        name="dashboard.views.delete-groupuser"),
+    url(r'^notifications/$', NotificationView.as_view(),
+        name="dashboard.views.notifications"),
 )
--- a/circle/dashboard/views.py
+++ b/circle/dashboard/views.py
@@ -83,6 +83,8 @@ class IndexView(LoginRequiredMixin, TemplateView):
        if user is not None:
            context['notifications'] = user.notification_set.all()[:10]
+            context['new_notifications'] = user.notification_set.filter(
+                status="new").count()
        nodes = Node.objects.all()
        groups = Group.objects.all()
@@ -1655,3 +1657,37 @@ class NodeGraphView(SuperuserRequiredMixin, GraphViewBase):
    def get_object(self, request, pk):
        return self.model.objects.get(id=pk)
+class NotificationView(LoginRequiredMixin, TemplateView):
+    template_name = "dashboard/notifications.html"
+    def get_context_data(self, *args, **kwargs):
+        context = super(NotificationView, self).get_context_data(
+            *args, **kwargs)
+        # we need to convert it to list, otherwise it's gonna be
+        # similar to a QuerySet and update everything to
+        # read status after get
+        context['notifications'] = list(
+            self.request.user.notification_set.values())
+        return context
+    def get(self, *args, **kwargs):
+        response = super(NotificationView, self).get(*args, **kwargs)
+        un = self.request.user.notification_set.filter(status="new")
+        for u in un:
+            u.status = "read"
+            u.save()
+        return response
+    def post(self, request, *args, **kwargs):
+        # unread notifications
+        un = request.user.notification_set.filter(status="new")
+        for u in un:
+            u.status = "read"
+            u.save()
+        if request.is_ajax():
+            return HttpResponse({'result': 'ok'})
+        else:
+            pass