gCubeSystem
/
web-components
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

d4s-social-post webcomponent updated: expoited the new get posts by range, added comments fetch

This commit is contained in:
Vincenzo Cestone 2022-10-26 16:32:36 +02:00
parent 12d3d7eb97
commit ec9eceba80
1 changed files with 121 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
social/d4s-social.js
View File

@ -1,14 +1,19 @@
/**
* 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 {
#basepath = 'https://api.d4science.org/rest'
//#basepath = 'https://api.dev.d4science.org/rest'
#quantity = 20
#boot = null;
#data = null;
#shadowRoot = null;
#from = 1
#quantity = 10
#boot = 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() {
super()
@ -17,52 +22,123 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement {
}
connectedCallback() {
this.fetchPosts()
if (this.#boot) {
this.fetchPosts()
} else {
console.error('<d4s-boot-2> webcomponent not found in this page')
}
}
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 => {
if(reply.status !== 200) throw "Unable to fetch posts";
if(reply.status !== 200) throw "status=" + reply.status
return reply.json()
}).then(data => {
//console.log(data)
this.#data = data
this.renderPosts()
//this.rawRenderPosts()
}).catch(err => console.error("Unable to fetch posts " + err))
}).catch(err => console.error("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>
this.#data.result.posts.forEach(post => {
var li = document.createElement('li')
li.id = post.key
li.classList.add('d4s-social-post')
const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + post.thumbnail_url : post.thumbnail_url
const datetime = new Date(0)
datetime.setUTCMilliseconds(post.time)
const datetimestr = datetime.toLocaleString()
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-body">${post.description}</div>
<div class="d4s-post-footer"></div>
`
ul.appendChild(li)
<div class="d4s-post-meta">
<div class="fullname">${post.full_name}</div>
<div class="time">${datetimestr}</div>
</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)
}
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() {
return ["url", "quantity"];
return ["url", "from", "quantity"];
}
attributeChangedCallback(name, oldValue, newValue) {
@ -71,6 +147,9 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement {
case "url":
this.#basepath = newValue
break
case "from":
this.#from = newValue
break
case "quantity":
this.#quantity = newValue
break
@ -87,6 +166,15 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement {
this.setAttribute("url", url)
}
get from() {
return this.#from
}
set from(from) {
this.#from = from
this.setAttribute("from", from)
}
get quantity() {
return this.#quantity
}