| /** |
| * @module list-autorollers-sk |
| * @description <h2><code>list-autorollers-sk</code></h2> |
| * |
| * <p> |
| * Displays a div that allows users to select a state (Caution/Closed) and |
| * a list of autorollers. Dynamically populates the tree status field with |
| * these selections. Also includes a submit button. |
| * </p> |
| * |
| * @evt set-tree-status Sent when the user selects a state and list of |
| * autorollers. The detail includes the tree status message. |
| * |
| * <pre> |
| * detail : "Caution: Waiting for Chrome, Flutter rollers to land" |
| * </pre> |
| * |
| */ |
| |
| import { define } from 'elements-sk/define'; |
| import { html } from 'lit-html'; |
| import { findParent } from 'common-sk/modules/dom'; |
| import { CheckOrRadio } from 'elements-sk/checkbox-sk/checkbox-sk'; |
| import { ElementSk } from '../../../infra-sk/modules/ElementSk'; |
| import { AutorollerSnapshot } from '../json'; |
| |
| import 'elements-sk/checkbox-sk'; |
| import 'elements-sk/radio-sk'; |
| |
| export class ListAutorollersSk extends ElementSk { |
| private checkedAutorollers: Set<string> = new Set(); |
| |
| private autorollersData: AutorollerSnapshot[] = []; |
| |
| private selectedTreeStatus: string = ''; |
| |
| constructor() { |
| super(ListAutorollersSk.template); |
| } |
| |
| private static template = (ele: ListAutorollersSk) => html` |
| <div class="autorollers"> |
| Choose state: |
| <hr/> |
| <radio-sk label="Caution" name=tree_state ?checked=${ele.selectedTreeStatus === 'Caution'} @change=${() => ele.radioHandler('Caution')}></radio-sk> |
| <radio-sk label="Closed" name=tree_state ?checked=${ele.selectedTreeStatus === 'Closed'} @change=${() => ele.radioHandler('Closed')}></radio-sk> |
| <br/><br/> |
| Choose rollers to wait for: |
| <hr/> |
| <table> |
| ${ele.autorollerRow()} |
| <tr> |
| <td colspan=3 class="submit-button"> |
| <br/> |
| <button @click=${ele.submit}>Submit</button> |
| </td> |
| </tr> |
| </table> |
| </div> |
| `; |
| |
| // resets the textfield, radio buttons and check boxes. |
| public reset(): void { |
| this.setTreeStatus(''); |
| this.checkedAutorollers = new Set(); |
| this.selectedTreeStatus = ''; |
| this.setAttribute('collapsed', ''); |
| this._render(); |
| } |
| |
| public getSelectedRollerNames(): string { |
| return Array.from(this.checkedAutorollers).join(', '); |
| } |
| |
| connectedCallback(): void { |
| super.connectedCallback(); |
| this._render(); |
| } |
| |
| private autorollerRow() { |
| return this.autorollers.map((autoroller) => html` |
| <tr> |
| <td> |
| <checkbox-sk ?checked=${this.checkedAutorollers.has(autoroller.name)} @change=${this.clickHandler} id=${autoroller.name}></checkbox-sk> |
| </td> |
| <td> |
| <a href="${autoroller.url}" target="_blank">${autoroller.name}</a> |
| </td> |
| <td> |
| [Failing: ${autoroller.num_failed}] |
| </td> |
| </tr> |
| `); |
| } |
| |
| // The list of autorollers. |
| get autorollers(): AutorollerSnapshot[] { |
| return this.autorollersData; |
| } |
| |
| set autorollers(val: AutorollerSnapshot[]) { |
| this.autorollersData = val; |
| this._render(); |
| } |
| |
| private submit() { |
| this.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' })); |
| } |
| |
| private clickHandler(e: Event) { |
| const checkbox = findParent(e.target as HTMLElement, 'CHECKBOX-SK') as CheckOrRadio; |
| if (checkbox.checked) { |
| this.checkedAutorollers.add(checkbox.id); |
| } else { |
| this.checkedAutorollers.delete(checkbox.id); |
| } |
| this.setTreeStatus(this.getTreeStatusFromAutorollers()); |
| } |
| |
| private getTreeStatusFromAutorollers(): string { |
| let treeStatus = this.selectedTreeStatus; |
| const rollerNamesStr = this.getSelectedRollerNames(); |
| if (rollerNamesStr) { |
| treeStatus = `${treeStatus}: Waiting for ${rollerNamesStr} roller${this.checkedAutorollers.size > 1 ? 's' : ''} to land`; |
| } |
| return treeStatus; |
| } |
| |
| private setTreeStatus(treeStatus: string) { |
| this.dispatchEvent(new CustomEvent('set-tree-status', { detail: treeStatus, bubbles: true })); |
| } |
| |
| private radioHandler(state: string) { |
| this.selectedTreeStatus = state; |
| this.setTreeStatus(this.getTreeStatusFromAutorollers()); |
| } |
| } |
| |
| define('list-autorollers-sk', ListAutorollersSk); |