From f8aae3e7f48f4fa812c07b3ba01d1ae2c104b6a2 Mon Sep 17 00:00:00 2001
From: candela97 <54083835+candela97@users.noreply.github.com>
Date: Sun, 31 Mar 2024 04:57:23 +0800
Subject: [PATCH] Refactor licenses page summary

---
 .../Features/Store/Licenses/CLicenses.js      |   4 +-
 .../Store/Licenses/FLicensesSummary.svelte    | 121 ++++++++++++++++++
 .../Store/Licenses/FLincensesSummary.js       |  76 -----------
 3 files changed, 123 insertions(+), 78 deletions(-)
 create mode 100644 src/js/Content/Features/Store/Licenses/FLicensesSummary.svelte
 delete mode 100644 src/js/Content/Features/Store/Licenses/FLincensesSummary.js

diff --git a/src/js/Content/Features/Store/Licenses/CLicenses.js b/src/js/Content/Features/Store/Licenses/CLicenses.js
index 8d350ff7d..e37e89737 100644
--- a/src/js/Content/Features/Store/Licenses/CLicenses.js
+++ b/src/js/Content/Features/Store/Licenses/CLicenses.js
@@ -1,12 +1,12 @@
 import {Context, ContextType} from "../../../modulesContent";
-import FLincensesSummary from "./FLincensesSummary";
+import {FLicensesSummary} from "./FLicensesSummary.svelte";
 
 export class CLicenses extends Context {
 
     constructor() {
 
         super(ContextType.LICENSES, [
-            FLincensesSummary,
+            FLicensesSummary,
         ]);
     }
 }
