We Keep Coding

Loopback is not responding with modified data after 'loaded' hook

I have the following code in my Model.js file.
Model.observe('loaded', (ctx, next) => {
const {
data,
options: {
user
}
} = ctx;
const owner = (user && data && user.uid === data.userId) || false;
console.log(
`${data.id}: loaded - access by ${user && user.name}, owner:${owner}`
);
if (!owner) {
delete data.testProp1;
}
console.log('returning: ', ctx.data);
next();
});
When I make a request, I see the following log output (server logs):
f3f9ffd6-14dc-42e5-94ba-503aa3426faa: loaded - access by User1, owner:false
returning:
{
testProp2: true,
id: 'f3f9ffd6-14dc-42e5-94ba-503aa3426faa',
userId: 'sfeywkKSuBTlf0DwE4ZOFd8RX5E3'
}
But then in the actual response the browser receives I actually get:
{
testProp1: true,
testProp2: true,
id: 'f3f9ffd6-14dc-42e5-94ba-503aa3426faa',
userId: 'sfeywkKSuBTlf0DwE4ZOFd8RX5E3'
}
Is there something in the documentation I am missing? Deleting the property is exactly what it shows in the Loopback docs here. Also, I actually see the modified data as the data property on the ctx object before calling next(). Anyone run into this issue or know some caveat to the docs that isn't explicitly stated?

Angular Function Does Not Update Database

I'm working on a pair of Angular functions that should change a value from false to true when the user clicks a button. The app tracks a user's favorite books; when a user creates a favorite, the default values for 'tracking' and 'finished' are set to false. When the user goes to update them to true using an ng-click, the new 'true' values are not patched to the database, and are logged in the console as still false. Any thoughts on what's missing from my functions?
$scope.trackFavorite = function(favorite) {
var favoriteParams = {
id: favorite.id,
tracking: favorite.tracking,
finished: favorite.finished
};
favorite.tracking = !favorite.tracking;
$http.patch("/api/v1/favorites/"+favorite.id+".json", favoriteParams).success(function(response) {
console.log("READING NOW");
console.log(response);
});
};
$scope.markFinished = function(favorite) {
var favoriteParams2 = {
id: favorite.id,
finished: favorite.finished,
};
favorite.finished = !favorite.finished;
console.log(favorite);
$http.patch("/api/v1/favorites/"+favorite.id+".json", favoriteParams2).success(function(response){
console.log("IS IT FINISHED");
console.log(response);
});
};
Here's the ng-click snippets from the view, just in case:
<div>
<button ng-class="{tracking: favorite.tracking}" ng-click="trackFavorite(favorite)">Reading Now</button>
</div>
<div>
<button ng-class="{finished: favorite.finished}" ng-click="markFinished(favorite)">Finished</button>
</div>
Thanks a lot!

There could be a chance that you miss some http configuration. As it has been noticed here: patch request using angularjs.
It would also be a good idea to implement the error function in your controller and for example update the form according to the response, that you get back.
$scope.trackFavorite = function(favorite) {
var favoriteParams = {
id: favorite.id,
tracking: favorite.tracking,
finished: favorite.finished
};
$http.patch("/api/v1/favorites/"+favorite.id+".json", favoriteParams)
.then(
function(response) {
console.log("READING NOW");
console.log(response);
//update the UI according to the response
favorite.tracking = !favorite.tracking;
},function(error){
//clean up when an error occurs
});
};

how to increase 'chrome push notification' visibility time?

I want to show my notification to the user till i desired by default it is shown up to 19 sec approx. can somebody tell me about any trick regarding this?
i also tried to update again and again to keep it showing but not succeed, actually not got appropriate syntax for doing that.
currently i am using below code to register service worker.
by this code i am able show notification for 19 sec approx, but i want to show it for 1 min.
var url = "https://example.com/json-data.php?param="+Math.random();
self.addEventListener('push', function(event) {
event.waitUntil(
fetch(url).then(function(response) {
if (response.status !== 200) {
// Either show a message to the user explaining the error
// or enter a generic message and handle the
// onnotificationclick event to direct the user to a web page
console.log('Looks like there was a problem. Status Code: ' + response.status);
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
if (data.error || !data.notification) {
console.log('The API returned an error.', data.error);
throw new Error();
}
var title = data.notification.title;
var message = data.notification.message;
var icon = data.notification.icon;
return self.registration.showNotification(title, {
body: message,
icon: icon,
data: {
url: data.notification.url
}
});
});
}).catch(function(err) {
console.log('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this push message';
var icon = 'img/design19.jpg';
var notificationTag = 'notification-error';
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
})
);
});
// The user has clicked on the notification ...
self.addEventListener('notificationclick', function(event) {
console.log(event.notification.data.url);
// Android doesn't close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients.matchAll({
type: "window"
})
.then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow) {
return clients.openWind`enter code here`ow(event.notification.data.url);
}`enter code here`
})
);
});

There is no parameter as of now on setting the timeout for the notification. It is by default that the notification will show for 20 seconds then the desktop version of Chrome will auto-minimize the notification.
Alternatively, there is a parameter in the options requireInteraction which is false by default. By enabling this to true will make the notification stay visible until the user has interacted with it.

I think you can't directly set how long a notification should be shown.
A possible hacky way to do it would be, once browsers will support persistent notifications (I don't know if Chrome or Firefox do at the moment), to show a persistent notification and then close it after a timeout.

According to hacky way Marco said, It Works!
"notification" => [
"title" => isset($arrData['title']) ? $arrData['title'] : '',
"body" => isset($arrData['description']) ? $arrData['description'] : '',
"icon" => s3_url("images/push-logo.jpg"),
"click_action" => isset($arrData['target_url']) ? $arrData['target_url'] : '',
"image" => isset($arrData['image']) ? $arrData['image'] : '',
],
"data" => [
"requireInteraction" => true,
"duration" => (20 * 1000), // 20 sec
],
"to" => "/topics/$topic",
And set the requireInterationTrue on onMessage , after push notification is shown take duration from data and close notification inside a setTimeout
messaging.onMessage(function(payload) {
console.log('Message received. ', payload.data);
const noteTitle = payload.notification.title;
const noteRequireInteraction = (payload.data.requireInteraction === 'true');
const noteDuration = payload.data.duration;
const noteOptions = {
body: payload.notification.body,
icon: payload.notification.icon,
image: payload.notification.image,
requireInteraction: noteRequireInteraction,
};
if (!document.hidden) {
var notification = new Notification(noteTitle, noteOptions);
setTimeout(function () {
notification.close();
}, noteDuration);
notification.onclick = function(event) {
event.preventDefault();
if(typeof payload.notification.click_action != 'undefined' && payload.notification.click_action != '')
window.open(payload.notification.click_action,'_blank');
notification.close();
}
}
});

Properly retrieve username and useful values (site title, copyright, etc.)

I have a simple web app based on this project ( https://github.com/arthurkao/angular-drywall ), running with NodeJS and AngularJS as the front-end.
I'm trying to set up a simple page that displays a list of all connected users on a map (using Google Maps, Geolocation and PubNub).
Here's how I'm actually doing it:
angular.module('base').controller('TravelCtrl',
function($rootScope, $scope, NgMap, security, $geolocation, PubNub){
$rootScope.extusers = []; //remote users
$scope.initTravel = function() { //declare the init function
PubNub.init({
subscribe_key: $rootScope.security.keys.psk,
publish_key: $rootScope.security.keys.ppk,
uuid: $rootScope.security.currentUser.username,
ssl: true
});
PubNub.ngSubscribe({
channel: "travel",
state: {
position: {},
}
});
console.log("Loaded Travel");
$geolocation.getCurrentPosition({
timeout: 60000
}).then(function(position) { //when location is retreived
$scope.position = position;
PubNub.ngSubscribe({
channel: "travel",
state: {
position: {
lat: Math.floor($scope.position.coords.latitude*1000)/1000, //decrease accuracy
long: Math.floor($scope.position.coords.longitude*1000)/1000,
},
}
});
$rootScope.$on(PubNub.ngPrsEv("travel"), function(event, payload) {
$scope.$apply(function() {
$scope.extusers = PubNub.ngPresenceData("travel");
});
});
PubNub.ngHereNow({ channel: "travel" });
$scope.showInfo = function(evt, marker) { //show user window on map
$scope.extuser = marker;
$scope.showInfoWindow('infoWindow');
};
});
};
if ($rootScope.hasLoaded()) { //if username and keys are already loaded, then init module
$scope.initTravel();
} else { //else, wait for username and keys to be loaded
$rootScope.$on('info-loaded', function(event, args) {
$scope.initTravel();
});
}
}
);
Although it works, it seems like it's very buggy and only loads sometimes. Occasionally, I get this:
Result screenshot
I really don't know what I'm doing wrong, as I simply followed the tutorials on PubNub's AngularJS SDK.
I think this has to do with how I'm initialising the application.
angular.module('app').run(['$location', '$rootScope', 'security', function($location, $rootScope, security) {
// Get the current user when the application starts
// (in case they are still logged in from a previous session)
$rootScope.hasLoaded = function() {
return (security.keys && security.info && security.currentUser); //check if everything is loaded correctly
};
$rootScope.checkLoading = function() {
if ($rootScope.hasLoaded()) {
$rootScope.$broadcast('info-loaded'); //broadcast event to "TravelCtrl" in order to init the module
}
};
security.requestKeys().then($rootScope.checkLoading); //request secret keys
security.requestSiteInfo().then($rootScope.checkLoading); //then templating info (site title, copyright, etc.)
security.requestCurrentUser().then($rootScope.checkLoading); //and finally, current user (name, id, etc.)
$rootScope.security = security;
// add a listener to $routeChangeSuccess
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route && current.$$route.title? current.$$route.title: 'Default title';
});
}]);
1- Request secret keys, site info and current user with JSON API.
2- Wait until everything's loaded then init the application with the appropriate keys (PubNub, Google Maps)
--
My question is:
How do you instantiate an AngularJS app after retrieving useful information via a RESTful API?
I'm pretty new to AngularJS, and I wouldn't be surprised if my approach is totally ridiculous, but I really need to get some advice on this.
Thanks in advance for your help,
Ulysse

You don't have to wait that the AJAX Query ended to initate the angular APPs.
you can use the $http promise ( details her )
In the controller :
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
// data is now accessible in the html
$scope.data = response ;
// you can call a function to add markers on your maps with the received data
addMarkerOnMap(response);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
You can also add a watch on some variable to wait modification on them :
// you should have $scope.yourVarName declared.
$scope.$watch('yourVarName', function(newValue, oldValue) {
console.log(newValue);
});
Or watch a list/object
$scope.$watchCollection('[var1,var2]', function () {
},true);

Backbone is not sending attributes along with REST request

I am currently working on a backbone application, where you have to specify a guest name, in order to enter.
Guest = Backbone.Model.extend({
urlRoot : ftd.settings.rest + '/guest',
defaults: {
name : '',
},
validate: function( attr ) {
var errors = [];
if(attr.name.length < 4) {
errors.push({message : "You nickname, must be atleast 4 chars", name : 'guestNickname'});
}
if(errors.length > 0) {
return errors;
}
}
});
return Guest;
So on my frontpage the user sets a username and a new guest is instantiated, this is my front page view that handles the guest creation.
createGuest: function( ev ) {
ev.preventDefault();
// Get nickname.
var guest = new Guest();
guest.bind( 'error', function( model, errors ) {
_.each( errors, function( err ) {
$('input[name=' + err.name + ']').addClass('invalid');
// add a meesage somewhere, using err.message
}, this );
});
guest.save({'name' : $('input[name="guestNickname"]').val()}, {
success:function(model, response) {
console.log('Successfully saved!');
},
error: function(model, error) {
console.log(model);
console.log(error.error());
}
});
},
My problem is that, when backbone makes the request, it sends a OPTIONS request without the specified name, i even checked the packet in Wireshark, what am i doing wrong?
Bonus question: Why is backbone sending a OPTIONS request?

Apparently Backbone (or really your browser) sends an OPTIONS request during a backbone save with side effects because it tries to emulate "true" REST including PUT and DELETE requests, and not all servers support those commands.
According to this:
http://backbonejs.org/#Sync-emulateHTTP
If you set
Backbone.emulateHTTP = true;
then it will just try to POST.