Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

grouppagina en submissions testen + styling #224

Merged
merged 15 commits into from
May 20, 2024
26 changes: 26 additions & 0 deletions frontend/src/components/buttons/BackButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<router-link :to="destination">
<v-btn class="group-button" prepend-icon="mdi-arrow-left">
{{ $t(title) }}
</v-btn>
</router-link>
</template>

<script setup lang="ts">
const props = defineProps<{
destination: String;
title: String;
}>();

const destination = props.destination;
const title = props.title;
</script>

<style scoped>
.v-btn {
margin-bottom: 5px;
min-width: 150px;
background-color: rgb(var(--v-theme-primary));
color: rgb(var(--v-theme-navtext));
}
</style>
7 changes: 1 addition & 6 deletions frontend/src/components/project/ProjectInfo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,7 @@
</v-btn>
</v-card-actions>
</v-card>
<SubmitInfo
class="submitInfo"
v-if="group && !isTeacher"
:project="project"
:group="group"
/>
<SubmitInfo class="submitInfo" v-if="group" :project="project" :group="group" />
</v-container>
</template>

Expand Down
154 changes: 84 additions & 70 deletions frontend/src/components/submission/SubmissionCard.vue
Original file line number Diff line number Diff line change
@@ -1,74 +1,86 @@
<template>
<v-card variant="outlined">
<v-card-title>
{{ $t("submission.status") }}
<p v-if="new Date(submission.date) <= deadline" :class="Status[submission.status]">
{{ Status[submission.status] }}
</p>
<p v-else class="Deadline">{{ $t("submission.after_deadline") }}</p>
</v-card-title>
<v-card-subtitle>
{{ $t("submission.datetime") }} {{ $d(submission.date, "long") }}
</v-card-subtitle>
<v-card-item>
<v-card-title>
{{ $t("submission.remarks") }}
</v-card-title>
<v-card-text v-if="submission.remarks">
{{ submission.remarks }}
</v-card-text>
<v-card-subtitle v-else>
{{ $t("submission.remarks_empty") }}
</v-card-subtitle>
</v-card-item>
<v-card-item v-if="submission.stderr || submission.stdout || submission.testresults.length">
<v-card-title>{{ $t("submission.docker_test") }}</v-card-title>
<v-card-text>
<p v-if="submission.stdout">Stdout: {{ submission.stdout }}</p>
<p v-if="submission.stderr">Sterr: {{ submission.stderr }}</p>
<ul>
<li v-for="result in submission.testresults" :key="result">
<p v-if="result.succeeded" class="text-green">{{ result.value }}</p>
<p v-else class="text-red">{{ result.value }}</p>
</li>
</ul>
</v-card-text>
</v-card-item>
<v-card-item>
<v-card-title>
{{ $t("submission.files") }}
</v-card-title>
<v-card-subtitle>
{{ $t("submission.download_info") }}
</v-card-subtitle>
<v-container>
<v-alert
v-if="isError"
title="Error"
color="error"
:text="error!.message"
></v-alert>
<v-skeleton-loader v-else :loading="isLoading" type="card">
<v-col>
<v-chip
class="ma-2"
v-for="(item, index) in files"
label
color="blue"
:key="item.filesortedname"
@click="() => downloadFile(index)"
>
{{ item.filename }}
</v-chip>
</v-col>
</v-skeleton-loader>
</v-container>
<v-card-actions>
<v-btn @click="downloadAll">
{{ $t("submission.download_all_files") }}
</v-btn>
</v-card-actions>
</v-card-item>
<v-divider />
<v-card variant="flat">
<v-row>
<v-col>
<v-card-title>
{{ $t("submission.status") }}
<p
v-if="new Date(submission.date) <= deadline"
:class="Status[submission.status]"
>
{{ Status[submission.status] }}
</p>
<p v-else class="Deadline">{{ $t("submission.after_deadline") }}</p>
</v-card-title>
<v-card-subtitle>
{{ $t("submission.datetime") }} {{ $d(submission.date, "long") }}
</v-card-subtitle>
<v-card-item>
<v-card-title>
{{ $t("submission.remarks") }}
</v-card-title>
<v-card-text v-if="submission.remarks">
{{ submission.remarks }}
</v-card-text>
<v-card-subtitle v-else>
{{ $t("submission.remarks_empty") }}
</v-card-subtitle>
</v-card-item>
<v-card-item
v-if="submission.stderr || submission.stdout || submission.testresults.length"
>
<v-card-title>{{ $t("submission.docker_test") }}</v-card-title>
<v-card-text>
<p v-if="submission.stdout">Stdout: {{ submission.stdout }}</p>
<p v-if="submission.stderr">Sterr: {{ submission.stderr }}</p>
<ul>
<li v-for="result in submission.testresults" :key="result">
<p v-if="result.succeeded" class="text-green">{{ result.value }}</p>
<p v-else class="text-red">{{ result.value }}</p>
</li>
</ul>
</v-card-text>
</v-card-item>
</v-col>
<v-col>
<v-card-item>
<v-card-title>
{{ $t("submission.files") }}
</v-card-title>
<v-card-subtitle>
{{ $t("submission.download_info") }}
</v-card-subtitle>
<v-container>
<v-alert
v-if="isError"
title="Error"
color="error"
:text="error!.message"
></v-alert>
<v-skeleton-loader v-else :loading="isLoading" type="card">
<v-col>
<v-chip
class="ma-2"
v-for="(item, index) in files"
label
color="blue"
:key="item.filesortedname"
@click="() => downloadFile(index)"
>
{{ item.filename }}
</v-chip>
</v-col>
</v-skeleton-loader>
</v-container>
<v-card-actions>
<v-btn @click="downloadAll">
{{ $t("submission.download_all_files") }}
</v-btn>
</v-card-actions>
</v-card-item>
</v-col>
</v-row>
</v-card>
</template>

