add rank.

This commit is contained in:
2023-02-10 10:19:43 +08:00
parent 5f39ec4fd2
commit c80352b245
22 changed files with 1197 additions and 1170 deletions

View File

@@ -1,12 +1,25 @@
<script setup lang="ts">
import { ContestRank } from "~/utils/types"
import { ContestRank, ProblemFiltered } from "~/utils/types"
defineProps<{ rank: ContestRank }>()
interface Props {
rank: ContestRank
}
const props = defineProps<Props>()
const router = useRouter()
function goto() {
router.push({
name: "contest submissions",
query: { username: props.rank.user.username },
})
}
</script>
<template>
{{ rank.accepted_number }} /
<n-button text type="primary">{{ rank.submission_number }}</n-button>
<n-button text type="primary" @click="goto">
{{ rank.submission_number }}
</n-button>
</template>
<style scoped></style>

View File

@@ -1,22 +1,22 @@
<script setup lang="ts">
import { Contest } from "~/utils/types"
import { ContestType } from "~/utils/constants"
defineProps<{ contest: Contest }>()
</script>
<template>
<n-space>
<span>{{ contest.title }}</span>
<n-icon
class="lockIcon"
v-if="contest.contest_type === ContestType.private"
>
<i-ep-lock />
</n-icon>
</n-space>
</template>
<style scoped>
.lockIcon {
transform: translateY(2px);
}
</style>
<script setup lang="ts">
import { Contest } from "~/utils/types"
import { ContestType } from "~/utils/constants"
defineProps<{ contest: Contest }>()
</script>
<template>
<n-space>
<span>{{ contest.title }}</span>
<n-icon
class="lockIcon"
v-if="contest.contest_type === ContestType.private"
>
<i-ep-lock />
</n-icon>
</n-space>
</template>
<style scoped>
.lockIcon {
transform: translateY(2px);
}
</style>

View File

@@ -1,20 +1,20 @@
<script setup lang="ts">
import { Contest } from "~/utils/types"
import { ContestType } from "~/utils/constants"
interface Props {
contest: Contest
}
const props = defineProps<Props>()
const isPrivate = computed(
() => props.contest.contest_type === ContestType.private
)
</script>
<template>
<n-tag :type="isPrivate ? 'error' : 'default'">
{{ isPrivate ? "需要密码" : "公开" }}
</n-tag>
</template>
<script setup lang="ts">
import { Contest } from "~/utils/types"
import { ContestType } from "~/utils/constants"
interface Props {
contest: Contest
}
const props = defineProps<Props>()
const isPrivate = computed(
() => props.contest.contest_type === ContestType.private
)
</script>
<template>
<n-tag :type="isPrivate ? 'error' : 'default'">
{{ isPrivate ? "需要密码" : "公开" }}
</n-tag>
</template>

View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { CONTEST_STATUS, ContestType } from "utils/constants"
import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
import { useContestStore } from "../store/contest"
import { DropdownOption } from "naive-ui"

View File

@@ -1,5 +1,5 @@
<script setup lang="ts"></script>
<template></template>
<style scoped></style>
<script setup lang="ts"></script>
<template></template>
<style scoped></style>

View File

