update to volunteer
This commit is contained in:
Mann Patel
@@ -100,7 +100,7 @@
|
||||
>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Validated</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Address</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Cordinates</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Coordinates</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Assigned User</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Appointment</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Assign</th>
|
||||
@@ -158,7 +158,7 @@
|
||||
{{ else }}
|
||||
<button
|
||||
class="px-3 py-1 bg-blue-600 text-white text-sm hover:bg-blue-700"
|
||||
onclick="openAssignModal({{ .AddressID }})"
|
||||
onclick="openAssignModal({{ .AddressID }}, '{{ .Address }}')"
|
||||
>
|
||||
Assign
|
||||
</button>
|
||||
@@ -187,7 +187,7 @@
|
||||
</tr>
|
||||
{{ else }}
|
||||
<tr>
|
||||
<td colspan="9" class="px-6 py-8 text-center text-gray-500">
|
||||
<td colspan="7" class="px-6 py-8 text-center text-gray-500">
|
||||
No addresses found
|
||||
</td>
|
||||
</tr>
|
||||
@@ -201,37 +201,125 @@
|
||||
id="assignModal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50"
|
||||
>
|
||||
<div class="bg-white p-6 rounded shadow-lg w-96">
|
||||
<h2 class="text-lg font-semibold mb-4">Assign Address</h2>
|
||||
<form id="assignForm" method="POST" action="/assign_address">
|
||||
<div class="bg-white w-full max-w-lg mx-4 shadow-lg">
|
||||
<!-- Modal Header -->
|
||||
<div
|
||||
class="flex justify-between items-center px-6 py-4 border-b border-gray-200"
|
||||
>
|
||||
<h2 class="text-lg font-semibold text-gray-900">Assign Address</h2>
|
||||
<button
|
||||
onclick="closeAssignModal()"
|
||||
class="text-gray-400 hover:text-gray-600 focus:outline-none"
|
||||
>
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
<form
|
||||
id="assignForm"
|
||||
method="POST"
|
||||
action="/assign_address"
|
||||
class="p-6 space-y-4"
|
||||
>
|
||||
<input type="hidden" name="address_id" id="modalAddressID" />
|
||||
<label for="user_id" class="block text-sm font-medium mb-2"
|
||||
>Select User</label
|
||||
>
|
||||
<select
|
||||
name="user_id"
|
||||
id="user_id"
|
||||
class="w-full border border-gray-300 px-3 py-2 mb-4 rounded"
|
||||
required
|
||||
>
|
||||
<option value="">-- Select User --</option>
|
||||
{{ range .Users }}
|
||||
<option value="{{ .ID }}">{{ .Name }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
<div class="flex justify-end gap-2">
|
||||
|
||||
<!-- Selected Address Display -->
|
||||
<div class="bg-gray-50 p-3 border border-gray-200">
|
||||
<div class="flex items-center space-x-2 mb-4">
|
||||
<i class="fas fa-map-marker-alt text-gray-500"></i>
|
||||
<span class="font-medium text-gray-900">Selected Address:</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-700 mb-4" id="selected-address">
|
||||
None selected
|
||||
</div>
|
||||
|
||||
<!-- User Selection -->
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="user_id"
|
||||
class="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
<i class="fas fa-user mr-2"></i>Select User
|
||||
</label>
|
||||
<select
|
||||
name="user_id"
|
||||
id="user_id"
|
||||
class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
||||
required
|
||||
>
|
||||
<option value="">-- Select User --</option>
|
||||
{{ range .Users }}
|
||||
<option value="{{ .ID }}">{{ .Name }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Date Selection -->
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="appointment-date"
|
||||
class="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
<i class="fas fa-calendar mr-2"></i>Appointment Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="appointment-date"
|
||||
name="appointment_date"
|
||||
required
|
||||
class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
||||
min=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Time Selection -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Start Time -->
|
||||
<div>
|
||||
<label
|
||||
for="time"
|
||||
class="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
<i class="fas fa-clock mr-2"></i>Time
|
||||
</label>
|
||||
<select
|
||||
id="time"
|
||||
name="time"
|
||||
required
|
||||
onchange="updateEndTime()"
|
||||
class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="">Select Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duration Display -->
|
||||
<div class="bg-blue-50 p-3 border border-blue-200">
|
||||
<div class="flex items-center space-x-2 text-blue-800">
|
||||
<i class="fas fa-stopwatch"></i>
|
||||
<span class="text-sm font-medium"
|
||||
>Duration: <span id="duration-display">0 minutes</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Actions -->
|
||||
<div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
onclick="closeAssignModal()"
|
||||
class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
|
||||
class="px-4 py-2 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
Assign
|
||||
<i class="fas fa-check mr-2"></i> Assign
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -239,26 +327,105 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Square corners across UI */
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function openAssignModal(addressID) {
|
||||
// Generate time options in 10-minute increments
|
||||
function generateTimeOptions() {
|
||||
const times = [];
|
||||
for (let hour = 0; hour < 24; hour++) {
|
||||
for (let minute = 0; minute < 60; minute += 20) {
|
||||
const timeString =
|
||||
String(hour).padStart(2, "0") + ":" + String(minute).padStart(2, "0");
|
||||
const displayTime = formatTime12Hour(hour, minute);
|
||||
times.push({ value: timeString, display: displayTime });
|
||||
}
|
||||
}
|
||||
return times;
|
||||
}
|
||||
|
||||
// Format time to 12-hour format
|
||||
function formatTime12Hour(hour, minute) {
|
||||
const ampm = hour >= 12 ? "PM" : "AM";
|
||||
const displayHour = hour % 12 || 12;
|
||||
return displayHour + ":" + String(minute).padStart(2, "0") + " " + ampm;
|
||||
}
|
||||
|
||||
// Populate time dropdown
|
||||
function populateTimeSelect() {
|
||||
const timeSelect = document.getElementById("time");
|
||||
const times = generateTimeOptions();
|
||||
|
||||
timeSelect.innerHTML = '<option value="">Select Time</option>';
|
||||
times.forEach((time) => {
|
||||
const option = new Option(time.display, time.value);
|
||||
timeSelect.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
function openAssignModal(addressID, address) {
|
||||
document.getElementById("modalAddressID").value = addressID;
|
||||
document.getElementById("selected-address").textContent =
|
||||
address || "Address ID: " + addressID;
|
||||
|
||||
// Set minimum date to today
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
document.getElementById("appointment-date").min = today;
|
||||
document.getElementById("appointment-date").value = today;
|
||||
|
||||
document.getElementById("assignModal").classList.remove("hidden");
|
||||
document.getElementById("assignModal").classList.add("flex");
|
||||
}
|
||||
|
||||
function closeAssignModal() {
|
||||
document.getElementById("assignModal").classList.remove("flex");
|
||||
document.getElementById("assignModal").classList.add("hidden");
|
||||
document.getElementById("assignForm").reset();
|
||||
document.getElementById("selected-address").textContent = "None selected";
|
||||
}
|
||||
|
||||
function goToPage(page) {
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
urlParams.set("page", page);
|
||||
window.location.search = urlParams.toString();
|
||||
}
|
||||
|
||||
function changePageSize(pageSize) {
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
urlParams.set("pageSize", pageSize);
|
||||
urlParams.set("page", 1);
|
||||
window.location.search = urlParams.toString();
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
populateTimeSelect();
|
||||
|
||||
// Close modal when clicking outside
|
||||
document
|
||||
.getElementById("assignModal")
|
||||
.addEventListener("click", function (e) {
|
||||
if (e.target === this) {
|
||||
closeAssignModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{{ end }}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
{{ define "content" }}
|
||||
<div class="container mx-auto mt-6">
|
||||
<h2 class="text-2xl font-bold mb-4">Assigned Addresses</h2>
|
||||
|
||||
<table class="min-w-full border border-gray-300 shadow-md">
|
||||
<thead>
|
||||
<tr class="bg-gray-200">
|
||||
<th class="px-4 py-2 border">ID</th>
|
||||
<th class="px-4 py-2 border">Address</th>
|
||||
<th class="px-4 py-2 border">Assigned</th>
|
||||
<th class="px-4 py-2 border">Volunteer</th>
|
||||
<th class="px-4 py-2 border">Email</th>
|
||||
<th class="px-4 py-2 border">Phone</th>
|
||||
<th class="px-4 py-2 border">Appointment Date</th>
|
||||
<th class="px-4 py-2 border">Appointment Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .AssignedList}}
|
||||
<tr class="hover:bg-gray-100">
|
||||
<td class="px-4 py-2 border">{{.AddressID}}</td>
|
||||
<td class="px-4 py-2 border">
|
||||
{{.Address}} {{.StreetName}} {{.StreetType}} {{.StreetQuadrant}}
|
||||
</td>
|
||||
<td class="px-4 py-2 border">
|
||||
{{if .Assigned}}✅ Yes{{else}}❌ No{{end}}
|
||||
</td>
|
||||
<td class="px-4 py-2 border">{{.UserName}}</td>
|
||||
<td class="px-4 py-2 border">{{.UserEmail}}</td>
|
||||
<td class="px-4 py-2 border">{{.UserPhone}}</td>
|
||||
<td class="px-4 py-2 border">{{.AppointmentDate}}</td>
|
||||
<td class="px-4 py-2 border">{{.AppointmentTime}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -8,7 +8,7 @@
|
||||
<i
|
||||
class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-calendar-alt{{end}} text-green-600"
|
||||
></i>
|
||||
<span class="text-sm font-medium"> Appointments </span>
|
||||
<span class="text-sm font-medium">Appointments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,7 +42,7 @@
|
||||
class="text-left text-gray-700 font-medium border-b border-gray-200"
|
||||
>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Address</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Cordinated</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Coordinates</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Appointment Date</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Appointment Time</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Poll Question</th>
|
||||
@@ -68,11 +68,16 @@
|
||||
{{ .AppointmentTime.Format "15:04" }}
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
<button
|
||||
class="px-3 py-1 bg-blue-600 text-white text-sm hover:bg-blue-700"
|
||||
{{ if .HasPollResponse }}
|
||||
<span class="{{ .PollButtonClass }}"> {{ .PollButtonText }} </span>
|
||||
{{ else }}
|
||||
<a
|
||||
href="/poll?address_id={{ .AddressID }}"
|
||||
class="{{ .PollButtonClass }}"
|
||||
>
|
||||
Ask Poll
|
||||
</button>
|
||||
{{ .PollButtonText }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
{{ else }}
|
||||
|
||||
@@ -1,122 +1,286 @@
|
||||
{{ define "content" }}
|
||||
<div class="flex flex-col min-h-screen bg-gray-100">
|
||||
<!-- Optional Header -->
|
||||
<header class="bg-white shadow p-4">
|
||||
<h1 class="text-xl font-bold">Community</h1>
|
||||
</header>
|
||||
|
||||
<!-- Scrollable Posts -->
|
||||
<main class="flex-1 overflow-y-auto px-2 py-4 max-w-2xl mx-auto space-y-4">
|
||||
<!-- Posts Feed -->
|
||||
{{range .Posts}}
|
||||
<article class="bg-white border-b border-gray-200">
|
||||
<!-- Post Header -->
|
||||
<div class="flex items-center px-6 py-4">
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-10 h-10 bg-blue-500 flex items-center justify-center text-white font-semibold"
|
||||
>
|
||||
{{slice .AuthorName 0 1}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-semibold text-gray-900">{{.AuthorName}}</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
{{.CreatedAt.Format "Jan 2, 2006"}}
|
||||
</p>
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<!-- Top Navigation -->
|
||||
<div class="bg-white border-b border-gray-200 px-4 sm:px-6 py-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fas fa-tachometer-alt text-green-600"></i>
|
||||
<span class="text-sm font-medium">Volunteer Dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post Image -->
|
||||
{{if .ImageURL}}
|
||||
<div class="w-full">
|
||||
<img
|
||||
src="{{.ImageURL}}"
|
||||
alt="Post image"
|
||||
class="w-full max-h-96 object-cover"
|
||||
onerror="this.parentElement.style.display='none'"
|
||||
/>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- Post Actions -->
|
||||
<div class="px-6 py-3">
|
||||
<div class="flex items-center space-x-6">
|
||||
<button
|
||||
class="reaction-btn flex items-center space-x-2 text-gray-600 hover:text-blue-500 transition-colors"
|
||||
data-post-id="{{.PostID}}"
|
||||
data-reaction="like"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V18m-7-8a2 2 0 01-2-2V7a2 2 0 012-2h3.764a2 2 0 011.789 1.106L14 8v2m-7-8V5a2 2 0 012-2h1m-5 10h3m4 3H8"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium like-count">0</span>
|
||||
</button>
|
||||
<button
|
||||
class="reaction-btn flex items-center space-x-2 text-gray-600 hover:text-red-500 transition-colors"
|
||||
data-post-id="{{.PostID}}"
|
||||
data-reaction="dislike"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018c.163 0 .326.02.485.06L17 4m-7 10v-8m7 8a2 2 0 002 2v1a2 2 0 01-2 2h-3.764a2 2 0 01-1.789-1.106L10 16v-2m7 8V19a2 2 0 00-2-2h-1m5-10H12m-4-3h4"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium dislike-count">0</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post Content -->
|
||||
{{if .Content}}
|
||||
<div class="px-6 pb-4">
|
||||
<p class="text-gray-900 leading-relaxed">
|
||||
<span class="font-semibold">{{.AuthorName}}</span> {{.Content}}
|
||||
</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</article>
|
||||
{{else}}
|
||||
<div class="bg-white p-12 text-center">
|
||||
<div class="max-w-sm mx-auto">
|
||||
<svg
|
||||
class="w-16 h-16 mx-auto text-gray-300 mb-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">No posts yet</h3>
|
||||
<p class="text-gray-500">
|
||||
Be the first to share something with the community!
|
||||
</p>
|
||||
<div class="text-sm text-gray-600 hidden sm:block">
|
||||
Welcome back, {{ .UserName }}!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 overflow-hidden bg-gray-50">
|
||||
<div class="h-full flex flex-col lg:flex-row gap-6 p-4 sm:p-6">
|
||||
<!-- Left Column - Posts -->
|
||||
<div class="flex-1 lg:flex-none lg:w-2/3 space-y-0">
|
||||
{{ if .Posts }}{{range .Posts}}
|
||||
<article class="bg-white border-b border-gray-200">
|
||||
<!-- Post Header -->
|
||||
<div class="flex items-center px-4 sm:px-6 py-4">
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-10 h-10 bg-blue-500 flex items-center justify-center text-white font-semibold rounded-full"
|
||||
>
|
||||
{{slice .AuthorName 0 1}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-semibold text-gray-900">{{.AuthorName}}</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
{{.CreatedAt.Format "Jan 2, 2006"}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post Image -->
|
||||
{{if .ImageURL}}
|
||||
<div class="w-full">
|
||||
<img
|
||||
src="{{.ImageURL}}"
|
||||
alt="Post image"
|
||||
class="w-full max-h-96 object-cover"
|
||||
onerror="this.parentElement.style.display='none'"
|
||||
/>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<!-- Post Content -->
|
||||
{{if .Content}}
|
||||
<div class="px-4 sm:px-6 pt-2 pb-4">
|
||||
<p class="text-gray-900 leading-relaxed">
|
||||
<span class="font-semibold">{{.AuthorName}}</span> {{.Content}}
|
||||
</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</article>
|
||||
{{else}}
|
||||
<div class="bg-white p-8 sm:p-12 text-center border-b border-gray-200">
|
||||
<div class="max-w-sm mx-auto">
|
||||
<svg
|
||||
class="w-16 h-16 mx-auto text-gray-300 mb-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">No posts yet</h3>
|
||||
<p class="text-gray-500">
|
||||
Be the first to share something with the community!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }} {{ else }}
|
||||
<div class="bg-white border-b border-gray-200 p-8 sm:p-12 text-center">
|
||||
<div class="max-w-sm mx-auto">
|
||||
<div
|
||||
class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"
|
||||
>
|
||||
<i class="fas fa-inbox text-2xl text-gray-400"></i>
|
||||
</div>
|
||||
<p class="text-gray-600 font-medium mb-2">No posts yet</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
Check back later for updates from your team
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Statistics -->
|
||||
<div class="w-full lg:w-1/3 flex flex-col gap-4 sm:gap-6">
|
||||
<!-- Today's Overview -->
|
||||
<div class="bg-white border-b border-gray-200">
|
||||
<div class="px-4 sm:px-6 py-4">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">
|
||||
Today's Overview
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="fas fa-calendar-day text-gray-600 text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Appointments Today</span>
|
||||
</div>
|
||||
<span class="text-lg font-semibold text-gray-900">
|
||||
{{ .Statistics.AppointmentsToday }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="fas fa-calendar-week text-gray-600 text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">This Week</span>
|
||||
</div>
|
||||
<span class="text-lg font-semibold text-gray-900">
|
||||
{{ .Statistics.AppointmentsThisWeek }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Polling Progress -->
|
||||
<div class="bg-white border-b border-gray-200">
|
||||
<div class="px-4 sm:px-6 py-4">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">
|
||||
Polling Progress
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="fas fa-check-circle text-green-600 text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Polls Completed</span>
|
||||
</div>
|
||||
<span class="text-lg font-semibold text-green-600">
|
||||
{{ .Statistics.PollsCompleted }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="fas fa-clock text-orange-600 text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Polls Remaining</span>
|
||||
</div>
|
||||
<span class="text-lg font-semibold text-orange-600">
|
||||
{{ .Statistics.PollsRemaining }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
{{ if gt .Statistics.TotalAppointments 0 }}
|
||||
<div class="mt-4">
|
||||
<div class="flex justify-between text-xs text-gray-600 mb-2">
|
||||
<span>Progress</span>
|
||||
<span
|
||||
>{{ .Statistics.PollsCompleted }}/{{
|
||||
.Statistics.TotalAppointments }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
class="bg-gray-600 h-2 rounded-full transition-all duration-300"
|
||||
style="width: {{ .Statistics.PollCompletionPercent }}%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Signs Summary -->
|
||||
<div class="bg-white border-b border-gray-200">
|
||||
<div class="px-4 sm:px-6 py-4">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">
|
||||
Signs Requested
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="fas fa-sign text-gray-600 text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Lawn Signs</span>
|
||||
</div>
|
||||
<span class="text-lg font-semibold text-gray-900">
|
||||
{{ .Statistics.LawnSignsRequested }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="fas fa-flag text-gray-600 text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Banner Signs</span>
|
||||
</div>
|
||||
<span class="text-lg font-semibold text-gray-900">
|
||||
{{ .Statistics.BannerSignsRequested }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="bg-white border-b border-gray-200">
|
||||
<div class="px-4 sm:px-6 py-4">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">
|
||||
Quick Actions
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<a
|
||||
href="/volunteer/Addresses"
|
||||
class="w-full flex items-center gap-3 p-3 hover:bg-gray-50 rounded transition-all duration-200"
|
||||
>
|
||||
<div
|
||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="fas fa-calendar-alt text-gray-600 text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">View Appointments</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/schedual"
|
||||
class="w-full flex items-center gap-3 p-3 hover:bg-gray-50 rounded transition-all duration-200"
|
||||
>
|
||||
<div
|
||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="fas fa-clock text-gray-600 text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">My Schedule</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/profile"
|
||||
class="w-full flex items-center gap-3 p-3 hover:bg-gray-50 rounded transition-all duration-200"
|
||||
>
|
||||
<div
|
||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<i class="fas fa-user text-gray-600 text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Profile Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<i class="fas fa-bars text-gray-600"></i>
|
||||
</button>
|
||||
<span class="text-sm font-medium text-gray-600">{{.UserName}}</span>
|
||||
<div class="w-9 h-9 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
|
||||
<div class="w-9 h-9 bg-blue-500 flex items-center justify-center text-white font-semibold">
|
||||
{{slice .UserName 0 1}}
|
||||
</div>
|
||||
<a href="/logout" class="p-2 hover:bg-gray-200 rounded">
|
||||
@@ -52,8 +52,8 @@
|
||||
|
||||
<!-- Right Side: User Info -->
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm font-medium text-gray-600">Welcome, {{.UserName}}</span>
|
||||
<div class="w-9 h-9 bg-blue-500 rounded-full flex items-center justify-center text-white font-semibold">
|
||||
<span class="text-sm font-medium text-gray-600">Hi, {{.UserName}}</span>
|
||||
<div class="w-9 h-9 bg-blue-500 flex items-center justify-center text-white font-semibold">
|
||||
{{slice .UserName 0 1}}
|
||||
</div>
|
||||
<a href="/logout" class="p-2 hover:bg-gray-200 rounded">
|
||||
|
||||
197
app/internal/templates/volunteer/poll_form.html
Normal file
197
app/internal/templates/volunteer/poll_form.html
Normal file
@@ -0,0 +1,197 @@
|
||||
{{ define "content" }}
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<!-- Top Navigation -->
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<i
|
||||
class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-poll{{end}} text-green-600"
|
||||
></i>
|
||||
<span class="text-sm font-medium">Poll Questions</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<a
|
||||
href="/appointments"
|
||||
class="px-3 py-1 bg-gray-500 text-white text-sm hover:bg-gray-600 rounded"
|
||||
>
|
||||
Back to Appointments
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Content -->
|
||||
<div class="flex-1 overflow-y-auto bg-gray-50 p-6">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<div class="mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900">
|
||||
Campaign Poll Questions
|
||||
</h2>
|
||||
<p class="text-sm text-gray-600 mt-1">Address: {{ .Address }}</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" class="space-y-6">
|
||||
<input type="hidden" name="poll_id" value="{{ .PollID }}" />
|
||||
|
||||
<!-- Postal Code -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Respondent's Postal Code
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="postal_code"
|
||||
placeholder="Enter postal code (e.g., T2P 1J9)"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Question 1 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-3">
|
||||
1. Have you voted before?
|
||||
</label>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="question1_voted_before"
|
||||
value="true"
|
||||
class="mr-2"
|
||||
/>
|
||||
<span class="text-sm">Yes</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="question1_voted_before"
|
||||
value="false"
|
||||
class="mr-2"
|
||||
/>
|
||||
<span class="text-sm">No</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 2 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-3">
|
||||
2. Will you vote again for this candidate?
|
||||
</label>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="question2_vote_again"
|
||||
value="true"
|
||||
class="mr-2"
|
||||
/>
|
||||
<span class="text-sm">Yes</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="question2_vote_again"
|
||||
value="false"
|
||||
class="mr-2"
|
||||
/>
|
||||
<span class="text-sm">No</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 3 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
3. How many lawn signs do you need?
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="question3_lawn_signs"
|
||||
min="0"
|
||||
max="10"
|
||||
value="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Question 4 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
4. How many banner signs do you need?
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="question4_banner_signs"
|
||||
min="0"
|
||||
max="5"
|
||||
value="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Question 5 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
5. Write your thoughts (optional)
|
||||
</label>
|
||||
<textarea
|
||||
name="question5_thoughts"
|
||||
rows="4"
|
||||
placeholder="Any additional comments or feedback..."
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="flex justify-end gap-3 pt-6">
|
||||
<a
|
||||
href="/appointments"
|
||||
class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700"
|
||||
>
|
||||
Submit Poll Response
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Show delivery address section if user needs signs
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const lawnSignsInput = document.querySelector(
|
||||
'input[name="question3_lawn_signs"]'
|
||||
);
|
||||
const bannerSignsInput = document.querySelector(
|
||||
'input[name="question4_banner_signs"]'
|
||||
);
|
||||
const deliverySection = document.getElementById("delivery-section");
|
||||
|
||||
function toggleDeliverySection() {
|
||||
const lawnSigns = parseInt(lawnSignsInput.value) || 0;
|
||||
const bannerSigns = parseInt(bannerSignsInput.value) || 0;
|
||||
|
||||
if (lawnSigns > 0 || bannerSigns > 0) {
|
||||
deliverySection.style.display = "block";
|
||||
} else {
|
||||
deliverySection.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
lawnSignsInput.addEventListener("input", toggleDeliverySection);
|
||||
bannerSignsInput.addEventListener("input", toggleDeliverySection);
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user