web-components/social/d4s-social.js

/**
 * Prints VRE d4s-social-posts (limiting to @quantity number)
 */
window.customElements.define('d4s-social-posts', class extends HTMLElement {

    #basepath = 'https://api.d4science.org/rest'
    //#basepath = 'https://api.dev.d4science.org/rest'
    #quantity = 20
    #boot = null;
    #data = null;
    #shadowRoot = null;
    
    constructor() {
      super()
      this.#boot = document.querySelector("d4s-boot-2")
      this.#shadowRoot = this.attachShadow({mode: 'open'})
    }

    connectedCallback() {
      this.fetchPosts()
    }

    fetchPosts(){
      const url = this.#basepath + '/2/posts/get-posts-vre'
      this.#boot.secureFetch(url).then(
        reply=>{
          if(reply.status !== 200) throw "Unable to fetch posts";
          return reply.json()
        }
      ).then(data => {
        this.#data = data
        this.renderPosts() 
      }).catch(err=>alert("Unable to fetch posts " + err))
      
    }
    
    renderPosts(){
      var ul = document.createElement('ul')
      this.#data.result.reverse().forEach(post => {
        if (this.#quantity-- > 0) {
          var li = document.createElement('li')
          li.setAttribute('class', 'd4s-social-post')
          const datetime = new Date(0)
          datetime.setUTCMilliseconds(post.time)
          const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + post.thumbnail_url : post.thumbnail_url
          li.innerHTML = `
            <div class="d4s-post-heading">
                <div class="d4s-post-avatar">
                    <img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
                </div>
                <div class="d4s-post-meta">
                    <div class="fullname">${post.full_name}</div>
                    <div class="time">${datetime.toLocaleString()}</div>
                </div>
            </div>
            <div class="d4s-post-body">${post.description}</div>
            <div class="d4s-post-footer"></div>
        `
        ul.appendChild(li)
      }
    })
    this.#shadowRoot.appendChild(ul)
  }

  static get observedAttributes() {
      return ["url", "quantity"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      switch (name) {
        case "url":
            this.#basepath = newValue
            break
        case "quantity":
            this.#quantity = newValue
            break
      }
    }
  }
  
  get url() {
    return this.#basepath
  }

  set url(url) {
    this.#basepath = url
    this.setAttribute("url", url)
  }

  get quantity() {
    return this.#quantity
  }

  set quantity(quantity) {
    this.#quantity = quantity
    this.setAttribute("quantity", quantity)       
  }
})


window.customElements.define('d4s-social-search', class extends HTMLElement {

    constructor() {
        super()
    }

    connectedCallback() {
        //console.log(typeof d4s)
        //console.log(this)
        //this.attachShadow({mode: "open"})
        //console.log(this.shadowRoot.querySelector("*[name=search]"))
        //const shadowRoot = this.attachShadow({mode: 'open'})
        //console.log(shadowRoot.innerHTML)
        console.log("d4s-social-search connectedCallback")
        var d4s = document.querySelector('d4s-boot-2')

        /*
        d4s.service(
            'https://api.dev.d4science.org/rest/2/full-text-search/search-by-query?query=d4science',
            'GET', null,
            (resp) => {
                document.getElementById('output').innerText = resp
            },
            () => { alert('Forbidden') }
        )

        d4s.service(
            'https://api.dev.d4science.org/rest/2/posts/get-posts-user-quantity',
            'GET', null,
            (resp) => {
                document.getElementById('output').innerText = resp
            },
            () => { alert('Forbidden') }
        )
        */
    }
})