recognition: recognition.js showBanner/handleSaveResponse; wired into sky SAVE handler on applet & sky page — TDD

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-22 03:05:35 -04:00
parent 3cc9f5a527
commit 565f727aa6
7 changed files with 344 additions and 2 deletions
--- a/src/apps/dashboard/static/apps/dashboard/recognition.js
+++ b/src/apps/dashboard/static/apps/dashboard/recognition.js
@@ -0,0 +1,49 @@
+const Recognition = (() => {
+    'use strict';
+
+    function showBanner(recognition) {
+        if (!recognition) return;
+
+        const earned = new Date(recognition.earned_at);
+        const dateStr = earned.toLocaleDateString(undefined, {
+            year: 'numeric', month: 'short', day: 'numeric',
+        });
+
+        const banner = document.createElement('div');
+        banner.className = 'recog-banner';
+        banner.innerHTML =
+            '<div class="recog-banner__body">' +
+                '<p class="recog-banner__title">'       + _esc(recognition.title)       + '</p>' +
+                '<p class="recog-banner__description">' + _esc(recognition.description) + '</p>' +
+                '<time class="recog-banner__timestamp" datetime="' + _esc(recognition.earned_at) + '">' +
+                    dateStr +
+                '</time>' +
+            '</div>' +
+            '<div class="recog-banner__image"></div>' +
+            '<button type="button" class="btn btn-danger recog-banner__nvm">NVM</button>' +
+            '<a href="/billboard/recognition/" class="btn btn-caution recog-banner__fyi">FYI</a>';
+
+        banner.querySelector('.recog-banner__nvm').addEventListener('click', function () {
+            banner.remove();
+        });
+
+        var h2 = document.querySelector('h2');
+        if (h2 && h2.parentNode) {
+            h2.parentNode.insertBefore(banner, h2.nextSibling);
+        } else {
+            document.body.insertBefore(banner, document.body.firstChild);
+        }
+    }
+
+    function handleSaveResponse(data) {
+        showBanner(data && data.recognition);
+    }
+
+    function _esc(str) {
+        var d = document.createElement('div');
+        d.textContent = str || '';
+        return d.innerHTML;
+    }
+
+    return { showBanner: showBanner, handleSaveResponse: handleSaveResponse };
+})();