@xcpcio/board-app 0.6.3 → 0.13.0

package/src/components/table/TablePagination.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { Pagination } from "~/composables/pagination";
+
+const props = defineProps<{
+  pagination: Pagination,
+}>();
+const emit = defineEmits(["update:pagination"]);
+
+const p = computed({
+  get() {
+    return props.pagination;
+  },
+  set(value) {
+    emit("update:pagination", value);
+  },
+});
+
+const class_pagination_ix = "flex items-center justify-center px-3 py-2 text-sm text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white leading-tight";
+</script>
+
+<template>
+  <nav class="flex flex-col items-start justify-between p-4 md:flex-row md:items-center space-y-3 md:space-y-0" aria-label="Table navigation">
+    <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
+      Showing
+      <span class="font-semibold text-gray-900 dark:text-white">{{ p.currentLeft }}-{{ Math.max(0, p.currentRight - 1) }}</span>
+      of
+      <span class="font-semibold text-gray-900 dark:text-white">{{ p.totalSize }}</span>
+    </span>
+
+    <ul class="inline-flex items-stretch font-mono -space-x-px">
+      <li>
+        <a
+          class="ml-0 h-full flex items-center justify-center border border-gray-300 rounded-l-lg bg-white px-3 py-1.5 text-gray-500 dark:border-gray-700 dark:bg-gray-800 hover:bg-gray-100 dark:text-gray-400 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white"
+          hover="cursor-pointer"
+          @click="p.onPageChange({ diff: -1 })"
+        >
+          <span class="sr-only">Previous</span>
+          <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+          </svg>
+        </a>
+      </li>
+
+      <li v-if="p.currentPage !== 0">
+        <a
+          :class="class_pagination_ix"
+          hover="cursor-pointer"
+          @click=" p.onPageChange({ to: 0 })"
+        >
+          1
+        </a>
+      </li>
+
+      <li v-for="pn in p.leftDecrPage" :key="pn">
+        <a
+          :class="class_pagination_ix"
+          hover="cursor-pointer"
+          @click="p.onPageChange({ to: pn })"
+        >
+          {{ pn + 1 }}
+        </a>
+      </li>
+
+      <li>
+        <a
+          aria-current="page"
+          class="z-10 flex items-center justify-center border border-primary-300 bg-primary-50 px-3 py-2 text-sm leading-tight text-primary-600 dark:border-gray-700 dark:bg-gray-700 hover:bg-primary-100 dark:text-white hover:text-primary-700"
+          hover="cursor-pointer"
+        >
+          {{ p.currentPage + 1 }}
+        </a>
+      </li>
+
+      <li v-for="pn in p.rightIncrPage" :key="pn">
+        <a
+          hover="cursor-pointer"
+          :class="class_pagination_ix"
+          @click="p.onPageChange({ to: pn })"
+        >
+          {{ pn + 1 }}
+        </a>
+      </li>
+
+      <li v-if="p.currentPage !== p.totalPage - 1 && p.totalPage > 1">
+        <a
+          hover="cursor-pointer"
+          :class="class_pagination_ix"
+          @click="p.onPageChange({ to: p.totalPage - 1 })"
+        >
+          {{ p.totalPage }}
+        </a>
+      </li>
+
+      <li>
+        <a
+          class="h-full flex items-center justify-center border border-gray-300 rounded-r-lg bg-white px-3 py-1.5 leading-tight text-gray-500 dark:border-gray-700 dark:bg-gray-800 hover:bg-gray-100 dark:text-gray-400 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white"
+          hover="cursor-pointer"
+          @click="p.onPageChange({ diff: 1 })"
+        >
+          <span class="sr-only">Next</span>
+          <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>

