Add Stats in Dictionary Details (#1248)

* Add Stats in Dictionary Details * Fix types
themoeway · Jul 25, 2024 · 916c67e · 916c67e
1 parent 4a93130
commit 916c67e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 14 deletions.
diff --git a/ext/js/pages/settings/dictionary-controller.js b/ext/js/pages/settings/dictionary-controller.js
@@ -254,22 +254,34 @@ class DictionaryEntry {
      * @returns {boolean}
      */
     _setupDetails(detailsTable) {
-        /** @type {[label: string, key: 'author'|'url'|'description'|'attribution'|'sourceLanguage'|'targetLanguage'][]} */
-        const targets = [
-            ['Author', 'author'],
-            ['URL', 'url'],
-            ['Description', 'description'],
-            ['Attribution', 'attribution'],
-            ['Source Language', 'sourceLanguage'],
-            ['Target Language', 'targetLanguage'],
-        ];
-
-        const dictionaryInfo = this._dictionaryInfo;
+        /** @type {Partial<Record<keyof (typeof this._dictionaryInfo & typeof this._dictionaryInfo.counts), string>>} */
+        const targets = {
+            author: 'Author',
+            url: 'URL',
+            description: 'Description',
+            attribution: 'Attribution',
+            sourceLanguage: 'Source Language',
+            targetLanguage: 'Target Language',
+            terms: 'Term Count',
+            kanji: 'Kanji Count',
+            kanjiMeta: 'Kanji Meta Count',
+            tagMeta: 'Tag Count',
+            media: 'Media Count',
+        };
+
+        const dictionaryInfo = {...this._dictionaryInfo, ...this._dictionaryInfo.counts};
         const fragment = document.createDocumentFragment();
         let any = false;
-        for (const [label, key] of targets) {
+        for (const [key, label] of /** @type {([keyof (typeof this._dictionaryInfo & typeof this._dictionaryInfo.counts), string])[]} */ (Object.entries(targets))) {
             const info = dictionaryInfo[key];
-            if (typeof info !== 'string') { continue; }
+            const displayText = ((_info) => {
+                if (typeof _info === 'string') { return _info; }
+                if (_info && typeof _info === 'object' && 'total' in _info) {
+                    return _info.total ? `${_info.total}` : false;
+                }
+                return false;
+            })(info);
+            if (!displayText) { continue; }
 
             const details = /** @type {HTMLElement} */ (this._dictionaryController.instantiateTemplate('dictionary-details-entry'));
             details.dataset.type = key;
@@ -280,7 +292,7 @@ class DictionaryEntry {
             const infoElement = querySelectorNotNull(details, '.dictionary-details-entry-info');
 
             labelElement.textContent = `${label}:`;
-            infoElement.textContent = info;
+            infoElement.textContent = displayText;
             fragment.appendChild(details);
 
             any = true;

diff --git a/ext/templates-settings.html b/ext/templates-settings.html
@@ -73,6 +73,14 @@
     <span class="dictionary-details-entry-label"></span>
     <span class="dictionary-details-entry-info"></span>
 </div></template>
+<template id="dictionary-stats-table-template">
+    <table class="dictionary-stats-table">
+        <thead class="dictionary-stats-table-head"></thead>
+        <tbody class="dictionary-stats-table-body">
+            <tr class="dictionary-stats-table-row"></tr>
+        </tbody>
+    </table>
+</template>
 <template id="dictionary-extra-template">
     <div class="dictionary-item-bottom"></div>
     <div class="dictionary-item-bottom"></div>