hvv-departures-card.js

class HvvDeparturesCard extends HTMLElement {
  set hass (hass) {
    const entityId = this.config.entity
    const state = hass.states[entityId]
    const name = this.config.name || state.attributes['friendly_name']

    if (!this.content) {
      const card = document.createElement('ha-card')
      card.header = name
      this.content = document.createElement('div')
      const style = document.createElement('style')
      style.textContent = `
        .departures {
          padding: 16px;
          
        }
        .departure {
          padding: 6px 0px;
          display: flex;
          align-items: center;
        }
        
        .departure:first-child {
            padding-top: 0;
        }

        .departure_line {
            width: 48px;
            margin-right: 16px;
        }

        .departure_direction {
            flex-grow: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .departure_time {
            min-width: 0;
        }

        span.line {
          display: inline-block;

          font-weight: bold;
          padding: 1px 4px;
          color: #fff;
          background-color: #888;
          margin-right:0.7em;
          text-align: center;

          width: 42px;
          margin-left: 3px;
          box-sizing: border-box;
        }

        span.S, span.A {
          background-color: #009252;
          border-radius: 999px;
        }

        span.S21 { background-color: #b51143; }
        span.S3, span.S31 { background-color: #622181; }

        span.S11 { background-color: #fff; color: #009252; border: 2px solid #009252; }
        span.S2 { background-color: #fff; color: #b51143; border: 2px solid #b51143; }

        span.A { background-color: #f29400; }

        span.U {
          background-color: #006ab3;
        }

        span.U2 {
            background-color: #e2001a;
        }

        span.U3 {
            background-color: #ffdd00;
            color: #000;
        }

        span.U4 {
            background-color: #0098a1;
        }

        span.Bus, span.XpressBus, span.Schnellbus, span.NachtBus {
          background-color: #e2001a;
          clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
          width: 48px;
          margin-left: 0;
        }

        span.XpressBus { background-color: #1a962b; }
        span.NachtBus { background-color: #000; }

        span.Schiff {
            background-color: #009dd1;
            clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
        }

        span.ICE, span.RE, span.EC, span.IC, span.RB, span.R {
            background-color: transparent;
            color: #000;
        }
        `
      card.appendChild(style)
      card.appendChild(this.content)
      this.appendChild(card)
    }

    var departureshtml = `
    <div class="departures">
    `
    const now = new Date();
    var departures = state.attributes['next'];

    const max = Math.min(departures.length, this.config.max || 100);

    for (const departure of departures.slice(0, max)) {
      var direction = departure['direction']
      const line = departure['line']
      const type = departure['type']
      const id = departure['id']

      const jtime = new Date(departure['departure'])
      const time = parseInt((jtime - now) / 60000)

      departureshtml += `
          <div class="departure">
            <span class="departure_line line-icon"><span class="line ${id} ${line} ${type}">${line}</span></span>
            <span class="departure_direction">${direction}</span>
            <span class="departure_time">${time}&nbsp;min</span>
          </div class="departure">
      `
    }
    departureshtml += `
    </div class="departures">
    `

    this.content.innerHTML = departureshtml
  }

  setConfig (config) {
    if (!config.entity) {
      throw new Error('You need to define an entity')
    }
    this.config = config
  }

  getCardSize () {
    return 1
  }
}

customElements.define('hvv-departures-card', HvvDeparturesCard)