Merge pull request #6 from SuperFola/feat/content-selector

feat/content selector

public/javascripts/main.js

@@ -1,3 +1,5 @@
+const States = ["all", "read", "unread"]
+
 function focus_ce(node) {
     let setpos = document.createRange()
     let set = window.getSelection()
@@ -341,7 +343,7 @@ async function edit_note(articleID) {
                 let span = document.createElement("span")
                 span.classList.add("tag")
                 span.style.backgroundColor = "ffffff"
-                span.innerHTML= `<a href="/articles/tagged/${tag_name}">${tag_name}</a>`
+                span.innerHTML = `<a href="/articles/tagged/${tag_name}">${tag_name}</a>`
 
                 create_delete_tag_btn(span)
 
@@ -387,3 +389,30 @@ async function edit_tag(tagID) {
     const res = await req.json()
     document.getElementById("color").value = "#" + res.color
 }
+
+document.onreadystatechange = () => {
+    if (document.readyState !== 'complete') {
+        return;
+    }
+
+    // executed once the page is loaded
+    let selector = document.getElementById("content_selector")
+    if (selector) {
+        selector.onchange = (event) => {
+            if (States.includes(event.target.value)) {
+                let pathname = document.location.pathname
+                let slash_pos = document.location.pathname.substr(1).indexOf('/')
+                pathname = pathname.substr(0, slash_pos !== -1 ? slash_pos + 1 : pathname.length)
+                document.location = `${document.location.pathname}?state=${event.target.value}`
+            }
+        }
+    }
+
+    const url = new URL(document.location.href)
+    const state = url.searchParams.get("state")
+    if (States.includes(state)) {
+        Array.from(selector.options).forEach(el => {
+            el.selected = el.value === state
+        })
+    }
+}

public/stylesheets/style.css

@@ -56,6 +56,18 @@ h1, h2, p {
   width: 100%;
 }
 
+#page_title {
+  display: flex;
+}
+
+#page_title_suffix {
+  flex-grow: 2;
+}
+
+#content_selector {
+  align-self: stretch;
+}
+
 .article {
   background-color: rgb(250, 248, 245);
   margin: 1em;

routes/articles.js

@@ -14,7 +14,6 @@ function pagger(page, length, condition = _ => true) {
 }
 
 const MaxPerPage = 25
-
 const FrozenArticlesAttributes = ["id", "length", "added_on"]
 
 async function calculateLength(url) {
@@ -25,26 +24,42 @@ async function calculateLength(url) {
     const purifiedPageBody = pageBody.toString()
         .replace(parsedPage.querySelector('#comments')?.toString(), "")
         .replace(parsedPage.querySelector('#comment')?.toString(), "")
-        .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi,"")
-        .replace(/<svg[\s\S]*?>[\s\S]*?<\/svg>/gi,"")
-        .replace(/<footer[\s\S]*?>[\s\S]*?<\/footer>/gi,"")
-        .replace(/<svg[\s\S]*?>[\s\S]*?<\/svg>/gi,"")
+        .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "")
+        .replace(/<svg[\s\S]*?>[\s\S]*?<\/svg>/gi, "")
+        .replace(/<footer[\s\S]*?>[\s\S]*?<\/footer>/gi, "")
+        .replace(/<svg[\s\S]*?>[\s\S]*?<\/svg>/gi, "")
     const wpm = 225
     const words = purifiedPageBody.trim().split(/\s+/).length
     const time = Math.ceil(words / wpm)
     return `${time} min`
 }
 
+function filterOnArticleReadState(state) {
+    return function (val) {
+        if (state === "all") {
+            return true
+        }
+
+        if (state === "unread" && !val.read) {
+            return true
+        } else if (state === "read" && val.read) {
+            return true
+        }
+        return false
+    }
+}
+
 router.get('/', auth.isAuthorized, async (req, res) => {
     const currentPage = parseInt(req.query.page ?? "1")
+    const state = req.query.state ?? "all"
     const db = req.app.get("db")
     const total = await db(`users/${req.session.user}`).count('articles', _ => true)
 
     res.render('articles', {
         title: process.env.TITLE,
         userID: req.session.user,
         title_suffix: "",
-        articles: await db(`users/${req.session.user}`).select('articles', pagger(currentPage, MaxPerPage)),
+        articles: await db(`users/${req.session.user}`).select('articles', pagger(currentPage, MaxPerPage, filterOnArticleReadState(state))),
         tags: await db(`users/${req.session.user}`).select('tags', _ => true),
         currentPage: currentPage,
         totalPages: Math.ceil(total / MaxPerPage),
@@ -54,14 +69,19 @@ router.get('/', auth.isAuthorized, async (req, res) => {
 router.get('/tagged/:tag', auth.isAuthorized, async (req, res) => {
     const tag = req.params.tag
     const currentPage = parseInt(req.query.page ?? "1")
+    const state = req.query.state ?? "all"
     const db = req.app.get("db")
     const total = await db(`users/${req.session.user}`).count('articles', (v) => v.tags.includes(tag))
 
+    const filter = (val) => {
+        return filterOnArticleReadState(state)(val) && val.tags.includes(tag)
+    }
+
     res.render('articles', {
         title: process.env.TITLE,
         userID: req.session.user,
         title_suffix: `tagged '${tag}'`,
-        articles: await db(`users/${req.session.user}`).select('articles', pagger(currentPage, MaxPerPage, (v) => v.tags.includes(tag))),
+        articles: await db(`users/${req.session.user}`).select('articles', pagger(currentPage, MaxPerPage, filter)),
         tags: await db(`users/${req.session.user}`).select('tags', _ => true),
         currentPage: currentPage,
         totalPages: Math.ceil(total / MaxPerPage),

views/articles.jade

@@ -1,7 +1,13 @@
 extends layout
 
 block content
-  h1 Articles #{title_suffix}
+  h1#page_title
+    span#page_title_suffix Articles #{title_suffix}
+    select#content_selector
+      option(value="all") All
+      option(value="read") Read
+      option(value="unread") Unread
+
   - for (const data of articles)
     div(id="article-" + data.id).article
       h2.title