@xcpcio/board-app 0.6.4 → 0.13.0

package/src/components/board/Standings.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { Rank } from "@xcpcio/core";
+
+const props = defineProps<{
+  rank: Rank,
+}>();
+
+const { t } = useI18n();
+
+const rank = computed(() => props.rank);
+const teams = computed(() => props.rank.teams);
+
+const filterTeams = computed(() => {
+  const res = props.rank.teams.filter((t) => {
+    if (props.rank.organizations) {
+      if (props.rank.options.filterOrganizationMap.has(t.organization)) {
+        return true;
+      }
+    }
+
+    if (props.rank.options.filterTeamMap.has(t.id)) {
+      return true;
+    }
+
+    return false;
+  });
+
+  return res;
+});
+
+const maxOrgLength = computed(() => {
+  let res = 0;
+  rank.value.teams.forEach((t) => {
+    res = Math.max(res, t.organization.length);
+  });
+
+  return res;
+});
+
+const maxTeamLength = computed(() => {
+  let res = 0;
+  rank.value.teams.forEach((t) => {
+    res = Math.max(res, t.name.length);
+  });
+
+  return res;
+});
+</script>
+
+<template>
+  <div>
+    <div>
+      <table
+        class="standings"
+        font-mono dark:text-gray-700
+      >
+        <thead
+          class="sticky top-0 z-99"
+        >
+          <tr>
+            <th
+              class="title"
+              style="width: 3rem;"
+            >
+              {{ t("standings.place") }}
+            </th>
+            <th
+              v-if="rank.contest.badge"
+              class="title"
+              style="width: 2rem;"
+            >
+              {{ rank.contest.badge }}
+            </th>
+            <th
+              v-if="rank.contest.organization"
+              class="title"
+              :style="{ width: `${Math.min(32, Math.ceil(maxOrgLength * 1.1))}rem` }"
+            >
+              {{ rank.contest.organization }}
+            </th>
+            <th
+              class="title"
+              :style="{ width: `${Math.min(32, Math.ceil(maxTeamLength * 1))}rem` }"
+            >
+              {{ t("standings.team") }}
+            </th>
+            <th
+              class="title"
+              style="width: 3rem;"
+            >
+              {{ t("standings.solved") }}
+            </th>
+            <th
+              class="title"
+              style="width: 4rem;"
+            >
+              {{ t("standings.penalty") }}
+            </th>
+            <th
+              v-for="p in rank.contest.problems"
+              :key="p.id"
+              class="success"
+              text-center
+              style="width: 3rem;"
+              :style="{
+                'background-color': p.balloonColor?.background_color,
+                'color': p.balloonColor?.color,
+              }"
+            >
+              {{ p.label }}
+              <br>
+              <s>{{ p.statistics.acceptedNum }}</s>
+            </th>
+            <th class="title" style="width: 2.5rem;">
+              {{ t("standings.dict") }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <template
+            v-for="(team, ix) in filterTeams"
+            :key="`filter-${team.id}`"
+          >
+            <TeamUI
+              :ix="ix"
+              :rank="rank"
+              :team="team"
+              :is-filter="true"
+            />
+          </template>
+
+          <template
+            v-for="(team, ix) in teams"
+            :key="team.id"
+          >
+            <TeamUI
+              :ix="ix"
+              :rank="rank"
+              :team="team"
+            />
+          </template>
+
+          <BottomStatistics
+            :rank="rank"
+          />
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "./Standings.less";
+</style>

package/src/components/board/StandingsAnnotate.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex items-center justify-center dark:text-black">
+    <table>
+      <tbody>
+        <tr>
+          <td class="gold">
+            Gold
+          </td>
+          <td class="silver">
+            Silver
+          </td>
+          <td class="bronze">
+            Bronze
+          </td>
+          <td class="honorable">
+            Honorable
+          </td>
+          <td class="first-solve">
+            First to solve problem
+          </td>
+          <td class="correct">
+            Solved problem
+          </td>
+          <td class="incorrect">
+            Attempted problem
+          </td>
+          <td class="pending">
+            Pending judgement
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "./Standings.less";
+</style>

package/src/components/board/Statistics.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Chart } from "highcharts-vue";
+
+import type { Rank } from "@xcpcio/core";
+
+const props = defineProps<{
+  rank: Rank,
+}>();
+
+const { t } = useI18n();
+
+const rank = computed(() => props.rank);
+
+function getHeadData() {
+  const l = [];
+
+  l.push({
+    title: "standings.statistics.head_data.problems",
+    data: rank.value.contest.problems.length,
+  });
+
+  l.push({
+    title: "standings.statistics.head_data.teams",
+    data: rank.value.teams.length,
+  });
+
+  l.push({
+    title: "standings.statistics.head_data.submissions",
+    data: rank.value.getSubmissions().length,
+  });
+
+  return l;
+}
+</script>
+
+<template>
+  <div
+    class="w-88vw flex flex-col md:w-92vw"
+  >
+    <section>
+      <div class="mx-auto max-w-screen-xl px-4 py-4 lg:px-6 lg:py-6">
+        <div class="lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 space-y-8 lg:space-y-0">
+          <div v-for="h in getHeadData()" :key="h.title">
+            <div class="mx-auto max-w-[16rem] flex flex-col border border-gray-100 rounded-lg bg-white p-6 text-center text-gray-900 shadow dark:border-gray-600 dark:bg-gray-800 xl:p-8 dark:text-white">
+              <h3 class="mb-4 text-2xl font-semibold">
+                {{ t(h.title) }}
+              </h3>
+              <div class="my-8 flex items-baseline justify-center">
+                <span class="mr-2 text-5xl font-extrabold">{{ h.data }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="mt-8 flex flex-col gap-8">
+      <div>
+        <Chart
+          :options="getSubmitChart(rank)"
+        />
+      </div>
+
+      <div>
+        <Chart
+          :options="getProblemChart(rank)"
+        />
+      </div>
+
+      <div>
+        <Chart
+          :options="getTeamChart(rank)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/board/SubmissionsTable.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import type { Rank, Submissions } from "@xcpcio/core";
+import { Submission } from "@xcpcio/core";
+import { SubmissionStatusToString } from "@xcpcio/types";
+
+import { Pagination } from "~/composables/pagination";
+
+const props = defineProps<{
+  rank: Rank,
+  submissions: Submissions,
+  pageSize?: number,
+  removeBorder?: boolean,
+}>();
+
+const rank = computed(() => props.rank);
+const submissions = computed(() => {
+  const s = props.submissions;
+  return s.sort(Submission.compare).reverse();
+});
+
+const p = ref(new Pagination());
+
+p.value.currentPage = 0;
+p.value.pageSize = props.pageSize ?? 16;
+p.value.totalSize = submissions.value.length;
+
+watch(submissions, () => {
+  p.value.totalSize = submissions.value.length;
+
+  if (p.value.currentPage >= p.value.totalPage) {
+    p.value.currentPage = p.value.totalPage - 1;
+  }
+});
+
+const currentSubmissions = computed(() => {
+  return submissions.value.slice(p.value.currentLeft, p.value.currentRight);
+});
+
+const notShowing = ref(false);
+
+function getSubmitTime(
+  timeDiff: number,
+): string {
+  const h = Math.floor(timeDiff / 3600);
+  const m = Math.floor(timeDiff % 3600 / 60);
+  const s = timeDiff % 60;
+
+  const f = (x: number) => x.toString().padStart(2, "0");
+
+  return `${f(h)}:${f(m)}:${f(s)}`;
+}
+
+function getProblemLabelColorClass(s: Submission) {
+  const defaultClass = "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300";
+
+  const pId = s.problemId;
+  const p = rank.value.contest.problemsMap.get(pId);
+
+  if (p === null || p === undefined || !p.balloonColor) {
+    return defaultClass;
+  }
+}
+
+function getProblemLabelColorStyle(s: Submission) {
+  const pId = s.problemId;
+  const p = rank.value.contest.problemsMap.get(pId);
+
+  if (p === null || p === undefined || !p.balloonColor) {
+    return undefined;
+  }
+
+  const b = p.balloonColor;
+
+  return {
+    backgroundColor: b.background_color as string,
+    color: b.color as string,
+  };
+}
+</script>
+
+<template>
+  <section>
+    <div
+      class="mx-auto w-full"
+      px-4
+    >
+      <div
+        class="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"
+          flex flex-col
+          px-4 py-3
+        >
+          <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"
+          >
+            <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"
+            >
+              <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"
+            >
+              <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"
+            >
+              <div
+                i-pajamas-export
+                class="mr-2 h-4 w-4"
+              />
+              Export
+            </button>
+          </div>
+        </div>
+
+        <div
+          class="overflow-x-auto"
+        >
+          <table
+            class="w-full text-left text-sm text-gray-500 dark:text-gray-400"
+            font-medium font-mono
+          >
+            <thead class="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+              <tr>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  Problem
+                </th>
+                <th
+                  v-if="rank.contest.organization"
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  {{ rank.contest.organization }}
+                </th>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  Team
+                </th>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  Status
+                </th>
+                <th
+                  v-if="notShowing"
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  Time
+                </th>
+                <th
+                  v-if="notShowing"
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  Memory
+                </th>
+                <th
+                  v-if="notShowing"
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  Answer
+                </th>
+                <th
+                  scope="col"
+                  class="px-4 py-3"
+                >
+                  Submit Time
+                </th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <template
+                v-for="s in currentSubmissions"
+                :key="s.id"
+              >
+                <tr
+                  class="border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
+                >
+                  <td
+                    px-4 py-2
+                  >
+                    <span
+                      class="rounded px-2 py-0.5 text-sm"
+                      :class="[getProblemLabelColorClass(s)]"
+                      :style="getProblemLabelColorStyle(s)"
+                    >
+                      {{ rank.contest.problemsMap.get(s.problemId)?.label }}
+                    </span>
+                  </td>
+
+                  <td
+                    v-if="rank.contest.organization"
+                    class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+                  >
+                    {{ rank.teamsMap.get(s.teamId)?.organization }}
+                  </td>
+
+                  <td class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white">
+                    {{ rank.teamsMap.get(s.teamId)?.name }}
+                  </td>
+
+                  <td
+                    scope="row"
+                    :class="[s.status.toString()]"
+                    whitespace-nowrap px-4 py-2
+                    flex items-center
+                    font-bold
+                  >
+                    {{ SubmissionStatusToString[s.status] }}
+                  </td>
+
+                  <td
+                    v-if="notShowing"
+                    class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+                  >
+                    <div class="flex items-center">
+                      <div class="mr-2 inline-block h-4 w-4 rounded-full bg-red-700" />
+                      95
+                    </div>
+                  </td>
+
+                  <td
+                    v-if="notShowing"
+                    class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+                  >
+                    0.47
+                  </td>
+
+                  <td
+                    v-if="notShowing"
+                    class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white"
+                  >
+                    <div class="flex items-center">
+                      <span class="ml-1 text-gray-500 dark:text-gray-400">5.0</span>
+                    </div>
+                  </td>
+
+                  <td class="whitespace-nowrap px-4 py-2 text-gray-900 dark:text-white">
+                    <div class="flex items-center">
+                      {{ getSubmitTime(s.timestamp) }}
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+
+        <TablePagination
+          v-model:pagination="p"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="less">
+@import "../../styles/submission-status.css";
+</style>

package/src/components/board/SubmissionsTableModal.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { Rank, Team, TeamProblemStatistics } from "@xcpcio/core";
+
+const props = defineProps<{
+  isHidden: boolean,
+
+  rank: Rank,
+  team: Team,
+  p: TeamProblemStatistics,
+}>();
+
+const emit = defineEmits(["update:isHidden"]);
+
+const isHidden = computed({
+  get() {
+    return props.isHidden;
+  },
+  set(value) {
+    emit("update:isHidden", value);
+  },
+});
+
+const rank = computed(() => props.rank);
+const team = computed(() => props.team);
+const p = computed(() => props.p);
+
+const headerTitle = computed(() => {
+  return `${team.value.name} - ${p.value.problem.label}`;
+});
+</script>
+
+<template>
+  <Modal
+    v-model:isHidden="isHidden"
+    :title="headerTitle"
+  >
+    <div
+      w-full
+      font-bold font-mono
+      flex items-center justify-center
+      class="mt-[-12px]"
+    >
+      <SubmissionsTable
+        w-full
+        :rank="rank"
+        :submissions="p.submissions"
+        :page-size="8"
+        :remove-border="true"
+      />
+    </div>
+  </Modal>
+</template>