Timeline je polno funkcionalen.

This commit is contained in:
Matjaz
2022-02-27 23:02:08 +01:00
parent 34177d6b2d
commit d5ff307fba
6 changed files with 244 additions and 8 deletions

2
.gitignore vendored
View File

@ -116,4 +116,4 @@ dist
.yarn/install-state.gz
.pnp.*
database/socialbot.db
*.db

View File

@ -5,9 +5,10 @@ var User = db.User;
var Messages = db.Messages;
var Session = db.Session;
var lib = require('../lib');
var Op = db.Sequelize.Op;
/* GET home page. */
router.get('/', async function(req, res, next) {
router.get('/me', async function(req, res, next) {
console.log(req.cookies.sessionid);
var sessionId = req.cookies.sessionid;
var user = await lib.getAuthUser(sessionId);
@ -19,11 +20,45 @@ router.get('/', async function(req, res, next) {
limit: 10
});
var messageCount = await user.countMessages();
res.render('index', { auth:user, messages:messages, messageCount:messageCount });
res.render('me', { auth:user, messages:messages, messageCount:messageCount });
} else {
res.redirect('/login');
}
});
router.get('/', async function(req, res, next) {
var sessionId = req.cookies.sessionid;
var user = await lib.getAuthUser(sessionId);
if(user) {
var follows = await user.getFollow({
attributes: {
include: [
'id',
]
}
});
var userList = [];
userList.push(user.id);
follows.forEach(element => {
userList.push(element.id);
});
var userMessages = await db.Message.findAll({
include: User,
where: {
'$User.id$': {
[Op.in]: userList
}
},
order: [
['updatedAt', 'DESC']
]
});
//console.log(await userMessages[0].getUsers());
res.render('index', {auth:user, messages:userMessages, messageCount:3});
} else {
res.redirect('/login');
}
});
module.exports = router;

View File

@ -74,16 +74,28 @@ router.get('/timeline3', async function(req, res, next) {
var sessionId = req.cookies.sessionid;
var user = await lib.getAuthUser(sessionId);
if(user) {
var follows = await user.getFollow();
var follows = await user.getFollow({
attributes: {
include: [
'id',
]
}
});
var userList = [];
userList.push(user.id);
follows.forEach(element => {
userList.push(element.id);
});
var userMessages = await db.Message.findAll({
include: User,
where: {
'$User.id$': '1',
}
'$User.id$': {
[Op.in]: userList
}
},
order: [
['updatedAt', 'DESC']
]
});
//console.log(await userMessages[0].getUsers());
res.send(userMessages);

View File

@ -118,14 +118,14 @@
</div>
</div>
</div>
<%- include('partials/_toot', {auth:auth, messages:messages}) %>
<%- include('partials/_messages', {messages:messages}) %>
</div>
</div>
<div class="lg:w-72 lg:overflow-y-hidden">
<ul class="p-5">
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-home mr-2"></i>Home</a>
<a class="font-bold text-lg mb-4 block" href="/"><i class="fa fa-home mr-2"></i>Home</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-bell mr-2"></i>Notifications</a>

167
views/me.ejs Normal file
View File

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html class="dark">
<head>
<title>Social Robot</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
</head>
<body class="bg-white dark:bg-gray-800 dark:text-white">
<div class="lg:px-24 mx-auto">
<div class="lg:flex justify-center">
<div class="lg:w-72 lg:overflow-y-hidden">
<form method="GET">
<div class="relative text-gray-600 focus-within:text-gray-400">
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
viewBox="0 0 24 24" class="w-6 h-6">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</span>
<input type="search" name="q"
class="w-full py-2 text-sm dark:text-white dark:bg-gray-900 pl-10 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900"
placeholder="Search..." autocomplete="off">
</div>
</form>
<div class="flex items-center justify-between mt-5">
<div class="flex items-center">
<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>
</div>
</div>
<div>
<button type="button" data-dropdown-toggle="dropdown" id="profileDropdownButton" class="bg-gray-700 rounded-md mx-2 px-2 focus:text-blue-400 text-lg font-bold" aria-expanded="true" aria-haspopup="true"><i class="fa fa-angle-down"></i></button>
<!-- This is an example component -->
<div class="max-w-lg mx-auto">
<!-- Dropdown menu -->
<div class="hidden dark:bg-gray-700 dark:text-white z-50 list-none divide-y divide-gray-100 rounded-md shadow my-4" id="dropdown">
<ul class="py-1" aria-labelledby="dropdown">
<li>
<a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Dashboard</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Settings</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Earnings</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Sign out</a>
</li>
</ul>
</div>
</div>
<script src="/scripts/flowbite.js"></script>
</div>
</div>
<div class="my-5">
<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="body" cols="20" placeholder="What's on your mind?"></textarea>
<hr class="my-4">
<div class="flex justify-end">
<button
class="place-content-end bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline font-bold"
type="submit">Send</button>
</div>
</form>
</div>
</div>
<div
class="lg:flex-1 lg:mx-3 max-w-xl min-w-md dark:bg-gray-600 dark:text-white scrollbar-thin scrollbar-thumb-gray-900 scrollbar-track-gray-700 overflow-y-scroll">
<div class="lg:h-screen">
<div class="bg-gray-900 text-white p-4 flex justify-between w-full z-50"">
<div><i class=" fa fa-home mr-2"></i>Home</div>
<div><i class="fa fa-sliders"></i></div>
</div>
<div class="max-h-40 overflow-y-hidden align-bottom">
<img class="object-none object-center" src="/images/19187755.jpg" alt="paralax">
</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="<%= 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"
type="submit">Follow</button>
<button
class="bg-gray-600 border border-b-gray-400 py-2 px-5 rounded-md focus:outline-none focus:shadow-outline shadow-xl"
type="submit"><i class="fa fa-ellipsis-v"></i></button>
</div>
</div>
<div class="p-4">
<div>
<h4 class="font-bold"><%= auth.name %></h4>
<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"><%= messageCount %></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>
<%- include('partials/_toot', {auth:auth, messages:messages}) %>
</div>
</div>
<div class="lg:w-72 lg:overflow-y-hidden">
<ul class="p-5">
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-home mr-2"></i>Home</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-bell mr-2"></i>Notifications</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-group mr-2"></i>Local</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-globe mr-2"></i>Federated</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-envelope mr-2"></i>Direct messages</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-star mr-2"></i>Favourites</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-bookmark mr-2"></i>Bookmarks</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-list mr-2"></i>Lists</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-address-book mr-2"></i>Profile directory</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-cog mr-2"></i>Preferences</a>
</li>
<li>
<a class="font-bold text-lg mb-4 block"><i class="fa fa-group mr-2"></i>Follows and followers</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,22 @@
<% for(var i = 0; i < messages.length; 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="<%= auth.name %>" class="rounded-md">
</div>
<div>
<div>
<h5 class="font-bold mb-4">
<%= messages[i].User.name %>
</h5>
<p>
<%= messages[i].body%>
</p>
</div>
<div class="text-xs text-gray-500 mt-3">Posted on: <%= messages[i].createdAt %>
</div>
</div>
</div>
<% } %>