[Code Quality] extract duplicate code from HttpSubmissionService

Develop a pagination item in the problemList page.
Show 20 problems on the pages by default.

• Pagination Reference
  https://bulma.io/documentation/components/pagination/

Judge-Girl/User-Stories#1

• Make frontend

(1) the back navigation (Problems Page) should have hover animation (turn into shadowing)
it should have shadow during the mouse hovering on it

(2) exam's name doesn't show

Judge-Girl/Judge-Girl#349

In Judge-Girl/Judge-Girl#48, we make the markdown prettier by adjusting some css styles defaulted by the markdown-it library. This actually is good enough to read.

In the legacy judge girl, the pionteer did a great job on optimizing the code markdown section to enable the user to copy the text within it or show the line numbers. like:

While currently in the new version, we have achieved:

This issue aims to achieve more:

For each code markdown section, we have to provide

• copy button
• show line numbers
• better background theme (somehow in darkness)

features

Description

Docker-Compile build fails on Mac

The error log:

38 packages are looking for funding
  run `npm fund` for details

found 281 vulnerabilities (272 low, 9 high)
  run `npm audit fix` to fix them, or `npm audit` for details

> [email protected] build /usr/src/app
> ng build  --outputPath ./dist

Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
See "/tmp/ng-nPhpEc/angular-errors.log" for further details.
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] build: `ng build  --outputPath ./dist`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-12-20T17_20_58_208Z-debug.log

With the verbose log as following:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/usr/src/app/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle [email protected]~build: CWD: /usr/src/app
10 silly lifecycle [email protected]~build: Args: [ '-c', 'ng build  --outputPath ./dist' ]
11 info lifecycle [email protected]~build: Failed to exec build script
12 verbose stack Error: [email protected] build: `ng build  --outputPath ./dist`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at ChildProcess.emit (events.js:314:20)
12 verbose stack     at maybeClose (internal/child_process.js:1022:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
13 verbose pkgid [email protected]
14 verbose cwd /usr/src/app
15 verbose Linux 4.19.76-linuxkit
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
17 verbose node v12.20.0
18 verbose npm  v6.14.8
19 error code ELIFECYCLE
20 error syscall spawn
21 error file sh
22 error errno ENOENT
23 error [email protected] build: `ng build  --outputPath ./dist`
23 error spawn ENOENT
24 error Failed at the [email protected] build script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Now, toast will display in front of change password / logout part.
We hope to move toast to top-right of page content instead of whole page.

Figma

If the exam is upcoming, a student can't access this exam.

The CSS of navbar on the exam page has been updated.

Server-side rendering (SSR) with Angular Universal

https://angular.io/guide/universal

This will enhance the SEO which is necessary for problem pages.

Description

As a Student, I can change my password, so that I can secure my account.
Figma Link

• Logout first
  • Navbar still shows exam tab
• Login
  • Navbar not shows exam tab

Judge-Girl/User-Stories#1

• Perform query exam's API requests in student's exam page

Reproduce:
User: [email protected]

1. go to exam's submission page
   

2. go to the first question (problemId=3)

3. See submission page's and click view judges and view source code

Note: not only exam's submissions page, but also the normal submissions page

Embed problem page into exam page.

• Make problem description and submission into two components.
• Change submission API endpoint. (As component parameter)
• Put above two components inside exam content (keep displaying exam navbar).

Descritpion

As a Student, I can see my code's quality inspection report on the Submission page.

• Maybe try catch an error when trying to get the problem.

Replicate:

1. At /problems/70013/testcases
2. upload a code and submit
   => The page will be changed to the submissions page and there will be two submission rows.

See the following picture of File-Upload item, user must click the cross icon to clear the current selected file.

This issue enhances the UX: instead of clicking the cross icon, re-click on the file-upload button can pop-up the file-selected panel where the selected file replaces the previously selected file. Hence, the cross icon can be removed from the page.

Automated Testing: Exam flow (see prototype)

Problem B and C's scores should show on the ExamList.

Websocket (StompBrokerService): if the websocket disconnected, reconnect every 2 seconds

Here is what I do:

1. Open the submissions page and go to another tab on the browser, wait it for 1~2 minutes
2. choose a.c file
3. click submit btn

then the bug appears. (due to the broker's re-subscription after a reconnection of the websocket)
It should only show three AC toast.

Develop a pagination item in the submissions page
Default are 20 items.

• Pagination UI
  

Description

Currently in the submission page, the viewingReport modal is hardcoded with the CC report. As the following code shows.

This issue improve it to support generic report, i.e., given a report of any nested map type, it can be presented in the modal. (via some nested-table way)

export class Verdict {
  constructor(public judges: Judge[],
              public summaryStatus: JudgeStatus,
              public totalGrade: number,
              public maximumRuntime: number,
              public maximumMemoryUsage: number,
              public compileErrorMessage: string,
              public issueTime: number,
              // TODO: report type should be declared in a recursive way
              public report: Map<string, any>) {
  }
}

Should be strong-typed, otherwise annoying message shows up

Description

The secondly initialized SubmissionService will fail on listening to the verdict result.

400 failure on submitting in an exam's question

Now, '## Title 2\n\n### Title 3\n\n#### Title 4\n' render as

In this example, question 100 does not exist.
When go to the exam submission page should show a warning UI.

background.png

hover on go to exam btn:

Upgrade dependencies to fix security issues

and Make sure feature still works

Somehow due to some height issue, the tabs are aligned overlapping to the border of the panel, which is an obvious bug.

You can replicate the bug by viewing the problem description panel where the problem has a longer description text exceeds a page.

Reproduce:

Flow: exams/1 -> exams/1/problems/3/submissions -> upload a code -> back to exams/1
then you won't see the question's status updated

Improve CSS

Give colors and styles to the verdict of each problem in exam problem list.

Current implement of verdict callback is based on polling. This issue enhances this by enable websocket listening.

Depends on Judge-Girl/Judge-Girl#171

spinner during querying the submissions

Sort the problem list by their ids.

In the picture you can see those problems are not sorted. (Actually problems are sorted by ther creation time)

Give a better name to MultiTabsPanelComponent

Cannot show submission codes on submitted answer in an exam

Replication:

1. go to the exam's question submission page
2. submit a new submission
3. view the submitted codes of the newly created submission --> cannot show