Expand Down Expand Up @@ -134,5 +146,7 @@ const downloadAll = () => {
.v-card {
border-color: rgb(var(--v-theme-text));
background-color: rgb(var(--v-theme-background));
margin-top: 10px;
margin-bottom: 10px;
}
</style>
58 changes: 41 additions & 17 deletions frontend/src/components/submission/SubmissionList.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,32 @@
<template>
<v-container>
<v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
<v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
<v-col class="mx-auto">
<h2>{{ $t("submission.submissions_title") }}</h2>
<div v-if="sorted.length == 0">
<p>{{ $t("submission.no_submissions") }}</p>
<v-btn :to="`/project/${project?.id}/submit`">
<div class="submissionsview">
<v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
<v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
<v-col>
<h2>{{ $t("submission.submissions_title") }}</h2>
<v-btn
:to="`/project/${project?.id}/submit`"
variant="flat"
class="submitbutton"
>
{{ $t("submit.new_submission") }}
</v-btn>
</div>
<SubmissionCard
class="ma-3"
v-for="submission in sorted"
:key="submission"
:submission="submission!"
:deadline="project.deadline!"
/>
</v-col>
</v-skeleton-loader>
<div v-if="sorted.length == 0" class="nosubmissions">
<v-divider class="divider"></v-divider>
<p>{{ $t("submission.no_submissions") }}</p>
</div>
<SubmissionCard
class="ma-3"
v-for="submission in sorted"
:key="submission"
:submission="submission"
:project="project!"
:deadline="project.deadline"
/>
</v-col>
</v-skeleton-loader>
</div>
</v-container>
</template>

Expand Down Expand Up @@ -57,3 +65,19 @@ const refetch_timer = () => {
};
refetch_timer();
</script>
<style scoped>
.nosubmissions {
margin-top: 15px;
}

.submitbutton {
margin-top: 25px;
margin-bottom: 15px;
background-color: rgb(var(--v-theme-secondary));
border-color: rgb(var(--v-theme-text));
}

.divider {
margin-bottom: 15px;
}
</style>
1 change: 1 addition & 0 deletions frontend/src/i18n/locales/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export default {
not_found2: "Project not found",
to_subject: "To subject",
to_groups: "To groups",
to_project: "To Project",
},
navigation: {
home: "Home",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/i18n/locales/nl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default {
no_submission_files: "Geen indieningen gevonden",
},
submission: {
status: "Indiening status: {status}",
status: "Status indiening:",
datetime: "Indiening tijdstip:",
remarks: "Opmerkingen",
remarks_empty: "Geen opmerkingen voor deze indiening",
Expand Down Expand Up @@ -65,6 +65,7 @@ export default {
not_found2: "Project niet teruggevonden",
to_subject: "Naar vak",
to_groups: "Naar groepen",
to_project: "Naar project",
},
navigation: {
home: "Hoofdscherm",
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/CreateProjectView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ async function submitForm() {
});
} else if (selectedGroupProject.value === "random") {
const groups = divideStudentsIntoGroups(studentsData.value || [], capacity.value);
const groupsToCreate = groups.map((_) => ({
const groupsToCreate = groups.map(() => ({
project_id: createdProjectId,
score: 0,
}));
Expand Down
Loading
Loading