##// END OF EJS Templates
my_account: fix test notifications for IE10+
ergo -
r777:5a8d261e default
parent child Browse files
Show More
@@ -1,88 +1,87 b''
1 <template is="dom-bind" id="notificationsPage">
1 <template is="dom-bind" id="notificationsPage">
2 <iron-ajax id="toggleNotifications"
2 <iron-ajax id="toggleNotifications"
3 method="post"
3 method="post"
4 url="${url('my_account_notifications_toggle_visibility')}"
4 url="${url('my_account_notifications_toggle_visibility')}"
5 content-type="application/json"
5 content-type="application/json"
6 loading="{{changeNotificationsLoading}}"
6 loading="{{changeNotificationsLoading}}"
7 on-response="handleNotifications"
7 on-response="handleNotifications"
8 handle-as="json"></iron-ajax>
8 handle-as="json"></iron-ajax>
9
9
10 <div class="panel panel-default">
10 <div class="panel panel-default">
11 <div class="panel-heading">
11 <div class="panel-heading">
12 <h3 class="panel-title">${_('Your Live Notification Settings')}</h3>
12 <h3 class="panel-title">${_('Your Live Notification Settings')}</h3>
13 </div>
13 </div>
14 <div class="panel-body">
14 <div class="panel-body">
15
15
16 <p><strong>IMPORTANT:</strong> This feature requires enabled channelstream websocket server to function correctly.</p>
16 <p><strong>IMPORTANT:</strong> This feature requires enabled channelstream websocket server to function correctly.</p>
17
17
18 <p class="hidden">Status of browser notifications permission: <strong id="browser-notification-status"></strong></p>
18 <p class="hidden">Status of browser notifications permission: <strong id="browser-notification-status"></strong></p>
19
19
20 <div class="form">
20 <div class="form">
21 <div class="fields">
21 <div class="fields">
22 <div class="field">
22 <div class="field">
23 <div class="label">
23 <div class="label">
24 <label for="new_email">${_('Notifications Status')}:</label>
24 <label for="new_email">${_('Notifications Status')}:</label>
25 </div>
25 </div>
26 <div class="checkboxes">
26 <div class="checkboxes">
27 <rhodecode-toggle id="live-notifications" active="[[changeNotificationsLoading]]" on-change="toggleNotifications" ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></rhodecode-toggle>
27 <rhodecode-toggle id="live-notifications" active="[[changeNotificationsLoading]]" on-change="toggleNotifications" ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></rhodecode-toggle>
28 </div>
28 </div>
29 </div>
29 </div>
30 <div class="buttons">
30 <div class="buttons">
31 <a class="btn btn-default" id="test-notification">Test notification</a>
31 <a class="btn btn-default" id="test-notification" on-tap="testNotifications">Test notification</a>
32 </div>
32 </div>
33 </div>
33 </div>
34 </div>
34 </div>
35
35
36 </div>
36 </div>
37 </div>
37 </div>
38
38
39 <script type="application/javascript">
39 <script type="text/javascript">
40 /** because im not creating a custom element for this page
40 /** because im not creating a custom element for this page
41 * we need to push the function onto the dom-template
41 * we need to push the function onto the dom-template
42 * ideally we turn this into notification-settings elements
42 * ideally we turn this into notification-settings elements
43 * then it will be cleaner
43 * then it will be cleaner
44 */
44 */
45 var ctrlr = $('#notificationsPage')[0];
45 var ctrlr = $('#notificationsPage')[0];
46 ctrlr.toggleNotifications = function(event){
46 ctrlr.toggleNotifications = function(event){
47 var ajax = $('#toggleNotifications')[0];
47 var ajax = $('#toggleNotifications')[0];
48 ajax.headers = {"X-CSRF-Token": CSRF_TOKEN}
48 ajax.headers = {"X-CSRF-Token": CSRF_TOKEN}
49 ajax.body = {notification_status:event.target.active};
49 ajax.body = {notification_status:event.target.active};
50 ajax.generateRequest();
50 ajax.generateRequest();
51 };
51 };
52 ctrlr.handleNotifications = function(event){
52 ctrlr.handleNotifications = function(event){
53 $('#live-notifications')[0].checked = event.detail.response;
53 $('#live-notifications')[0].checked = event.detail.response;
54 };
54 };
55
55
56 function checkBrowserStatus(){
56 function checkBrowserStatus(){
57 var browserStatus = 'Unknown';
57 var browserStatus = 'Unknown';
58
58
59 if (!("Notification" in window)) {
59 if (!("Notification" in window)) {
60 browserStatus = 'Not supported'
60 browserStatus = 'Not supported'
61 }
61 }
62 else if(Notification.permission === 'denied'){
62 else if(Notification.permission === 'denied'){
63 browserStatus = 'Denied';
63 browserStatus = 'Denied';
64 $('.flash_msg').append('<div class="alert alert-error">Notifications are blocked on browser level - you need to enable them in your browser settings.</div>')
64 $('.flash_msg').append('<div class="alert alert-error">Notifications are blocked on browser level - you need to enable them in your browser settings.</div>')
65 }
65 }
66 else if(Notification.permission === 'granted'){
66 else if(Notification.permission === 'granted'){
67 browserStatus = 'Allowed';
67 browserStatus = 'Allowed';
68 }
68 }
69
69
70 $('#browser-notification-status').text(browserStatus);
70 $('#browser-notification-status').text(browserStatus);
71 };
71 }
72
73 checkBrowserStatus();
74
72
75 $('#test-notification').on('click', function(e){
73 ctrlr.testNotifications = function(event){
76 var levels = ['info', 'error', 'warning', 'success'];
74 var levels = ['info', 'error', 'warning', 'success'];
77 var level = levels[Math.floor(Math.random()*levels.length)];
75 var level = levels[Math.floor(Math.random()*levels.length)];
78 var payload = {
76 var payload = {
79 message: {
77 message: {
80 message: 'This is a test notification.',
78 message: 'This is a test notification.',
81 level: level,
79 level: level,
82 force: true
80 force: true
83 }
81 }
84 };
82 };
85 $.Topic('/notifications').publish(payload);
83 $.Topic('/notifications').publish(payload);
86 })
84 }
85
87 </script>
86 </script>
88 </template>
87 </template>
General Comments 0
You need to be logged in to leave comments. Login now