Added tag viewer

author: Mark Powers <markppowers0@gmail.com> 2019-03-10 19:46:26 -0400
committer: Mark Powers <markppowers0@gmail.com> 2019-03-10 19:46:26 -0400
commit: 23c5e6810888c30f10167405f0516f62b32d8f5b (patch)
tree: 698a2c1db68fa77bae48e20f0240aca3b11cd826 /src
parent: a119a3c73f02408b0e2ceedf0ac71e4e684b4cad (diff)
6 files changed, 81 insertions, 21 deletions
diff --git a/src/css/styles.css b/src/css/styles.css
index a455835..fdb2551 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -6,7 +6,7 @@
     --btn-color: #2d2;
     --btn-text: #000;
     --btn-hover: #0a0;
-    --light-text: #aaa
+    --light-text: #aaa;
 }
   
 
@@ -46,13 +46,6 @@ footer {
     padding: 10px;
 }
 
-.item {
-    margin: 10px;
-    border: 2px solid #777;
-    border-radius: 5px;
-    padding: 7px;
-}
-
 img {
     image-orientation: from-image;
 }
diff --git a/src/html/blog.html b/src/html/blog.html
index 01cd2f6..a0a9361 100644
--- a/src/html/blog.html
+++ b/src/html/blog.html
@@ -11,7 +11,6 @@
     <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
     <script>
         window.onload = loadFeed(function () {
-            console.log("callback!");
             var feed = new Vue({
                 el: '.feed',
                 data: {
diff --git a/src/html/feed.html b/src/html/feed.html
index 358ef61..5b8cccd 100644
--- a/src/html/feed.html
+++ b/src/html/feed.html
@@ -9,7 +9,7 @@
         <p class="date">
             {{ post.createdAt.substring(0,10) }}
             <span v-for="tag in post.tags">
-                <a class="tag" href="#">{{tag}}</a>
+                <a class="tag" v-bind:href="'/tags#'+tag">{{tag}}</a>
             </span>
         </p>
     </div>
diff --git a/src/html/tags.html b/src/html/tags.html
new file mode 100644
index 0000000..9c6174d
--- /dev/null
+++ b/src/html/tags.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Mark's Kitchen - Blog</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    <script src="/js/feed.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <script>
+        window.onload = window.onhashchange = function () {
+            loadFeed(function () {
+                var feed = new Vue({
+                    el: '#view',
+                    data: {
+                        posts: [],
+                        tag: window.location.hash
+                    },
+                    created() {
+                        console.log(this.tag);
+                        var tag = window.location.hash.substring(1);
+                        fetch(new Request(`/tags/${tag}`)).then(response => response.json())
+                            .then(response => this.posts = response);
+                    }
+                });
+            })
+        }
+    </script>
+</head>
+
+<body>
+    <div id="view">
+        <h1>Selecting: {{tag}}</h1>
+        <div id="feed"></div>
+    </div>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/src/js/feed.js b/src/js/feed.js
index a80af9c..87302f3 100644
--- a/src/js/feed.js
+++ b/src/js/feed.js
@@ -3,7 +3,6 @@ function loadFeed(callback){
   fetch(myRequest).then(function(response) {
     return response.text();
   }).then(function(response) {
-    console.log(response);
     document.getElementById("feed").innerHTML = response;
     callback()
   });
diff --git a/src/server.js b/src/server.js
index 1f0573c..adcc846 100644
--- a/src/server.js
+++ b/src/server.js
@@ -4,6 +4,8 @@ const cookieParser = require('cookie-parser');
 const request = require('request');
 const crypto = require('crypto');
 
+const Op = require('sequelize').Op;
+
 const multer = require('multer');
 var storage = multer.diskStorage({
     destination: function (req, file, cb) {
@@ -23,6 +25,15 @@ const server = express();
 server.use(cookieParser())
 server.use(bodyParser.urlencoded({ extended: true }));
 
+async function addImagesAndTagsToPosts(models, posts){
+    for (const post of posts) {
+        const images = await models.pictures.findAll({ attributes: ["source"], where: { postId: post.id } }).map(x => x.source);
+        post.images = images;
+        const tags = await models.tags.findAll({ attributes: ["text"], where: { postId: post.id } }).map(x => x.text);
+        post.tags= tags;
+    }
+}
+
 function listen(port) {
     server.listen(port, () => console.info(`Listening on port ${port}!`));
 }
@@ -67,6 +78,7 @@ function setUpRoutes(models, jwtFunctions, database) {
     server.get('/login', (req, res) => res.sendFile(__dirname + "/html/login.html"))
     server.get('/bread', (req, res) => res.sendFile(__dirname + "/html/bread.html"));
     server.get('/blog', (req, res) => res.sendFile(__dirname + "/html/blog.html"));
+    server.get('/tags', (req, res) => res.sendFile(__dirname + "/html/tags.html"));
     server.get('/feed', (req, res) => res.sendFile(__dirname + "/html/feed.html"));
     server.get('/essay', (req, res) => res.sendFile(__dirname + "/html/essay.html"));
     server.get('/snake', (req, res) => res.sendFile(__dirname + "/html/snake.html"));
@@ -85,20 +97,37 @@ function setUpRoutes(models, jwtFunctions, database) {
         }
     })
     server.get('/blog/:id', async (req, res, next) => {
-
-    });
+        // TODO add single page blog posts
+    })
+    server.get('/tags/:name', async (req, res, next) => {
+        console.log("TAGS/NAME");
+        try {
+            const { name } = req.params;
+            const postsWithTag = await models.tags.findAll({ attributes: ["postId"], where: { text: name } })
+                .map(function(x) {
+                    return {id: x.postId}
+                });
+            var posts = await models.posts.findAll({ 
+                where: { [Op.or]: postsWithTag }, order: [['createdAt', 'DESC']] 
+            });
+            posts = posts.map(x => x.get({ plain: true }));
+            await addImagesAndTagsToPosts(models, posts)
+            console.log(posts);
+            res.status(200).send(posts);
+            next();
+        } catch (e) {
+            console.error(e);
+            res.status(400).send(e.message);
+        }
+    })
     server.get('/posts/:type', async (req, res, next) => {
         try {
             const { type } = req.params;
-            var posts = await models.posts.findAll({ where: { type: type }, order: [['createdAt', 'DESC']] });
+            var posts = await models.posts.findAll({
+                where: { type: type }, order: [['createdAt', 'DESC']] 
+            });
             posts = posts.map(x => x.get({ plain: true }));
-            for (const post of posts) {
-                const images = await models.pictures.findAll({ attributes: ["source"], where: { postId: post.id } }).map(x => x.source);
-                post.images = images;
-                const tags = await models.tags.findAll({ attributes: ["text"], where: { postId: post.id } }).map(x => x.text);
-                console.log(tags);
-                post.tags= tags;
-            }
+            await addImagesAndTagsToPosts(models, posts)
             res.status(200).send(posts);
             next();
         } catch (e) {
author	Mark Powers <markppowers0@gmail.com>	2019-03-10 19:46:26 -0400
committer	Mark Powers <markppowers0@gmail.com>	2019-03-10 19:46:26 -0400
commit	23c5e6810888c30f10167405f0516f62b32d8f5b (patch)
tree	698a2c1db68fa77bae48e20f0240aca3b11cd826 /src
parent	a119a3c73f02408b0e2ceedf0ac71e4e684b4cad (diff)