30bd4c62ad
Features Added: 🔥 Modern Chat System: - Real-time messaging with modern Tailwind CSS design - Post-linked discussions for adventure sharing - Chat categories (general, technical-support, adventure-planning) - Mobile-responsive interface with gradient backgrounds - JavaScript polling for live message updates 🎯 Comprehensive Admin Panel: - Chat room management with merge capabilities - Password reset system with email templates - User management with admin controls - Chat statistics and analytics dashboard - Room binding to posts and categorization �� Mobile API Integration: - RESTful API endpoints at /api/v1/chat - Session-based authentication for mobile apps - Comprehensive endpoints for rooms, messages, users - Mobile app compatibility (React Native, Flutter) 🛠️ Technical Improvements: - Enhanced database models with ChatRoom categories - Password reset token system with email verification - Template synchronization fixes for Docker deployment - Migration scripts for database schema updates - Improved error handling and validation 🎨 UI/UX Enhancements: - Modern card-based layouts matching app design - Consistent styling across chat and admin interfaces - Mobile-optimized touch interactions - Professional gradient designs and glass morphism effects 📚 Documentation: - Updated README with comprehensive API documentation - Added deployment instructions for Docker (port 8100) - Configuration guide for production environments - Mobile integration examples and endpoints This update transforms the platform into a comprehensive motorcycle adventure community with modern chat capabilities and professional admin management tools.
206 lines
11 KiB
HTML
206 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Post Discussions - Chat Rooms{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-teal-900 pt-16">
|
|
<!-- Header Section -->
|
|
<div class="relative overflow-hidden py-12">
|
|
<div class="absolute inset-0 bg-black/20"></div>
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
|
|
<h1 class="text-3xl font-bold text-white mb-2">
|
|
<i class="fas fa-newspaper mr-3"></i>Post Discussions
|
|
</h1>
|
|
<p class="text-blue-200">Chat rooms linked to community posts</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 -mt-6">
|
|
<!-- Navigation -->
|
|
<div class="flex justify-center mb-8">
|
|
<div class="bg-white rounded-2xl shadow-xl p-2 flex space-x-2">
|
|
<a href="{{ url_for('chat.index') }}"
|
|
class="px-4 py-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-all duration-200">
|
|
<i class="fas fa-comments mr-2"></i>All Chats
|
|
</a>
|
|
<span class="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-semibold">
|
|
<i class="fas fa-newspaper mr-2"></i>Post Discussions
|
|
</span>
|
|
<a href="{{ url_for('chat.create_room_form') }}"
|
|
class="px-4 py-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-all duration-200">
|
|
<i class="fas fa-plus mr-2"></i>Create Room
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
|
<div class="bg-gradient-to-r from-blue-600 to-cyan-600 p-6">
|
|
<div class="flex items-center text-white">
|
|
<i class="fas fa-chart-bar text-3xl mr-4"></i>
|
|
<div>
|
|
<h3 class="text-xl font-bold">{{ total_discussions }}</h3>
|
|
<p class="text-blue-100">Total Post Discussions</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
|
<div class="bg-gradient-to-r from-green-600 to-emerald-600 p-6">
|
|
<div class="flex items-center text-white">
|
|
<i class="fas fa-fire text-3xl mr-4"></i>
|
|
<div>
|
|
<h3 class="text-xl font-bold">{{ active_discussions }}</h3>
|
|
<p class="text-green-100">Active This Week</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if rooms.items %}
|
|
<!-- Discussion Rooms -->
|
|
<div class="space-y-6">
|
|
{% for room in rooms.items %}
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
|
|
<div class="p-6">
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="flex-1">
|
|
<!-- Room Header -->
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1">
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">{{ room.name }}</h3>
|
|
{% if room.description %}
|
|
<p class="text-gray-600 mb-3">{{ room.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold ml-4">
|
|
<i class="fas fa-comments mr-1"></i>{{ room.message_count or 0 }} messages
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Related Post -->
|
|
{% if room.related_post %}
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4">
|
|
<div class="flex items-start">
|
|
<i class="fas fa-link text-blue-600 mr-3 mt-1"></i>
|
|
<div class="flex-1">
|
|
<h4 class="font-semibold text-blue-800 mb-1">Discussing Post:</h4>
|
|
<a href="{{ url_for('community.post_detail', id=room.related_post.id) }}"
|
|
class="text-blue-700 hover:text-blue-900 font-medium">
|
|
{{ room.related_post.title }}
|
|
</a>
|
|
<p class="text-blue-600 text-sm mt-1">
|
|
by {{ room.related_post.author.nickname }} •
|
|
{{ room.related_post.created_at.strftime('%B %d, %Y') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Room Info -->
|
|
<div class="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
|
<span>
|
|
<i class="fas fa-user mr-1"></i>
|
|
Created by {{ room.created_by.nickname }}
|
|
</span>
|
|
<span>
|
|
<i class="fas fa-users mr-1"></i>
|
|
{{ room.participants.count() }} members
|
|
</span>
|
|
<span>
|
|
<i class="fas fa-clock mr-1"></i>
|
|
{% if room.last_activity %}
|
|
Last activity {{ room.last_activity.strftime('%m/%d/%Y at %I:%M %p') }}
|
|
{% else %}
|
|
No recent activity
|
|
{% endif %}
|
|
</span>
|
|
{% if room.is_private %}
|
|
<span class="bg-amber-100 text-amber-800 px-2 py-1 rounded-full">
|
|
<i class="fas fa-lock mr-1"></i>Private
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="mt-4 lg:mt-0 lg:ml-6 flex flex-col space-y-2">
|
|
<a href="{{ url_for('chat.room', room_id=room.id) }}"
|
|
class="inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200">
|
|
<i class="fas fa-sign-in-alt mr-2"></i>Join Discussion
|
|
</a>
|
|
{% if room.related_post %}
|
|
<a href="{{ url_for('community.post_detail', id=room.related_post.id) }}"
|
|
class="inline-flex items-center justify-center px-6 py-2 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-all duration-200">
|
|
<i class="fas fa-eye mr-2"></i>View Post
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if rooms.pages > 1 %}
|
|
<div class="flex justify-center mt-8">
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
|
<div class="flex">
|
|
{% if rooms.has_prev %}
|
|
<a href="{{ url_for('chat.post_discussions', page=rooms.prev_num) }}"
|
|
class="px-4 py-2 text-gray-600 hover:bg-gray-100 transition-all duration-200">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% for page_num in rooms.iter_pages() %}
|
|
{% if page_num %}
|
|
{% if page_num != rooms.page %}
|
|
<a href="{{ url_for('chat.post_discussions', page=page_num) }}"
|
|
class="px-4 py-2 text-gray-600 hover:bg-gray-100 transition-all duration-200">
|
|
{{ page_num }}
|
|
</a>
|
|
{% else %}
|
|
<span class="px-4 py-2 bg-blue-600 text-white">{{ page_num }}</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="px-4 py-2 text-gray-400">...</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if rooms.has_next %}
|
|
<a href="{{ url_for('chat.post_discussions', page=rooms.next_num) }}"
|
|
class="px-4 py-2 text-gray-600 hover:bg-gray-100 transition-all duration-200">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<!-- Empty State -->
|
|
<div class="text-center py-16">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-12 border border-white/20">
|
|
<i class="fas fa-newspaper text-6xl text-white/50 mb-6"></i>
|
|
<h3 class="text-2xl font-bold text-white mb-4">No post discussions yet</h3>
|
|
<p class="text-blue-200 mb-8">Create the first chat room linked to a community post!</p>
|
|
<a href="{{ url_for('chat.create_room_form') }}"
|
|
class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
|
|
<i class="fas fa-plus mr-2"></i>Create Post Discussion
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|