327 lines
16 KiB
HTML
327 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Feed{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen"
|
|
x-data="{
|
|
posts: [],
|
|
loading: false,
|
|
page: 1,
|
|
hasMore: true,
|
|
newPostContent: '',
|
|
isPosting: false,
|
|
|
|
async loadPosts() {
|
|
if (this.loading || !this.hasMore) return;
|
|
|
|
this.loading = true;
|
|
try {
|
|
const response = await fetch(`/api/feed?page=${this.page}&per_page=10`);
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
if (this.page === 1) {
|
|
this.posts = data.posts;
|
|
} else {
|
|
this.posts = [...this.posts, ...data.posts];
|
|
}
|
|
this.hasMore = data.has_next;
|
|
this.page++;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading posts:', error);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async createPost() {
|
|
if (!this.newPostContent.trim() || this.isPosting) return;
|
|
|
|
this.isPosting = true;
|
|
try {
|
|
const response = await fetch('/api/posts', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
content: this.newPostContent
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
this.posts.unshift(data.post);
|
|
this.newPostContent = '';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating post:', error);
|
|
} finally {
|
|
this.isPosting = false;
|
|
}
|
|
},
|
|
|
|
async toggleLike(postId, index) {
|
|
try {
|
|
const response = await fetch(`/api/posts/${postId}/like`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
this.posts[index].like_count = data.like_count;
|
|
this.posts[index].is_liked = data.is_liked;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error toggling like:', error);
|
|
}
|
|
},
|
|
|
|
formatTimeAgo(dateString) {
|
|
const date = new Date(dateString);
|
|
const now = new Date();
|
|
const diffInSeconds = Math.floor((now - date) / 1000);
|
|
|
|
if (diffInSeconds < 60) return 'vor wenigen Sekunden';
|
|
if (diffInSeconds < 3600) return `vor ${Math.floor(diffInSeconds / 60)} Min`;
|
|
if (diffInSeconds < 86400) return `vor ${Math.floor(diffInSeconds / 3600)} Std`;
|
|
return `vor ${Math.floor(diffInSeconds / 86400)} Tagen`;
|
|
},
|
|
|
|
init() {
|
|
this.loadPosts();
|
|
}
|
|
}"
|
|
x-init="init()">
|
|
|
|
<!-- Main Container -->
|
|
<div class="max-w-2xl mx-auto px-4 py-6 space-y-6">
|
|
|
|
<!-- Post Composer -->
|
|
<div class="rounded-2xl p-6 shadow-lg border transition-all duration-300"
|
|
:class="darkMode
|
|
? 'bg-gray-800/90 border-gray-700/50 backdrop-blur-xl'
|
|
: 'bg-white/80 border-gray-200/50 backdrop-blur-xl'">
|
|
|
|
<!-- User Avatar and Input -->
|
|
<div class="flex items-start space-x-4">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white font-semibold text-lg shadow-md">
|
|
{{ current_user.username[0].upper() }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<textarea
|
|
x-model="newPostContent"
|
|
@keydown.meta.enter="createPost()"
|
|
@keydown.ctrl.enter="createPost()"
|
|
class="w-full resize-none border-0 focus:ring-0 text-lg placeholder-gray-400 transition-all duration-200"
|
|
:class="darkMode
|
|
? 'bg-transparent text-white'
|
|
: 'bg-transparent text-gray-900'"
|
|
placeholder="Was beschäftigt dich heute?"
|
|
rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post Actions -->
|
|
<div class="mt-4 pt-4 border-t flex items-center justify-between"
|
|
:class="darkMode ? 'border-gray-700' : 'border-gray-200'">
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<button class="flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200"
|
|
:class="darkMode
|
|
? 'text-gray-300 hover:bg-gray-700/50'
|
|
: 'text-gray-500 hover:bg-gray-100'">
|
|
<i class="fas fa-image text-lg"></i>
|
|
<span class="text-sm font-medium">Foto</span>
|
|
</button>
|
|
|
|
<button class="flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200"
|
|
:class="darkMode
|
|
? 'text-gray-300 hover:bg-gray-700/50'
|
|
: 'text-gray-500 hover:bg-gray-100'">
|
|
<i class="fas fa-brain text-lg"></i>
|
|
<span class="text-sm font-medium">Gedanken</span>
|
|
</button>
|
|
</div>
|
|
|
|
<button @click="createPost()"
|
|
:disabled="!newPostContent.trim() || isPosting"
|
|
class="px-6 py-2.5 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500/50 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
|
|
:class="darkMode
|
|
? 'bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg hover:shadow-xl'
|
|
: 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-md hover:shadow-lg'">
|
|
<span x-show="!isPosting">Teilen</span>
|
|
<span x-show="isPosting" class="flex items-center space-x-2">
|
|
<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span>Poste...</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Posts Feed -->
|
|
<div class="space-y-6">
|
|
<!-- Loading State -->
|
|
<div x-show="loading && posts.length === 0"
|
|
class="text-center py-12">
|
|
<div class="inline-flex items-center space-x-3"
|
|
:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
|
<svg class="animate-spin h-6 w-6" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span class="text-lg">Lade Posts...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div x-show="!loading && posts.length === 0"
|
|
class="text-center py-16">
|
|
<div class="mb-6">
|
|
<i class="fas fa-stream text-6xl mb-4"
|
|
:class="darkMode ? 'text-gray-600' : 'text-gray-300'"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-2"
|
|
:class="darkMode ? 'text-white' : 'text-gray-900'">
|
|
Noch keine Posts
|
|
</h3>
|
|
<p class="text-lg mb-6"
|
|
:class="darkMode ? 'text-gray-400' : 'text-gray-600'">
|
|
Folge anderen Nutzern oder erstelle deinen ersten Post!
|
|
</p>
|
|
<a href="{{ url_for('discover') }}"
|
|
class="inline-flex items-center space-x-2 px-6 py-3 rounded-xl font-semibold transition-all duration-300 bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-lg hover:shadow-xl transform hover:scale-105">
|
|
<i class="fas fa-compass"></i>
|
|
<span>Entdecken</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Posts -->
|
|
<template x-for="(post, index) in posts" :key="post.id">
|
|
<article class="rounded-2xl p-6 shadow-lg border transition-all duration-300 hover:shadow-xl"
|
|
:class="darkMode
|
|
? 'bg-gray-800/90 border-gray-700/50 backdrop-blur-xl'
|
|
: 'bg-white/80 border-gray-200/50 backdrop-blur-xl'">
|
|
|
|
<!-- Post Header -->
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white font-semibold text-lg shadow-md">
|
|
<span x-text="post.author.username.charAt(0).toUpperCase()"></span>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center space-x-2">
|
|
<h4 class="font-semibold truncate"
|
|
:class="darkMode ? 'text-white' : 'text-gray-900'"
|
|
x-text="post.author.display_name || post.author.username"></h4>
|
|
<span x-show="post.author.is_verified"
|
|
class="text-blue-500">
|
|
<i class="fas fa-check-circle text-sm"></i>
|
|
</span>
|
|
</div>
|
|
<p class="text-sm"
|
|
:class="darkMode ? 'text-gray-400' : 'text-gray-500'"
|
|
x-text="formatTimeAgo(post.created_at)"></p>
|
|
</div>
|
|
|
|
<button class="p-2 rounded-lg transition-all duration-200"
|
|
:class="darkMode
|
|
? 'text-gray-400 hover:bg-gray-700/50'
|
|
: 'text-gray-400 hover:bg-gray-100'">
|
|
<i class="fas fa-ellipsis-h"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Post Content -->
|
|
<div class="mb-4">
|
|
<p class="text-lg leading-relaxed whitespace-pre-wrap"
|
|
:class="darkMode ? 'text-gray-100' : 'text-gray-800'"
|
|
x-text="post.content"></p>
|
|
</div>
|
|
|
|
<!-- Post Actions -->
|
|
<div class="flex items-center justify-between pt-4 border-t"
|
|
:class="darkMode ? 'border-gray-700' : 'border-gray-200'">
|
|
|
|
<div class="flex items-center space-x-6">
|
|
<button @click="toggleLike(post.id, index)"
|
|
class="flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 group"
|
|
:class="post.is_liked
|
|
? (darkMode ? 'text-red-400 bg-red-500/10' : 'text-red-500 bg-red-50')
|
|
: (darkMode ? 'text-gray-400 hover:bg-gray-700/50' : 'text-gray-500 hover:bg-gray-100')">
|
|
<i class="fas fa-heart transition-transform duration-200 group-hover:scale-110"
|
|
:class="post.is_liked ? 'fas' : 'far'"></i>
|
|
<span class="text-sm font-medium" x-text="post.like_count || 0"></span>
|
|
</button>
|
|
|
|
<button class="flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200"
|
|
:class="darkMode
|
|
? 'text-gray-400 hover:bg-gray-700/50'
|
|
: 'text-gray-500 hover:bg-gray-100'">
|
|
<i class="far fa-comment"></i>
|
|
<span class="text-sm font-medium" x-text="post.comment_count || 0"></span>
|
|
</button>
|
|
|
|
<button class="flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200"
|
|
:class="darkMode
|
|
? 'text-gray-400 hover:bg-gray-700/50'
|
|
: 'text-gray-500 hover:bg-gray-100'">
|
|
<i class="fas fa-share"></i>
|
|
<span class="text-sm font-medium" x-text="post.share_count || 0"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<button class="p-2 rounded-lg transition-all duration-200"
|
|
:class="darkMode
|
|
? 'text-gray-400 hover:bg-gray-700/50'
|
|
: 'text-gray-400 hover:bg-gray-100'">
|
|
<i class="far fa-bookmark"></i>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Load More Button -->
|
|
<div x-show="hasMore && !loading && posts.length > 0"
|
|
class="text-center py-6">
|
|
<button @click="loadPosts()"
|
|
class="px-8 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105"
|
|
:class="darkMode
|
|
? 'bg-gray-800 text-white border border-gray-700 hover:bg-gray-700'
|
|
: 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50'"
|
|
:disabled="loading">
|
|
<span x-show="!loading">Mehr laden</span>
|
|
<span x-show="loading" class="flex items-center space-x-2">
|
|
<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span>Lade...</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading More Posts -->
|
|
<div x-show="loading && posts.length > 0"
|
|
class="text-center py-6">
|
|
<div class="inline-flex items-center space-x-3"
|
|
:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
|
|
<svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span>Lade weitere Posts...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |