0

I'm using angular-ui-fullcalendar to show and edit events. Users can log in and have unique uid when logged in. I want to use this to distinguish events made by current user from other events. I want to give current user events another backgroundColor.

What is the best way to do this??

I tried several things. My data looks like this:

```
database
  bookings
    -KWnAYjnYEAeErpvGg0-
       end: "2016-11-16T12:00:00"
       start: "2016-11-16T10:00:00"
       stick: true
       title: "Brugernavn Her"
       uid: "1f17fc37-2a28-4c24-8526-3882f59849e9"
```

I tried to filter all data with current user uid like this

var ref = firebase.database().ref().child("bookings");
var query = ref.orderByChild("uid").equalTo(currentAuth.uid);
var bookings = $firebaseArray(query);
$scope.eventSources = [bookings];

This doesn't return anything. If I omit the filter in line 2 it returns all bookings as expected. But even if the filter worked it would not solve my problem, because I want to fetch both current user events and all other events. Firebase does not have a "not equal to" filter option...

I tried to loop through each record and compare uids and setting backgroundColor if condition was met:

var ref = firebase.database().ref().child("bookings");
var bookings = $firebaseArray(ref);
bookings.$ref().on("value", function(snapshot) {
    var list = snapshot.val();

    for (var obj in list) {
        if ( !list.hasOwnProperty(obj) ) continue;
        var b = list[obj];
        if (b.uid === currentAuth.uid) {
            b.className = "myBooking";
            b.backgroundColor = "red";
        }
    }
});
$scope.eventSources = [bookings];

But this causes asynchronous problems so the 'bookings' array assigned to $scope.eventSources wasn't modified. I tried to move the $scope.eventSources = [bookings] inside the async code block but FullCalendar apparently can't handle that and renders nothing.

I also tried this but no luck either:

bookings.$loaded()
    .then(function(data) {
        $scope.eventSources = [data];
     })
     .catch(function(error) {
         console.log("Error:", error);
     });

What is the best solution to my problem?

olefrank
  • 6,452
  • 14
  • 65
  • 90

1 Answers1

0

If you're looking to modify the data that is loaded/synchronized from Firebase, you should extend the $firebaseArray service. Doing this through $loaded() is wrong, since that will only trigger for initial data.

See the AngularFire documentation on Extending $firebaseArray and Kato's answer on Joining data between paths based on id using AngularFire for examples.

Community
  • 1
  • 1
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • 1
    And an example of this very use case [here](https://gist.github.com/katowulf/f78d4a224c06a643ddfa) and [here](http://jsfiddle.net/katowulf/uoe5yt8x/) – Kato Nov 18 '16 at 01:29