garrettmills/eecs448-project-4
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
9d03679063
eecs448-project-4/frontend/documentation/generated/components_pages_MyTeam.component.js.html

316 lines
10 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: components/pages/MyTeam.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/MyTeam.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 = `
&lt;div class="page-my-team">
&lt;div class="header">
&lt;div class="left team-name">
&lt;h2>My Team - &lt;/h2>&lt;input placeholder="Click to edit team name..." type="text" v-model="team_name">
&lt;/div>
&lt;/div>
&lt;div class="body" style="display: flex; flex-direction: row; margin-left: 10px; padding-bottom: 50px;" v-if="show_body">
&lt;app-grid
:column_defs="overall_column_defs"
:data="overall_data"
:show_row_numbers="true"
style="flex: 1;"
>&lt;/app-grid>
&lt;div class="lineup-grids" style="margin-left: 30px; margin-right: 10px; flex: 1;">
&lt;h3>Starting Lineup&lt;/h3>
&lt;app-grid
:column_defs="lineup_column_defs"
:data="starting_players"
:show_row_numbers="false"
>&lt;/app-grid>
&lt;h3>Bench&lt;/h3>
&lt;app-grid
:column_defs="lineup_column_defs"
:data="bench_players"
:show_row_numbers="false"
>&lt;/app-grid>
&lt;/div>
&lt;/div>
&lt;/div>
`
/**
* Component representing the my-team page.
* @extends Component
*/
class MyTeamComponent extends Component {
static get selector() { return 'page-my-team' }
static get template() { return template }
static get props() { return [] }
/**
* The team name.
* @type {string}
*/
team_name = ''
/**
* If true, the body of the page will be shown. Otherwise, hidden.
* This is used to refresh the entire component at once.
* @type {boolean}
*/
show_body = true
/**
* The player currently being moved. If none, then will be set to undefined.
* @type {undefined}
*/
moving_player = undefined
/**
* Array of players filling starting line up positions. If no player is in
* a position, then only the "postition" key will be set.
* @type {object[]}
*/
starting_players = [
{
position: 'QB',
},
{
position: 'RB',
},
{
position: 'RB',
},
{
position: 'WR',
},
{
position: 'WR',
},
{
position: 'TE',
},
{
position: 'FLX',
},
{
position: 'DST',
},
]
/**
* Players on the bench.
* @type {object[]}
*/
bench_players = []
/**
* Column definitions for the starting/bench lineup grids.
* @type {object[]}
*/
lineup_column_defs = [
{
header: 'POS',
key: 'position',
},
{
header: 'Player',
key: 'player_name',
type: GridCellRenderType.HTML,
renderer: (_, data) => {
if ( !data.player_name ) {
return `&lt;i style="color: darkgrey">none&lt;/i>`
} else {
return `
&lt;div class="center">
&lt;img src="${data.image}" alt="${data.player_name}" height="50" style="border-radius: 50%">
&lt;span>${data.player_name}&lt;/span>
&lt;/div>
`
}
},
},
{
header: '',
key: 'player_name',
type: GridCellRenderType.Component,
component: Vue.component('app-action-button'),
button_color: (row, col) => this.moving_player ? '#CC5746' : '#0582CA',
button_text: (row, col) => {
return this.moving_player ? 'Here' : 'Move'
},
button_hidden: (row, col) => {
if ( this.moving_player &amp;&amp; this.moving_player.player_name !== row.player_name ) return false;
if ( !row.player_name ) return true;
return this.moving_player &amp;&amp; this.moving_player.player_name === row.player_name;
},
on_click: (row, col) => {
if ( !this.moving_player ) {
this.moving_player = row;
} else {
const old_row = {...row};
row.player_name = this.moving_player.player_name;
row.ecr = this.moving_player.ecr;
row.image = this.moving_player.image;
this.moving_player.player_name = old_row.player_name;
this.moving_player.ecr = old_row.ecr;
this.moving_player.image = old_row.image;
this.moving_player = undefined;
console.log(this.moving_player, row);
}
this.$_vue_inst.update(); // $_vue_inst refers to the Vue.component instance, not the data class.
},
},
]
/**
* Column definitions for the overall team grid.
* @type {object[]}
*/
overall_column_defs = [
{
header: 'Name',
key: 'player_name',
type: GridCellRenderType.HTML,
renderer: (_, data) => `
&lt;div class="center">
&lt;img src="${data.image}" alt="${data.player_name}" height="50" style="border-radius: 50%">
&lt;span>${data.player_name}&lt;/span>
&lt;/div>
`,
},
{
header: 'POS',
key: 'position',
},
{
header: 'ECR',
title: 'Expected Coverage Rating',
key: 'ecr',
},
]
/**
* Data for the overall team grid (list of user's team players).
* @type {object[]}
*/
overall_data = [
{
player_name: 'Christian McCaffrey',
position: 'RB1',
ecr: '0.0',
"image": "https://images.generated.photos/eGoWRgqxtahGFDAD81-l8CNxdz1oe-huz3CQ7m3v0VI/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAzNDA0NDlfMDgz/MDY1Nl8wMTk4NTI4/LmpwZw.jpg",
},
{
player_name: 'Ezekiel Elliott',
position: 'RB3',
ecr: '1.0',
"image": "https://images.generated.photos/fd8kkioB4vLw_5MGwQXdDt9Q7Ley2_Ia8Cu390zaNVM/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA0Nzg2ODEuanBn.jpg",
},
{
player_name: 'Dalvin Cook',
position: 'RB5',
ecr: '0.0',
"image": "https://images.generated.photos/PEBx5b8_iPHU_nJpJbh3geUN8cBFglHVAAR9NktzXsk/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAxODI1NzlfMDgx/MTA0OV8wNDQzOTM5/LmpwZw.jpg",
},
{
player_name: 'Alvin Kamara',
position: 'RB6',
ecr: '-1.0',
"image": "https://images.generated.photos/cb3jAo-GBziFLxs85KJGt7a8bJdhz4sSy76PYAXkeg4/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA1ODU4MDBfMDMy/NjY2OF8wODEwNTA2/LmpwZw.jpg",
},
{
player_name: 'Michael Thomas',
position: 'WR1',
ecr: '3.0',
"image": "https://images.generated.photos/LLiy3FypH5A1suda78U82t_Kcn9AlJwZt1g3w1p5DwE/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAzODc0NjlfMDUy/MDc0NF8wNzc3NzQ5/LmpwZw.jpg",
},
{
player_name: 'Davante Adams',
position: 'WR2',
ecr: '4.0',
"image": "https://images.generated.photos/dW84LNLE4Kzp73NTTnL68U--dYuq8CCzD-dGTs76U38/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAyNjE1NjZfMDEz/NDM1NF8wMTg5MjI0/LmpwZw.jpg",
},
{
player_name: 'Travis Kelce',
position: 'TE1',
ecr: '-4.0',
"image": "https://images.generated.photos/erudOopARQnXWNaLqkIPRLLMLAVBr8m70aFC_dtYu1Y/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAzODA5MTVfMDkx/MzIzN18wNDQxMTk4/LmpwZw.jpg",
},
]
/**
* Called when the component is instantiated. Initializes the bench players data.
* @return {Promise&lt;void>}
*/
async vue_on_create() {
this.bench_players = this.overall_data.map(x => { x = {...x, position: 'B'}; return x })
setTimeout(() => {
this.update();
}, 500);
}
/**
* Force re-render the entire component by briefly hiding it.
*/
update() {
this.show_body = false;
this.$nextTick(() => {
this.show_body = true;
});
}
}
export default MyTeamComponent
</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 View Git Blame Copy Permalink