Template.js

function Template () {

  this.markupMenuFull = () => {
    return (`
        <header class="l-header" role="banner"> 
        
          <div class="l-header__channel">

            <div class="l-header__channel__bg"></div>

              <div class="l-header__channel__container">
                
                <h1 class="l-header__channel__logo"><a href="/"><img src="images/logo-band.png" alt="logo tv band"></a></h1>

                <nav class="l-header__channel__menu">

                  <ul class="m-menu__channel" role="menubar">
                    <li class="m-menu__channel__item" role="menuitem"><a href="" class="m-menu__channel__link">Notícias</a></li>
                    <li class="m-menu__channel__item" role="menuitem"><a href="" class="m-menu__channel__link">Televisão</a></li>
                    <li class="m-menu__channel__item" role="menuitem"><a href="" class="m-menu__channel__link">Vídeos</a></li>
                    <li class="m-menu__channel__item" role="menuitem"><a href="" class="m-menu__channel__link">Programação</a></li>
                    <li class="m-menu__channel__item" role="menuitem"><a href="" class="m-menu__channel__link">Rádios</a></li>
                    <li class="m-menu__channel__item" role="menuitem"><a href="" class="m-menu__channel__link" id="btn-menu-channel"><i class="fa fa-plus"></i></a></li>
                  </ul>

                  

                  <div class="l-header__channel__menuFull" id="menu-channel">

                    <div class="l-header__channelFull__container" id="render-Menuchannel"></div>
                    
                    <div class="l-nav-channel">

                      <ul class="m-nav-channel">
                        <li class="m-nav-channel__item"><a href="" class="m-nav-channel__link"><img src="images/icon-band.png" alt="" class="m-nav-channel__img"></a></li>
                        <li class="m-nav-channel__item"><a href="" class="m-nav-channel__link"><img src="images/icon-bandnews.png" alt="" class="m-nav-channel__img"></a></li>
                        <li class="m-nav-channel__item"><a href="" class="m-nav-channel__link"><img src="images/icon-bandsports.png" alt="" class="m-nav-channel__img"></a></li>
                        <li class="m-nav-channel__item"><a href="" class="m-nav-channel__link"><img src="images/icon-terraviva.png" alt="" class="m-nav-channel__img"></a></li>
                        <li class="m-nav-channel__item"><a href="" class="m-nav-channel__link"><img src="images/icon-arte1.png" alt="" class="m-nav-channel__img"></a></li>
                        <li class="m-nav-channel__item"><a href="" class="m-nav-channel__link"><img src="images/icon-bandint.png" alt="" class="m-nav-channel__img"></a></li>
                        <li class="m-nav-channel__item"><a href="" class="m-nav-channel__link"><span class="m-nav-channel__title">emissoras da rede</span></a></li>
                      </ul>

                    </div>

                  </div> 

                </nav>

                <ul class="m-share">
                  <li class="m-share__item"><a href="" class="m-share__link m-share__link--facebook"></a></li>
                  <li class="m-share__item"><a href="" class="m-share__link m-share__link--twitter"></a></li>
                </ul>

                <form Method="GET" action="/" class="l-search">

                  <input type="text" name="name" placeholder="Buscar" id="search" class="l-search__input">
                    
                  <label for="search" class="m-share__link m-share__link--search"></label>

                </form>
                
              </div>

          </div>

          <div class="l-header__dynamic">

            <div class="l-header__dynamic__container">

              <div class="l-header__dynamic__menu">

                <ul class="m-menu__channel" role="menubar" id="menu-dynamic"></ul>

              </div>

              <div class="l-header__dynamic__onair" id="on-air"></div>

              <div class="l-header__dynamic__weather" id="weather"></div>

            </div>

          </div>

        </header>  
    `)
  }

  this.createMarkupMenu = (menu) => {
    return menu.map(item => `
      <div class="l-header__channelFull__item">
        <a href="${item.base_Url}" class="m-menu__channelFull__item m-menu__channelFull__title">${item.name} <i class="fa fa-caret-down" aria-hidden="true"></i></a>
        <ul class="m-menu__channelFull">
          ${item.programs.map((subitem) => {
            if(subitem.active) {
              return `<li class="m-menu__channelFull__item" role="menuitem"><a href="${subitem.base_Url}" class="m-menu__channelFull__link">${subitem.name}</a></li>`
            }
          }).join('')}
        </ul>
      </div>
    `).join('');
  }

  this.markupMenuDynamic = (link) => {
    return link.map((item) => {
      if(item.active){
        return `<li class="m-menu__channel__item" role="menuitem"><a href="${item.base_url}" class="m-menu__channel__link m-menu__channel__link--cor-grey">${item.name}</a></li>`
      }
    }).join('')
  }

  this.markupLive = (live) => {
    return (`
      <a href="${live[0].link}" class="m-onair"><span class="m-onair__icon">ao vivo</span> ${live[0].name}</a>
    `)
  }

  this.markupWeather = (weather) => {
    return (`
      <a href="http://tvterraviva.band.uol.com.br/meteorologia/" target="_blank" title="${(weather.iconeReal == 'N/D') ? buscarDescricao(weather.dias[0].icon) : buscarDescricao(weather.iconeReal)}" class="m-weather">
			<span class="m-weather__description">${weather.cidade}</span>
			<img class="m-weather__icon" src="http://www.band.uol.com.br/includes/views/templates/header/images/icon/${(weather.iconeReal == 'N/D') ? weather.dias[0].icon : weather.iconeReal}.png" alt="">
			<span class="m-weather__description">${(weather.treal == 'N/D') ? '' : `${weather.treal}°`}</span>
		</a>
    `)
  }

  const buscarDescricao =(icone) => {
    let obj = icones.filter(function(obj) {
        return obj.icone === icone;
    });

    return obj[0].descricao;
  }
}