From 10276f456ed21d1c11ad97db86c064254c8ccc2a Mon Sep 17 00:00:00 2001
From: Mike Subelsky <mike@subelsky.com>
Date: Tue, 29 Oct 2019 15:13:34 -0400
Subject: [PATCH] draw assets for currently-selected tags

---
 example/client_mix/main.js | 42 +++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/example/client_mix/main.js b/example/client_mix/main.js
index 188df9f4..576b347c 100644
--- a/example/client_mix/main.js
+++ b/example/client_mix/main.js
@@ -179,26 +179,15 @@ function mapAssets(map,listener,roundware) {
   return assetMarkers;
 }
 
-function showHideMarkers(map,assetMarkers) {
-  assetMarkers.forEach(item => {
-    // if any item tags are not included in selected tags, hide marker, otherwise show it
-    //const selectedListenTagIds = $("#uiListenDisplay input:checked").map(function() {
-      //return Number(this.value);
-    //}).get();
-
-    //let is_visible = true;
-
-    //const { rw_tags = [] } = item;
-
-    //rw_tags.forEach((j,tag_id) =>{
-    //// if tag_id isn't selected, set to false and return
-    //if (!(selectedListenTagIds.includes(tag_id))) {
-    //is_visible = false;
-    //return;
-    //}
-    //});
+function showHideMarkers(map,assetMarkers,{ listenTagIds = [] }) {
+  const listenTagIdMap = listenTagIds.reduce((map,tagId) => {
+    map[Number(tagId)] = true;
+    return map;
+  },{});
 
-    const is_visible = true;
+  assetMarkers.forEach(item => {
+    const { rw_tags } = item;
+    const is_visible = !!(rw_tags.find(tagId => listenTagIdMap[tagId]));
 
     item.setVisible(is_visible);
 
@@ -278,9 +267,7 @@ function initDemo() {
     then(({ uiConfig }) => {
       mapSpeakers(map,roundware);
 
-      const assetMarkers = mapAssets(map,listener,roundware);
-      showHideMarkers(map,assetMarkers);
-
+      const assetMarkers = mapAssets(map, listener, roundware);
       const { recordingRadius = 25 } = roundware.mixParams;
 
       let listeningCircle = drawListeningCircle(map,googleMapsCenter,recordingRadius);
@@ -329,6 +316,7 @@ function initDemo() {
       },{ once: true });
 
       const { listen: listenTags } = uiConfig;
+      const listenTagIds = [];
 
       listenTags.forEach(tag => {
         const { header_display_text, display_items } = tag;
@@ -337,7 +325,12 @@ function initDemo() {
 
         const checkboxEls = display_items.map(item => {
           const { tag_id,  tag_display_text, default_state } = item;
-          const checkedAttrib = default_state ? 'checked' : '';
+          let checkedAttrib = '';
+
+          if (default_state) {
+            checkedAttrib =  'checked';
+            listenTagIds.push(tag_id);
+          }
 
           return `
           <label>
@@ -351,6 +344,8 @@ function initDemo() {
         tagDiv.insertAdjacentHTML('beforeend',checkboxEls.join('\n'));
       });
 
+      showHideMarkers(map,assetMarkers,{ listenTagIds });
+
       document.querySelectorAll('.btnGroup').forEach(g => g.style.display = 'block');
 
       document.querySelectorAll('[data-skip-track-id]').forEach(el => {
@@ -372,6 +367,7 @@ function initDemo() {
       tagDiv.addEventListener('input',() => {
         const listenTagIds = [...tagDiv.querySelectorAll('[name=tags]:checked')].map(tag => tag.value);
         mixer.updateParams({ listenTagIds });
+        showHideMarkers(map,assetMarkers,{ listenTagIds });
       });
     }).
     catch(err => {