This commit is contained in:
spitkov 2024-09-20 17:13:37 +02:00
parent 98880c0fde
commit 5a12e7aefa
5 changed files with 564 additions and 0 deletions

221
template/index.html Normal file
View File

@ -0,0 +1,221 @@
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
<div class="container">
<h1 class="mb-4">TechTalks</h1>
<!-- Sorting options -->
<div class="mb-3">
<label for="sort-select" class="form-label">Sort by:</label>
<select id="sort-select" class="form-select">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="most_liked">Most Liked</option>
<option value="most_commented">Most Commented</option>
</select>
</div>
<!-- Posts container -->
<div id="posts-container">
{% for post in posts %}
<div class="card mb-3" id="post-{{ post.id }}">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
{% if post.author %}
{% if post.author.profile_picture %}
<img src="{{ url_for('static', filename='uploads/' + post.author.profile_picture) }}" class="rounded-circle me-2" alt="Profile Picture" style="width: 30px; height: 30px; object-fit: cover;">
{% else %}
<div class="rounded-circle me-2 d-flex justify-content-center align-items-center bg-primary" style="width: 30px; height: 30px;">
<span class="text-white" style="font-size: 0.8rem;">{{ post.author.username[0].upper() }}</span>
</div>
{% endif %}
<small class="text-muted">
<a href="{{ url_for('profile', username=post.author.username) }}" class="text-decoration-none">{{ post.author.username }}</a>
</small>
{% else %}
<small class="text-muted">{{ post.anonymous_username }}</small>
{% endif %}
<span class="ms-auto text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
</div>
<p class="card-text">{{ post.content|safe }}</p>
{% if post.image_url %}
<img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal{{ post.id }}">
{% endif %}
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="btn-group mb-2">
<button class="btn btn-outline-primary btn-sm like-btn" data-post-id="{{ post.id }}">
<i class="bi bi-heart-fill"></i> Like (<span class="like-count">{{ post.likes|length }}</span>)
</button>
<button class="btn btn-outline-secondary btn-sm comment-btn" data-post-id="{{ post.id }}">
<i class="bi bi-chat-fill"></i> Comment ({{ post.comments|length }})
</button>
</div>
<div class="btn-group mb-2">
<a href="{{ url_for('post_detail', post_id=post.id) }}" class="btn btn-outline-info btn-sm" target="_blank">
<i class="bi bi-box-arrow-up-right"></i> Open in new tab
</a>
<button class="btn btn-outline-info btn-sm copy-link-btn" data-post-url="{{ url_for('post_detail', post_id=post.id, _external=True, _scheme='https') }}">
<i class="bi bi-link-45deg"></i> Copy Link
</button>
{% if current_user.is_authenticated and current_user.id == post.author.id %}
<a href="{{ url_for('edit_post', post_id=post.id) }}" class="btn btn-outline-warning btn-sm">
<i class="bi bi-pencil-fill"></i> Edit
</a>
{% endif %}
</div>
</div>
</div>
<div class="comment-section" id="comment-section-{{ post.id }}" style="display: none;">
<div class="card-body pt-0">
<h6 class="mb-3">Comments:</h6>
<ul class="list-unstyled mb-3">
{% for comment in post.comments %}
{% include 'comment.html' %}
{% endfor %}
</ul>
<form class="comment-form" data-post-id="{{ post.id }}">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add a comment" name="content" required>
<button class="btn btn-outline-secondary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Sorting functionality
const sortSelect = document.getElementById('sort-select');
const postsContainer = document.getElementById('posts-container');
sortSelect.addEventListener('change', function() {
const sortOption = this.value;
fetch(`/sort_posts?sort=${sortOption}`)
.then(response => response.text())
.then(html => {
postsContainer.innerHTML = html;
// Reinitialize any event listeners for the new content
initializePostInteractions();
})
.catch(error => console.error('Error:', error));
});
function initializePostInteractions() {
// Re-initialize like buttons
document.querySelectorAll('.like-btn').forEach(button => {
button.addEventListener('click', handleLike);
});
// Re-initialize comment buttons
document.querySelectorAll('.comment-btn').forEach(button => {
button.addEventListener('click', handleComment);
});
// Re-initialize copy link buttons
document.querySelectorAll('.copy-link-btn').forEach(button => {
button.addEventListener('click', handleCopyLink);
});
// Re-initialize comment forms
document.querySelectorAll('.comment-form').forEach(form => {
form.addEventListener('submit', handleCommentSubmit);
});
// Initialize comment like buttons
document.querySelectorAll('.like-comment-btn').forEach(button => {
button.addEventListener('click', handleCommentLike);
});
}
function handleLike(event) {
// Implement like functionality
var postId = this.dataset.postId;
fetch('/like/' + postId, { method: 'POST' })
.then(response => response.json())
.then(data => {
this.querySelector('.like-count').textContent = data.likes;
});
}
function handleComment(event) {
var postId = this.dataset.postId;
var commentSection = document.getElementById('comment-section-' + postId);
if (commentSection.style.display === 'none' || commentSection.style.display === '') {
commentSection.style.display = 'block';
} else {
commentSection.style.display = 'none';
}
}
function handleCommentLike(event) {
event.preventDefault();
var commentId = this.dataset.commentId;
fetch('/like_comment/' + commentId, { method: 'POST' })
.then(response => response.json())
.then(data => {
this.querySelector('.comment-like-count').textContent = data.likes;
});
}
function handleCommentSubmit(event) {
event.preventDefault();
var postId = this.dataset.postId;
var content = this.querySelector('input[name="content"]').value;
fetch('/comment/' + postId, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'content=' + encodeURIComponent(content)
})
.then(response => response.json())
.then(data => {
if (data.success) {
var commentList = document.querySelector('#comment-section-' + postId + ' ul');
var newComment = document.createElement('li');
newComment.innerHTML = '<strong>' + (data.username !== 'Anonymous' ? '<a href="/profile/' + data.username + '">' + data.username + '</a>' : '<span class="text-white">Anonymous</span>') + ':</strong> ' + data.content +
'<button class="btn btn-sm btn-outline-primary like-comment-btn" data-comment-id="' + data.comment_id + '">' +
'<i class="bi bi-heart-fill"></i> (<span class="comment-like-count">0</span>)</button>';
commentList.appendChild(newComment);
this.querySelector('input[name="content"]').value = '';
newComment.querySelector('.like-comment-btn').addEventListener('click', handleCommentLike);
}
});
}
function handleCopyLink(event) {
var postUrl = this.dataset.postUrl;
navigator.clipboard.writeText(postUrl).then(function() {
alert('Link copied to clipboard!');
}, function(err) {
console.error('Could not copy text: ', err);
});
}
// Initialize interactions for the initial page load
initializePostInteractions();
});
</script>
{% endblock %}
{% block styles %}
{{ super() }}
<style>
.comment-section {
border-top: 1px solid rgba(0,0,0,.125);
}
.comment-section .card-body {
padding-top: 1rem;
}
</style>
{% endblock %}

