scoreboard user filter

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) {

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;

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>