From 534fc4bb3b7e0a654b70dfdfaa098efe39ccdee9 Mon Sep 17 00:00:00 2001
From: panda <panda_dtdyy@outlook.com>
Date: Tue, 20 Dec 2022 05:44:18 +0000
Subject: [PATCH] scoreboard user filter

---
 packages/hydrooj/src/model/contest.ts         |  4 +-
 .../pages/contest_scoreboard.page.ts          | 53 +++++++++++++++++++
 .../templates/contest_scoreboard.html         |  8 +--
 3 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui-default/pages/contest_scoreboard.page.ts

diff --git a/packages/hydrooj/src/model/contest.ts b/packages/hydrooj/src/model/contest.ts
index 506e62e94..e2a347d1d 100644
--- a/packages/hydrooj/src/model/contest.ts
+++ b/packages/hydrooj/src/model/contest.ts
@@ -127,7 +127,7 @@ const acm = buildContestRule({
     async scoreboardRow(isExport, _, tdoc, pdict, udoc, rank, tsdoc, meta) {
         const tsddict = tsdoc.detail || {};
         const row: ScoreboardRow = [
-            { type: 'rank', value: rank ? rank.toString() : '*' },
+            { type: 'rank', value: rank ? rank.toString() : '*', raw: rank },
             { type: 'user', value: udoc.uname, raw: tsdoc.uid },
         ];
         if (isExport) {
@@ -263,7 +263,7 @@ const oi = buildContestRule({
     async scoreboardRow(isExport, _, tdoc, pdict, udoc, rank, tsdoc, meta) {
         const tsddict = tsdoc.detail || {};
         const row: ScoreboardNode[] = [
-            { type: 'rank', value: rank ? rank.toString() : '*' },
+            { type: 'rank', value: rank ? rank.toString() : '*', raw: rank },
             { type: 'user', value: udoc.uname, raw: tsdoc.uid },
         ];
         if (isExport) {
diff --git a/packages/ui-default/pages/contest_scoreboard.page.ts b/packages/ui-default/pages/contest_scoreboard.page.ts
new file mode 100644
index 000000000..d88193a39
--- /dev/null
+++ b/packages/ui-default/pages/contest_scoreboard.page.ts
@@ -0,0 +1,53 @@
+import $ from 'jquery';
+import { NamedPage } from 'vj/misc/Page';
+
+const page = new NamedPage('contest_scoreboard', () => {
+  const { tdoc } = UiContext;
+  let starData = JSON.parse(localStorage.getItem('Hydro.starData')) || {};
+  Object.keys(starData).forEach((key) => {
+    if (starData[key].expire < Date.now()) delete starData[key];
+  });
+  if (!starData[tdoc.docId]) {
+    starData[tdoc.docId] = {
+      expire: tdoc.endAt + 1000 * 60 * 60 * 24 * 7,
+      starUids: [],
+    };
+  } else {
+    starData[tdoc.docId].starUids.forEach((uid) => {
+      console.log(uid);
+      $(`.star.user--${uid}`).addClass('activated');
+    });
+  }
+  console.log(starData[tdoc.docId].starUids);
+  localStorage.setItem('Hydro.starData', JSON.stringify(starData));
+  $('.star').on('click', (e) => {
+    starData = JSON.parse(localStorage.getItem('Hydro.starData'));
+    const $target = $(e.currentTarget);
+    const uid = $target.data('uid');
+    if (starData[tdoc.docId].starUids.includes(uid)) {
+      $target.removeClass('activated');
+      starData[tdoc.docId].starUids.splice(starData[tdoc.docId].starUids.indexOf(uid), 1);
+    } else {
+      $target.addClass('activated');
+      starData[tdoc.docId].starUids.push(uid);
+    }
+    localStorage.setItem('Hydro.starData', JSON.stringify(starData));
+  });
+
+  $('.select.filter').on('change', (e) => {
+    const val = $(e.target).val();
+    if (val === 'all') {
+      $('.data-table tbody tr').show();
+    } else if (val === 'star') {
+      $('.data-table tbody tr').hide();
+      starData[tdoc.docId].starUids.forEach((uid) => {
+        $(`.star.user--${uid}`).closest('tr').show();
+      });
+    } else {
+      $('.data-table tbody tr').hide();
+      $('.rank--unrank').closest('tr').show();
+    }
+  });
+});
+
+export default page;
diff --git a/packages/ui-default/templates/contest_scoreboard.html b/packages/ui-default/templates/contest_scoreboard.html
index d35a755e4..6d2a03ee3 100644
--- a/packages/ui-default/templates/contest_scoreboard.html
+++ b/packages/ui-default/templates/contest_scoreboard.html
@@ -28,7 +28,7 @@
         </form>
       {% endif %}
       <div class="section__tools">
-        <select class="select" name="list">
+        <select class="select filter" name="list">
           <option value="all">{{ _('All Users') }}</option>
           <option value="star">{{ _('Stared Users') }}</option>
           <option value="unrank">{{ _('Unrank Users') }}</option>
@@ -77,9 +77,11 @@
           <tr>
             {%- for column in row -%}
               <td class="col--{{ rows[0][loop.index0]['type'] }}"{% if column.style %} style="{{ column.style }}"{% endif %}>
-              {%- if column.type == 'user' -%}
+              {%- if column.type == 'rank' -%}
+                <span class="{{ 'rank--normal' if column.raw else 'rank--unrank' }}">{{ column.value|string|nl2br|safe }}</span>
+              {%- elif column.type == 'user' -%}
                 {%- set canView = canViewAll or handler.user._id == column.raw -%}
-                <button class="star user--{{ colomn.raw }}">
+                <button class="star user--{{ column.raw }}" data-uid="{{ column.raw }}">
                   <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
                   <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>
                 </button>