Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 1x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 2x 2x 1x | import { router } from '../router.js';
import { cloneTemplate, RoboComponent } from './robo.component.js';
const template = document.createElement('template');
template.innerHTML = `
<div class="container">
<div class="row">
<h1 class="col-12 display-2">Robo Coasters
</h1>
</div>
<div id="view"><robo-choose-ride></robo-choose-ride></div>
<div class="alert alert-default" role="alert">
<h4 class="alert-heading">Prrt!</h4>
Curious about the <a target="_blank" href="reports/coverage/lcov-report/index.html">code coverage report</a> or the <a target="_blank" href="reports/mutation/mutation.html">mutation testing report</a>?
</div>
</div>
`;
export class RoboCoastersComponent extends RoboComponent {
/** @type {string | undefined} */
currentlyViewedRoute;
connectedCallback() {
this.appendChild(cloneTemplate(template));
this.view = this.by.id.view;
this.routerSubscription = router.onNext((route) => {
this.route = route;
this.render();
});
}
disconnectedCallback() {
this.routerSubscription();
}
render() {
switch (this.route[0]) {
case 'ride':
this.view.innerHTML = `<robo-ride ride-id="${this.route[1]}"></robo-ride>`;
break;
case 'success':
this.view.innerHTML = `<robo-success></robo-success>`;
break;
case '':
this.view.innerHTML = `<robo-choose-ride></robo-choose-ride>`;
default:
router.navigate([]);
break;
}
}
}
customElements.define('robo-coasters', RoboCoastersComponent);
|