import {Component} from '../../../lib/vues6.js'
import {fake_players} from '../../module/fake_data.js'
import {GridCellRenderType} from '../Grid.component.js'
import {clone} from '../../module/util.js'
const template = `
`
/**
* Component representing the draft board page.
* @extends Component
*/
class DraftBoardComponent extends Component {
static get selector() { return 'page-draft-board' }
static get template() { return template }
static get props() { return [] }
top_picks_column_defs = [
{
header: 'Player',
key: 'name',
type: GridCellRenderType.HTML,
renderer: (_, data) => `
${data.name}
`,
}
]
top_picks = []
column_defs = [
{
header: 'Name',
key: 'name',
type: GridCellRenderType.HTML,
renderer: (_, data) => `
${data.name}
`,
},
{
header: 'Team',
key: 'team_name',
},
{
header: 'Position',
key: 'position',
},
{
header: 'Points',
key: 'points',
},
{
header: 'Stats',
key: 'stats',
type: GridCellRenderType.HTML,
renderer: (value, row) => {
const stats = []
for ( const stat in value ) {
if ( !value.hasOwnProperty(stat) ) continue; // Prototypical member
stats.push(`
`)
}
return `
${stats.join('\n')}
`
},
},
{
header: '',
key: 'stats',
type: GridCellRenderType.Component,
component: Vue.component('app-action-button'),
button_color: (row, col) => '#CC5746',
button_text: (row, col) => 'Draft',
button_hidden: (row, col) => this.top_picks.includes(row),
on_click: (row, col) => {
this.top_picks.push(row);
},
},
]
data = clone(fake_players)
async vue_on_create() {
}
}
export default DraftBoardComponent