package/src/components.d.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Balloon: typeof import('./components/board/Balloon.vue')['default']
+    Board: typeof import('./components/board/Board.vue')['default']
+    BottomStatistics: typeof import('./components/board/BottomStatistics.vue')['default']
+    ContestIndex: typeof import('./components/ContestIndex.vue')['default']
+    ContestStateBadge: typeof import('./components/board/ContestStateBadge.vue')['default']
+    Export: typeof import('./components/board/Export.vue')['default']
+    Footer: typeof import('./components/Footer.vue')['default']
+    GirlIcon: typeof import('./components/icon/GirlIcon.vue')['default']
+    GoBack: typeof import('./components/GoBack.vue')['default']
+    Modal: typeof import('./components/board/Modal.vue')['default']
+    ModalMenu: typeof import('./components/board/ModalMenu.vue')['default']
+    NavBar: typeof import('./components/NavBar.vue')['default']
+    OptionsModal: typeof import('./components/board/OptionsModal.vue')['default']
+    Progress: typeof import('./components/board/Progress.vue')['default']
+    RightArrowIcon: typeof import('./components/icon/RightArrowIcon.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SearchInput: typeof import('./components/SearchInput.vue')['default']
+    SecondLevelMenu: typeof import('./components/board/SecondLevelMenu.vue')['default']
+    Standings: typeof import('./components/board/Standings.vue')['default']
+    StandingsAnnotate: typeof import('./components/board/StandingsAnnotate.vue')['default']
+    StarIcon: typeof import('./components/icon/StarIcon.vue')['default']
+    Statistics: typeof import('./components/board/Statistics.vue')['default']
+    SubmissionsTable: typeof import('./components/board/SubmissionsTable.vue')['default']
+    SubmissionsTableModal: typeof import('./components/board/SubmissionsTableModal.vue')['default']
+    TablePagination: typeof import('./components/table/TablePagination.vue')['default']
+    TeamAwards: typeof import('./components/board/TeamAwards.vue')['default']
+    TeamInfoModal: typeof import('./components/board/TeamInfoModal.vue')['default']
+    TeamProblemBlock: typeof import('./components/board/TeamProblemBlock.vue')['default']
+    TeamUI: typeof import('./components/board/TeamUI.vue')['default']
+    TheCounter: typeof import('./components/TheCounter.vue')['default']
+    TheInput: typeof import('./components/TheInput.vue')['default']
+    Utility: typeof import('./components/board/Utility.vue')['default']
+  }
+}

package/src/composables/dark.ts

@@ -0,0 +1,4 @@
+// these APIs are auto-imported from @vueuse/core
+export const isDark = useDark();
+export const toggleDark = useToggle(isDark);
+export const preferredDark = usePreferredDark();

package/src/composables/pagination.ts

@@ -0,0 +1,81 @@
+export class Pagination {
+  totalSize: number;
+
+  currentPage: number;
+  pageSize: number;
+
+  constructor() {
+    this.totalSize = 0;
+
+    this.currentPage = 0;
+    this.pageSize = 16;
+  }
+
+  get totalPage() {
+    return Math.floor((this.totalSize + this.pageSize - 1) / this.pageSize);
+  }
+
+  get currentLeft() {
+    return this.currentPage * this.pageSize;
+  }
+
+  get currentRight() {
+    return Math.min(this.totalSize, (this.currentPage + 1) * this.pageSize);
+  }
+
+  get leftDecrPage() {
+    const res = [];
+
+    let step = 1;
+    let cur = this.currentPage - step;
+
+    while (cur > 0) {
+      res.push(cur);
+
+      step = step << 1;
+      cur -= step;
+    }
+
+    return res.reverse();
+  }
+
+  get rightIncrPage() {
+    const res = [];
+
+    let step = 1;
+    let cur = this.currentPage + step;
+
+    while (cur + 1 < this.totalPage) {
+      res.push(cur);
+
+      step = step << 1;
+      cur += step;
+    }
+
+    return res;
+  }
+
+  onPageChange(options: {
+    to?: number,
+    diff?: number,
+  }) {
+    const totalPage = this.totalPage;
+
+    let to = this.currentPage;
+
+    if (options?.to !== undefined) {
+      to = options.to;
+    }
+
+    if (options?.diff !== undefined) {
+      const diff = options.diff;
+      to = to + diff;
+    }
+
+    if (to < 0 || to >= totalPage) {
+      return;
+    }
+
+    this.currentPage = to;
+  }
+}

