2020-11-01 18:53:08 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2020-11-08 20:35:27 +00:00
|
|
|
<title>JSDoc: Source: frontend/src/components/pages/MyTeam.component.js</title>
|
2020-11-01 18:53:08 +00:00
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
2020-11-08 20:35:27 +00:00
|
|
|
<h1 class="page-title">Source: frontend/src/components/pages/MyTeam.component.js</h1>
|
2020-11-01 18:53:08 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<article>
|
|
|
|
|
<pre class="prettyprint source linenums"><code>import {Component} from '../../../lib/vues6.js'
|
|
|
|
|
import {GridCellRenderType} from '../Grid.component.js'
|
2020-11-08 20:35:27 +00:00
|
|
|
import {api} from '../../module/api.js'
|
2020-11-01 18:53:08 +00:00
|
|
|
|
|
|
|
|
const template = `
|
|
|
|
|
<div class="page-my-team">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="left team-name">
|
|
|
|
|
<h2>My Team - </h2><input placeholder="Click to edit team name..." type="text" v-model="team_name">
|
|
|
|
|
</div>
|
2020-11-08 20:35:27 +00:00
|
|
|
<div class="right">
|
|
|
|
|
<span class="save-text" style="margin-right: 20px; color: #555555; font-style: italic;">{{ save_text }}</span><button @click="save_changes()">Save</button>
|
|
|
|
|
</div>
|
2020-11-01 18:53:08 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="body" style="display: flex; flex-direction: row; margin-left: 10px; padding-bottom: 50px;" v-if="show_body">
|
|
|
|
|
<app-grid
|
|
|
|
|
:column_defs="overall_column_defs"
|
|
|
|
|
:data="overall_data"
|
|
|
|
|
:show_row_numbers="true"
|
|
|
|
|
style="flex: 1;"
|
|
|
|
|
></app-grid>
|
|
|
|
|
<div class="lineup-grids" style="margin-left: 30px; margin-right: 10px; flex: 1;">
|
|
|
|
|
<h3>Starting Lineup</h3>
|
|
|
|
|
<app-grid
|
|
|
|
|
:column_defs="lineup_column_defs"
|
|
|
|
|
:data="starting_players"
|
|
|
|
|
:show_row_numbers="false"
|
|
|
|
|
></app-grid>
|
|
|
|
|
|
|
|
|
|
<h3>Bench</h3>
|
|
|
|
|
<app-grid
|
|
|
|
|
:column_defs="lineup_column_defs"
|
|
|
|
|
:data="bench_players"
|
|
|
|
|
:show_row_numbers="false"
|
|
|
|
|
></app-grid>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</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 [] }
|
|
|
|
|
|
2020-11-08 20:35:27 +00:00
|
|
|
/**
|
|
|
|
|
* Original team name to compare against.
|
|
|
|
|
*/
|
|
|
|
|
_original_team_name = ''
|
|
|
|
|
|
2020-11-01 18:53:08 +00:00
|
|
|
/**
|
|
|
|
|
* The team name.
|
|
|
|
|
* @type {string}
|
|
|
|
|
*/
|
|
|
|
|
team_name = ''
|
|
|
|
|
|
2020-11-08 20:35:27 +00:00
|
|
|
/**
|
|
|
|
|
* The text next to the save button.
|
|
|
|
|
* @type {string}
|
|
|
|
|
*/
|
|
|
|
|
save_text = 'All changes saved.'
|
|
|
|
|
|
2020-11-01 18:53:08 +00:00
|
|
|
/**
|
|
|
|
|
* 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[]}
|
|
|
|
|
*/
|
2020-11-08 20:35:27 +00:00
|
|
|
starting_players = []
|
2020-11-01 18:53:08 +00:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 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',
|
2020-11-08 20:35:27 +00:00
|
|
|
key: 'name',
|
2020-11-01 18:53:08 +00:00
|
|
|
type: GridCellRenderType.HTML,
|
|
|
|
|
renderer: (_, data) => {
|
2020-11-08 20:35:27 +00:00
|
|
|
if ( !data.name ) {
|
2020-11-01 18:53:08 +00:00
|
|
|
return `<i style="color: darkgrey">none</i>`
|
|
|
|
|
} else {
|
|
|
|
|
return `
|
|
|
|
|
<div class="center">
|
2020-11-08 20:35:27 +00:00
|
|
|
<img src="${data.image}" alt="${data.name}" height="50" style="border-radius: 50%">
|
|
|
|
|
<span>${data.name} (#${data.number})</span>
|
2020-11-01 18:53:08 +00:00
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
header: '',
|
2020-11-08 20:35:27 +00:00
|
|
|
key: 'name',
|
2020-11-01 18:53:08 +00:00
|
|
|
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) => {
|
2020-11-08 20:35:27 +00:00
|
|
|
if ( this.moving_player && this.moving_player.name !== row.name ) return false;
|
|
|
|
|
if ( !row.name ) return true;
|
|
|
|
|
return this.moving_player && this.moving_player.name === row.name;
|
2020-11-01 18:53:08 +00:00
|
|
|
},
|
|
|
|
|
on_click: (row, col) => {
|
|
|
|
|
if ( !this.moving_player ) {
|
|
|
|
|
this.moving_player = row;
|
|
|
|
|
} else {
|
|
|
|
|
const old_row = {...row};
|
2020-11-08 20:35:27 +00:00
|
|
|
const moved_row = {...this.moving_player};
|
|
|
|
|
|
|
|
|
|
for ( const prop in moved_row ) {
|
|
|
|
|
if ( prop === 'position' ) continue;
|
|
|
|
|
row[prop] = moved_row[prop]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for ( const prop in moved_row ) {
|
|
|
|
|
if ( prop === 'position' ) continue;
|
|
|
|
|
this.moving_player[prop] = old_row[prop]
|
|
|
|
|
}
|
2020-11-01 18:53:08 +00:00
|
|
|
|
|
|
|
|
this.moving_player = undefined;
|
2020-11-08 20:35:27 +00:00
|
|
|
this.$_vue_inst.mark_dirty();
|
2020-11-01 18:53:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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',
|
2020-11-08 20:35:27 +00:00
|
|
|
key: 'name',
|
2020-11-01 18:53:08 +00:00
|
|
|
type: GridCellRenderType.HTML,
|
|
|
|
|
renderer: (_, data) => `
|
|
|
|
|
<div class="center">
|
2020-11-08 20:35:27 +00:00
|
|
|
<img src="${data.image}" alt="${data.name}" height="50" style="border-radius: 50%">
|
|
|
|
|
<span>${data.name} (#${data.number})</span>
|
2020-11-01 18:53:08 +00:00
|
|
|
</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[]}
|
|
|
|
|
*/
|
2020-11-08 20:35:27 +00:00
|
|
|
overall_data = []
|
2020-11-01 18:53:08 +00:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Called when the component is instantiated. Initializes the bench players data.
|
|
|
|
|
* @return {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async vue_on_create() {
|
2020-11-08 20:35:27 +00:00
|
|
|
console.log('api', api)
|
|
|
|
|
const [my_team, lineup] = await Promise.all([api.get_my_team(), api.get_my_team_current_lineup()])
|
|
|
|
|
this.team_name = this._original_team_name = my_team.team_name
|
|
|
|
|
this.overall_data = await api.get_my_team_players()
|
|
|
|
|
this.bench_players = lineup.benched_players
|
|
|
|
|
this.starting_players = lineup.starting_players
|
2020-11-01 18:53:08 +00:00
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
});
|
|
|
|
|
}
|
2020-11-08 20:35:27 +00:00
|
|
|
|
|
|
|
|
mark_dirty() {
|
|
|
|
|
this.save_text = 'Unsaved changes'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Fired when the team name changes. Marks the data as needing a save.
|
|
|
|
|
*/
|
|
|
|
|
watch_team_name() {
|
|
|
|
|
if ( this.team_name !== this._original_team_name )
|
|
|
|
|
this.mark_dirty()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async save_changes() {
|
|
|
|
|
this.save_text = 'Saving changes...'
|
|
|
|
|
|
|
|
|
|
// Save the team name
|
|
|
|
|
const team_save_result = await api.save_my_team({ team_name: this.team_name })
|
|
|
|
|
this.team_name = this._original_team_name = team_save_result.team_name
|
|
|
|
|
|
|
|
|
|
// Save the lineup
|
|
|
|
|
const lineup_data = {
|
|
|
|
|
starting_players: this.starting_players,
|
|
|
|
|
benched_players: this.bench_players,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const lineup_save_result = await api.save_my_team_lineup(lineup_data)
|
|
|
|
|
this.bench_players = lineup_save_result.benched_players
|
|
|
|
|
this.starting_players = lineup_save_result.starting_players
|
|
|
|
|
|
|
|
|
|
this.save_text = 'All changes saved.'
|
|
|
|
|
this.update()
|
|
|
|
|
}
|
2020-11-01 18:53:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default MyTeamComponent
|
|
|
|
|
</code></pre>
|
|
|
|
|
</article>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<nav>
|
2020-11-08 20:35:27 +00:00
|
|
|
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-fake_data.html">fake_data</a></li><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="ActiveScope.html">ActiveScope</a></li><li><a href="AddPlayersComponent.html">AddPlayersComponent</a></li><li><a href="DraftBoard.html">DraftBoard</a></li><li><a href="DraftBoardComponent.html">DraftBoardComponent</a></li><li><a href="FrontendUnit.html">FrontendUnit</a></li><li><a href="GenerateMatchupsForWeekPatch.html">GenerateMatchupsForWeekPatch</a></li><li><a href="GenerateWeeklyResultsPatch.html">GenerateWeeklyResultsPatch</a></li><li><a href="GridActionButtonComponent.html">GridActionButtonComponent</a></li><li><a href="GridComponent.html">GridComponent</a></li><li><a href="Home.html">Home</a></li><li><a href="InjectUserTeam.html">InjectUserTeam</a></li><li><a href="LeagueComponent.html">LeagueComponent</a></li><li><a href="Lineup.html">Lineup</a></li><li><a href="LinkComponent.html">LinkComponent</a></li><li><a href="Matchup.html">Matchup</a></li><li><a href="module-routing-Router.html">Router</a></li><li><a href="MyTeamComponent.html">MyTeamComponent</a></li><li><a href="Player.html">Player</a></li><li><a href="ScoresComponent.html">ScoresComponent</a></li><li><a href="ScoresController.html">ScoresController</a></li><li><a href="SeedAPIDataPatch.html">SeedAPIDataPatch</a></li><li><a href="SeedWeeklyPlayerDataPatch.html">SeedWeeklyPlayerDataPatch</a></li><li><a href="SportsDataService.html">SportsDataService</a></li><li><a href="Team.html">Team</a></li><li><a href="Teams.html">Teams</a></li><li><a href="TopLevelComponent.html">TopLevelComponent</a></li><li><a href="User.html">User</a></li><li><a href="WeeklyPlayerStat.html">WeeklyPlayerStat</a></li><li><a href="WeeklyTeamStat.html">WeeklyTeamStat</a></li></ul><h3>Global</h3><ul><li><a href="global.html#GridCellRenderType">GridCellRenderType</a></li></ul>
|
2020-11-01 18:53:08 +00:00
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<br class="clear">
|
|
|
|
|
|
|
|
|
|
<footer>
|
2020-11-08 20:35:27 +00:00
|
|
|
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.5</a> on Sun Nov 08 2020 14:34:32 GMT-0600 (Central Standard Time)
|
2020-11-01 18:53:08 +00:00
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<script> prettyPrint(); </script>
|
|
|
|
|
<script src="scripts/linenumber.js"> </script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
