From 5a12e7aefa84635e03041163ba79943a96a13010 Mon Sep 17 00:00:00 2001
From: spitkov <bence@spitkov.hu>
Date: Fri, 20 Sep 2024 17:13:37 +0200
Subject: [PATCH] part idk

---
 template/index.html        | 221 +++++++++++++++++++++++++++++++++++++
 template/login.html        |  18 +++
 template/manage_group.html |  24 ++++
 template/post.html         | 139 +++++++++++++++++++++++
 template/post_detail.html  | 162 +++++++++++++++++++++++++++
 5 files changed, 564 insertions(+)
 create mode 100644 template/index.html
 create mode 100644 template/login.html
 create mode 100644 template/manage_group.html
 create mode 100644 template/post.html
 create mode 100644 template/post_detail.html

diff --git a/template/index.html b/template/index.html
new file mode 100644
index 0000000..30436d6
--- /dev/null
+++ b/template/index.html
@@ -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 %}
\ No newline at end of file
diff --git a/template/login.html b/template/login.html
new file mode 100644
index 0000000..eafc255
--- /dev/null
+++ b/template/login.html
@@ -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 %}
\ No newline at end of file
diff --git a/template/manage_group.html b/template/manage_group.html
new file mode 100644
index 0000000..eb369b0
--- /dev/null
+++ b/template/manage_group.html
@@ -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 %}
\ No newline at end of file
diff --git a/template/post.html b/template/post.html
new file mode 100644
index 0000000..0c416aa
--- /dev/null
+++ b/template/post.html
@@ -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 %}
\ No newline at end of file
diff --git a/template/post_detail.html b/template/post_detail.html
new file mode 100644
index 0000000..0203a29
--- /dev/null
+++ b/template/post_detail.html
@@ -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 %}
\ No newline at end of file