package/src/composables/statistics.ts

@@ -0,0 +1,280 @@
+import { type Rank, type Team, getTimeDiff } from "@xcpcio/core";
+
+function getChartObj(title: string, xText: string, yText: string, cat: any, series: any, colors: any) {
+  return {
+    colors,
+    chart:
+      window.innerWidth < 992
+        ? {
+            type: "bar",
+            backgroundColor: "transparent",
+          }
+        : {
+            type: "column",
+            backgroundColor: "transparent",
+            height: "420px",
+          },
+    title: {
+      text: title,
+    },
+    xAxis: {
+      categories: cat,
+      labels: {
+        style: {
+          fontSize: "16px",
+        },
+      },
+      title: {
+        text: xText,
+        style: {
+          fontSize: "16px",
+        },
+      },
+    },
+    yAxis: {
+      min: 0,
+      title: {
+        text: yText,
+        style: {
+          fontSize: "16px",
+          height: "320px",
+        },
+      },
+      stackLabels: {
+        enabled: true,
+        style: {
+          fontSize: "16px",
+        },
+      },
+    },
+    tooltip: {
+      enabled: true,
+      headerFormat: "",
+      pointFormat: "{series.name}：{point.y}",
+    },
+    plotOptions: {
+      bar: {
+        stacking: "normal",
+      },
+      column: {
+        stacking: "normal",
+      },
+    },
+    credits: {
+      enabled: false,
+    },
+    series,
+  };
+}
+
+export function getProblemChart(rank: Rank) {
+  const problemList: any = [];
+
+  rank.contest.problems.forEach((p, ix) => {
+    problemList.push({
+      problem_id: p.label,
+      index: ix,
+      solved: p.statistics.acceptedNum,
+    });
+  });
+
+  problemList.sort((a: any, b: any) => {
+    if (a.solved > b.solved) {
+      return -1;
+    }
+
+    if (a.solved < b.solved) {
+      return 1;
+    }
+
+    if (a.index < b.index) {
+      return -1;
+    }
+
+    if (a.index > b.index) {
+      return 1;
+    }
+
+    return 0;
+  });
+
+  const { cat, series, colors } = (() => {
+    const cat: any = [];
+    const data: any = [];
+
+    problemList.forEach((problem: any) => {
+      cat.push(problem.problem_id);
+      data.push(problem.solved);
+    });
+
+    const series = [
+      {
+        name: "队伍数",
+        showInLegend: false,
+        data,
+      },
+    ];
+
+    const colors = ["rgb(124, 181, 236)"];
+    return { cat, series, colors };
+  })();
+
+  return getChartObj("题目通过数统计", "题目编号", "通过数", cat, series, colors);
+}
+
+export function getTeamChart(rank: Rank) {
+  const num = rank.rankStatistics.teamSolvedNum.map((n, ix) => {
+    return {
+      index: ix,
+      cnt: n,
+    };
+  });
+
+  const { cat, series, colors } = (() => {
+    const cat: any = [];
+    const data: any = [];
+
+    num.forEach((num: any) => {
+      cat.push(num.index);
+      data.push(num.cnt);
+    });
+
+    const series = [
+      {
+        name: "队伍数",
+        showInLegend: false,
+        data,
+      },
+    ];
+
+    const colors = ["rgb(124, 181, 236)"];
+    return { cat, series, colors };
+  })();
+
+  return getChartObj("队伍过题数统计", "过题数", "队伍数", cat, series, colors);
+}
+
+export function getSubmitChart(rank: Rank) {
+  const { cat, series, colors } = (() => {
+    const cat: any = [];
+    const Accepted: any = [];
+    const Rejected: any = [];
+    const Pending: any = [];
+
+    rank.contest.problems.forEach((p) => {
+      Accepted.push(p.statistics.acceptedNum);
+      Rejected.push(p.statistics.rejectedNum);
+      Pending.push(p.statistics.pendingNum);
+      cat.push(p.label);
+    });
+
+    const series = [
+      {
+        name: "Accepted",
+        showInLegend: false,
+        data: Accepted,
+      },
+      {
+        name: "Rejected",
+        showInLegend: false,
+        data: Rejected,
+      },
+      {
+        name: "Pending",
+        showInLegend: false,
+        data: Pending,
+      },
+    ];
+
+    const colors = ["#E1FFB5", "#FFD0D0", "#C8D6FA"];
+    return { cat, series, colors };
+  })();
+
+  return getChartObj("提交分类统计", "题目编号", "提交数", cat, series, colors);
+}
+
+export function getTeamPlaceChart(_rank: Rank, team: Team) {
+  const data = team.placeChartPoints.map((p) => {
+    return {
+      x: p.timePoint,
+      y: p.rank,
+      showX: getTimeDiff(p.timePoint),
+      lastSolved: p.lastSolvedProblem?.label ? `Last Solved Problem ${p.lastSolvedProblem?.label}` : "",
+    };
+  });
+
+  const options: Highcharts.Options = {
+    chart: {
+      type: "spline",
+    },
+    title: {
+      text: "排名变化趋势图",
+    },
+    series: [
+      {
+        showInLegend: false,
+        allowPointSelect: false,
+        name: "rank",
+        type: "spline",
+        data,
+        marker: {
+          symbol: "circle",
+          radius: 4,
+          lineWidth: 2,
+          fillColor: "yellow",
+          lineColor: "yellow",
+        },
+      },
+    ],
+    xAxis: [
+      {
+        allowDecimals: false,
+        title: {
+          text: "Time(min)",
+        },
+        crosshair: true,
+      },
+    ],
+    yAxis: [
+      {
+        allowDecimals: false,
+        title: {
+          text: "Place",
+        },
+        reversed: true,
+        gridLineWidth: 1,
+      },
+    ],
+    plotOptions: {
+      line: {
+        color: "#efbc47",
+        dataLabels: {
+          enabled: false,
+        },
+        enableMouseTracking: true,
+        marker: {
+          enabled: true,
+          fillColor: "#fff566",
+        },
+      },
+    },
+    tooltip: {
+      enabled: true,
+      headerFormat: "",
+      pointFormat: "Time: {point.showX} <br/> Place: {point.y} <br/> {point.lastSolved}",
+    },
+    credits: {
+      enabled: false,
+    },
+    exporting: {
+      enabled: true,
+    },
+    navigation: {
+      menuItemStyle: {
+        fontSize: "10px",
+      },
+    },
+  };
+
+  return options;
+}

