[PATCH] [Wok 0/3] Implement Asynchronous Notifications frontend
This patchset depends on Asynchronous Notification backend. Lucio Correia (3): Implement notifications JS API Implement wok.notification widget Implement notifications loop ui/js/src/wok.api.js | 18 ++++++++++++++++++ ui/js/src/wok.main.js | 5 +++++ ui/js/src/wok.notification.js | 36 ++++++++++++++++++++++++++++++++++++ ui/js/src/wok.utils.js | 19 +++++++++++++++++++ 4 files changed, 78 insertions(+) create mode 100644 ui/js/src/wok.notification.js -- 1.9.1
Signed-off-by: Lucio Correia <luciojhc@linux.vnet.ibm.com> --- ui/js/src/wok.api.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/ui/js/src/wok.api.js b/ui/js/src/wok.api.js index 24ea495..56e90ed 100644 --- a/ui/js/src/wok.api.js +++ b/ui/js/src/wok.api.js @@ -59,6 +59,24 @@ var wok = { }); }, + getNotifications: function (suc, err) { + wok.requestJSON({ + url: 'notifications', + type : 'GET', + dataType : 'json', + success : suc, + error: err + }); + }, + + removeNotification: function (id) { + wok.requestJSON({ + url: 'notifications/' + id, + type : 'DELETE', + dataType : 'json', + }); + }, + login : function(settings, suc, err) { $.ajax({ url : "login", -- 1.9.1
This is an adapted version of wok.message that removes the the notification when user clicks on close button. Signed-off-by: Lucio Correia <luciojhc@linux.vnet.ibm.com> --- ui/js/src/wok.notification.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 ui/js/src/wok.notification.js diff --git a/ui/js/src/wok.notification.js b/ui/js/src/wok.notification.js new file mode 100644 index 0000000..b79f5f3 --- /dev/null +++ b/ui/js/src/wok.notification.js @@ -0,0 +1,36 @@ +/* + * Project Wok + * + * Copyright IBM Corp, 2015-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +wok.notification = function(msg, node) { + "use strict"; + var container = node || $('#alert-fields'); + if ($(container).size() < 1) { + container = $('<div id="alert-fields"/>').appendTo($('#alert-container')); + } + var message = '<div role="alert" class="alert alert-warning alert-dismissible fade in" style="display: none;">'; + message += '<button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="wok.removeNotification('' + msg.code + '')"><span aria-hidden="true"><i class="fa fa-times-circle"></i></span></button>'; + message += msg.message; + message += '</div>'; + var $message = $(message); + $(container).show(); + $(container).append($message); + $message.alert(); + $message.fadeIn(100); +}; -- 1.9.1
On 03/31/2016 06:02 PM, Lucio Correia wrote:
This is an adapted version of wok.message that removes the the notification when user clicks on close button.
Signed-off-by: Lucio Correia <luciojhc@linux.vnet.ibm.com> --- ui/js/src/wok.notification.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 ui/js/src/wok.notification.js
diff --git a/ui/js/src/wok.notification.js b/ui/js/src/wok.notification.js new file mode 100644 index 0000000..b79f5f3 --- /dev/null +++ b/ui/js/src/wok.notification.js @@ -0,0 +1,36 @@ +/* + * Project Wok + * + * Copyright IBM Corp, 2015-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +
+wok.notification = function(msg, node) { + "use strict"; + var container = node || $('#alert-fields'); + if ($(container).size() < 1) { + container = $('<div id="alert-fields"/>').appendTo($('#alert-container')); + } + var message = '<div role="alert" class="alert alert-warning alert-dismissible fade in" style="display: none;">'; + message += '<button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="wok.removeNotification('' + msg.code + '')"><span aria-hidden="true"><i class="fa fa-times-circle"></i></span></button>'; + message += msg.message; + message += '</div>'; + var $message = $(message); + $(container).show(); + $(container).append($message); + $message.alert(); + $message.fadeIn(100); +};
This is very similar to what we have in wok.message.js Why not use wok.message to do this work instead of duplicating code?
On 04-04-2016 13:10, Aline Manera wrote:
On 03/31/2016 06:02 PM, Lucio Correia wrote:
This is an adapted version of wok.message that removes the the notification when user clicks on close button.
Signed-off-by: Lucio Correia <luciojhc@linux.vnet.ibm.com> --- ui/js/src/wok.notification.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 ui/js/src/wok.notification.js
diff --git a/ui/js/src/wok.notification.js b/ui/js/src/wok.notification.js new file mode 100644 index 0000000..b79f5f3 --- /dev/null +++ b/ui/js/src/wok.notification.js @@ -0,0 +1,36 @@ +/* + * Project Wok + * + * Copyright IBM Corp, 2015-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +
+wok.notification = function(msg, node) { + "use strict"; + var container = node || $('#alert-fields'); + if ($(container).size() < 1) { + container = $('<div id="alert-fields"/>').appendTo($('#alert-container')); + } + var message = '<div role="alert" class="alert alert-warning alert-dismissible fade in" style="display: none;">'; + message += '<button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="wok.removeNotification('' + msg.code + '')"><span aria-hidden="true"><i class="fa fa-times-circle"></i></span></button>'; + message += msg.message; + message += '</div>'; + var $message = $(message); + $(container).show(); + $(container).append($message); + $message.alert(); + $message.fadeIn(100); +};
This is very similar to what we have in wok.message.js Why not use wok.message to do this work instead of duplicating code?
Wok.message would need some adaptations that would make it too complex: - wok.notification receives msg dict as parameter, not only msg text, because we need to call wok.removeNotification on the code of msg. - wok.removeNotification must be called when user clicks on close button, otherwise the notification will be erased only when wok reboots That's why I've chosen to create a notification specific widget. -- Lucio Correia Software Engineer IBM LTC Brazil
On 04/04/2016 01:33 PM, Lucio Correia wrote:
On 04-04-2016 13:10, Aline Manera wrote:
On 03/31/2016 06:02 PM, Lucio Correia wrote:
This is an adapted version of wok.message that removes the the notification when user clicks on close button.
Signed-off-by: Lucio Correia <luciojhc@linux.vnet.ibm.com> --- ui/js/src/wok.notification.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 ui/js/src/wok.notification.js
diff --git a/ui/js/src/wok.notification.js b/ui/js/src/wok.notification.js new file mode 100644 index 0000000..b79f5f3 --- /dev/null +++ b/ui/js/src/wok.notification.js @@ -0,0 +1,36 @@ +/* + * Project Wok + * + * Copyright IBM Corp, 2015-2016 + * + * Code derived from Project Kimchi + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +
+wok.notification = function(msg, node) { + "use strict"; + var container = node || $('#alert-fields'); + if ($(container).size() < 1) { + container = $('<div id="alert-fields"/>').appendTo($('#alert-container')); + } + var message = '<div role="alert" class="alert alert-warning alert-dismissible fade in" style="display: none;">'; + message += '<button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="wok.removeNotification('' + msg.code + '')"><span aria-hidden="true"><i class="fa fa-times-circle"></i></span></button>'; + message += msg.message; + message += '</div>'; + var $message = $(message); + $(container).show(); + $(container).append($message); + $message.alert(); + $message.fadeIn(100); +};
This is very similar to what we have in wok.message.js Why not use wok.message to do this work instead of duplicating code?
Wok.message would need some adaptations that would make it too complex: - wok.notification receives msg dict as parameter, not only msg text, because we need to call wok.removeNotification on the code of msg. - wok.removeNotification must be called when user clicks on close button, otherwise the notification will be erased only when wok reboots
That's why I've chosen to create a notification specific widget.
OK. I saw the differences but we have enough time to do the right thing =) We can also help to Samuel, Peter or Socorro on that if you are not comfortable with the UI code.
Check for new notifications each 5 seconds. Duplicated notifications are controlled by postedNotifications var. Signed-off-by: Lucio Correia <luciojhc@linux.vnet.ibm.com> --- ui/js/src/wok.main.js | 5 +++++ ui/js/src/wok.utils.js | 19 +++++++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js index f3f837a..9b4343c 100644 --- a/ui/js/src/wok.main.js +++ b/ui/js/src/wok.main.js @@ -18,6 +18,8 @@ * limitations under the License. */ +wok.NOTIFICATION_INTERVAL = 5000 +wok.postedNotifications = [] wok.tabMode = {}; wok.config = undefined; @@ -296,6 +298,7 @@ wok.main = function() { * 5) About button click event * 6) Help button click event * 7) Peers button click event + * 8) Start notifications loop */ var searchingPeers = false; var initListeners = function() { @@ -466,6 +469,8 @@ wok.main = function() { wok.message.error(data.responseJSON.reason); } ); + + setTimeout(wok.notificationsLoop, wok.NOTIFICATION_INTERVAL); }; diff --git a/ui/js/src/wok.utils.js b/ui/js/src/wok.utils.js index e5701e6..6392afb 100644 --- a/ui/js/src/wok.utils.js +++ b/ui/js/src/wok.utils.js @@ -193,3 +193,22 @@ wok.urlSafeB64Decode = function(str) { wok.urlSafeB64Encode = function(str) { return $.base64.btoa(str, true).replace(/\+/g, '-').replace(/\//g, '_'); } + +wok.notificationsLoop = function notificationsLoop() { + wok.getNotifications( + function(notifications){ + if(notifications && notifications.length > 0) { + $.each(notifications, function(i, msg) { + if (wok.postedNotifications.indexOf(msg.message) == -1) { + wok.notification(msg, '#message-container-area'); + wok.postedNotifications.push(msg.message); + } + }) + }; + setTimeout(notificationsLoop, wok.NOTIFICATION_INTERVAL); + }, + function(data){ + setTimeout(notificationsLoop, wok.NOTIFICATION_INTERVAL); + } + ); +} -- 1.9.1
On 03/31/2016 06:02 PM, Lucio Correia wrote:
Check for new notifications each 5 seconds. Duplicated notifications are controlled by postedNotifications var.
Signed-off-by: Lucio Correia <luciojhc@linux.vnet.ibm.com> --- ui/js/src/wok.main.js | 5 +++++ ui/js/src/wok.utils.js | 19 +++++++++++++++++++ 2 files changed, 24 insertions(+)
diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js index f3f837a..9b4343c 100644 --- a/ui/js/src/wok.main.js +++ b/ui/js/src/wok.main.js @@ -18,6 +18,8 @@ * limitations under the License. */
+wok.NOTIFICATION_INTERVAL = 5000 +wok.postedNotifications = [] wok.tabMode = {};
wok.config = undefined; @@ -296,6 +298,7 @@ wok.main = function() { * 5) About button click event * 6) Help button click event * 7) Peers button click event + * 8) Start notifications loop */ var searchingPeers = false; var initListeners = function() { @@ -466,6 +469,8 @@ wok.main = function() { wok.message.error(data.responseJSON.reason); } ); + + setTimeout(wok.notificationsLoop, wok.NOTIFICATION_INTERVAL); };
diff --git a/ui/js/src/wok.utils.js b/ui/js/src/wok.utils.js index e5701e6..6392afb 100644 --- a/ui/js/src/wok.utils.js +++ b/ui/js/src/wok.utils.js @@ -193,3 +193,22 @@ wok.urlSafeB64Decode = function(str) { wok.urlSafeB64Encode = function(str) { return $.base64.btoa(str, true).replace(/\+/g, '-').replace(/\//g, '_'); } + +wok.notificationsLoop = function notificationsLoop() { + wok.getNotifications( + function(notifications){ + if(notifications && notifications.length > 0) { + $.each(notifications, function(i, msg) { + if (wok.postedNotifications.indexOf(msg.message) == -1) { + wok.notification(msg, '#message-container-area');
We can use wok.message with closable=True
+ wok.postedNotifications.push(msg.message); + } + }) + }; + setTimeout(notificationsLoop, wok.NOTIFICATION_INTERVAL); + }, + function(data){ + setTimeout(notificationsLoop, wok.NOTIFICATION_INTERVAL); + } + ); +}
Reviewed by: Jose Ricardo Ziviani <joserz@linux.vnet.ibm.com> On 31-03-2016 18:02, Lucio Correia wrote:
This patchset depends on Asynchronous Notification backend.
Lucio Correia (3): Implement notifications JS API Implement wok.notification widget Implement notifications loop
ui/js/src/wok.api.js | 18 ++++++++++++++++++ ui/js/src/wok.main.js | 5 +++++ ui/js/src/wok.notification.js | 36 ++++++++++++++++++++++++++++++++++++ ui/js/src/wok.utils.js | 19 +++++++++++++++++++ 4 files changed, 78 insertions(+) create mode 100644 ui/js/src/wok.notification.js
-- Jose Ricardo Ziviani ----------------------------- Software Engineer Linux Technology Center - IBM
participants (3)
-
Aline Manera -
Jose Ricardo Ziviani -
Lucio Correia