Add ability to specify ID for skill reporting event

NationalSecurityAgency · Dec 15, 2023 · 9ccaa12 · 9ccaa12
1 parent 594d615
commit 9ccaa12
Showing 1 changed file with 25 additions and 9 deletions.
diff --git a/skills-client-integration/skills-int-client-js/app/index.html b/skills-client-integration/skills-int-client-js/app/index.html
@@ -33,17 +33,27 @@
         SkillsConfiguration.configure(result.data);
       });
 
-      SkillsReporter.addSuccessHandler((result) => {
+    SkillsReporter.addSuccessHandler((result) => {
+      document.querySelector('#global-event-result-container-js').innerHTML = JSON.stringify(result, null, 2);
+    });
+
+    SkillsReporter.addErrorHandler((result) => {
       document.querySelector('#global-event-result-container-js').innerHTML = JSON.stringify(result, null, 2);
     });
 
     const reportSkill = (skillId) => {
       SkillsReporter.reportSkill(skillId)
         .then((response) => {
           document.querySelector('#report-result-container').innerHTML = JSON.stringify(response, null, 2);
-        });
+        }).catch((err) => {
+          document.querySelector('#report-result-container').innerHTML = JSON.stringify(err, null, 2);
+      });
     };
-    document.querySelector('#exampleDirectiveClickEvent').addEventListener('click', () => { reportSkill('IronMan'); });
+
+    document.querySelector('#exampleDirectiveClickEvent').addEventListener('click', () => {
+      var skillId = document.getElementById('skillId').value;
+      reportSkill(skillId);
+    });
 
     const toggleAllEvents = () => {
       const notifyIfSkillNotApplied = document.querySelector('#all-events-check').checked
@@ -95,7 +105,7 @@ <h2>Report Skills Examples</h2>
           <pre id="global-event-result-container-js" data-cy="globalEventResult"></pre>
         </div>
         <div>
-          <h5 class="text-info"><strong>Skills Directive - Click Event</strong></h5>
+          <h5 class="text-info"><strong>Report Any Skill</strong></h5>
           <div class="card card-body bg-light">
             <pre class="m-0 sample-code">
 <code class="javascript">SkillsReporter.reportSkill(this.skill)
@@ -105,12 +115,18 @@ <h5 class="text-info"><strong>Skills Directive - Click Event</strong></h5>
 
           </div>
           <div class="card card-body mt-3">
+            <div class="text-primary">Skill Id:</div>
+            <div class="code-example">
+              <input class="form-control" id="skillId" type="text" value="IronMan" />
+            </div>
+            <div>
             <div id="exampleDirectiveClickEvent">
-              <button
-                data-cy="exampleDirectiveClickEventButton"
-                class="btn btn-outline-primary">
-                Report Skill
-              </button>
+                <button
+                  data-cy="exampleDirectiveClickEventButton"
+                  class="btn btn-outline-primary">
+                  Report Skill
+                </button>
+              </div>
             </div>
             <hr>
             <div class="text-primary">Result:</div>