package/src/composables/useLocalStorage.ts

@@ -0,0 +1,29 @@
+import type { SelectOptionItem } from "@xcpcio/core";
+
+export function getLocalStorageKeyForFilterOrganizations() {
+  const route = useRoute();
+  const key = `filter-organizations-${route.path}`;
+
+  return key;
+}
+
+export function getLocalStorageKeyForFilterTeams() {
+  const route = useRoute();
+  const key = `filter-teams-${route.path}`;
+
+  return key;
+}
+
+export function useLocalStorageForFilterOrganizations() {
+  const route = useRoute();
+  const key = `filter-organizations-${route.path}`;
+
+  return useStorage(key, [] as Array<SelectOptionItem>);
+}
+
+export function useLocalStorageForFilterTeams() {
+  const route = useRoute();
+  const key = `filter-teams-${route.path}`;
+
+  return useStorage(key, [] as Array<SelectOptionItem>);
+}

package/src/composables/useQueryBoardData.ts

@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/vue-query";
+import type { Contest, Submissions, Teams } from "@xcpcio/types";
+
+const RETRY = 3;
+const REFETCH_INTERVAL = 30 * 1000;
+
+export interface BoardData {
+  contest: Contest;
+  teams: Teams;
+  submissions: Submissions;
+}
+
+async function fetcher(target: string, timestamp?: number): Promise<BoardData> {
+  const endpoint = target.startsWith("/") ? target.slice(1) : target;
+  const prefix = `${window.DATA_HOST}${endpoint}`;
+
+  const contestResp = await fetch(`${prefix}/config.json?t=${timestamp ?? 0}`);
+  const teamsResp = await fetch(`${prefix}/team.json?t=${timestamp ?? 0}`);
+  const submissionsResp = await fetch(`${prefix}/run.json?t=${timestamp ?? 0}`);
+
+  const p = Promise.all([
+    contestResp.json(),
+    teamsResp.json(),
+    submissionsResp.json()]).then((res) => {
+    return {
+      contest: res[0],
+      teams: res[1],
+      submissions: res[2],
+    };
+  });
+
+  return p;
+}
+
+export function useQueryBoardData(target: string, timestamp?: any) {
+  return useQuery({
+    queryKey: [target, timestamp.value.getTime()],
+    queryFn: () => fetcher(target, timestamp.value.getTime()),
+    retry: RETRY,
+    staleTime: REFETCH_INTERVAL,
+    refetchInterval: REFETCH_INTERVAL,
+  });
+}

