So I am making a website using flask. The database is a SQLite db and is made using flask-SQLAlchemy. I took some help from someone online and they helped me write the code for a functional like button. But, it is just an illusion, it does not function as one yet. It turns blue if someone clicks on it and it stays blue even if the page is refreshed. It turns black again if the user clicks on it while it was blue. So basically, I want the number of likes in the db to be incremented by 1 if a user liked the post and didn't remove their like. By extension, I want the number of likes to be decreased by 1 if the user removes their like. Also, I want to display the number of likes that page has. (including the like of the user, if they have liked the post) And the user must be logged in on my website to like posts. Here is the code for the route info:
@app.route('/read/<string:post_name>')
def read(post_name):
# page = request.args.get('page', 1, type=int)
posts = Image.query.filter_by(post_name=post_name)
pos = Image.query.filter_by(post_name=post_name).first()
author = User.query.filter_by(id=pos.user_id).first()
# posts = Image.query.filter_by(id=current_user.id).paginate(page=page, per_page=10)
# print(posts.items)
return render_template('readmanga.html', posts=posts, pos=pos, author=author)
Here is the code for the relevant table:
class Image(db.Model):
id = db.Column(db.Integer, primary_key=True)
title=db.Column(db.String(120), nullable=False)
date_posted = db.Column(db.DateTime, nullable=False, default=datetime.datetime.utcnow)
img_location = db.Column(db.String(600), nullable=False)
mimetype = db.Column(db.String(10))
post_name = db.Column(db.String(150), nullable=False, unique=False)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
manga_name = db.Column(db.String(100), unique=False, nullable=False)
likes = db.Column(db.Integer, nullable=False)
reports = db.Column(db.Integer, nullable=False)
Here is the code for the template:
<html>
<head>
<link rel="stylesheet" href="url_for('static', filename='readmanga.css')">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="container-1" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
<p style="font-family: sans-serif; text-decoration: underline; font-weight: bold; font-size: 32px;">{{ pos.manga_name }}</p>
<small style="font-family: sans-serif; font-weight: bold; margin-bottom: 15px;">By: <a href="{{ url_for('user', username=author.username) }}">{{ author.username }}</a></small>
</div>
<div class="container" style="display: flex; flex-direction:column; justify-content:center; align-items:center;">
{% for post in posts %}
<img src="{{ url_for('static', filename='images/'+post.title) }}" alt="" class="items" style="max-height: 1250px; max-width: 950px; object-fit: contain;">
{% endfor %}
</div>
<div class="wrap">
<i class="fa fa-thumbs-up" id="likebtn" style="font-size: 64px;"></i>
<script>
const likebtn = document.getElementById('likebtn');
function setLikeBtnColor() {
likebtn.style.color = JSON.parse(localStorage.getItem('likebtn')) ? 'cornflowerblue':'black';
}
setLikeBtnColor();
function myFunction() {
localStorage.setItem('likebtn', !JSON.parse(localStorage.getItem('likebtn')));
setLikeBtnColor();
}
likebtn.addEventListener('click', myFunction);
</script>
</div>
</body>
</html>