-
- Requests
- Analytics
+
+
+
@@ -302,6 +307,54 @@
+
+
+
+
+ Save
+
+
Dashboard
-
+
+ Analytics
+ Requests
- No requests
+No articles
+
+
+
+ + Edit +
+
+
+ Title
+
+
+ Summary
+
+
+ Art
+ Culture
+ Entertainment
+ Politics
+ Science
+ Sports
+ Tech
+
+
+ Select category
+
+
+
+ Add tags
+
@@ -335,6 +388,31 @@
+
+
+
+
@@ -661,7 +739,7 @@
await Promise.all([
floCloudAPI.requestObjectData('publishedVc'),
floCloudAPI.requestGeneralData('publishing_requests', {
- callback: (d, e) => renderPublishingRequests(d)
+ callback: (d, e) => renderDashboard(d)
})
])
break;
@@ -778,14 +856,29 @@
},
requestCard(details) {
const { message: { articleID, category, title }, time, vectorClock } = details
- if (floGlobals.appObjects.publishedVc[vectorClock]) return
- const clone = getRef('request_template').content.cloneNode(true).firstElementChild
- clone.dataset.vc = vectorClock
- clone.querySelector('.request-card__title').textContent = title
- clone.querySelector('.request-card__time').textContent = getFormattedTime(time)
- clone.querySelector('.publish-button').textContent = floGlobals.appObjects['articles'].hasOwnProperty(articleID) ? 'Update' : 'Publish'
+ if (floGlobals.appObjects.publishedVc[vectorClock]) {
+ // const requestTime = parseInt(vectorClock.split('_')[0])
+ // if ((Date.now() - requestTime) / 1000 > 604800) {
+ // delete floGlobals.appObjects.publishedVc[vectorClock]
+ // }
+ } else {
+ const clone = getRef('request_template').content.cloneNode(true).firstElementChild
+ clone.dataset.vc = vectorClock
+ clone.querySelector('.request-card__title').textContent = title
+ clone.querySelector('.request-card__time').textContent = getFormattedTime(time)
+ clone.querySelector('.publish-button').textContent = floGlobals.appObjects['articles'].hasOwnProperty(articleID) ? 'Update' : 'Publish'
+ return clone
+ }
+ },
+ articleRow(articleID) {
+ const { category, title, published, votes } = floGlobals.appObjects.articles[articleID]
+ const clone = getRef('article_row_template').content.cloneNode(true).firstElementChild
+ clone.querySelector('.article-card__title').textContent = title
+ clone.querySelector('.article-row__published').textContent = relativeTime.from(published)
+ clone.querySelector('.article-row__votes').textContent = votes
+ clone.querySelector('.edit-article').dataset.articleId = articleID
return clone
- }
+ },
}
const getArticles = async () => {
@@ -809,13 +902,9 @@
}
function renderHomepage() {
- const sortedArticles = getArrayOfObj(floGlobals.appObjects.articles).sort((a, b) => b.published - a.published)
const frag = document.createDocumentFragment()
- sortedArticles.slice(0, 5).forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
- getRef('latest_articles_list').innerHTML = ''
- getRef('latest_articles_list').append(frag)
-
- const categories = ['Art', 'Politics', 'Science', 'Tech']
+ // Render article topics
+ const categories = ['Art', 'Culture', 'Politics', 'Science', 'Tech']
categories.forEach(category => frag.append(createElement('a', {
textContent: category,
attributes: { href: `#/explore?type=category&query=${category.toLowerCase()}` },
@@ -823,7 +912,31 @@
})))
getRef('news_categories_list').innerHTML = ''
getRef('news_categories_list').append(frag)
-
+ // render latest articles
+ const arrOfArticles = getArrayOfObj(floGlobals.appObjects.articles)
+ const sortedArticles = arrOfArticles.sort((a, b) => b.published - a.published)
+ sortedArticles.slice(0, 4).forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
+ getRef('latest_articles_list').innerHTML = ''
+ getRef('latest_articles_list').append(frag)
+ // Render trending article card
+ let highestRatedArticle = arrOfArticles[0]
+ for (let i = 1; i < arrOfArticles.length; i++) {
+ if (highestRatedArticle.votes < arrOfArticles[i].votes) {
+ highestRatedArticle = arrOfArticles[i]
+ }
+ }
+ const { category, title, published, readTime, summary, uid } = highestRatedArticle
+ getRef('trending_article_container').innerHTML = `
+ ${category}
+
+
+
+
+
+
+
+
+
+
+ ${title}
+
+ ${readTime} Min read•
+
+ ${summary}
+ + ` } const openedArticles = {} @@ -843,17 +956,13 @@ }) getRef('article_contributors').innerHTML = '' getRef('article_contributors').append(frag) + // implement live voting if (!openedArticles.hasOwnProperty(articleID)) { floCloudAPI.requestGeneralData(`article_${articleID}_votes`, { - lowerVectorClock: floGlobals.appObjects.articles[articleID].lastCountedVC, + lowerVectorClock: floGlobals.appObjects.articles[articleID].lastCountedVC + 1, callback: (allVotes, e) => { if (firstLoad) { - let first = true for (const vote in allVotes) { - if (first) { - first = false - continue - } floGlobals.appObjects.articles[articleID].votes += allVotes[vote].message.voteCount || 1 } getRef('like_count').textContent = floGlobals.appObjects.articles[articleID].votes @@ -883,65 +992,6 @@ getRef('query_results_list').append(frag) } - async function renderPublishingRequests() { - const requests = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`] - const frag = document.createDocumentFragment() - for (const key in requests) { - const card = render.requestCard(requests[key]) - if (card) - frag.prepend(card) - } - getRef('publishing_requests').innerHTML = '' - getRef('publishing_requests').append(frag) - } - - function handleRequestClick(e) { - if (e.target.closest('.publish-button')) { - const button = e.target.closest('.publish-button'); - const vc = button.closest('.request-card').dataset.vc; - const { message: { articleID, category, content, contributors, title, tags, readTime }, vectorClock } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc]; - const isPublished = floGlobals.appObjects['articles'].hasOwnProperty(articleID) - getConfirmation(`${isPublished ? 'Update' : 'Publish'} article?`).then(res => { - if (res) { - floGlobals.appObjects['publishedVc'][vectorClock] = true - floGlobals.appObjects.articlesContent[articleID] = content - if (isPublished) { - floGlobals.appObjects['articles'][articleID]['updated'] = Date.now(); - } else { - floGlobals.appObjects.articles[articleID] = { - published: Date.now(), - votes: 0, - lastCountedVC: '' - } - } - floGlobals.appObjects['articles'][articleID].category = category - floGlobals.appObjects['articles'][articleID].contributors = contributors - floGlobals.appObjects['articles'][articleID].title = title - floGlobals.appObjects['articles'][articleID].tags = tags - floGlobals.appObjects['articles'][articleID].readTime = readTime - Promise.all([ - floCloudAPI.updateObjectData('articles'), - floCloudAPI.updateObjectData('publishedVc'), - floCloudAPI.updateObjectData('articlesContent'), - ]).then(() => { - notify(`${isPublished ? 'Updated' : 'Published'} article`, 'success') - button.closest('.request-card').remove() - }) - } - }) - } else if (e.target.closest('.preview-button')) { - const button = e.target.closest('.preview-button'); - const vc = button.closest('.request-card').dataset.vc; - const { message: { content, title } } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc]; - - getRef('preview_container').innerHTML = DOMPurify.sanitize(content) - getRef('preview_container').prepend(createElement('h1', { - textContent: title - })) - showPopup('preview_popup') - } - } - let isSearchOn = false function toggleSearch() { const animOptions = { @@ -1095,7 +1145,6 @@ } }) function animateLikeCount(voteCount = 1, articleID) { - console.log('called') const animOptions = { fill: 'forwards', duration: 150, @@ -1131,6 +1180,187 @@ } }, 300)) + async function renderDashboard() { + const requests = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`] + const frag = document.createDocumentFragment() + for (const key in requests) { + const card = render.requestCard(requests[key]) + if (card) + frag.prepend(card) + } + floCloudAPI.updateObjectData('publishedVc') + getRef('publishing_requests').innerHTML = '' + getRef('publishing_requests').append(frag) + + for (const articleKey in floGlobals.appObjects.articles) { + const card = render.articleRow(articleKey) + frag.prepend(card) + } + getRef('article_analytics').innerHTML = '' + getRef('article_analytics').append(frag) + } + + function publishArticle(vc) { + const { message: { articleID, content, contributors, title, readTime }, vectorClock } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc]; + const isPublished = floGlobals.appObjects['articles'].hasOwnProperty(articleID) + getConfirmation(`${isPublished ? 'Update' : 'Publish'} article?`).then(res => { + if (res) { + const { title, category, summary, published, tags } = getArticleMeta() + floGlobals.appObjects['publishedVc'][vectorClock] = true + floGlobals.appObjects.articlesContent[articleID] = content + if (isPublished) { + floGlobals.appObjects['articles'][articleID]['updated'] = Date.now(); + } else { + floGlobals.appObjects.articles[articleID] = { + published: Date.now(), + votes: 0, + lastCountedVC: '' + } + floGlobals.appObjects.articleVotes[articleID] = { votes: {} } + } + floGlobals.appObjects['articles'][articleID].category = category + floGlobals.appObjects['articles'][articleID].contributors = contributors + floGlobals.appObjects['articles'][articleID].title = title + floGlobals.appObjects['articles'][articleID].tags = tags + floGlobals.appObjects['articles'][articleID].readTime = readTime + floGlobals.appObjects['articles'][articleID].summary = summary + Promise.all([ + floCloudAPI.updateObjectData('articles'), + floCloudAPI.updateObjectData('publishedVc'), + floCloudAPI.updateObjectData('articlesContent'), + floCloudAPI.updateObjectData('articleVotes'), + ]).then(() => { + notify(`${isPublished ? 'Updated' : 'Published'} article`, 'success') + button.closest('.request-card').remove() + }) + } + }) + } + + function handleRequestClick(e) { + if (e.target.closest('.publish-button')) { + const button = e.target.closest('.publish-button'); + const vc = button.closest('.request-card').dataset.vc; + const { message: { articleID, title } } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc] + const isPublished = floGlobals.appObjects['articles'].hasOwnProperty(articleID) + setArticleMeta({ title }) + showPopup('edit_popup') + } else if (e.target.closest('.preview-button')) { + const button = e.target.closest('.preview-button'); + const vc = button.closest('.request-card').dataset.vc; + const { message: { content, title } } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc]; + + getRef('preview_container').innerHTML = DOMPurify.sanitize(content) + getRef('preview_container').prepend(createElement('h1', { + textContent: title + })) + showPopup('preview_popup') + } + } + + function setArticleMeta(details) { + const { category, title, tags, summary, published } = details + getRef('edit_title').value = title; + getRef('edit_summary').value = summary || ''; + getRef('edit_category').value = category || ''; + getRef('edit_tags').value = tags || []; + const now = Date.now() + getRef('edit_published').value = new Date(published || now).toISOString().substr(0, new Date(published || now).toISOString().indexOf(".")) + } + function getArticleMeta() { + return { + title: getRef('edit_title').value.trim(), + category: getRef('edit_category').value, + summary: getRef('edit_summary').value.trim(), + published: getRef('edit_published').value, + tags: getRef('edit_tags').value, + } + } + function handleAnalyticsClick(e) { + if (e.target.closest('.edit-article')) { + const button = e.target.closest('.edit-article'); + const articleID = button.dataset.articleId; + setArticleMeta(floGlobals.appObjects.articles[articleID]) + showPopup('edit_popup') + } + } + + function updateArticle() { + getConfirmation('Update article meta data?').then(res => { + if (res) { + const { title, category, summary, published, tags } = getArticleMeta() + floGlobals.appObjects['articles'][articleID].category = category + floGlobals.appObjects['articles'][articleID].title = title + floGlobals.appObjects['articles'][articleID].tags = tags + floGlobals.appObjects['articles'][articleID].summary = summary + Promise.all([ + floCloudAPI.updateObjectData('articles'), + floCloudAPI.updateObjectData('publishedVc'), + ]).then(() => { + notify(`Updated article meta data`, 'success') + }) + } + }) + } + + async function calculateVotes() { + await floCloudAPI.requestObjectData('articleVotes') + const articlesVotesProm = [] + const articleIDs = [] + for (const articleKey in floGlobals.appObjects.articles) { + if (floGlobals.appObjects.articleVotes.hasOwnProperty(articleKey) && floGlobals.appObjects.articles[articleKey].lastCountedVC !== '') { + articlesVotesProm.push( + floCloudAPI.requestGeneralData(`article_${articleKey}_votes`, { + lowerVectorClock: floGlobals.appObjects.articles[articleKey].lastCountedVC + 1 + }) + ) + } else { + articlesVotesProm.push( + floCloudAPI.requestGeneralData(`article_${articleKey}_votes`) + ) + } + articleIDs.push(articleKey) + } + Promise.all(articlesVotesProm).then(res => { + res.forEach((articleVotes, index) => { + if (!floGlobals.appObjects.articleVotes.hasOwnProperty(articleIDs[index])) { + floGlobals.appObjects.articleVotes[articleIDs[index]].votes = {} + } + if (floGlobals.appObjects.articles[articleIDs[index]].lastCountedVC === '') { + articleVotes = floGlobals.generalData[`article_${articleIDs[index]}_votes|${floGlobals.adminID}|${floGlobals.application}`] + } + for (const voteKey in articleVotes) { + const { senderID, message: { voteCount }, type, vectorClock, time } = articleVotes[voteKey] + const { votes } = floGlobals.appObjects.articleVotes[articleIDs[index]]; + if (votes[senderID]) { + floGlobals.appObjects.articleVotes[articleIDs[index]].votes[senderID] += voteCount || 1 + } else { + floGlobals.appObjects.articleVotes[articleIDs[index]].votes[senderID] = voteCount || 1 + } + floGlobals.appObjects.articles[articleIDs[index]].lastCountedVC = vectorClock + } + let totalArticleVotes = 0 + for (const voter in floGlobals.appObjects.articleVotes[articleIDs[index]].votes) { + totalArticleVotes += floGlobals.appObjects.articleVotes[articleIDs[index]].votes[voter] + } + floGlobals.appObjects.articles[articleIDs[index]].votes = totalArticleVotes + }) + Promise.all([ + floCloudAPI.updateObjectData('articles'), + floCloudAPI.updateObjectData('articleVotes') + ]) + .then(() => { + console.log('calculated votes') + }) + }) + floGlobals.appObjects.articlesContent = await compactIDB.readData('appObjects', 'articlesContent') + } + + getRef('section_selector').addEventListener('change', e => { + document.querySelectorAll('.admin-section').forEach(section => section.classList.add('hide-completely')) + getRef(`${e.target.value}_section`).classList.remove('hide-completely') + }) + function getSignedIn() { return new Promise((resolve, reject) => { @@ -1167,68 +1397,12 @@ floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID) if (floGlobals.isSubAdmin) { getRef('publishing_requests').addEventListener('click', handleRequestClick); + getRef('article_analytics').addEventListener('click', handleAnalyticsClick); document.querySelectorAll('.admin-option').forEach(elem => elem.classList.remove('hide-completely')); - await floCloudAPI.requestObjectData('articleVotes') - const articlesVotesProm = [] - const articleIDs = [] - for (const articleKey in floGlobals.appObjects.articles) { - if (floGlobals.appObjects.articleVotes[articleKey] & floGlobals.appObjects.articleVotes[articleKey].lastCountedVC !== '') { - articlesVotesProm.push( - floCloudAPI.requestGeneralData(`article_${articleKey}_votes`), - { - lowerVectorClock: floGlobals.appObjects.articleVotes[articleKey].lastCountedVC - } - ) - } else { - articlesVotesProm.push( - floCloudAPI.requestGeneralData(`article_${articleKey}_votes`) - ) - } - articleIDs.push(articleKey) - } - Promise.all(articlesVotesProm).then(res => { - res.forEach((articleVotes, index) => { - if (!floGlobals.appObjects.articleVotes.hasOwnProperty(articleIDs[index])) { - floGlobals.appObjects.articleVotes[articleIDs[index]].votes = {} - floGlobals.appObjects.articles[articleIDs[index]].lastCountedVC = '' - } - let isFirst - if (floGlobals.appObjects.articles[articleIDs[index]].lastCountedVC === '') { - articleVotes = floGlobals.generalData[`article_${articleIDs[index]}_votes|${floGlobals.adminID}|${floGlobals.application}`] - } else { - isFirst = true - } - for (const voteKey in articleVotes) { - const { senderID, message: { voteCount }, type, vectorClock } = articleVotes[voteKey] - if (isFirst && floGlobals.appObjects.articles[articleIDs[index]].lastCountedVC === vectorClock) { // Skip over already counted VC - isFirst = false - continue - } - const { votes, lastCountedVC } = floGlobals.appObjects.articleVotes[articleIDs[index]]; - if (votes[senderID]) { - floGlobals.appObjects.articleVotes[articleIDs[index]].votes[senderID] += voteCount || 1 - } else { - floGlobals.appObjects.articleVotes[articleIDs[index]].votes[senderID] = voteCount || 1 - } - floGlobals.appObjects.articles[articleIDs[index]].lastCountedVC = vectorClock - } - let totalArticleVotes = 0 - for (const voter in floGlobals.appObjects.articleVotes[articleIDs[index]].votes) { - totalArticleVotes += floGlobals.appObjects.articleVotes[articleIDs[index]].votes[voter] - } - floGlobals.appObjects.articles[articleIDs[index]].votes = totalArticleVotes - }) - Promise.all([ - floCloudAPI.updateObjectData('articles'), - floCloudAPI.updateObjectData('articleVotes') - ]) - .then(() => { - console.log('calculated votes') - }) - }) - floGlobals.appObjects.articlesContent = await compactIDB.readData('appObjects', 'articlesContent') + calculateVotes() } else { getRef('publishing_requests').removeEventListener('click', handleRequestClick) + getRef('article_analytics').removeEventListener('click', handleAnalyticsClick); document.querySelectorAll('.admin-option').forEach(elem => elem.classList.add('hide-completely')) } if (location.hash.includes('sign_in') || location.hash.includes('sign_up'))