package/src/composables/utils.ts

@@ -0,0 +1,11 @@
+export function downloadSingleFile(content: string, filename: string) {
+  const blob = new Blob([content], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+
+  URL.revokeObjectURL(url);
+}

package/src/layouts/board-layout.vue

@@ -0,0 +1,14 @@
+<template>
+  <NavBar
+    width="sm:w-[1280px] xl:w-screen"
+  />
+  <main
+    py-2
+    text-gray-700 dark:text-gray-200
+  >
+    <RouterView />
+    <Footer
+      class="sm:w-[1280px] xl:w-screen"
+    />
+  </main>
+</template>

package/src/layouts/default.vue

@@ -0,0 +1,10 @@
+<template>
+  <NavBar />
+  <main
+    py-10
+    text-gray-700 dark:text-gray-200
+  >
+    <RouterView />
+    <Footer />
+  </main>
+</template>

package/src/layouts/home.vue

@@ -0,0 +1,12 @@
+<template>
+  <main
+    px-4 py-10
+    text="center gray-700 dark:gray-200"
+  >
+    <RouterView />
+    <Footer />
+    <div mx-auto mt-5 text-center text-sm opacity-50>
+      [Home Layout]
+    </div>
+  </main>
+</template>

package/src/layouts/index-layout.vue

@@ -0,0 +1,15 @@
+<template>
+  <NavBar
+    width="sm:w-[1024px] lg:w-screen"
+  />
+  <main
+    class="lg:mt-[-52px]"
+    py-2
+    text-gray-700 dark:text-gray-200
+  >
+    <RouterView />
+    <Footer
+      class="sm:w-[1024px] lg:w-screen"
+    />
+  </main>
+</template>

package/src/main.ts

@@ -0,0 +1,36 @@
+import { ViteSSG } from "vite-ssg";
+import { setupLayouts } from "virtual:generated-layouts";
+
+import FloatingVue from "floating-vue";
+import { VueQueryPlugin } from "@tanstack/vue-query";
+
+// import Previewer from 'virtual:vue-component-preview'
+import App from "./App.vue";
+import type { UserModule } from "./types";
+import generatedRoutes from "~pages";
+
+import "floating-vue/dist/style.css";
+import "vue-search-select/dist/VueSearchSelect.css";
+
+import "@unocss/reset/tailwind.css";
+import "@unocss/reset/tailwind-compat.css";
+import "uno.css";
+
+import "./styles/main.css";
+
+const routes = setupLayouts(generatedRoutes);
+
+// https://github.com/antfu/vite-ssg
+export const createApp = ViteSSG(
+  App,
+  { routes, base: import.meta.env.BASE_URL },
+  (ctx) => {
+    // install all modules under `modules/`
+    Object.values(import.meta.glob<{ install: UserModule }>("./modules/*.ts", { eager: true }))
+      .forEach(i => i.install?.(ctx));
+
+    // ctx.app.use(Previewer)
+    ctx.app.use(FloatingVue);
+    ctx.app.use(VueQueryPlugin);
+  },
+);