@xcpcio/board-app 0.29.0 → 0.31.0

package/src/components/board/SubmissionsTable.vue

@@ -1,23 +1,210 @@
 <script setup lang="ts">
-import type { Rank, Submissions } from "@xcpcio/core";
+import { MultiSelect } from "vue-search-select";
+
+import type { Rank, SelectOptionItem, Submissions } from "@xcpcio/core";
 import { Submission } from "@xcpcio/core";
+import type { SubmissionStatus } from "@xcpcio/types";
 import { SubmissionStatusToString } from "@xcpcio/types";
 
 import { Pagination } from "~/composables/pagination";
 
+import "~/styles/submission-status-filter.css";
+
+interface FilterOptions {
+  orgNames: string[];
+  teamIds: string[];
+  languages: string[];
+  statuses: SubmissionStatus[];
+}
+
+interface EnableFilterOptions {
+  organization?: boolean,
+  team?: boolean,
+  language?: boolean,
+  status?: boolean,
+}
+
 const props = defineProps<{
   rank: Rank,
   submissions: Submissions,
   pageSize?: number,
   removeBorder?: boolean,
+  enableFilter?: EnableFilterOptions,
 }>();
 
 const rank = computed(() => props.rank);
+const enableFilter = computed(() => props.enableFilter);
+const enableFilterButton = computed(() => {
+  if (!enableFilter.value) {
+    return false;
+  }
+
+  for (const [_k, v] of Object.entries(enableFilter.value)) {
+    if (v === true) {
+      return true;
+    }
+  }
+
+  return false;
+});
+
+const filterOptions = ref<FilterOptions>({
+  orgNames: [],
+  teamIds: [],
+  languages: [],
+  statuses: [],
+});
+
+const orgOptions = computed(() => {
+  const res = rank.value.organizations.map((o) => {
+    return {
+      value: o,
+      text: o,
+    };
+  });
+
+  return res;
+});
+
+const orgSelectedItems = ref<Array<SelectOptionItem>>([]);
+const orgLastSelectItem = ref({});
+
+function orgOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
+  orgSelectedItems.value = selectedItems;
+  orgLastSelectItem.value = lastSelectItem;
+}
+
+const teamsOptions = computed(() => {
+  const res = rank.value.originTeams.map((t) => {
+    return {
+      value: t.id,
+      text: t.organization ? `${t.name} - ${t.organization}` : t.name,
+    };
+  });
+
+  return res;
+});
+
+const teamsSelectedItems = ref<Array<SelectOptionItem>>([]);
+const teamsLastSelectItem = ref({});
+
+function teamsOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
+  teamsSelectedItems.value = selectedItems;
+  teamsLastSelectItem.value = lastSelectItem;
+}
+
+const languageOptions = computed(() => {
+  const languages = rank.value.languages;
+
+  const res = languages.map((l) => {
+    return {
+      value: l,
+      text: l,
+    };
+  });
+
+  return res;
+});
+
+const languageSelectedItems = ref<Array<SelectOptionItem>>([]);
+const languageLastSelectItem = ref({});
+
+function languageOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
+  languageSelectedItems.value = selectedItems;
+  languageLastSelectItem.value = lastSelectItem;
+}
+
+const statusOptions = computed(() => {
+  const statuses = rank.value.statuses;
+
+  const res = statuses.map((s) => {
+    return {
+      value: s,
+      text: SubmissionStatusToString[s],
+    };
+  });
+
+  return res;
+});
+
+const statusSelectedItems = ref<Array<SelectOptionItem>>([]);
+const statusLastSelectItem = ref({});
+
+function statusOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
+  statusSelectedItems.value = selectedItems;
+  statusLastSelectItem.value = lastSelectItem;
+}
+
+function statusCustomAttr(option: SelectOptionItem) {
+  return option.value.toString();
+}
+
 const submissions = computed(() => {
-  const s = props.submissions;
-  return s.sort(Submission.compare).reverse();
+  const ss = props.submissions;
+  return ss.filter((s) => {
+    const o = filterOptions.value;
+
+    if (o.orgNames.length === 0
+     && o.teamIds.length === 0
+     && o.languages.length === 0
+     && o.statuses.length === 0
+    ) {
+      return true;
+    }
+
+    if (o.teamIds.length > 0) {
+      for (const t of o.teamIds) {
+        if (t === s.teamId) {
+          return true;
+        }
+      }
+    }
+
+    if (o.orgNames.length > 0) {
+      const team = rank.value.teamsMap.get(s.teamId);
+      for (const n of o.orgNames) {
+        if (n === team?.organization) {
+          return true;
+        }
+      }
+    }
+
+    if (o.languages.length > 0) {
+      for (const l of o.languages) {
+        if (l === s.language) {
+          return true;
+        }
+      }
+    }
+
+    if (o.statuses.length > 0) {
+      for (const sta of o.statuses) {
+        if (sta === s.status) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }).sort(Submission.compare).reverse();
 });
 
+function onFilter() {
+  const newFilterOptions: FilterOptions = {
+    orgNames: [],
+    teamIds: [],
+    languages: [],
+    statuses: [],
+  };
+
+  newFilterOptions.orgNames = orgSelectedItems.value.map(o => o.value);
+  newFilterOptions.teamIds = teamsSelectedItems.value.map(t => t.value);
+  newFilterOptions.languages = languageSelectedItems.value.map(l => l.value);
+  newFilterOptions.statuses = statusSelectedItems.value.map(s => s.value as SubmissionStatus);
+
+  filterOptions.value = newFilterOptions;
+}
+
 const p = ref(new Pagination());
 
 p.value.currentPage = 0;
@@ -69,79 +256,94 @@ function getProblemLabelColorStyle(s: Submission) {
 <template>
   <section>
     <div
-      class="mx-auto w-full"
+      mx-auto w-full
       px-4
     >
       <div
-        class="relative overflow-hidden bg-white dark:bg-gray-800"
+        relative overflow-hidden
+        bg-white dark:bg-gray-800
         :class="{
           'shadow-md': props.removeBorder !== true,
           'sm:rounded-sm': props.removeBorder !== true,
         }"
       >
         <div
-          class="lg:flex-row lg:items-center lg:justify-between space-y-3 lg:space-x-4 lg:space-y-0"
+          space-y-3
           flex flex-col
           px-4 py-3
+          lg:flex-row lg:items-center lg:justify-between
+          lg:space-x-4 lg:space-y-0
         >
           <div
-            class="flex flex-shrink-0 flex-col md:flex-row md:items-center lg:justify-end space-y-3 md:space-x-3 md:space-y-0"
+            flex flex-shrink-0 flex-col
+            md:flex-row md:items-center
+            lg:justify-end space-y-3
+            md:space-x-3 md:space-y-0
           >
-            <button
-              v-if="notShowing"
-              type="button"
-              class="flex items-center justify-center rounded-lg bg-primary-700 px-4 py-2 text-sm font-medium text-white dark:bg-primary-600 hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+            <div
+              v-if="rank.contest.organization && enableFilter?.organization"
+              w-48
             >
-              <svg
-                class="mr-2 h-3.5 w-3.5"
-                fill="currentColor"
-                viewbox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <path
-                  clip-rule="evenodd"
-                  fill-rule="evenodd"
-                  d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-                />
-              </svg>
-              Add new product
-            </button>
-
-            <button
-              v-if="notShowing"
-              type="button"
-              class="flex flex-shrink-0 items-center justify-center border border-gray-200 rounded-lg bg-white px-3 py-2 text-sm font-medium text-gray-900 focus:z-10 dark:border-gray-600 dark:bg-gray-800 hover:bg-gray-100 dark:text-gray-400 hover:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+              <MultiSelect
+                :options="orgOptions"
+                :selected-options="orgSelectedItems"
+                :placeholder="rank.contest.organization"
+                @select="orgOnSelect"
+              />
+            </div>
+
+            <div
+              v-if="enableFilter?.team"
+              w-48
             >
-              <svg
-                class="mr-2 h-4 w-4"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-                fill="none"
-                viewbox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-                />
-              </svg>
-              Update stocks 1/250
-            </button>
-
-            <button
-              v-if="notShowing"
-              type="button"
-              class="flex flex-shrink-0 items-center justify-center border border-gray-200 rounded-lg bg-white px-3 py-2 text-sm font-medium text-gray-900 focus:z-10 dark:border-gray-600 dark:bg-gray-800 hover:bg-gray-100 dark:text-gray-400 hover:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+              <MultiSelect
+                :options="teamsOptions"
+                :selected-options="teamsSelectedItems"
+                placeholder="Team"
+                @select="teamsOnSelect"
+              />
+            </div>
+
+            <div
+              v-if="enableFilter?.status"
+              w-64
+            >
+              <MultiSelect
+                :options="statusOptions"
+                :selected-options="statusSelectedItems"
+                placeholder="Status"
+                :custom-attr="statusCustomAttr"
+                @select="statusOnSelect"
+              />
+            </div>
+
+            <div
+              v-if="enableFilter?.language && languageOptions.length > 0"
+              w-48
             >
-              <div
-                i-pajamas-export
-                class="mr-2 h-4 w-4"
+              <MultiSelect
+                :options="languageOptions"
+                :selected-options="languageSelectedItems"
+                placeholder="Language"
+                @select="languageOnSelect"
               />
-              Export
-            </button>
+            </div>
+
+            <div
+              v-if="enableFilterButton"
+            >
+              <button
+                type="button"
+                class="flex flex-shrink-0 items-center justify-center border border-gray-200 rounded-lg bg-white px-3 py-2 text-sm font-medium text-gray-900 focus:z-10 dark:border-gray-600 dark:bg-gray-800 hover:bg-gray-100 dark:text-gray-400 hover:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+                @click="onFilter"
+              >
+                <div
+                  i-material-symbols-search
+                  mr-1 h-5 w-5
+                />
+                Filter
+              </button>
+            </div>
           </div>
         </div>
 

package/src/components/board/TeamAwards.vue

@@ -53,6 +53,28 @@ const medal = computed((): Medal | null => {
 
   return null;
 });
+
+const place = computed(() => {
+  let r = team.value.rank;
+
+  if (rank.value.contest.organization) {
+    r = team.value.organizationRank;
+  }
+
+  if (r === 1) {
+    return "1st Place";
+  }
+
+  if (r === 2) {
+    return "2nd Place";
+  }
+
+  if (r === 3) {
+    return "3rd Place";
+  }
+
+  return "";
+});
 </script>
 
 <template>
@@ -61,31 +83,39 @@ const medal = computed((): Medal | null => {
     text-xl
     font-mono font-semibold italic
     flex flex-col gap-2
-    justify-center
+    justify-center items-center
   >
-    <div>
-      Team Rank: {{ team.rank }}
-    </div>
-
     <div
-      v-if="team.organization && team.organizationRank !== -1"
+      flex flex-col
+      items-start
+      gap-y-2
     >
-      {{ rank.contest.organization }} Rank: {{ team.organizationRank }}
-    </div>
+      <div
+        v-if="medal"
+      >
+        {{ medal.text }} Medalist
+      </div>
 
-    <div
-      v-if="firstSolvedProblems.length"
-      flex flex-col gap-2
-    >
-      <div>
-        First Solved Problem {{ firstSolvedProblems }}
+      <div
+        v-if="place.length > 0"
+      >
+        {{ place }}
       </div>
-    </div>
 
-    <div
-      v-if="medal"
-    >
-      {{ medal.text }} Medal
+      <div
+        v-if="firstSolvedProblems.length"
+        flex flex-col gap-2
+      >
+        <div>
+          First Solved Problem {{ firstSolvedProblems }}
+        </div>
+      </div>
+
+      <div
+        v-if="team.solvedProblemNum > 0"
+      >
+        Solved {{ team.solvedProblemNum }} {{ team.solvedProblemNum > 1 ? 'Problems' : 'Problem' }}
+      </div>
     </div>
   </div>
 </template>

package/src/components/board/TeamInfoModal.vue

@@ -80,13 +80,26 @@ const types = [TYPE_SUBMISSIONS, TYPE_STATISTICS, TYPE_AWARDS];
                 width-class="h-8 w-8"
               />
 
-              <h3
-                text-gray-900 dark:text-white
-                text-2xl
-                font-sans font-semibold italic
-              >
-                {{ headerTitle }}
-              </h3>
+              <Tooltip>
+                <h3
+                  text-gray-900 dark:text-white
+                  text-2xl
+                  font-sans font-semibold italic
+                >
+                  {{ headerTitle }}
+                </h3>
+
+                <template #popper>
+                  <div
+                    flex flex-col
+                    justify-start items-start
+                  >
+                    <div>
+                      TeamID: {{ team.id }}
+                    </div>
+                  </div>
+                </template>
+              </Tooltip>
             </div>
 
             <ModalMenu

package/src/components/board/Utility.vue

@@ -15,6 +15,10 @@ const resolverUrl = computed(() => {
 function goBalloon() {
   router.push(`/balloon/?data-source=${route.path}`);
 }
+
+function goCountdown() {
+  router.push(`/countdown/?data-source=${route.path}`);
+}
 </script>
 
 <template>
@@ -39,6 +43,19 @@ function goBalloon() {
       {{ t('type_menu.balloon') }}
     </button>
 
+    <button
+      btn
+      title="Countdown"
+      @click="goCountdown"
+    >
+      {{ t('type_menu.countdown') }}
+    </button>
+  </div>
+
+  <div
+    w-full
+    flex mt-4 gap-4
+  >
     <button
       btn
       title="Submissions"

package/src/components/flowbite/Tooltip.vue

@@ -42,7 +42,7 @@ onMounted(() => {
       ref="tooltipTargetEl"
       role="tooltip"
       class="tooltip inline-block absolute invisible px-3 py-2 transition-opacity duration-300 shadow-sm opacity-0"
-      z-9999
+      z-99999
       rounded
       text-base text-white font-medium
       bg-gray-900 dark:bg-gray-700

package/src/components.d.ts

@@ -15,8 +15,10 @@ declare module 'vue' {
     BottomStatistics: typeof import('./components/board/BottomStatistics.vue')['default']
     ContestIndexUI: typeof import('./components/ContestIndexUI.vue')['default']
     ContestStateBadge: typeof import('./components/board/ContestStateBadge.vue')['default']
+    Countdown: typeof import('./components/Countdown.vue')['default']
     CustomBalloon: typeof import('./components/CustomBalloon.vue')['default']
     CustomBoard: typeof import('./components/CustomBoard.vue')['default']
+    CustomCountdown: typeof import('./components/CustomCountdown.vue')['default']
     DataSourceInput: typeof import('./components/DataSourceInput.vue')['default']
     Export: typeof import('./components/board/Export.vue')['default']
     Footer: typeof import('./components/Footer.vue')['default']

package/src/composables/constant.ts

@@ -1,3 +1,4 @@
 export const TITLE_SUFFIX = "Board - XCPCIO";
 export const BALLOON_TITLE_SUFFIX = "Balloon - XCPCIO";
 export const RESOLVER_TITLE_SUFFIX = "Resolver - XCPCIO";
+export const COUNTDOWN_TITLE_SUFFIX = "Countdown - XCPCIO";

package/src/pages/countdown/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CustomCountdown />
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: headless
+</route>

package/src/pages/index.vue

@@ -79,15 +79,22 @@ watch(searchText, () => {
   >
     <div>
       <div
-        v-if="isFetching"
+        v-if="isFetching || error"
+        mt-4 mb-4
         class="sm:w-[1000px] lg:w-screen"
-        flex justify-center
+        flex justify-center items-center
       >
-        {{ t("common.loading") }}...
-      </div>
+        <div
+          v-if="isFetching"
+        >
+          {{ t("common.loading") }}...
+        </div>
 
-      <div v-if="error">
-        {{ error }}
+        <div
+          v-if="error"
+        >
+          {{ error }}
+        </div>
       </div>
 
       <div