Izdelano objavljanje sporočil.

lib/index.js

@@ -0,0 +1,28 @@
+var db = require('../models');
+var User = db.User;
+var Session = db.Session;
+
+async function getAuthUser(sessionId) {
+  var session;
+  var user;
+  if(sessionId != undefined) {
+    session = await Session.findOne({
+      include: User,
+      where: {
+        sessionid: sessionId
+      }
+    });
+    if(session) {
+      user = session.User;
+      return user;
+    } else {
+      return;
+    } 
+  } else {
+    return;
+  }
+}
+
+module.exports = {
+  getAuthUser,
+};

public/stylesheets/style.css

@@ -823,6 +823,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 2rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -847,6 +852,21 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);

routes/index.js

@@ -3,29 +3,20 @@ var router = express.Router();
 var db = require('../models');
 var User = db.User;
 var Session = db.Session;
+var lib = require('../lib');
 
 /* GET home page. */
 router.get('/', async function(req, res, next) {
   console.log(req.cookies.sessionid);
   var sessionId = req.cookies.sessionid;
-  var session;
+  var user = await lib.getAuthUser(sessionId);
-  var user;
+  if(user) {
-  if(sessionId != undefined) {
+    var messages = await user.getMessages();
-    session = await Session.findOne({
+    res.render('index', { auth:user, messages:messages });
-      include: User,
-      where: {
-        sessionid: sessionId
-      }
-    });
-    if(session) {
-      user = session.User;
-      res.render('index', { auth: user });
-    } else {
-      res.redirect('/login');
-    } 
   } else {
     res.redirect('/login');
   }
+  
 });
 
 module.exports = router;

routes/message.js

@@ -3,6 +3,8 @@ const db = require('../models');
 var router = express.Router();
 var Message = db.Message;
 var User = db.User;
+var lib = require('../lib');
+
 /* GET users listing. */
 router.get('/get', async function(req, res, next) {
   var messages = await Message.findAll();
@@ -55,4 +57,15 @@ router.get('/new2', async function(req, res, next) {
   res.send(message);
 });
 
+router.post('/add', async function(req, res, next) {
+  var sessionId = req.cookies.sessionid;
+  var user = await lib.getAuthUser(sessionId);
+  if(user) {
+    user.createMessage({ body: req.body.body });
+    res.redirect('/');
+  } else {
+    res.redirect('/login');
+  }
+});
+
 module.exports = router;

views/index.ejs

@@ -32,7 +32,7 @@
         </form>
         <div class="flex items-center justify-between mt-5">
           <div class="flex items-center">
-            <img src="/images/avatar_48.png" alt="John Doe" class="rounded-md mr-2">
+            <img src="/images/avatar_48.png" alt="<%= auth.name %>" class="rounded-md mr-2">
             <div>
               <div class="w-full font-bold text-sm"><%= auth.name %></div>
               <div class="w-full text-sm text-gray-400"><%= auth.email %></div>
@@ -67,10 +67,10 @@
           </div>
         </div>
         <div class="my-5">
-          <form action="">
+          <form method="POST" action="/message/add">
             <textarea
               class="w-full h-36 p-1 dark:text-white dark:bg-gray-900 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900 text-sm"
-              name="body" id="" cols="20" placeholder="What's on your mind?"></textarea>
+              name="body" id="body" cols="20" placeholder="What's on your mind?"></textarea>
             <hr class="my-4">
             <div class="flex justify-end">
               <button
@@ -93,7 +93,7 @@
         </div>
         <div class="flex justify-between">
           <div class="flex-shrink-0 max-h-10 relative -top-10 px-4">
-            <img src="/images/avatar_94.png" alt="John Doe" class="rounded-md overflow-visible">
+            <img src="/images/avatar_94.png" alt="<%= auth.name %>" class="rounded-md overflow-visible">
           </div>
           <div class="flex items-center pt-3 px-2 mx-2">
             <button class="bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline"
@@ -107,20 +107,18 @@
         <div class="p-4">
           <div>
             <h4 class="font-bold"><%= auth.name %></h4>
-            <p class="text-sm text-gray-400"><%= auth.name %></p>
+            <p class="text-sm text-gray-400"><%= auth.email %></p>
           </div>
           <div class="text-sm text-gray-400 mt-3">
             <p>Joined <%= auth.createdAt %></p>
             <div class="flex">
-              <div class="pr-5"><span class="text-white">5</span> Posts</div>
+              <div class="pr-5"><span class="text-white"><%= messages.length %></span> Posts</div>
               <div class="pr-5"><span class="text-white">3</span> Following</div>
               <div class="pr-5"><span class="text-white">7</span> Followers</div>
             </div>
           </div>
         </div>
-        <% for(var i=0; i < 8; i++) {%>
+        <%- include('partials/_toot', {auth:auth, messages:messages}) %>
-          <%- include('partials/_toot') %>
-            <% } %>
       </div>
     </div>
 

views/partials/_toot.ejs

@@ -1,18 +1,22 @@
-<div class="dark:bg-gray-700 flex p-4 border-b border-b-gray-400">
+<% for(var i=messages.length - 1; i>= 0; i--) {%>
+
+  <div class="dark:bg-gray-700 flex p-4 border-b border-b-gray-400">
     <div class="mr-4 flex-shrink-0">
-      <img src="/images/avatar_48.png" alt="John Doe" class="rounded-md">
+      <img src="/images/avatar_48.png" alt="<%= auth.name %>" class="rounded-md">
     </div>
     <div>
-      <h5 class="font-bold mb-4">John Doe</h5>
+      <div>
+        <h5 class="font-bold mb-4">
+          <%= auth.name %>
+        </h5>
 
-      <p>There are so many programs configurable in #Lua. I am making a list.</p>
+        <p>
-
+          <%= messages[i].body%>
-      <p>I revisited the tiling window manager topic. #awesomewm is configurable in Lua, but for now I think I will rewrite my #bspwm config in Lua and learn how to do more advanced customization with conditionals.</p>
+        </p>
-        
+      </div>
-      <p>Found out that #conky's visualizations are done in Lua with the Cairo graphics library. That looks really cool and I hope to do some with that soon. </p>
+      <div class="text-xs text-gray-500 mt-3">Posted on: <%= messages[i].createdAt %>
-        
+      </div>
-      <p>Set terminal text and bspwm to #gruvbox colors.</p>
-        
-      <p>#RetroEdgeTechStack</p>
     </div>
-  </div>
+  </div>
+
+  <% } %>