Filter events per user

cd.js

@@ -25,12 +25,31 @@ var classColors = {
 	"Barde": "#6d8432"
 };
 
-var offensiveCooldowns = {
-
+var trackedCooldowns = {
+	7436: {name: "Chain Stratagem", cooldown: 120000},
+	16536: {name: "Temperance", cooldown: 180000},
+	2258: {name: "Trick Attack", cooldown: 60000}
 };
 
 // Do stuff when HTML parsing is ready
 $(() => {
+	ko.bindingHandlers.foreachprop = {
+		transformObject: function (obj) {
+		  var properties = [];
+		  ko.utils.objectForEach(obj, function (key, value) {
+			properties.push({ key: key, value: value });
+		  });
+		  return properties;
+		},
+		init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
+		  var properties = ko.pureComputed(function () {
+			var obj = ko.utils.unwrapObservable(valueAccessor());
+			return ko.bindingHandlers.foreachprop.transformObject(obj);
+		  });
+		  ko.applyBindingsToNode(element, { foreach: properties }, bindingContext);
+		  return { controlsDescendantBindings: true };
+		}
+	};
 	// Document is ready
 	function IndexViewModel() {
 		var self = this;
@@ -39,7 +58,7 @@ $(() => {
 		self.fights = ko.observableArray();
 		self.friendlies = ko.observableArray();
 		self.enemies = ko.observableArray();
-		self.casts = ko.observableArray();
+		self.trackedActors = ko.observableArray();
 		self.displayFightPicker = ko.observable(false);
 		self.selectedFight = ko.observable();
 
@@ -67,14 +86,32 @@ $(() => {
 
 		self.fightChanged = async function() {
 			console.log("Fight has changed to ",self.selectedFight());
-			var casts = await fetchCasts(self.selectedFight());
-
-			self.casts(casts);
-			console.log("self",self.casts());
+			var events = await fetchEvents(self.selectedFight());
+
+			var actors = await filterEvents(self.selectedFight(),events);
+			/*
+			for(var actor of actors) {
+				var updated = false;
+				for(var oldactor of self.trackedActors()) {
+					if(actor.id === oldactor.id) {
+						oldactor.trackedEvents(actor.trackedEvents());
+						oldactor.trackedEvents.valueHasMutated();
+						updated = true;
+					}
+				}
+				if(!updated) {
+					self.trackedActors.push(actor);
+				}
+			}*/
+			//FIXME: This is a hack, we should instead somehow update the trackedEvents observable so only this part is rerendered
+			self.trackedActors([]);
+			self.trackedActors(actors);
+			for(var actor of self.trackedActors()) {
+				console.log("tracked: ",actor.trackedEvents());
+			}
 		};
 
 		self.textColor = function(job) {
-			console.log(job.type)
 			return classColors[job.type];
 		};
 
@@ -91,12 +128,53 @@ $(() => {
 			}
 			return null;
 		};
+
+		self.getActorByID = function(id) {
+			for(var actor of self.friendlies()) {
+				if(id == actor.id) {
+					return actor;
+				}
+			}
+			for(var actor of self.enemies()) {
+				if(id == actor.id) {
+					return actor;
+				}
+			}
+			return null;
+		};
 	};
 	indexViewModel = new IndexViewModel();
 	ko.applyBindings(indexViewModel);
 });
 
-async function fetchCasts(fight) {
+async function filterEvents(fight, events) {
+	var result = [];
+	for(var event of events) {
+		// Do we even care about this cast?
+		if(!(event.ability.guid in trackedCooldowns)) {
+			continue;
+		}
+		var found = false;
+		for(var actor of result) {
+			if(actor.id == event.sourceID) {
+				found = true;
+				break;
+			}
+		}
+		if(!found) {
+			console.log("Found new actor: "+event.sourceID);
+			var actor = indexViewModel.getActorByID(event.sourceID);
+			actor.trackedEvents = ko.observableArray();
+			result.push(actor);
+		}
+		actor.trackedEvents.push(event);
+		console.log(event);
+	}
+	console.log("Generated arrays: ",result);
+	return result;
+}
+
+async function fetchEvents(fight) {
 	let baseUrl = fflogsEventsAPI + "casts/" + indexViewModel.logID() + api + indexViewModel.apiKey() + "&translate=true" + "&end=" + fight.end_time;
 	let start_time = fight.start_time;
 	let result = [];
@@ -105,7 +183,7 @@ async function fetchCasts(fight) {
 	do {
 		let url = baseUrl + "&start=" + start_time;
 		console.log("Requesting "+url);
-		snip = await fetchCastSnippet(url);
+		snip = await fetchEventsSnippet(url);
 		for(var e of snip.events) {
 			result.push(e);
 		}
@@ -116,16 +194,16 @@ async function fetchCasts(fight) {
 	return result;
 }
 
-async function fetchCastSnippet(url) {
+async function fetchEventsSnippet(url) {
 	var res = await fetch(url);
     if (!res.ok) {
         console.log(res);
         throw Error(res.text);
 	}
-	var casts = await res.json();
+	var events = await res.json();
 
-	console.log(casts);
-	return casts;
+	console.log(events);
+	return events;
 }
 
 // API request um JSON zu erhalten

index.html

@@ -41,15 +41,13 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-sm" data-bind="foreach: friendlies">
+                <div class="col-sm" data-bind="foreach: trackedActors">
                     <details>
                         <summary><span data-bind="text: type, text: name, style: {color: $parent.textColor($data)}"></span></summary>
-                    </details>
-                </div>
+                        <div data-bind="foreach: trackedEvents">
+                            <span data-bind="text: timestamp+' '+ability.name"></span>
                         </div>
-            <div class="row">
-                <div class="col-sm" data-bind="foreach: casts">
-                    <div data-bind="text: $parent.actorIDToName(sourceID)+' '+type+' '+ability.name+' at '+timestamp"></div>
+                    </details>
                 </div>
             </div>
         </div>