Add logic for serving front-end from /app
This commit is contained in:
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>JSDoc: Source: components/pages/Scores.component.js</title>
|
||||
|
||||
<script src="scripts/prettify/prettify.js"> </script>
|
||||
<script src="scripts/prettify/lang-css.js"> </script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
||||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<h1 class="page-title">Source: components/pages/Scores.component.js</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>import {Component} from '../../../lib/vues6.js'
|
||||
import {GridCellRenderType} from '../Grid.component.js'
|
||||
|
||||
const template = `
|
||||
<div class="page-scores">
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<h2>Matchups & Scores - <small>Week {{ current_week }}</small></h2>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button :class="{ 'disable-click': current_week === max_week }" @click="to_next_week()">Next Week</button><button :class="{ 'disable-click': current_week === min_week }" @click="to_previous_week()">Previous Week</button>
|
||||
</div>
|
||||
</div>
|
||||
<app-grid
|
||||
:column_defs="column_defs"
|
||||
:data="data"
|
||||
:show_row_numbers="false"
|
||||
></app-grid>
|
||||
</div>
|
||||
`
|
||||
|
||||
/**
|
||||
* Component representing the scores & match-ups page.
|
||||
* @extends Component
|
||||
*/
|
||||
class ScoresComponent extends Component {
|
||||
static get selector() { return 'page-scores' }
|
||||
static get template() { return template }
|
||||
static get props() { return [] }
|
||||
|
||||
/**
|
||||
* The number of the current week shown in the interface
|
||||
* @type {number}
|
||||
*/
|
||||
current_week = 6
|
||||
|
||||
/**
|
||||
* Most recent week number.
|
||||
* @type {number}
|
||||
*/
|
||||
max_week = 6
|
||||
|
||||
/**
|
||||
* Least recent week number.
|
||||
* @type {number}
|
||||
*/
|
||||
min_week = 1
|
||||
|
||||
/**
|
||||
* Array of arrays of data for each week with first item being week 1, second being week 2, &c.
|
||||
* @type {object[][]}
|
||||
*/
|
||||
week_x_data = [
|
||||
// Week 1 Data
|
||||
[
|
||||
{
|
||||
"date": "11/2/2020",
|
||||
"team_1": "Team 1",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 50,
|
||||
"team_2": "Team 6",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 73
|
||||
},
|
||||
{
|
||||
"date": "10/23/2020",
|
||||
"team_1": "Team 2",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 66,
|
||||
"team_2": "Team 5",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 71,
|
||||
"winner": "Team 5",
|
||||
"winner_score": "84",
|
||||
"loser_score": "41",
|
||||
},
|
||||
{
|
||||
"date": "10/31/2020",
|
||||
"team_1": "Team 3",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 85,
|
||||
"team_2": "Team 4",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 67
|
||||
},
|
||||
],
|
||||
// Week 2 Data
|
||||
[
|
||||
{
|
||||
"date": "11/2/2020",
|
||||
"team_1": "Team 1",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 58,
|
||||
"team_2": "Team 6",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 34
|
||||
},
|
||||
{
|
||||
"date": "10/23/2020",
|
||||
"team_1": "Team 2",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 57,
|
||||
"team_2": "Team 5",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 27,
|
||||
"winner": "Team 5",
|
||||
"winner_score": "84",
|
||||
"loser_score": "41",
|
||||
},
|
||||
{
|
||||
"date": "10/31/2020",
|
||||
"team_1": "Team 3",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 48,
|
||||
"team_2": "Team 4",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 49
|
||||
},
|
||||
],
|
||||
// Week 3 Data
|
||||
[
|
||||
{
|
||||
"date": "11/2/2020",
|
||||
"team_1": "Team 1",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 67,
|
||||
"team_2": "Team 6",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 47
|
||||
},
|
||||
{
|
||||
"date": "10/23/2020",
|
||||
"team_1": "Team 2",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 83,
|
||||
"team_2": "Team 5",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 62,
|
||||
"winner": "Team 5",
|
||||
"winner_score": "84",
|
||||
"loser_score": "41",
|
||||
},
|
||||
{
|
||||
"date": "10/31/2020",
|
||||
"team_1": "Team 3",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 48,
|
||||
"team_2": "Team 4",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 17
|
||||
},
|
||||
],
|
||||
// Week 4 Data
|
||||
[
|
||||
{
|
||||
"date": "11/2/2020",
|
||||
"team_1": "Team 1",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 30,
|
||||
"team_2": "Team 6",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 41
|
||||
},
|
||||
{
|
||||
"date": "10/23/2020",
|
||||
"team_1": "Team 2",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 65,
|
||||
"team_2": "Team 5",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 27,
|
||||
"winner": "Team 5",
|
||||
"winner_score": "84",
|
||||
"loser_score": "41",
|
||||
},
|
||||
{
|
||||
"date": "10/31/2020",
|
||||
"team_1": "Team 3",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 48,
|
||||
"team_2": "Team 4",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 24
|
||||
},
|
||||
],
|
||||
// Week 5 Data
|
||||
[
|
||||
{
|
||||
"date": "11/2/2020",
|
||||
"team_1": "Team 1",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 43,
|
||||
"team_2": "Team 6",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 48
|
||||
},
|
||||
{
|
||||
"date": "10/23/2020",
|
||||
"team_1": "Team 2",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 57,
|
||||
"team_2": "Team 5",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 61,
|
||||
"winner": "Team 5",
|
||||
"winner_score": "84",
|
||||
"loser_score": "41",
|
||||
},
|
||||
{
|
||||
"date": "10/31/2020",
|
||||
"team_1": "Team 3",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 48,
|
||||
"team_2": "Team 4",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 91
|
||||
},
|
||||
],
|
||||
// Week 6 Data
|
||||
[
|
||||
{
|
||||
"date": "11/2/2020",
|
||||
"team_1": "Team 1",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 50,
|
||||
"team_2": "Team 6",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 37
|
||||
},
|
||||
{
|
||||
"date": "10/23/2020",
|
||||
"team_1": "Team 2",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 36,
|
||||
"team_2": "Team 5",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 71,
|
||||
"winner": "Team 5",
|
||||
"winner_score": "84",
|
||||
"loser_score": "41",
|
||||
},
|
||||
{
|
||||
"date": "10/31/2020",
|
||||
"team_1": "Team 3",
|
||||
"team_1_logo": "https://via.placeholder.com/150x100",
|
||||
"team_1_projection": 48,
|
||||
"team_2": "Team 4",
|
||||
"team_2_logo": "https://via.placeholder.com/150x100",
|
||||
"team_2_projection": 1
|
||||
},
|
||||
]
|
||||
]
|
||||
|
||||
/**
|
||||
* Column definitions for the matchups grid.
|
||||
* @type {object[]}
|
||||
*/
|
||||
column_defs = [
|
||||
{
|
||||
header: 'Date',
|
||||
type: GridCellRenderType.HTML,
|
||||
key: 'date',
|
||||
renderer: (_, data) => {
|
||||
return `${data.date} @ ${data.team_1}`
|
||||
}
|
||||
},
|
||||
{
|
||||
header: 'Team 1',
|
||||
type: GridCellRenderType.HTML,
|
||||
key: 'team_1',
|
||||
renderer: (_, data) => `
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<img src="${data.team_1_logo}" alt="${data.team_1}">
|
||||
<div style="margin-left: 20px">
|
||||
<b>${data.team_1}</b>
|
||||
<p>Projection: ${data.team_1_projection}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
header: 'Team 2',
|
||||
type: GridCellRenderType.HTML,
|
||||
key: 'team_2',
|
||||
renderer: (_, data) => `
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<img src="${data.team_2_logo}" alt="${data.team_2}">
|
||||
<div style="margin-left: 20px">
|
||||
<b>${data.team_2}</b>
|
||||
<p>Projection: ${data.team_2_projection}</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
header: 'Outcome',
|
||||
type: GridCellRenderType.HTML,
|
||||
key: 'winner',
|
||||
renderer: (_, data) => {
|
||||
if ( data?.winner ) {
|
||||
return `
|
||||
<div><b>Winner:</b> ${data.winner}</div>
|
||||
<div><b>Score: </b> ${data.winner_score} / ${data.loser_score}</div>
|
||||
`
|
||||
} else {
|
||||
return `N/A`
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* The currently shown week's data.
|
||||
* @type {object[]}
|
||||
*/
|
||||
data = []
|
||||
|
||||
/**
|
||||
* Called when the component is instantiated. Initializes the current week to the most recent week.
|
||||
* @return {Promise<void>}
|
||||
*/
|
||||
async vue_on_create() {
|
||||
this.data = this.week_x_data[this.max_week - 1];
|
||||
}
|
||||
|
||||
/**
|
||||
* When called, advances the data to the next-most recent week, if one exists.
|
||||
*/
|
||||
to_next_week() {
|
||||
if ( this.current_week < this.max_week ) {
|
||||
this.current_week += 1;
|
||||
this.data = this.week_x_data[this.current_week - 1];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* When called, advances the data to the next-least recent week, if one exists.
|
||||
*/
|
||||
to_previous_week() {
|
||||
if ( this.current_week > this.min_week ) {
|
||||
this.current_week -= 1;
|
||||
this.data = this.week_x_data[this.current_week - 1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ScoresComponent
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-routing.html">routing</a></li><li><a href="module-util.html">util</a></li></ul><h3>Classes</h3><ul><li><a href="AddPlayersComponent.html">AddPlayersComponent</a></li><li><a href="DraftBoardComponent.html">DraftBoardComponent</a></li><li><a href="GridActionButtonComponent.html">GridActionButtonComponent</a></li><li><a href="GridComponent.html">GridComponent</a></li><li><a href="LeagueComponent.html">LeagueComponent</a></li><li><a href="LinkComponent.html">LinkComponent</a></li><li><a href="module-routing-Router.html">Router</a></li><li><a href="MyTeamComponent.html">MyTeamComponent</a></li><li><a href="ScoresComponent.html">ScoresComponent</a></li><li><a href="TopLevelComponent.html">TopLevelComponent</a></li></ul><h3>Global</h3><ul><li><a href="global.html#GridCellRenderType">GridCellRenderType</a></li></ul>
|
||||
</nav>
|
||||
|
||||
<br class="clear">
|
||||
|
||||
<footer>
|
||||
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.5</a> on Sun Oct 25 2020 12:32:18 GMT-0500 (Central Daylight Time)
|
||||
</footer>
|
||||
|
||||
<script> prettyPrint(); </script>
|
||||
<script src="scripts/linenumber.js"> </script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user