d4s-social-post webcomponent updated: expoited the new get posts by range, added comments fetch
This commit is contained in:
parent
12d3d7eb97
commit
ec9eceba80
|
@ -1,15 +1,20 @@
|
||||||
/**
|
/**
|
||||||
* Prints VRE d4s-social-posts (limiting to @quantity number)
|
* Prints VRE d4s-social-posts (from @from to @quantity number)
|
||||||
*/
|
*/
|
||||||
window.customElements.define('d4s-social-posts', class extends HTMLElement {
|
window.customElements.define('d4s-social-posts', class extends HTMLElement {
|
||||||
|
|
||||||
#basepath = 'https://api.d4science.org/rest'
|
#basepath = 'https://api.d4science.org/rest'
|
||||||
//#basepath = 'https://api.dev.d4science.org/rest'
|
//#basepath = 'https://api.dev.d4science.org/rest'
|
||||||
#quantity = 20
|
#from = 1
|
||||||
#boot = null;
|
#quantity = 10
|
||||||
#data = null;
|
#boot = null
|
||||||
#shadowRoot = null;
|
#data = null
|
||||||
|
#shadowRoot = null
|
||||||
|
|
||||||
|
//const url = this.#basepath + '/2/posts/get-posts-vre' // old get, gets all posts unfiltered
|
||||||
|
#restRecentPosts = '/2/posts/get-recent-posts-vre-by-range'
|
||||||
|
#restComments = '/2/comments/get-comments-by-post-id'
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super()
|
super()
|
||||||
this.#boot = document.querySelector("d4s-boot-2")
|
this.#boot = document.querySelector("d4s-boot-2")
|
||||||
|
@ -17,52 +22,123 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this.fetchPosts()
|
if (this.#boot) {
|
||||||
|
this.fetchPosts()
|
||||||
|
} else {
|
||||||
|
console.error('<d4s-boot-2> webcomponent not found in this page')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchPosts() {
|
fetchPosts() {
|
||||||
const url = this.#basepath + '/2/posts/get-posts-vre'
|
const url = new URL(this.#basepath + this.#restRecentPosts)
|
||||||
|
var params = {from: this.#from, quantity: this.#quantity}
|
||||||
|
url.search = new URLSearchParams(params).toString()
|
||||||
|
|
||||||
this.#boot.secureFetch(url).then(reply => {
|
this.#boot.secureFetch(url).then(reply => {
|
||||||
if(reply.status !== 200) throw "Unable to fetch posts";
|
if(reply.status !== 200) throw "status=" + reply.status
|
||||||
return reply.json()
|
return reply.json()
|
||||||
|
|
||||||
}).then(data => {
|
}).then(data => {
|
||||||
|
//console.log(data)
|
||||||
this.#data = data
|
this.#data = data
|
||||||
this.renderPosts()
|
this.renderPosts()
|
||||||
|
//this.rawRenderPosts()
|
||||||
|
|
||||||
}).catch(err => console.error("Unable to fetch posts " + err))
|
}).catch(err => console.error("Unable to fetch posts. " + err))
|
||||||
}
|
}
|
||||||
|
|
||||||
renderPosts() {
|
renderPosts() {
|
||||||
var ul = document.createElement('ul')
|
var ul = document.createElement('ul')
|
||||||
this.#data.result.reverse().forEach(post => {
|
this.#data.result.posts.forEach(post => {
|
||||||
if (this.#quantity-- > 0) {
|
var li = document.createElement('li')
|
||||||
var li = document.createElement('li')
|
li.id = post.key
|
||||||
li.setAttribute('class', 'd4s-social-post')
|
li.classList.add('d4s-social-post')
|
||||||
const datetime = new Date(0)
|
const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + post.thumbnail_url : post.thumbnail_url
|
||||||
datetime.setUTCMilliseconds(post.time)
|
const datetime = new Date(0)
|
||||||
const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + post.thumbnail_url : post.thumbnail_url
|
datetime.setUTCMilliseconds(post.time)
|
||||||
li.innerHTML = `
|
const datetimestr = datetime.toLocaleString()
|
||||||
<div class="d4s-post-heading">
|
li.innerHTML = `
|
||||||
<div class="d4s-post-avatar">
|
<div class="d4s-post-heading">
|
||||||
<img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
|
<div class="d4s-post-avatar">
|
||||||
</div>
|
<img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
|
||||||
<div class="d4s-post-meta">
|
|
||||||
<div class="fullname">${post.full_name}</div>
|
|
||||||
<div class="time">${datetime.toLocaleString()}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d4s-post-body">${post.description}</div>
|
<div class="d4s-post-meta">
|
||||||
<div class="d4s-post-footer"></div>
|
<div class="fullname">${post.full_name}</div>
|
||||||
`
|
<div class="time">${datetimestr}</div>
|
||||||
ul.appendChild(li)
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d4s-post-body">${post.description}</div>
|
||||||
|
<div class="d4s-post-footer">
|
||||||
|
<div class="comments-nr">${post.comments_no}</div>
|
||||||
|
<div class="likes-nr">${post.likes_no}</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
ul.appendChild(li)
|
||||||
|
|
||||||
|
if (post.comments_no > 0) {
|
||||||
|
this.fetchComments(post.key)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.#shadowRoot.appendChild(ul)
|
this.#shadowRoot.appendChild(ul)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
rawRenderPosts() {
|
||||||
|
var pre = document.createElement('pre')
|
||||||
|
console.log(this.#data)
|
||||||
|
pre.innerText = JSON.stringify(this.#data, null, " ")
|
||||||
|
this.#shadowRoot.appendChild(pre)
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchComments(postid) {
|
||||||
|
const url = new URL(this.#basepath + this.#restComments)
|
||||||
|
var params = {key: postid}
|
||||||
|
url.search = new URLSearchParams(params).toString()
|
||||||
|
|
||||||
|
this.#boot.secureFetch(url).then(reply => {
|
||||||
|
if(reply.status !== 200) throw "status=" + reply.status
|
||||||
|
return reply.json()
|
||||||
|
|
||||||
|
}).then(data => {
|
||||||
|
this.renderComments(postid, data)
|
||||||
|
|
||||||
|
}).catch(err => console.error(`Unable to fetch comments for post ${postid}. ` + err))
|
||||||
|
}
|
||||||
|
|
||||||
|
renderComments(postid, comments) {
|
||||||
|
console.log(comments)
|
||||||
|
var li = this.#shadowRoot.getElementById(postid)
|
||||||
|
console.log(li)
|
||||||
|
var cul = document.createElement('ul')
|
||||||
|
cul.classList.add('d4s-post-comments')
|
||||||
|
comments.result.forEach(comment => {
|
||||||
|
var cli = document.createElement('li')
|
||||||
|
cli.id = comment.feedid
|
||||||
|
cli.classList.add('d4s-comment')
|
||||||
|
const thumbnail = (!comment.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + comment.thumbnail_url : comment.thumbnail_url
|
||||||
|
const datetime = new Date(0)
|
||||||
|
datetime.setUTCMilliseconds(comment.time)
|
||||||
|
const datetimestr = datetime.toLocaleString()
|
||||||
|
cli.innerHTML = `
|
||||||
|
<div class="d4s-comment-heading">
|
||||||
|
<div class="d4s-comment-avatar">
|
||||||
|
<img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="d4s-comment-meta">
|
||||||
|
<div class="fullname">${comment.full_name}</div>
|
||||||
|
<div class="time">${datetimestr}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d4s-comment-body">${comment.text}</div>
|
||||||
|
<div class="d4s-comment-footer">
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
cul.appendChild(cli)
|
||||||
|
})
|
||||||
|
li.appendChild(cul)
|
||||||
|
}
|
||||||
|
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
return ["url", "quantity"];
|
return ["url", "from", "quantity"];
|
||||||
}
|
}
|
||||||
|
|
||||||
attributeChangedCallback(name, oldValue, newValue) {
|
attributeChangedCallback(name, oldValue, newValue) {
|
||||||
|
@ -71,6 +147,9 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement {
|
||||||
case "url":
|
case "url":
|
||||||
this.#basepath = newValue
|
this.#basepath = newValue
|
||||||
break
|
break
|
||||||
|
case "from":
|
||||||
|
this.#from = newValue
|
||||||
|
break
|
||||||
case "quantity":
|
case "quantity":
|
||||||
this.#quantity = newValue
|
this.#quantity = newValue
|
||||||
break
|
break
|
||||||
|
@ -87,13 +166,22 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement {
|
||||||
this.setAttribute("url", url)
|
this.setAttribute("url", url)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get from() {
|
||||||
|
return this.#from
|
||||||
|
}
|
||||||
|
|
||||||
|
set from(from) {
|
||||||
|
this.#from = from
|
||||||
|
this.setAttribute("from", from)
|
||||||
|
}
|
||||||
|
|
||||||
get quantity() {
|
get quantity() {
|
||||||
return this.#quantity
|
return this.#quantity
|
||||||
}
|
}
|
||||||
|
|
||||||
set quantity(quantity) {
|
set quantity(quantity) {
|
||||||
this.#quantity = quantity
|
this.#quantity = quantity
|
||||||
this.setAttribute("quantity", quantity)
|
this.setAttribute("quantity", quantity)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue