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 | 1x 1x 1x 1x 1x 1x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { router } from '../router.js';
import { rideService } from '../services/ride.service.js';
import { templateChooseRide, templateRide } from './choose-ride.template.js';
import { RoboComponent, Selector, cloneTemplate } from './robo.component.js';
export class ChooseRideComponent extends RoboComponent {
/** @type {Ride[]} */
rides = [];
connectedCallback() {
this.appendChild(cloneTemplate(templateChooseRide));
rideService.getRides().then((rides) => {
this.rides = rides;
this.#render();
});
this.#render();
}
#render() {
this.by.id.rides.replaceChildren(
...this.rides.map((ride) => this.#renderOrderRow(ride)),
);
}
/** @param {Ride} ride */
#renderOrderRow(ride) {
const element = cloneTemplate(templateRide);
const row = new Selector(element);
row.class.cardTitle.innerText = ride.name;
row.class.cardText.innerText = ride.description;
const img = /** @type {HTMLImageElement} */ (row.class.cardImgTop);
img.src = ride.image;
const anchor = /** @type {HTMLAnchorElement} */ (row.class.cardLink);
anchor.href = `#ride/${ride.id}`;
anchor.innerText = `Choose ${ride.name}`;
anchor.addEventListener('click', (e) => {
e.preventDefault();
router.navigate(['ride', ride.id]);
});
return element;
}
}
customElements.define('robo-choose-ride', ChooseRideComponent);
|