diff --git a/src/js/Content/Features/Store/Licenses/FLicensesSummary.svelte b/src/js/Content/Features/Store/Licenses/FLicensesSummary.svelte
new file mode 100644
index 000000000..f58b943b2
--- /dev/null
+++ b/src/js/Content/Features/Store/Licenses/FLicensesSummary.svelte
@@ -0,0 +1,121 @@
+<script lang="ts" context="module">
+    // @ts-ignore
+    import self_ from "./FLicensesSummary.svelte";
+    import {Feature} from "../../../modulesContent";
+    import type {CLicenses} from "./CLicenses";
+
+    export class FLicensesSummary extends Feature<CLicenses> {
+
+        override apply(): void {
+            let target = document.querySelector(".youraccount_page");
+            if (!target) {
+                throw new Error("Node not found");
+            }
+
+            (new self_({
+                target,
+                anchor: target.firstElementChild,
+            }));
+        }
+    }
+</script>
+
+<script lang="js">
+    import {Localization} from "../../../../modulesCore";
+
+    const list = {};
+    const types = {};
+
+    for (const item of document.querySelectorAll(".account_table tr")) {
+        const dateStr = item.querySelector(".license_date_col")?.textContent.trim();
+        const type = item.querySelector(".license_acquisition_col")?.textContent.trim();
+        if (!dateStr || !type) { continue; }
+
+        const year = /\d{4}/.exec(dateStr)?.[0] ?? "";
+
+        (list[year] ??= {})[type] = (list[year][type] ?? 0) + 1;
+        types[type] = (types[type] ?? 0) + 1;
+    }
+
+    const listEntries = Object.entries(list).reverse();
+    const totals = listEntries.map(
+        ([, row]) => Object.entries(row)
+            .map(([, count]) => count)
+            .reduce((a, b) => a + b, 0)
+    );
+
+    const totalGlobal = totals.reduce((a, b) => a + b, 0);
+    const typesEntries = Object.entries(types);
+
+    const tableHeader = typesEntries
+        .map(([name]) => `<th>${name}</th>`)
+        .join("");
+
+    const tableFooter = typesEntries
+        .map(([, value]) => `<td>${value || "0"}</td>`)
+        .join("");
+
+    const rows = listEntries.map(
+        ([year, row], i) =>
+            `<tr>
+                <td>${year}</td>
+                ${typesEntries
+                    .map(([name]) => `<td>${row[name] || "0"}</td>`)
+                    .join("")
+                }
+                <td>${totals[i] || "0"}</td>
+            </tr>`
+        )
+        .join("");
+
+    let show = false;
+    function onClick() {
+        show = !show;
+    }
+</script>
+
+<span class="h3">{Localization.str.wl.label}</span>
+<button on:click={onClick}>{show ? Localization.str.hide : Localization.str.show}</button>
+{#if show}
+<div class="block_content">
+    <table class="account_table">
+        <thead>
+            <tr>
+                <th>{Localization.str.year}</th>
+                {@html tableHeader}
+                <th>{Localization.str.all}</th>
+            </tr>
+        </thead>
+        <tbody>
+            {@html rows}
+        </tbody>
+        <tfoot>
+            <tr>
+                <td>{Localization.str.all}</td>
+                {@html tableFooter}
+                <td>{totalGlobal}</td>
+            </tr>
+        </tfoot>
+    </table>
+</div>
+{/if}
+
+
+<style>
+    .h3 {
+        color: #ffffff;
+        font-size: 22px;
+        font-family: "Motiva Sans", Sans-serif;
+        font-weight: normal;
+    }
+    button {
+        vertical-align: text-bottom;
+        margin-left: 5px;
+        cursor: pointer;
+        border: solid #8ecafc 1px;
+        padding: 0px 10px;
+    }
+    :global(.block) {
+        margin-top: 20px;
+    }
+</style>
diff --git a/src/js/Content/Features/Store/Licenses/FLincensesSummary.js b/src/js/Content/Features/Store/Licenses/FLincensesSummary.js
deleted file mode 100644
index 89d951820..000000000
--- a/src/js/Content/Features/Store/Licenses/FLincensesSummary.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import {HTML, Localization} from "../../../../modulesCore";
-import {Feature} from "../../../modulesContent";
-
-export default class FLincensesSummary extends Feature {
-
-    apply() {
-        const all = document.querySelectorAll(".account_table tr[data-panel]");
-        const list = {};
-        const types = {};
-
-        for (const item of all) {
-            const dateStr = item.querySelector(".license_date_col").textContent.trim();
-            const year = /\d{4}/.exec(dateStr)?.[0] ?? "";
-            const typ = item.querySelector(".license_acquisition_col").textContent.trim();
-
-            (list[year] ??= {})[typ] = (list[year][typ] ?? 0) + 1;
-            types[typ] = (types[typ] ?? 0) + 1;
-        }
-
-        const listEntries = Object.entries(list).reverse();
-        const totals = listEntries.map(
-            ([, row]) => Object.entries(row)
-                .map(([, count]) => count)
-                .reduce((a, b) => a + b, 0)
-        );
-
-        const totalGlobal = totals.reduce((a, b) => a + b, 0);
-        const typesEntries = Object.entries(types);
-
-        const tableHeader = typesEntries
-            .map(([name]) => `<th>${name}</th>`)
-            .join("");
-
-        const tableFooter = typesEntries
-            .map(([, value]) => `<td>${value || "0"}</td>`)
-            .join("");
-
-        const rows = listEntries
-            .map(([year, row], i) => `<tr>
-                <td>${year}</td>
-                ${typesEntries
-                    .map(([name]) => `<td>${row[name] || "0"}</td>`)
-                    .join("")
-                }
-                <td>${totals[i] || "0"}</td>
-            </tr>`)
-            .join("");
-
-        HTML.beforeBegin(
-            document.querySelector(".youraccount_page > .block"),
-            `<div class="block" style="margin-bottom: 20px">
-                <div class="block_content">
-                    <table class="account_table">
-                        <thead>
-                            <tr>
-                                <th>${Localization.str.year}</th>
-                                ${tableHeader}
-                                <th>${Localization.str.all}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            ${rows}
-                        </tbody>
-                        <tfoot>
-                            <tr>
-                                <td>${Localization.str.all}</td>
-                                ${tableFooter}
-                                <td>${totalGlobal}</td>
-                            </tr>
-                        </tfoot>
-                    </table>
-                </div>
-            </div>`
-        );
-    }
-}