JSFiddle - React, Tailwind, and code Playground

by velo_ninja

JavaScript

class customSchedule extends HTMLElement {
 constructor() {
 super();
  this.type = null;
  this.activeRental = null;
  this.location = {}
  this.rentals = [];
  this.table = null;
  this.schedule = [];
  this.options = {} 
  this.rentalCoordinateDefaults = {}
  this.rentalCoordinates = {...this.rentalCoordinateDefaults}
  this.style = null;
 }
 
connectedCallback() {
  const style = document.createElement('style');
  style.innerHTML = STYLE;
  this.appendChild(style);
  this.style = style;

  this.type = this.getAttribute('type');
  this.rentals = JSON.parse(this.getAttribute('rentals'))
 
  //More Dom Manipulation Functions
  this.setupSchedule(this.location.startTime, this.location.endTime, this.location.numberOfBaskets);
  this.setupTable();
 
  if(this.rentals){
       this.loadRentals(this.rentals)
  }
 }
 
 //...functions, constant variables, etc.

 customElements.define('custom-schedule', customSchedule);