@@ -1,46 +1,46 @@
<script setup lang="ts">
import { DataTableColumn } from "naive-ui"
import { ProblemFiltered } from "utils/types"
import ProblemStatus from "~/oj/problem/components/ProblemStatus.vue"
import { useContestStore } from "~/oj/store/contest"
const props = defineProps<{ contestID: string }>()
const router = useRouter()
const contestStore = useContestStore()
const problemsColumns: DataTableColumn<ProblemFiltered>[] = [
{
title: "状态",
key: "status",
width: 60,
render: (row) => h(ProblemStatus, { status: row.status }),
},
{ title: "编号", key: "_id", width: 60 },
{ title: "题目", key: "title", minWidth: 200 },
{ title: "总提交数", key: "submission", width: 100 },
{ title: "通过率", key: "rate", width: 100 },
]
function rowProps(row: ProblemFiltered) {
return {
style: "cursor: pointer",
onClick() {
router.push(`/contest/${props.contestID}/problem/${row._id}`)
},
}
}
</script>
<template>
<n-data-table
striped
size="small"
class="problems"
:data="contestStore.problems"
:columns="problemsColumns"
:row-props="rowProps"
v-if="contestStore.problems?.length"
/>
</template>
<style scoped></style>
<script setup lang="ts">
import { DataTableColumn } from "naive-ui"
import { ProblemFiltered } from "utils/types"
import ProblemStatus from "~/oj/problem/components/ProblemStatus.vue"
import { useContestStore } from "~/oj/store/contest"
const props = defineProps<{ contestID: string }>()
const router = useRouter()
const contestStore = useContestStore()
const problemsColumns: DataTableColumn<ProblemFiltered>[] = [
{
title: "状态",
key: "status",
width: 60,
render: (row) => h(ProblemStatus, { status: row.status }),
},
{ title: "编号", key: "_id", width: 60 },
{ title: "题目", key: "title", minWidth: 200 },
{ title: "总提交数", key: "submission", width: 100 },
{ title: "通过率", key: "rate", width: 100 },
]
function rowProps(row: ProblemFiltered) {
return {
style: "cursor: pointer",
onClick() {
router.push(`/contest/${props.contestID}/problem/${row._id}`)
},
}
}
</script>
<template>
<n-data-table
striped
size="small"
class="problems"
:data="contestStore.problems"
:columns="problemsColumns"
:row-props="rowProps"
v-if="contestStore.problems?.length"
/>
</template>
<style scoped></style>

View File