18
template/login.html Normal file
View File

@ -0,0 +1,18 @@
{% extends "base.html" %}
{% block title %}Login{% endblock %}
{% block content %}
<h2 class="mb-4">Login</h2>
<form method="POST">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
{% endblock %}

View File

@ -0,0 +1,24 @@
{% extends "base.html" %}
{% block title %}Manage {{ group.name }}{% endblock %}
{% block content %}
<h1>Manage {{ group.name }}</h1>
<h2>Join Requests</h2>
{% if join_requests %}
<form method="POST">
{% for request in join_requests %}
<div class="mb-3">
<p>{{ request.user.username }} wants to join the group</p>
<div class="btn-group" role="group">
<button type="submit" name="request_{{ request.id }}" value="accept" class="btn btn-success">Accept</button>
<button type="submit" name="request_{{ request.id }}" value="reject" class="btn btn-danger">Reject</button>
</div>
</div>
{% endfor %}
</form>
{% else %}
<p>No pending join requests.</p>
{% endif %}
{% endblock %}

139
template/post.html Normal file
View File

@ -0,0 +1,139 @@
{% extends "base.html" %}
{% block title %}Create Post{% endblock %}
{% block content %}
<h2 class="mb-4">Create a New Post</h2>
<form method="POST" enctype="multipart/form-data" id="postForm">
<div class="mb-3">
<label for="content" class="form-label">Content</label>
<textarea class="form-control" id="content" name="content" rows="10"></textarea>
</div>
<div class="mb-3">
<label for="image" class="form-label">Image (optional)</label>
<input type="file" class="form-control" id="image" name="image" accept="image/*">
</div>
{% if not current_user.is_authenticated %}
<div class="mb-3">
<label for="username" class="form-label">Username (for anonymous posting)</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
{% endif %}
<div class="mb-3">
<button type="submit" class="btn btn-primary">Post</button>
</div>
</form>
{% endblock %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<style>
.EasyMDEContainer {
background-color: #333;
}
.EasyMDEContainer .CodeMirror {
color: #fff;
background-color: #333;
}
.editor-toolbar {
background-color: #444;
border-color: #555;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
}
.editor-toolbar button {
color: #fff !important;
margin: 0 1px;
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
background-color: #555;
}
.CodeMirror-cursor {
border-left: 1px solid #fff;
}
.separator {
display: none;
}
</style>
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
var easyMDE = new EasyMDE({
element: document.getElementById('content'),
spellChecker: false,
autofocus: !isMobileDevice(), // Autofocus only on non-mobile devices
lineWrapping: true,
toolbar: [
"bold", "italic", "heading", "quote", "unordered-list", "ordered-list",
"link", "code", "table", "undo", "redo",
{
name: "custom-h1",
action: function(editor){
var cm = editor.codemirror;
var output = '';
var selectedText = cm.getSelection();
output = '# ' + selectedText;
cm.replaceSelection(output);
},
className: "fa fa-header",
title: "Custom H1",
},
{
name: "custom-h2",
action: function(editor){
var cm = editor.codemirror;
var output = '';
var selectedText = cm.getSelection();
output = '## ' + selectedText;
cm.replaceSelection(output);
},
className: "fa fa-header",
title: "Custom H2",
},
{
name: "custom-p",
action: function(editor){
var cm = editor.codemirror;
var output = '';
var selectedText = cm.getSelection();
var color = prompt("Enter color (e.g., red, #ff0000):");
if (color) {
output = '<p style="color: ' + color + ';">' + selectedText + '</p>';
cm.replaceSelection(output);
}
},
className: "fa fa-paragraph",
title: "Custom Paragraph",
}
],
status: false,
initialValue: '',
inputStyle: 'textarea'
});
// For mobile devices, add a touch event listener to show the keyboard
if (isMobileDevice()) {
easyMDE.codemirror.getWrapperElement().addEventListener('touchstart', function(e) {
e.stopPropagation();
easyMDE.codemirror.focus();
});
}
document.getElementById('postForm').addEventListener('submit', function(e) {
document.getElementById('content').value = easyMDE.value();
});
});
</script>
{% endblock %}

