/ Gists / Web component
On gists

Web component

JavaScript Web components

calendar.js Raw # 

class AmbiCalendar extends HTMLElement
{
    constructor()
    {
      super();
      this.shadow = this.attachShadow({ mode: "open"});
    }

    connectedCallback()
    {
      this.render(true, []);

      fetch('/api/v1/dk_workshop_date?filters[dk_voucher_id]=' + this.getAttribute('voucherId'))
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          return Promise.reject(response);
        }

      }).then((data) => {
        this.render(false, data);
      }).catch(function (err) {
        // There was an error
        console.warn('Something went wrong.', err);
      });
    }

    render(loading, data)
    {
      let body = '';

      if (loading) {
        body = '<div>loading...</div>';
      } else {
        data.map((item) => {
          body += `<li>${item.date_from} - ${item.date_to}</li>`;
        });
      }

      this.shadow.innerHTML = `
        <h1>Ambi calendar</h1>
        <lu>
            ${body}
        </lu>
      `;
    }
}

customElements.define('ambi-calendar', AmbiCalendar);

calendar.html Raw # 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WEb component</title>
</head>

<body>
    <ambi-calendar voucherId="1"></ambi-calendar>
    <script src="calendar.js"></script>
</body>

</html>