@@ -1,171 +1,171 @@
<script setup lang="ts">
import { DataTableColumn, NButton } from "naive-ui"
import Pagination from "~/shared/Pagination.vue"
import AcAndSubmission from "../components/AcAndSubmission.vue"
import { getContestProblems, getContestRank } from "oj/api"
import { ContestRank, ProblemFiltered } from "~/utils/types"
import { secondsToDuration } from "utils/functions"
interface Props {
contestID: string
}
const props = defineProps<Props>()
const route = useRoute()
const router = useRouter()
const total = ref(0)
const data = ref<ContestRank[]>([])
const chart = ref<ContestRank[]>([])
const problems = ref<ProblemFiltered[]>([])
const query = reactive({
limit: 50,
page: 1,
})
const columns = ref<DataTableColumn<ContestRank>[]>([
{
title: "排名",
key: "id",
width: 60,
fixed: "left",
align: "center",
render: (_, index) => index + (query.page - 1) * query.limit + 1,
},
{
title: "用户",
key: "username",
width: 120,
fixed: "left",
align: "center",
render: (row) =>
h(NButton, { text: true, type: "info" }, () => row.user.username),
},
{
title: "正确数/总提交",
key: "submission",
width: 120,
align: "center",
render: (row) => h(AcAndSubmission, { rank: row }),
},
{
title: "总时间",
key: "total_time",
width: 120,
align: "center",
render: (row) => secondsToDuration(row.total_time),
},
])
async function listRanks() {
const res = await getContestRank(props.contestID, {
limit: query.limit,
offset: query.limit * (query.page - 1),
})
total.value = res.data.total
data.value = res.data.results
if (query.page === 1) {
chart.value = data.value
}
}
async function addColumns() {
try {
problems.value = await getContestProblems(props.contestID)
problems.value.map((problem, index) => {
columns.value.push({
align: "center",
title: () =>
h(
NButton,
{
text: true,
type: "primary",
onClick: () =>
router.push({
name: "contest problem",
params: {
contestID: route.params.contestID,
problemID: problem._id,
},
}),
},
() => `${index + 1}`
),
render: (row) => {
if (row.submission_info[problem.id]) {
const status = row.submission_info[problem.id]
let acTime
let errorNumber
if (status.is_ac) {
acTime = h("span", secondsToDuration(status.ac_time))
}
if (status.error_number) {
errorNumber = h(
"p",
{ style: "margin: 0" },
`(-${status.error_number})`
)
}
return h("div", [acTime, errorNumber])
}
},
cellProps: (row) => {
let backgroundColor = ""
let color = ""
if (row.submission_info[problem.id]) {
const status = row.submission_info[problem.id]
if (status.is_first_ac) {
backgroundColor = "#3c9"
color = "#3c763d"
} else if (status.is_ac) {
backgroundColor = "#dff0d8"
} else {
backgroundColor = "#f2dede"
color = "#a94442"
}
}
return { style: { backgroundColor, color } }
},
key: problem.id,
width: 150,
})
})
} catch (err) {
problems.value = []
}
}
watch(() => query.page, listRanks)
watch(
() => query.limit,
() => {
query.page = 1
listRanks()
}
)
onMounted(() => {
listRanks()
addColumns()
})
</script>
<template>
<n-data-table
striped
:single-line="false"
:scroll-x="1200"
size="small"
:columns="columns"
:data="data"
/>
<Pagination
:total="total"
v-model:page="query.page"
v-model:limit="query.limit"
/>
</template>
<style scoped></style>
<script setup lang="ts">
import { DataTableColumn, NButton } from "naive-ui"
import Pagination from "~/shared/Pagination.vue"
import AcAndSubmission from "../components/AcAndSubmission.vue"
import { getContestProblems, getContestRank } from "oj/api"
import { ContestRank, ProblemFiltered } from "~/utils/types"
import { secondsToDuration } from "utils/functions"
interface Props {
contestID: string
}
const props = defineProps<Props>()
const route = useRoute()
const router = useRouter()
const total = ref(0)
const data = ref<ContestRank[]>([])
const chart = ref<ContestRank[]>([])
const problems = ref<ProblemFiltered[]>([])
const query = reactive({
limit: 50,
page: 1,
})
const columns = ref<DataTableColumn<ContestRank>[]>([
{
title: "排名",
key: "id",
width: 60,
fixed: "left",
align: "center",
render: (_, index) => index + (query.page - 1) * query.limit + 1,
},
{
title: "用户",
key: "username",
width: 120,
fixed: "left",
align: "center",
render: (row) =>
h(NButton, { text: true, type: "info" }, () => row.user.username),
},
{
title: "正确数/总提交",
key: "submission",
width: 120,
align: "center",
render: (row) => h(AcAndSubmission, { rank: row }),
},
{
title: "总时间",
key: "total_time",
width: 120,
align: "center",
render: (row) => secondsToDuration(row.total_time),
},
])
async function listRanks() {
const res = await getContestRank(props.contestID, {
limit: query.limit,
offset: query.limit * (query.page - 1),
})
total.value = res.data.total
data.value = res.data.results
if (query.page === 1) {
chart.value = data.value
}
}
async function addColumns() {
try {
problems.value = await getContestProblems(props.contestID)
problems.value.map((problem, index) => {
columns.value.push({
align: "center",
title: () =>
h(
NButton,
{
text: true,
type: "primary",
onClick: () =>
router.push({
name: "contest problem",
params: {
contestID: route.params.contestID,
problemID: problem._id,
},
}),
},
() => `${index + 1}`
),
render: (row) => {
if (row.submission_info[problem.id]) {
const status = row.submission_info[problem.id]
let acTime
let errorNumber
if (status.is_ac) {
acTime = h("span", secondsToDuration(status.ac_time))
}
if (status.error_number) {
errorNumber = h(
"p",
{ style: "margin: 0" },
`(-${status.error_number})`
)
}
return h("div", [acTime, errorNumber])
}
},
cellProps: (row) => {
let backgroundColor = ""
let color = ""
if (row.submission_info[problem.id]) {
const status = row.submission_info[problem.id]
if (status.is_first_ac) {
backgroundColor = "#3c9"
color = "#3c763d"
} else if (status.is_ac) {
backgroundColor = "#dff0d8"
} else {
backgroundColor = "#f2dede"
color = "#a94442"
}
}
return { style: { backgroundColor, color } }
},
key: problem.id,
width: 150,
})
})
} catch (err) {
problems.value = []
}
}
watch(() => query.page, listRanks)
watch(
() => query.limit,
() => {
query.page = 1
listRanks()
}
)
onMounted(() => {
listRanks()
addColumns()
})
</script>
<template>
<n-data-table
striped
:single-line="false"
:scroll-x="1200"
size="small"
:columns="columns"
:data="data"
/>
<Pagination
:total="total"
v-model:page="query.page"
v-model:limit="query.limit"
/>
</template>
<style scoped></style>