Gokuldevx/civic-fix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Gokuldevx
2025-08-22 05:11:12 +05:30
parent 26e1466a95
commit f34b412cc9
1 changed files with 166 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
civicfix/core/templates/core/view_all_issues.html
+166
View File
@@ -0,0 +1,166 @@
{% extends "core/base.html" %}
{% block content %}
<div class="container my-5">
<!-- Header + Filter -->
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
<h2 class="fw-bold mb-0">All Reported Issues</h2>
<form method="get" class="d-flex flex-wrap gap-2">
<select name="status" class="form-select">
<option value="">All Status</option>
<option value="reported" {% if request.GET.status == "reported" %}selected{% endif %}>Reported</option>
<option value="acknowledged" {% if request.GET.status == "acknowledged" %}selected{% endif %}>Acknowledged</option>
<option value="in_progress" {% if request.GET.status == "in_progress" %}selected{% endif %}>In Progress</option>
<option value="resolved" {% if request.GET.status == "resolved" %}selected{% endif %}>Resolved</option>
</select>
<select name="category" class="form-select">
<option value="">All Categories</option>
{% for cat in categories %}
<option value="{{ cat.id }}" {% if request.GET.category == cat.id|stringformat:"s" %}selected{% endif %}>
{{ cat.name }}
</option>
{% endfor %}
</select>
<button type="submit" class="btn btn-primary">
<i class="fas fa-filter me-1"></i> Filter
</button>
</form>
</div>
<!-- Issue Cards -->
<div class="row g-4">
{% for issue in issues %}
<div class="col-md-4">
<div class="card issue-card h-100 shadow-sm border-0">
{% if issue.photo %}
<img src="{{ issue.photo.url }}" class="card-img-top" alt="{{ issue.title }}" style="height: 200px; object-fit: cover;">
{% else %}
<img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=No+Image" class="card-img-top" alt="No image">
{% endif %}
<div class="card-body d-flex flex-column">
<!-- Category Badge -->
<span class="badge bg-{% if issue.category.name == 'Roads' %}warning text-dark{% elif issue.category.name == 'Sanitation' %}success{% else %}info{% endif %} mb-2">
{{ issue.category.name|default:"General" }}
</span>
<!-- Title + Description -->
<h5 class="card-title">{{ issue.title|truncatewords:6 }}</h5>
<p class="card-text text-muted flex-grow-1">{{ issue.description|truncatewords:18 }}</p>
<!-- Location + Vote -->
<div class="d-flex justify-content-between align-items-center mt-3">
<small class="text-muted"><i class="fas fa-map-marker-alt me-1"></i> {{ issue.location|truncatewords:2 }}</small>
<div class="vote-section">
{% if user.is_authenticated %}
<button class="btn btn-sm btn-outline-primary vote-btn {% if issue.user_has_voted %}active{% endif %}"
data-issue-id="{{ issue.id }}">
<i class="fas fa-thumbs-up"></i>
<span class="vote-count">{{ issue.vote_count }}</span>
</button>
{% else %}
<a href="{% url 'login' %}" class="btn btn-sm btn-outline-primary">
<i class="fas fa-thumbs-up"></i>
<span class="vote-count">{{ issue.vote_count }}</span>
</a>
{% endif %}
</div>
</div>
</div>
<div class="card-footer bg-transparent">
<small class="text-{% if issue.status == 'resolved' %}success{% elif issue.status == 'in_progress' %}warning{% else %}info{% endif %}">
<i class="fas fa-{% if issue.status == 'resolved' %}check-circle{% elif issue.status == 'in_progress' %}tasks{% else %}clock{% endif %} me-1"></i>
{{ issue.get_status_display }}
</small>
</div>
</div>
</div>
{% empty %}
<div class="col-12 text-center py-5">
<i class="fas fa-inbox fa-3x text-muted mb-3"></i>
<h4>No issues reported yet</h4>
<p class="text-muted">Be the first to report an issue in your community!</p>
<a href="{% url 'citizen_dashboard' %}" class="btn btn-primary">Report an Issue</a>
</div>
{% endfor %}
</div>
</div>
<!-- Styling -->
<style>
.issue-card {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.issue-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.vote-btn.active {
background-color: #0d6efd;
color: white;
border-color: #0d6efd;
}
.vote-btn:hover:not(:disabled) {
transform: scale(1.05);
transition: transform 0.2s;
}
.vote-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
{% endblock %}
{% block extra_js %}
<script>
// CSRF Helper
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
document.cookie.split(';').forEach(cookie => {
cookie = cookie.trim();
if (cookie.startsWith(name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
}
});
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
// Handle vote clicks
document.addEventListener('click', function (e) {
const btn = e.target.closest('.vote-btn');
if (!btn) return;
e.preventDefault();
const issueId = btn.dataset.issueId;
if (!issueId) return;
const originalHTML = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
fetch("{% url 'vote_issue' 0 %}".replace('0', issueId), {
method: 'POST',
headers: {
'X-CSRFToken': csrftoken,
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(r => r.json())
.then(data => {
if (!data.success) throw new Error(data.error || 'Vote failed');
btn.classList.toggle('active', data.voted);
btn.innerHTML = '<i class="fas fa-thumbs-up"></i> <span class="vote-count">' + data.vote_count + '</span>';
})
.catch(err => {
console.error(err);
alert('Error: ' + err.message);
btn.innerHTML = originalHTML;
})
.finally(() => {
btn.disabled = false;
});
});
</script>
{% endblock %}