This repository has been archived by the owner on Feb 8, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6f0ef41
commit 5ccabd6
Showing
10 changed files
with
212 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import React from 'react'; | ||
| import reactDom from 'react-dom'; | ||
| import { Table, Button, Glyphicon } from 'react-bootstrap'; | ||
| import FlipMove from 'react-flip-move'; | ||
| const axios = require('axios'); | ||
|
|
||
| /** | ||
| * Class Main provides an entrance to the scoreboard. | ||
| */ | ||
| class Main extends React.Component { | ||
| constructor() { | ||
| super(); | ||
| /** | ||
| * Stores the current scoreboard. | ||
| * @property state | ||
| * @type {Array<User>} | ||
| */ | ||
| this.state = { problems: [], contestants: [], lastUpdated: new Date(0) }; | ||
| this.fetch(); | ||
| setInterval(() => this.fetch(), 15000); // F5 every 15 seconds | ||
| } | ||
| /** | ||
| * Fetches new list from the server. | ||
| */ | ||
| fetch() { | ||
| return axios.post('/scoreboard') | ||
| .then(response => { | ||
| if (response.status !== 200) return; | ||
| this.setState(Object.assign({}, response.data, { lastUpdated: new Date() })); | ||
| }) | ||
| .catch(() => { // Pass error | ||
| }); | ||
| } | ||
| /** | ||
| * Handles manual refresh. | ||
| */ | ||
| onRefresh() { | ||
| this.fetch(); | ||
| this.setState({ disableRefresh: true }); | ||
| setTimeout(() => this.setState({ disableRefresh: false }), 1000); // Refresh again after 1 second please | ||
| } | ||
| render() { | ||
| const probs = this.state.problems; | ||
| const table = <Table bordered hover> | ||
| <thead> | ||
| <tr> | ||
| <th rowSpan={2}>#</th> | ||
| <th rowSpan={2}>Tên</th> | ||
| <th rowSpan={2}>Tổng</th> | ||
| <th colSpan={this.state.problems.length}>Điểm từng bài</th> | ||
| </tr> | ||
| <FlipMove typeName={'tr'}> | ||
| {this.state.problems.map(prob => <th key={prob}>{prob}</th>)} | ||
| </FlipMove> | ||
| </thead> | ||
| <FlipMove typeName={'tbody'}> | ||
| {this.state.contestants.map(u => { | ||
| return <tr key={u.name} className={(u.rank <= 3 ? 'success' : '')}> | ||
| <td>{u.rank}</td> | ||
| <td>{u.name}</td> | ||
| <td>{u.total}</td> | ||
| {probs.map(p => <td>{u[p] || 0}</td>)} | ||
| </tr>; | ||
| })} | ||
| </FlipMove> | ||
| </Table>; | ||
| return <div> | ||
| <div className='text-right'>Lần cập nhật cuối: {this.state.lastUpdated.toString()}</div> | ||
| <div className='text-center'> | ||
| <Button bsStyle='info' onClick={() => this.onRefresh()} disabled={this.state.disableRefresh}> | ||
| <Glyphicon glyph='refresh'/>Cập nhật | ||
| </Button> | ||
| </div> | ||
| <hr/> | ||
| {table} | ||
| </div>; | ||
| } | ||
| } | ||
|
|
||
| reactDom.render(<Main />, document.getElementById('root')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,32 @@ | ||
| extends ./layout | ||
|
|
||
| mixin row(rank) | ||
| if rank <= 3 | ||
| td: b | ||
| block | ||
| else | ||
| td | ||
| block | ||
| //- mixin row(rank) | ||
| //- if rank <= 3 | ||
| //- td: b | ||
| //- block | ||
| //- else | ||
| //- td | ||
| //- block | ||
| block content | ||
| h1.text-center Bảng xếp hạng | ||
| hr | ||
| table.table.table-hover.table-bordered | ||
| thead: tr | ||
| th # | ||
| th Tên | ||
| th Tổng | ||
| each prob in problems | ||
| th=prob | ||
| tbody | ||
| each u in scoreboard | ||
| tr | ||
| td=u.rank | ||
| +row(u.rank) | ||
| | #{u.name} | ||
| td=u.total | ||
| each prob in problems | ||
| td=u[prob] || 0 | ||
| //- hr | ||
| #root | ||
| h2.text-center Loading... | ||
| script(src='public/js/scoreboard.js') | ||
| //- table.table.table-hover.table-bordered | ||
| //- thead: tr | ||
| //- th # | ||
| //- th Tên | ||
| //- th Tổng | ||
| //- each prob in problems | ||
| //- th=prob | ||
| //- tbody | ||
| //- each u in scoreboard | ||
| //- tr | ||
| //- td=u.rank | ||
| //- +row(u.rank) | ||
| //- | #{u.name} | ||
| //- td=u.total | ||
| //- each prob in problems | ||
| //- td=u[prob] || 0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters