$('.progress .determinate').css('width', `${scrollPercent}%`);
});
- $('.notification').on('click', () => {
- $.ajax({
- url: Routing.generate('notification-archive-all'),
- method: 'GET',
- }).done(() => {
+ $('.notification .notification-action').on('click', (e) => {
+ const id = parseInt($(e.target).attr('data-id'), 10);
+ fetch(Routing.generate('notification-archive', { notification: id }), { credentials: 'same-origin' }).then(() => {
+ $(e.target).parents('.notification').removeClass('light-blue lighten-5');
$('#notifications').sideNav('hide');
});
+ return true;
});
});
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
+use Wallabag\CoreBundle\Entity\Notification;
class NotificationsController extends Controller
{
return $this->redirectToRoute('notifications-all');
}
+
+ /**
+ * @Route("/notifications/read/{notification}", name="notification-archive")
+ *
+ * @param Notification $notification
+ * @return Response
+ */
+ public function markNotificationsAsReadAction(Notification $notification)
+ {
+ $em = $this->getDoctrine()->getManager();
+
+ $notification->setRead(true);
+
+ $em->persist($notification);
+ $em->flush();
+
+ return $this->redirectToRoute('notifications-all');
+ }
}
--- /dev/null
+<?php
+
+namespace Wallabag\CoreBundle\Notifications;
+
+class InfoAction extends Action {
+
+ public function __construct($link)
+ {
+ $this->link = $link;
+ $this->label = 'Info';
+ $this->type = Action::TYPE_INFO;
+ }
+}
--- /dev/null
+<?php
+
+namespace Wallabag\CoreBundle\Notifications;
+
+class NoAction extends Action {
+
+ public function __construct($link)
+ {
+ $this->link = $link;
+ $this->label = 'No';
+ $this->type = Action::TYPE_NO;
+ }
+}
--- /dev/null
+<?php
+
+namespace Wallabag\CoreBundle\Notifications;
+
+class OkAction extends Action {
+
+ public function __construct($link)
+ {
+ $this->link = $link;
+ $this->label = 'OK';
+ $this->type = Action::TYPE_OK;
+ }
+}
--- /dev/null
+<?php
+
+namespace Wallabag\CoreBundle\Notifications;
+
+class YesAction extends Action {
+
+ public function __construct($link)
+ {
+ $this->link = $link;
+ $this->label = 'Yes';
+ $this->type = Action::TYPE_YES;
+ }
+}
<div class="col l6 offset-l3">
<ul class="collection">
{% for notification in notifications | slice(0, 10) %}
- <li class="collection-item avatar{% if not notification.read %} light-blue lighten-5{% else %} grey-text{% endif %}">
+ <li class="notification collection-item avatar{% if not notification.read %} light-blue lighten-5{% else %} grey-text{% endif %}">
<i class="material-icons circle">{% spaceless %}
{% if notification.type == constant('TYPE_ADMIN', notification) %}
build
{% endif %}
{% endspaceless %}</i>
<span class="title">{{ notification.title }}</span>
- <p><em>{{ notification.timestamp | date }}</p>
+ <p><em>{{ notification.timestamp | date }}</em></p>
<div class="secondary-content">
- {% for action in notification.actions %}
- <a class="btn waves-effect waves-light {% spaceless %}
- {% if action.type == constant('TYPE_OK', action) %}
- {% elseif action.type == constant('TYPE_YES', action) %}
- cyan
- {% elseif action.type == constant('TYPE_NO', action) %}
- red
- {% elseif action.type == constant('TYPE_INFO', action) %}
- blue-grey
- {% endif %}
- {% endspaceless %}" href="{{ action.link }}">{{ action.label }}</a>
- {% endfor %}
+ {% if not notification.read %}
+ {% for action in notification.actions %}
+ <a class="notification-action btn waves-effect waves-light {% spaceless %}
+ {% if action.type == constant('TYPE_OK', action) %}
+ {% elseif action.type == constant('TYPE_YES', action) %}
+ cyan
+ {% elseif action.type == constant('TYPE_NO', action) %}
+ red
+ {% elseif action.type == constant('TYPE_INFO', action) %}
+ blue-grey
+ {% endif %}
+ {% endspaceless %}" data-id="{{ notification.id }}" href="{{ action.link }}">{{ action.label }}</a>
+ {% endfor %}
+ <button class="notification-action waves-effect waves-teal btn-flat" data-id="{{ notification.id }}"><i data-id="{{ notification.id }}" class="material-icons">check</i></button>
+ {% endif %}
</div>
</li>
{% endfor %}