notifications: replace toggle button with actual toggle element - fixes #4171

This commit is contained in:
Marcin Lulek 2016-08-23 18:22:07 +02:00
parent cab106e9bd
commit 4ccb5b300e
3 changed files with 51 additions and 9 deletions

View file

@ -368,4 +368,4 @@ class MyAccountController(BaseController):
user_data['notification_status'] = not status
user.user_data = user_data
Session().commit()
return redirect(url('my_account_notifications'))
return json.dumps(user_data['notification_status'])

View file

@ -2,3 +2,5 @@
<link rel="import" href="../../../../../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../../../../../bower_components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">

View file

@ -1,26 +1,65 @@
<template is="dom-bind" id="notificationsPage">
<iron-ajax id="toggleNotifications"
method="post"
url="${url('my_account_notifications_toggle_visibility')}"
content-type="application/json"
loading="{{changeNotificationsLoading}}"
on-response="handleNotifications"
handle-as="json"></iron-ajax>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">${_('Your live notification settings')}</h3>
</div>
<div class="panel-body">
<p><strong>IMPORTANT:</strong> This feature requires enabled channelstream websocket server to function correctly.</p>
<p class="hidden">Status of browser notifications permission: <strong id="browser-notification-status"></strong></p>
${h.secure_form(url('my_account_notifications_toggle_visibility'), method='post', id='notification-status')}
<button class="btn btn-default" type="submit">
${_('Notifications')} <strong>${_('Enabled') if c.rhodecode_user.get_instance().user_data.get('notification_status') else _('Disabled')}</strong>
</button>
${h.end_form()}
<a class="btn btn-info" id="test-notification">Test notification</a>
<div class="form">
<!-- fields -->
<div class="fields">
<div class="field">
<div class="label">
<label for="new_email">${_('Notifications status')}:</label>
</div>
<div class="checkboxes">
<div style="display: inline-block">
<paper-toggle-button on-change="toggleNotifications" ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></paper-toggle-button>
<paper-tooltip>Toggle your notifications on/off globally.</paper-tooltip>
</div>
<template is="dom-if" if="{{changeNotificationsLoading}}">
<paper-spinner active style="height: 22px; width: 22px"></paper-spinner>
</template>
</div>
</div>
<div class="buttons">
<a class="btn btn-info" id="test-notification">Test notification</a>
</div>
</div>
</div>
</div>
</div>
<script type="application/javascript">
/** because im not creating a custom element for this page
* we need to push the function onto the dom-template
* ideally we turn this into notification-settings elements
* then it will be cleaner
*/
var ctrlr = $('#notificationsPage')[0];
ctrlr.toggleNotifications = function(event){
var ajax = $('#toggleNotifications')[0];
ajax.headers = {"X-CSRF-Token": CSRF_TOKEN}
ajax.body = {notification_status:event.target.active};
ajax.generateRequest();
};
ctrlr.handleNotifications = function(event){
$('paper-toggle-button')[0].active = event.detail.response;
};
function checkBrowserStatus(){
var browserStatus = 'Unknown';
@ -54,3 +93,4 @@ $('#test-notification').on('click', function(e){
$.Topic('/notifications').publish(payload);
})
</script>
</template>