162
template/post_detail.html Normal file
View File

@ -0,0 +1,162 @@
{% extends "base.html" %}
{% block title %}Post Detail{% endblock %}
{% block content %}
<div class="container">
<div class="card mb-4">
<div class="card-body">
<div class="d-flex align-items-center mb-2">
{% if post.author %}
{% if post.author.profile_picture %}
<img src="{{ url_for('static', filename='uploads/' + post.author.profile_picture) }}" class="rounded-circle me-2" alt="Profile Picture" style="width: 30px; height: 30px; object-fit: cover;">
{% else %}
<div class="rounded-circle me-2 d-flex justify-content-center align-items-center bg-primary" style="width: 30px; height: 30px;">
<span class="text-white" style="font-size: 0.8rem;">{{ post.author.username[0].upper() }}</span>
</div>
{% endif %}
<small class="text-muted">
<a href="{{ url_for('profile', username=post.author.username) }}" class="text-decoration-none">{{ post.author.username }}</a>
</small>
{% else %}
<small class="text-muted">{{ post.anonymous_username }}</small>
{% endif %}
<span class="ms-auto text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
</div>
<p class="card-text">{{ post.content|safe }}</p>
{% if post.image_url %}
<img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image">
{% endif %}
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="btn-group mb-2">
<button class="btn btn-outline-primary btn-sm like-btn" data-post-id="{{ post.id }}">
<i class="bi bi-heart-fill"></i> Like (<span class="like-count">{{ post.likes|length }}</span>)
</button>
<button class="btn btn-outline-secondary btn-sm comment-btn" data-post-id="{{ post.id }}">
<i class="bi bi-chat-fill"></i> Comment ({{ post.comments|length }})
</button>
</div>
<div class="btn-group mb-2">
<button class="btn btn-outline-info btn-sm copy-link-btn" data-post-url="{{ url_for('post_detail', post_id=post.id, _external=True, _scheme='https') }}">
<i class="bi bi-link-45deg"></i> Copy Link
</button>
{% if current_user.is_authenticated and current_user.id == post.author.id %}
<a href="{{ url_for('edit_post', post_id=post.id) }}" class="btn btn-outline-warning btn-sm">
<i class="bi bi-pencil-fill"></i> Edit
</a>
{% endif %}
</div>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-body">
<h5 class="card-title mb-3">Comments</h5>
<ul class="list-unstyled">
{% for comment in post.comments %}
{% include 'comment.html' %}
{% endfor %}
</ul>
<form class="comment-form mt-3" data-post-id="{{ post.id }}">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add a comment" name="content" required>
<button class="btn btn-outline-secondary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
function initializePostInteractions() {
// Initialize like button
document.querySelector('.like-btn').addEventListener('click', handleLike);
// Initialize comment button
document.querySelector('.comment-btn').addEventListener('click', handleComment);
// Initialize copy link button
document.querySelector('.copy-link-btn').addEventListener('click', handleCopyLink);
// Initialize comment form
document.querySelector('.comment-form').addEventListener('submit', handleCommentSubmit);
// Initialize comment like buttons
document.querySelectorAll('.like-comment-btn').forEach(button => {
button.addEventListener('click', handleCommentLike);
});
}
function handleLike(event) {
var postId = this.dataset.postId;
fetch('/like/' + postId, { method: 'POST' })
.then(response => response.json())
.then(data => {
this.querySelector('.like-count').textContent = data.likes;
});
}
function handleComment(event) {
var postId = this.dataset.postId;
var commentSection = document.querySelector('.card.mt-4');
if (commentSection.style.display === 'none' || commentSection.style.display === '') {
commentSection.style.display = 'block';
} else {
commentSection.style.display = 'none';
}
}
function handleCommentLike(event) {
event.preventDefault();
var commentId = this.dataset.commentId;
fetch('/like_comment/' + commentId, { method: 'POST' })
.then(response => response.json())
.then(data => {
this.querySelector('.comment-like-count').textContent = data.likes;
});
}
function handleCommentSubmit(event) {
event.preventDefault();
var postId = this.dataset.postId;
var content = this.querySelector('input[name="content"]').value;
fetch('/comment/' + postId, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'content=' + encodeURIComponent(content)
})
.then(response => response.json())
.then(data => {
if (data.success) {
var commentList = document.querySelector('.card.mt-4 ul');
var newComment = document.createElement('li');
newComment.innerHTML = '<strong>' + (data.username !== 'Anonymous' ? '<a href="/profile/' + data.username + '">' + data.username + '</a>' : '<span class="text-white">Anonymous</span>') + ':</strong> ' + data.content +
'<button class="btn btn-sm btn-outline-primary like-comment-btn" data-comment-id="' + data.comment_id + '">' +
'<i class="bi bi-heart-fill"></i> (<span class="comment-like-count">0</span>)</button>';
commentList.appendChild(newComment);
this.querySelector('input[name="content"]').value = '';
}
});
}
function handleCopyLink(event) {
var postUrl = this.dataset.postUrl;
navigator.clipboard.writeText(postUrl).then(function() {
alert('Link copied to clipboard!');
}, function(err) {
console.error('Could not copy text: ', err);
});
}
// Initialize interactions for the initial page load
initializePostInteractions();
});
</script>
{% endblock %}