Refactor bread to use vue.js

author: Mark Powers <markppowers0@gmail.com> 2019-01-27 13:56:59 -0500
committer: Mark Powers <markppowers0@gmail.com> 2019-01-27 13:56:59 -0500
commit: a16648b1af583e16e43b421bcd980ddcef304b51 (patch)
tree: 0ad38138dc12e35beaa0ed6659b6c62818be30d7 /src
parent: 6825b445ad975d603b4c212aed85f86559642e0f (diff)
5 files changed, 90 insertions, 102 deletions
diff --git a/src/css/styles.css b/src/css/styles.css
index 4ac97ca..4b77273 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -24,7 +24,7 @@ img {
 }
 
 .card {
-    margin: 3em;
+    margin: 1em;
     padding: 2%;
     border: 1px solid #aaaaaa;
     /* width: 400px; */
@@ -35,9 +35,7 @@ img {
 .card img {
     width: 100%;
     padding: 2%;
-    /* display: inline; */
-    /* margin-left: auto;
-    margin-right: 3em;    */
+    
 }
 
 .feed {
@@ -86,6 +84,5 @@ img {
 
 .date {
     font-style: italic;
-    margin-left: 2em;
-    margin-top: 1em;
+    margin: 0em;
 }
 \ No newline at end of file
diff --git a/src/html/bread.html b/src/html/bread.html
index 15194c5..37abee8 100644
--- a/src/html/bread.html
+++ b/src/html/bread.html
@@ -5,109 +5,36 @@
     <title>Mark's Kitchen - Bread</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/bootstrap.css">
-    <link rel="stylesheet" type="text/css" href="css/styles.css">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        window.onload = function () {
+            fetch(new Request('/posts.json')).then(response => response.json())
+                .then(response => {
+                    var feed = new Vue({
+                        el: '.feed',
+                        data: { posts: response.data }
+                    })
+                });
+        }
+
+    </script>
 </head>
 
 <body>
-    <!-- <div class="container"> -->
     <div>
-        <br>
         <h1>Bread</h1>
         Some highlights (and lowlights) of breadmaking
         <div class="feed">
-            <div class="card">
-                <p class="card-text">A good looking loaf. Made a batch of 3 the next day, which took a toll on my
-                    banneton, leaving a lot of residue.</p>
-                <div class="card-img">
-                    <img src="photo/pretty.jpg">
-                </div>
-                <br>
-                <p class="date">Dec 4, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Made some pizza crust, it was delicious. The dough was awfully thick, probably
-                    shouldn't have used it all.</p>
-                <div class="card-img">
-                    <img src="photo/pizza1.jpg">
-                    <img src="photo/pizza2.jpg">
-                </div>
-                <br>
-                <p class="date">Nov 21, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Another nice no-knead recipie</p>
-                <div class="card-img">
-                    <img src="photo/good1.jpg">
-                    <img src="photo/good2.jpg">
-                </div>
-                <br>
-                <p class="date">Nov 16, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Tried to make something more sandwich-y. 4 hour warm proof with wheat, rye,
-                    and corn flours. A bit dense, but not bad.</p>
-                <div class="card-img">
-                    <img src="photo/wheat.jpg">
-                </div>
-                <br>
-                <p class="date">Sep 30, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">A twist on normal beer bread, using hard cider.</p>
-                <div class="card-img">
-                    <img src="photo/cider.jpg">
-                </div>
-                <br>
-                <p class="date">Sep 30, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">I wanted to try the NY Times no knead recipie. Bread turned out delicious.
-                    Will try to tranfer to a loaf shape next time for slices.</p>
-                <div class="card-img">
-                    <img src="photo/nyt1.jpg">
-                    <img src="photo/nyt2.jpg">
-                </div>
-                <br>
-                <p class="date">Sep 27, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">First time using a banneton, beautiful shape. Tried a different knead style
-                    too. Rye-AP mix</p>
-                <div class="card-img">
-                    <img src="photo/ban1.jpg">
-                    <img src="photo/ban2.jpg">
-                </div>
-                <br>
-                <p class="date">Sep 19, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Severely messed up the recipie this time. Tried to double to get two loafs,
-                    both turned out flat.</p>
-                <div class="card-img">
-                    <img src="photo/flat1.jpg">
-                    <img src="photo/flat2.jpg">
-                </div>
-                <br>
-                <p class="date">Aug 30, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Used more white flour this time</p>
-                <div class="card-img">
-                    <img src="photo/white-1.jpg">
-                    <img src="photo/white-2.jpg">
-                </div>
-                <br>
-                <p class="date">Aug 16, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">First sourdough, mainly wheat</p>
+            <div class="card" v-for="post in posts">
+                <p class="card-text">{{ post.description }}</p>
                 <div class="card-img">
-                    <img src="photo/first-1.jpg">
-                    <img src="photo/first-2.jpg">
+                    <span v-for="image in post.images">
+                        <a v-bind:href="image"><img v-bind:src="image"></a>
+                    </span>
                 </div>
-                <br>
-                <p class="date">Aug 9, 2018</p>
+                <p class="date">{{ post.createdAt.substring(0,10) }}</p>
             </div>
         </div>
     </div>
diff --git a/src/index.js b/src/index.js
index 767acb5..1dd00a0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,54 @@
 const server = require('./server');
-server.setUpRoutes();
+const Sequelize = require('sequelize');
+const fs = require('fs');
+const path = require('path');
+
+const dbCreds = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json'))).database;
+
+const database = new Sequelize(dbCreds.database, dbCreds.user, dbCreds.password, {
+  logging(str) {
+    console.debug(`DB:${str}`);
+  },
+  dialectOptions: {
+    charset: 'utf8mb4',
+    multipleStatements: true,
+  },
+//   host: dbCreds.host,
+  dialect: 'mysql',
+  pool: {
+    max: 5,
+    min: 0,
+    idle: 10000,
+  },
+});
+
+database.authenticate().then(() => {
+  console.debug(`database connection successful: ${dbCreds.database}`);
+}, (e) => console.log(e));
+
+async function sync(alter, force, callback) {
+  await database.sync({ alter, force, logging: console.log });
+}
+
+function setUpModels(){
+    const models = {
+        "posts": database.define('posts', {
+            description: {
+            type: Sequelize.STRING,
+            allowNull: false,
+            },
+            }),
+        "pictures": database.define('pictures', {
+            source: { type: Sequelize.TEXT, allowNull: false},
+          })
+    }
+    models.pictures.belongsTo(models.posts);
+    return models;
+}
+
+const models = setUpModels();
+sync();
+
+server.setUpRoutes(models);
 server.listen();
 
diff --git a/src/photo/back.jpg b/src/photo/back.jpg
new file mode 100644
index 0000000..9e8511e
--- /dev/null
+++ b/src/photo/back.jpg
diff --git a/src/server.js b/src/server.js
index a487af5..c94a91c 100644
--- a/src/server.js
+++ b/src/server.js
@@ -9,7 +9,7 @@ function listen(){
     server.listen(port, () => console.info(`Listening on port ${port}!`));
 }
 
-function setUpRoutes(){
+function setUpRoutes(models){
     server.get('/', (req, res) => res.sendFile(__dirname + "/html/index.html"))
     server.get('/bread', (req, res) => res.sendFile(__dirname + "/html/bread.html"));
     server.get('/essay', (req, res) => res.sendFile(__dirname + "/html/essay.html"));
@@ -18,6 +18,20 @@ function setUpRoutes(){
         request(`http://localhost:8000?${req.url.split("?")[1]}`, function(error, response, body) {
         });
     })
+    server.get('/posts.json', async (req, res, next) =>  {
+        try {
+            var posts = await models.posts.findAll();
+            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;
+            }
+            res.status(200).send({ success: true, data: posts });
+            next();
+        } catch (e) {
+            res.status(400).send({ success: false, error: e.message });
+        }
+    })
 
 
     server.get('/favicon.ico', (req, res) => res.sendFile(__dirname + "/icon/favicon.ico"))
author	Mark Powers <markppowers0@gmail.com>	2019-01-27 13:56:59 -0500
committer	Mark Powers <markppowers0@gmail.com>	2019-01-27 13:56:59 -0500
commit	a16648b1af583e16e43b421bcd980ddcef304b51 (patch)
tree	0ad38138dc12e35beaa0ed6659b6c62818be30d7 /src
parent	6825b445ad975d603b4c212aed85f86559642e0f (diff)