diff options
Diffstat (limited to 'examples/html5/app/Frontend/widgets/Notifications')
3 files changed, 297 insertions, 0 deletions
diff --git a/examples/html5/app/Frontend/widgets/Notifications/ModalNotification.js b/examples/html5/app/Frontend/widgets/Notifications/ModalNotification.js new file mode 100644 index 0000000..37ba047 --- /dev/null +++ b/examples/html5/app/Frontend/widgets/Notifications/ModalNotification.js @@ -0,0 +1,85 @@ +/* + * Copyright (C) 2015 "IoT.bzh" + * Author "Fulup Ar Foll" + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + * Bugs: Input with Callback SHOULD BE get 'required' class + * + * ref: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover + * + * usage: + * + * tipModal: listen event from elem.parent() to display tip-modal + * <div class="xxxx"> + * <tip-modal tip=xxxx></tip-modal> + * <input-text ....></input-text> + * </div> + * + * Note: use CSS.visibility to avoid display flickering at initial display. + */ + +(function () { + 'use strict'; + + var tmpl = '<div class="tip-modal-popup">' + + '<i class="{{icon}}"></i>' + + '<span>{{tip}}</span>' + + '</span></div>' ; + + angular.module('ModalNotification', []) + .directive('tipModal', function ($timeout) { + + function mymethods(scope, elem, attrs) { + scope.parent = elem.parent(); + scope.modal = elem.find("div"); + + + // delay tip display to avoid blinking when moving mouse fast + function display () { + function action() { + if (scope.show) scope.modal.css({opacity: 1, visibility:'visible'}); + } + scope.show = true; + scope.timeout = $timeout(action, scope.delay); + } + + function close () { + scope.show = false; + scope.modal.css({opacity: 0, visibility:'hidden'}); + } + + + // ajust icon or use default + scope.icon = attrs.icon || 'fi-lightbulb'; + + // Update Parent element to get mouse event + scope.parent.addClass ('as-modal-tip'); + scope.parent.bind('click', close); + scope.parent.bind('focus', display); + scope.parent.bind('mouseover', display); + scope.parent.bind('mouseleave', close); + scope.parent.bind('blur', close); + + scope.delay = attrs.delay || 1000; // wait 1s before displaying tip + } + + return { + restrict: 'E', + template: tmpl, + link: mymethods, + scope: {tip: "="} // tip may not be defined when widget is display + }; + }); +})(); diff --git a/examples/html5/app/Frontend/widgets/Notifications/Notifications.scss b/examples/html5/app/Frontend/widgets/Notifications/Notifications.scss new file mode 100644 index 0000000..fb740b7 --- /dev/null +++ b/examples/html5/app/Frontend/widgets/Notifications/Notifications.scss @@ -0,0 +1,63 @@ +/* + * Copyright (C) 2015 "IoT.bzh" + * Author "Fulup Ar Foll" + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + * Reference: http://www.greywyvern.com/?post=337 + */ + +@import "app/ibz-mixins"; + + +link-button {@include ibz-button(#3366ff,1rem)}; + +// Modal should be relative and tip-modal-popup absolute +tip-modal { + position:relative; +} + +.tip-modal-popup { + //visibility: hidden; + width: 20rem; + position:absolute; + top:1em; + padding: 0.2em 0.6em; + border:1px solid #996633; + background-color:#e5ffff; + color:#000; + opacity:0; + transition:visibility .5s linear 1s,opacity 1s linear; + border-radius: 5px; + i { + margin: 0 .3rem 0 0; + display: inline; + } +} + +token-refresh { + @include ibz-button(grey,1rem) + i {margin-left: .5rem;} + margin-right: 1rem; +} + +token-refresh.online { + color: #0066cc; + i {color: lime;} +} + +token-refresh.offline { + color: #ff00ff; + i {color: red;} +} diff --git a/examples/html5/app/Frontend/widgets/Notifications/TokenRefreshSvc.js b/examples/html5/app/Frontend/widgets/Notifications/TokenRefreshSvc.js new file mode 100644 index 0000000..2c7c3da --- /dev/null +++ b/examples/html5/app/Frontend/widgets/Notifications/TokenRefreshSvc.js @@ -0,0 +1,149 @@ +/* + alsa-gateway -- provide a REST/HTTP interface to ALSA-Mixer + + Copyright (C) 2015, Fulup Ar Foll + + This program is free software; you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation; either version 2 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with scope program; if not, write to the Free Software + Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA. + + References: + + */ + +(function () { + 'use strict'; + + var template = + '<div class="afb-monitor" ng-click="getping()">' + + '<span class="afb-refresh-token" >afb://{{hostname}}:{{httpdport}}</span>' + + '<i class="{{icon}}"></i>' + + '</div>'; + + +// scope module is load statically before any route is cativated +angular.module('TokenRefresh', ['AppConfig', 'ModalNotification']) + + .directive ('tokenRefresh', function($log, $window, $timeout, $location, Notification, AppConfig, AppCall) { + + function mymethods(scope, elem, attrs) { + scope.logged=undefined; // neither thu neither false + + $window.onbeforeunload = function () { + AppCall.get (scope.plugin, "logout", {/*query*/}, function () { + $log.log("OPA exit"); + }); + }; + + scope.online = function () { + elem.addClass ("online"); + elem.removeClass ("offline"); + scope.logged=true; + }; + + scope.offline = function(){ + elem.addClass ("offline"); + elem.removeClass ("online"); + scope.logged=false; + }; + + scope.onerror = function() { + if (scope.logged !== false) { + Notification.warning ({message: "AppFramework Binder Lost", delay: 5000}); + scope.offline(); + } + scope.status = 0; + }; + + scope.onsuccess = function(jresp, errcode) { + + if (errcode !== 200 || jresp.request.status !== "success") { + Notification.warning ({message: "auto-connect :" + jresp.request.info, delay: 10000}); + scope.offline(); + return false; + } + + if (scope.logged !== true) { + Notification.success ({message: "AppFramework Binder Connected", delay: 3000}); + scope.online(); + if (scope.callback) scope.callback(jresp); + } + + scope.status = 1; + return true; + }; + + // Check Binder status + scope.getping = function() { + + AppCall.get (scope.plugin, "ping", {/*query*/},function(jresp, errcode) { + if (errcode !== 200 || jresp.request.status !== "success") { + Notification.warning ({message: jresp.request.info, delay: 5000}); + scope.offline(); + return; + } + // restart a new timer for next ping + $timeout (scope.getping, AppConfig.session.pingrate*1000); + }, scope.onerror); + }; + + // Check Binder status + scope.refresh = function() { + + AppCall.get (scope.plugin, "refresh", {/*query*/}, function(jresp, errcode) { + + scope.onsuccess (jresp, errcode); + + // restart a new timer for next refresh + $timeout (scope.refresh, AppConfig.session.timeout *250); + }, scope.onerror); + }; + + // Initial connection + scope.loggin = function() { + AppCall.get (scope.plugin, "connect", {token: AppConfig.session.initial}, function(jresp, errcode) { + + if (!scope.onsuccess (jresp, errcode)) return; + + // Intial token was accepted let's start ping & refresh + $timeout (scope.getping, AppConfig.session.pingrate*1000); + $timeout (scope.refresh, AppConfig.session.timeout *250); + + }, scope.onerror); + }; + + + // Parse Widget Parameters + scope.plugin = attrs.plugin || "auth"; + scope.icon = attrs.icon || "fi-lightbulb"; + scope.hostname = $location.host(); + scope.httpdport = $location.port(); + scope.autolog = JSON.parse(attrs.autolog || false); + + // autostart log if requested + if (scope.autolog) scope.loggin(); + + } + + return { + template: template, + scope: { + callback : "=" + }, + restrict: 'E', + link: mymethods + }; +}); + +})(); +console.log ("Token Refresh Loaded"); |