admin core func done
This commit is contained in:
Mann Patel
@@ -1,5 +1,4 @@
|
||||
{{ define "content" }}
|
||||
<!-- Main 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">
|
||||
@@ -12,7 +11,6 @@
|
||||
<span class="text-sm font-medium"> Address Database </span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Records Info -->
|
||||
{{if .Pagination}}
|
||||
<div class="text-sm text-gray-600">
|
||||
Showing {{.Pagination.StartRecord}}-{{.Pagination.EndRecord}} of
|
||||
@@ -25,33 +23,20 @@
|
||||
<!-- Toolbar -->
|
||||
<div class="bg-gray-50 border-b border-gray-200 px-6 py-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Search -->
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative">
|
||||
<i
|
||||
class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"
|
||||
></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Addresses"
|
||||
class="w-full pl-8 pr-3 py-2 text-sm border border-gray-200 rounded bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
class="px-6 py-2 border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 transition-colors rounded"
|
||||
>
|
||||
<i class="fas fa-upload mr-2"></i>Import Data
|
||||
</button>
|
||||
<div class="relative">
|
||||
<i
|
||||
class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"
|
||||
></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Addresses"
|
||||
class="w-full pl-8 pr-3 py-2 text-sm border border-gray-200 rounded bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
{{if .Pagination}}
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<!-- Page Size Selector -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="pageSize" class="text-gray-600">Per page:</label>
|
||||
<select
|
||||
@@ -76,10 +61,7 @@
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Page Navigation -->
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Previous Button -->
|
||||
<button
|
||||
onclick="goToPage({{.Pagination.PreviousPage}})"
|
||||
{{if
|
||||
@@ -89,13 +71,9 @@
|
||||
>
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
|
||||
<!-- Page Info -->
|
||||
<span class="px-2 text-gray-600">
|
||||
{{.Pagination.CurrentPage}} / {{.Pagination.TotalPages}}
|
||||
</span>
|
||||
|
||||
<!-- Next Button -->
|
||||
<span class="px-2 text-gray-600"
|
||||
>{{.Pagination.CurrentPage}} / {{.Pagination.TotalPages}}</span
|
||||
>
|
||||
<button
|
||||
onclick="goToPage({{.Pagination.NextPage}})"
|
||||
{{if
|
||||
@@ -111,38 +89,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Wrapper -->
|
||||
<!-- Table -->
|
||||
<div
|
||||
class="flex-1 overflow-x-auto overflow-y-auto bg-white border border-gray-100"
|
||||
>
|
||||
<table class="w-full divide-gray-200 text-sm table-auto">
|
||||
<!-- Table Head -->
|
||||
<thead class="bg-gray-50 divide-gray-200 sticky top-0">
|
||||
<tr
|
||||
class="text-left text-gray-700 font-medium border-b border-gray-200"
|
||||
>
|
||||
<th class="px-4 py-3 whitespace-nowrap">ID</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Address</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Street</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">House #</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Longitude</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Latitude</th>
|
||||
<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">Assigned User</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Appointment</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Assign</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- Table Body -->
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{{ range .Addresses }}
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-3 whitespace-nowrap">{{ .AddressID }}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">{{ .Address }}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
{{ .StreetName }} {{ .StreetType }} {{ .StreetQuadrant }}
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">{{ .HouseNumber }}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">{{ .Longitude }}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">{{ .Latitude }}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
{{ if .VisitedValidated }}
|
||||
<span
|
||||
@@ -158,10 +124,49 @@
|
||||
</span>
|
||||
{{ end }}
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">{{ .Address }}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
<a
|
||||
href="https://www.google.com/maps/search/?api=1&query={{ .Latitude }},{{ .Longitude }}"
|
||||
target="_blank"
|
||||
class="text-blue-600 hover:underline"
|
||||
>
|
||||
({{ .Latitude }}, {{ .Longitude }})
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
{{ if .UserName }}{{ .UserName }}<br /><span
|
||||
class="text-xs text-gray-500"
|
||||
>{{ .UserEmail }}</span
|
||||
>{{ else }}<span class="text-gray-400">Unassigned</span>{{ end }}
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
{{ if .AppointmentDate }} {{ .AppointmentDate }} {{ .AppointmentTime
|
||||
}} {{ else }}
|
||||
<span class="text-gray-400">No appointment</span>
|
||||
{{ end }}
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
{{ if .Assigned }}
|
||||
<button
|
||||
class="px-3 py-1 bg-gray-400 text-white text-sm cursor-not-allowed"
|
||||
disabled
|
||||
>
|
||||
Assigned
|
||||
</button>
|
||||
{{ else }}
|
||||
<button
|
||||
class="px-3 py-1 bg-blue-600 text-white text-sm hover:bg-blue-700"
|
||||
onclick="openAssignModal({{ .AddressID }})"
|
||||
>
|
||||
Assign
|
||||
</button>
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
{{ else }}
|
||||
<tr>
|
||||
<td colspan="7" class="px-6 py-8 text-center text-gray-500">
|
||||
<td colspan="9" class="px-6 py-8 text-center text-gray-500">
|
||||
No addresses found
|
||||
</td>
|
||||
</tr>
|
||||
@@ -170,27 +175,64 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
{{if .Pagination}}
|
||||
<div class="bg-white border-t border-gray-200 px-6 py-3">
|
||||
<div class="flex items-center justify-center">
|
||||
<!-- Records Info -->
|
||||
<div class="text-sm text-gray-600">
|
||||
Showing {{.Pagination.StartRecord}}-{{.Pagination.EndRecord}} of
|
||||
{{.Pagination.TotalRecords}} addresses
|
||||
</div>
|
||||
<!-- Assign Modal -->
|
||||
<div
|
||||
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">
|
||||
<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">
|
||||
<button
|
||||
type="button"
|
||||
onclick="closeAssignModal()"
|
||||
class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
>
|
||||
Assign
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openAssignModal(addressID) {
|
||||
document.getElementById("modalAddressID").value = addressID;
|
||||
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");
|
||||
}
|
||||
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);
|
||||
|
||||
38
app/internal/templates/address_assigned.html
Normal file
38
app/internal/templates/address_assigned.html
Normal file
@@ -0,0 +1,38 @@
|
||||
{{ 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 }}
|
||||
89
app/internal/templates/appointment.html
Normal file
89
app/internal/templates/appointment.html
Normal file
@@ -0,0 +1,89 @@
|
||||
{{ 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-calendar-alt{{end}} text-green-600"
|
||||
></i>
|
||||
<span class="text-sm font-medium"> Appointments </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="bg-gray-50 border-b border-gray-200 px-6 py-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<div class="relative">
|
||||
<i
|
||||
class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"
|
||||
></i>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Appointments"
|
||||
class="w-full pl-8 pr-3 py-2 text-sm border border-gray-200 rounded bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div
|
||||
class="flex-1 overflow-x-auto overflow-y-auto bg-white border border-gray-100"
|
||||
>
|
||||
<table class="w-full divide-gray-200 text-sm table-auto">
|
||||
<thead class="bg-gray-50 divide-gray-200 sticky top-0">
|
||||
<tr
|
||||
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">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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{{ range .Appointments }}
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-3 whitespace-nowrap">{{ .Address }}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
<a
|
||||
href="https://www.google.com/maps/search/?api=1&query={{ .Latitude }},{{ .Longitude }}"
|
||||
target="_blank"
|
||||
class="text-blue-600 hover:underline"
|
||||
>
|
||||
({{ .Latitude }}, {{ .Longitude }})
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
{{ .AppointmentDate.Format "2006-01-02" }}
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
{{ .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"
|
||||
>
|
||||
Ask Poll
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{ else }}
|
||||
<tr>
|
||||
<td colspan="5" class="px-6 py-8 text-center text-gray-500">
|
||||
No appointments found
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -15,9 +15,9 @@
|
||||
<body class="bg-white font-sans">
|
||||
{{ if .IsAuthenticated }}
|
||||
<!-- Authenticated User Interface -->
|
||||
<div class="w-full h-screen bg-white overflow-hidden">
|
||||
<!-- Title Bar -->
|
||||
<div class="bg-gray-100 px-4 py-3 flex items-center justify-between border-b border-gray-200">
|
||||
<div class="w-full h-screen bg-white overflow-hidden" x-data="{ sidebarOpen: false }">
|
||||
<!-- Mobile Header -->
|
||||
<div class="lg:hidden bg-gray-100 px-4 py-3 flex items-center justify-between border-b border-gray-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-5 h-5 bg-orange-500 rounded text-white text-xs flex items-center justify-center font-bold">
|
||||
L
|
||||
@@ -25,6 +25,28 @@
|
||||
<span class="text-sm font-medium">Poll System</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="sidebarOpen = !sidebarOpen" class="p-2 hover:bg-gray-200 rounded">
|
||||
<i class="fas fa-bars text-gray-600"></i>
|
||||
</button>
|
||||
<span class="text-white font-semibold">Hi, {{.UserName}}</span>
|
||||
|
||||
<a href="/logout" class="p-2 hover:bg-gray-200 rounded">
|
||||
<i class="fas fa-external-link-alt text-gray-500"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Title Bar -->
|
||||
<div class="hidden lg:flex bg-gray-100 px-4 py-3 items-center justify-between border-b border-gray-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-5 h-5 bg-orange-500 rounded text-white text-xs flex items-center justify-center font-bold">
|
||||
L
|
||||
</div>
|
||||
<span class="text-sm font-medium">Poll System</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-white font-semibold">Hi, {{.UserName}}</span>
|
||||
|
||||
<a href="/logout" class="p-2 hover:bg-gray-100 rounded inline-block">
|
||||
<i class="fas fa-external-link-alt text-gray-500"></i>
|
||||
</a>
|
||||
@@ -32,55 +54,108 @@
|
||||
</div>
|
||||
|
||||
<div class="flex h-full">
|
||||
<!-- Mobile Sidebar Overlay -->
|
||||
<div x-show="sidebarOpen"
|
||||
x-transition:enter="transition-opacity ease-linear duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition-opacity ease-linear duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="fixed inset-0 bg-gray-600 bg-opacity-75 z-20 lg:hidden"
|
||||
@click="sidebarOpen = false">
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="w-64 bg-gray-50 border-r border-gray-200 flex-shrink-0">
|
||||
<div class="fixed inset-y-0 left-0 w-64 bg-gray-50 border-r border-gray-200 transform transition-transform duration-300 ease-in-out z-30 lg:relative lg:translate-x-0 lg:z-0"
|
||||
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
|
||||
x-show="sidebarOpen || window.innerWidth >= 1024"
|
||||
x-transition:enter="transition ease-in-out duration-300 transform"
|
||||
x-transition:enter-start="-translate-x-full"
|
||||
x-transition:enter-end="translate-x-0"
|
||||
x-transition:leave="transition ease-in-out duration-300 transform"
|
||||
x-transition:leave-start="translate-x-0"
|
||||
x-transition:leave-end="-translate-x-full">
|
||||
|
||||
<!-- Mobile Close Button -->
|
||||
<div class="lg:hidden flex justify-between items-center p-4 border-b border-gray-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-5 h-5 bg-orange-500 rounded text-white text-xs flex items-center justify-center font-bold">
|
||||
L
|
||||
</div>
|
||||
<span class="text-sm font-medium">Poll System</span>
|
||||
</div>
|
||||
<button @click="sidebarOpen = false" class="p-1 hover:bg-gray-200 rounded">
|
||||
<i class="fas fa-times text-gray-500"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-3 space-y-4">
|
||||
<div class="space-y-1">
|
||||
{{ if .ShowAdminNav }}
|
||||
<a href="/dashboard" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "dashboard"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-tachometer-alt text-gray-400 mr-2"></i>
|
||||
<a href="/dashboard"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "dashboard"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-chart-pie text-gray-400 mr-2"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="/volunteers" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "volunteer"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-hands-helping text-gray-400 mr-2"></i>
|
||||
<a href="/volunteers"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "volunteer"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-users text-gray-400 mr-2"></i>
|
||||
<span>Volunteers</span>
|
||||
</a>
|
||||
<a href="/team_builder" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "team_builder"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-hands-helping text-gray-400 mr-2"></i>
|
||||
<a href="/team_builder"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "team_builder"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-user-friends text-gray-400 mr-2"></i>
|
||||
<span>Team Builder</span>
|
||||
</a>
|
||||
<a href="/addresses" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "address"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
|
||||
<a href="/addresses"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "address"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-map-marked-alt text-gray-400 mr-2"></i>
|
||||
<span>Addresses</span>
|
||||
</a>
|
||||
<a href="/posts" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "post"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-chart-bar text-gray-400 mr-2"></i>
|
||||
<a href="/posts"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "post"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-blog text-gray-400 mr-2"></i>
|
||||
<span>Posts</span>
|
||||
</a>
|
||||
<a href="/reports" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "report"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-chart-bar text-gray-400 mr-2"></i>
|
||||
<a href="/reports"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "report"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-table text-gray-400 mr-2"></i>
|
||||
<span>Reports</span>
|
||||
</a>
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ if .ShowVolunteerNav }}
|
||||
<a href="/volunteer/dashboard" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "dashboard"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-tachometer-alt text-gray-400 mr-2"></i>
|
||||
<a href="/volunteer/dashboard"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "dashboard"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-chart-pie text-gray-400 mr-2"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="/volunteer/schedual" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "schedual"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-calendar text-gray-400 mr-2"></i>
|
||||
<a href="/volunteer/schedual"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "schedual"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-calendar-alt text-gray-400 mr-2"></i>
|
||||
<span>My Schedule</span>
|
||||
</a>
|
||||
<a href="/volunteer/Addresses" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "schedual"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-calendar text-gray-400 mr-2"></i>
|
||||
<a href="/volunteer/Addresses"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "address"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-home text-gray-400 mr-2"></i>
|
||||
<span>Assigned Address</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
<a href="/profile" class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "profile"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-user text-gray-400 mr-2"></i>
|
||||
<a href="/profile"
|
||||
@click="sidebarOpen = false"
|
||||
class="flex items-center text-sm text-gray-600 hover:bg-gray-100 rounded px-2 py-1 {{if eq .ActiveSection "profile"}}bg-gray-100{{end}}">
|
||||
<i class="fas fa-user-circle text-gray-400 mr-2"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -89,15 +164,15 @@
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 flex flex-col overflow-hidden min-h-screen">
|
||||
<div class="bg-white flex-1 overflow-auto pb-[60px]">
|
||||
<div class="bg-white flex-1 overflow-auto pb-[60px]">
|
||||
{{ template "content" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<!-- Landing Page -->
|
||||
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-gray-100">
|
||||
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-gray-100" x-data="{ mobileMenuOpen: false }">
|
||||
<!-- Fixed Navigation -->
|
||||
<nav class="fixed top-0 w-full bg-white/90 backdrop-blur-md shadow-sm border-b border-gray-200 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
@@ -108,37 +183,73 @@
|
||||
</div>
|
||||
<span class="text-xl font-semibold text-gray-900">Poll System</span>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex items-center gap-6">
|
||||
<a href="#home" class="text-gray-600 hover:text-gray-900 font-medium transition-colors">Home</a>
|
||||
<a href="#features" class="text-gray-600 hover:text-gray-900 font-medium transition-colors">Features</a>
|
||||
<a href="#about" class="text-gray-600 hover:text-gray-900 font-medium transition-colors">About</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
|
||||
<!-- Desktop Auth Buttons -->
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<button onclick="openLoginModal()" class="px-4 py-2 text-gray-600 hover:text-gray-900 font-medium transition-colors">
|
||||
Sign In
|
||||
</button>
|
||||
<button onclick="openRegisterModal()" class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 font-medium transition-colors">
|
||||
<button onclick="openRegisterModal()" class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 font-medium transition-colors rounded">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="md:hidden">
|
||||
<button @click="mobileMenuOpen = !mobileMenuOpen" class="p-2 text-gray-600 hover:text-gray-900">
|
||||
<i class="fas fa-bars text-xl" x-show="!mobileMenuOpen"></i>
|
||||
<i class="fas fa-times text-xl" x-show="mobileMenuOpen"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div x-show="mobileMenuOpen"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="md:hidden bg-white border-t border-gray-200">
|
||||
<div class="px-4 py-4 space-y-3">
|
||||
<a href="#home" @click="mobileMenuOpen = false" class="block text-gray-600 hover:text-gray-900 font-medium py-2">Home</a>
|
||||
<a href="#features" @click="mobileMenuOpen = false" class="block text-gray-600 hover:text-gray-900 font-medium py-2">Features</a>
|
||||
<a href="#about" @click="mobileMenuOpen = false" class="block text-gray-600 hover:text-gray-900 font-medium py-2">About</a>
|
||||
<div class="border-t border-gray-200 pt-3 space-y-2">
|
||||
<button onclick="openLoginModal(); document.querySelector('[x-data]').__x.$data.mobileMenuOpen = false" class="block w-full text-left px-4 py-2 text-gray-600 hover:bg-gray-100 rounded font-medium">
|
||||
Sign In
|
||||
</button>
|
||||
<button onclick="openRegisterModal(); document.querySelector('[x-data]').__x.$data.mobileMenuOpen = false" class="block w-full px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 font-medium rounded">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="max-w-4xl mx-auto px-4 pt-32 pb-32 text-center">
|
||||
<h1 class="text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
Streamline Your<br>
|
||||
<span class="text-blue-600">Polling Operations</span>
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||||
<p class="text-lg sm:text-xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||||
Manage volunteers, organize addresses, and track progress with our comprehensive polling system.
|
||||
</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<button onclick="openRegisterModal()" class="px-8 py-3 bg-blue-600 text-white hover:bg-blue-700 font-semibold transition-colors">
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<button onclick="openRegisterModal()" class="px-8 py-3 bg-blue-600 text-white hover:bg-blue-700 font-semibold transition-colors rounded">
|
||||
Start Now
|
||||
</button>
|
||||
<button onclick="openLoginModal()" class="px-8 py-3 border border-gray-300 text-gray-700 hover:bg-gray-50 font-semibold transition-colors">
|
||||
<button onclick="openLoginModal()" class="px-8 py-3 border border-gray-300 text-gray-700 hover:bg-gray-50 font-semibold transition-colors rounded">
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
@@ -147,26 +258,26 @@
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="max-w-6xl mx-auto px-4 py-20">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-4">Powerful Features</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything you need to manage your polling operations efficiently and effectively.</p>
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Powerful Features</h2>
|
||||
<p class="text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto">Everything you need to manage your polling operations efficiently and effectively.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-white p-8 shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
|
||||
<div class="w-12 h-12 bg-blue-100 flex items-center justify-center mb-4">
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="bg-white p-8 shadow-sm border border-gray-200 hover:shadow-md transition-shadow rounded-lg">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded flex items-center justify-center mb-4">
|
||||
<i class="fas fa-users text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-3">Volunteer Management</h3>
|
||||
<p class="text-gray-600">Organize and coordinate your volunteer teams efficiently with role-based access and scheduling.</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
|
||||
<div class="w-12 h-12 bg-green-100 flex items-center justify-center mb-4">
|
||||
<div class="bg-white p-8 shadow-sm border border-gray-200 hover:shadow-md transition-shadow rounded-lg">
|
||||
<div class="w-12 h-12 bg-green-100 rounded flex items-center justify-center mb-4">
|
||||
<i class="fas fa-map-marker-alt text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-3">Address Tracking</h3>
|
||||
<p class="text-gray-600">Keep track of all polling locations and assignments with real-time updates and mapping.</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
|
||||
<div class="w-12 h-12 bg-purple-100 flex items-center justify-center mb-4">
|
||||
<div class="bg-white p-8 shadow-sm border border-gray-200 hover:shadow-md transition-shadow rounded-lg sm:col-span-2 lg:col-span-1">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded flex items-center justify-center mb-4">
|
||||
<i class="fas fa-chart-bar text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-3">Real-time Reports</h3>
|
||||
@@ -178,32 +289,32 @@
|
||||
<!-- About Section -->
|
||||
<section id="about" class="bg-white py-20">
|
||||
<div class="max-w-6xl mx-auto px-4">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-6">About Poll System</h2>
|
||||
<p class="text-lg text-gray-600 mb-6">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">About Poll System</h2>
|
||||
<p class="text-base sm:text-lg text-gray-600 mb-6">
|
||||
Poll System was created to simplify and streamline the complex process of managing polling operations.
|
||||
Our platform brings together volunteers, administrators, and team leaders in one unified system.
|
||||
</p>
|
||||
<p class="text-lg text-gray-600 mb-8">
|
||||
<p class="text-base sm:text-lg text-gray-600 mb-8">
|
||||
With years of experience in civic technology, we understand the challenges faced by polling organizations.
|
||||
Our solution provides the tools needed to coordinate effectively and ensure smooth operations.
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<div class="w-6 h-6 bg-green-100 rounded flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-check text-green-600 text-sm"></i>
|
||||
</div>
|
||||
<span class="text-gray-700">Streamlined volunteer coordination</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<div class="w-6 h-6 bg-green-100 rounded flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-check text-green-600 text-sm"></i>
|
||||
</div>
|
||||
<span class="text-gray-700">Real-time progress tracking</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<div class="w-6 h-6 bg-green-100 rounded flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-check text-green-600 text-sm"></i>
|
||||
</div>
|
||||
<span class="text-gray-700">Comprehensive reporting tools</span>
|
||||
@@ -211,7 +322,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-blue-700 p-8 text-white">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-blue-700 p-8 text-white rounded-lg">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-users text-6xl mb-6 opacity-20"></i>
|
||||
<h3 class="text-2xl font-bold mb-4">Trusted by Organizations</h3>
|
||||
@@ -242,10 +353,10 @@
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-white py-12">
|
||||
<div class="max-w-6xl mx-auto px-4">
|
||||
<div class="grid md:grid-cols-4 gap-8">
|
||||
<div class="md:col-span-2">
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="sm:col-span-2 lg:col-span-2">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="w-8 h-8 bg-blue-600 text-white text-sm flex items-center justify-center font-bold">
|
||||
<div class="w-8 h-8 bg-blue-600 text-white text-sm flex items-center justify-center font-bold rounded">
|
||||
L
|
||||
</div>
|
||||
<span class="text-xl font-semibold">Poll System</span>
|
||||
@@ -255,13 +366,13 @@
|
||||
address tracking, and real-time reporting capabilities.
|
||||
</p>
|
||||
<div class="flex gap-4">
|
||||
<a href="#" class="w-10 h-10 bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||||
<a href="#" class="w-10 h-10 bg-gray-800 rounded flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" class="w-10 h-10 bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||||
<a href="#" class="w-10 h-10 bg-gray-800 rounded flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="w-10 h-10 bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||||
<a href="#" class="w-10 h-10 bg-gray-800 rounded flex items-center justify-center hover:bg-blue-600 transition-colors">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
@@ -293,21 +404,21 @@
|
||||
</div>
|
||||
|
||||
<!-- Login Modal -->
|
||||
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
||||
<div class="bg-white shadow-2xl max-w-4xl w-full mx-4 overflow-hidden">
|
||||
<div class="flex min-h-[500px]">
|
||||
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">
|
||||
<div class="bg-white shadow-2xl max-w-4xl w-full overflow-hidden rounded-lg">
|
||||
<div class="flex flex-col lg:flex-row min-h-[500px]">
|
||||
<!-- Left Side - Image -->
|
||||
<div class="flex-1 bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center p-8">
|
||||
<div class="text-center text-white">
|
||||
<i class="fas fa-chart-line text-6xl mb-6"></i>
|
||||
<h2 class="text-3xl font-bold mb-4">Welcome Back</h2>
|
||||
<p class="text-lg opacity-90">Continue managing your polling operations</p>
|
||||
<i class="fas fa-chart-line text-4xl sm:text-6xl mb-6"></i>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold mb-4">Welcome Back</h2>
|
||||
<p class="text-base sm:text-lg opacity-90">Continue managing your polling operations</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Side - Form -->
|
||||
<div class="flex-1 p-8">
|
||||
<div class="flex-1 p-6 sm:p-8">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900">Sign In</h3>
|
||||
<h3 class="text-xl sm:text-2xl font-bold text-gray-900">Sign In</h3>
|
||||
<button onclick="closeLoginModal()" class="text-gray-400 hover:text-gray-600">
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</button>
|
||||
@@ -316,14 +427,14 @@
|
||||
<div>
|
||||
<label for="login_email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
|
||||
<input type="email" name="email" id="login_email" required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
</div>
|
||||
<div>
|
||||
<label for="login_password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
|
||||
<input type="password" name="password" id="login_password" required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
</div>
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-3 hover:bg-blue-700 font-medium transition-colors">
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-3 hover:bg-blue-700 font-medium transition-colors rounded">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
@@ -337,64 +448,74 @@
|
||||
</div>
|
||||
|
||||
<!-- Register Modal -->
|
||||
<div id="registerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
||||
<div class="bg-white shadow-2xl max-w-4xl w-full mx-4 overflow-hidden">
|
||||
<div class="flex min-h-[600px]">
|
||||
<div id="registerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">
|
||||
<div class="bg-white shadow-2xl max-w-4xl w-full overflow-hidden rounded-lg">
|
||||
<div class="flex flex-col lg:flex-row min-h-[600px]">
|
||||
<!-- Left Side - Image -->
|
||||
<div class="flex-1 bg-gradient-to-br from-blue-600 to-blue-800 flex items-center justify-center p-8">
|
||||
<div class="text-center text-white">
|
||||
<i class="fas fa-rocket text-6xl mb-6"></i>
|
||||
<h2 class="text-3xl font-bold mb-4">Get Started</h2>
|
||||
<p class="text-lg opacity-90">Join our platform and streamline your operations</p>
|
||||
<i class="fas fa-rocket text-4xl sm:text-6xl mb-6"></i>
|
||||
<h2 class="text-2xl sm:text-3xl font-bold mb-4">Get Started</h2>
|
||||
<p class="text-base sm:text-lg opacity-90">Join our platform and streamline your operations</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Side - Form -->
|
||||
<div class="flex-1 p-8 overflow-y-auto">
|
||||
<div class="flex-1 p-6 sm:p-8 overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900">Create Account</h3>
|
||||
<h3 class="text-xl sm:text-2xl font-bold text-gray-900">Create Account</h3>
|
||||
<button onclick="closeRegisterModal()" class="text-gray-400 hover:text-gray-600">
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form method="POST" action="/register" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
|
||||
<input type="text" name="first_name" id="first_name" required
|
||||
class="w-full px-3 py-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
</div>
|
||||
<div>
|
||||
<label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
|
||||
<input type="text" name="last_name" id="last_name" required
|
||||
class="w-full px-3 py-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="register_email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
||||
<input type="email" name="email" id="register_email" required
|
||||
class="w-full px-3 py-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
|
||||
<input type="tel" name="phone" id="phone"
|
||||
class="w-full px-3 py-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
</div>
|
||||
<div>
|
||||
<label for="role" class="block text-sm font-medium text-gray-700 mb-1">Role</label>
|
||||
<select name="role" id="role" required
|
||||
class="w-full px-3 py-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
onchange="toggleAdminCodeField()">
|
||||
<option value="">Select role</option>
|
||||
<option value="1">Admin</option>
|
||||
<option value="2">Team Leader</option>
|
||||
<option value="3">Volunteer</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Admin Code field (hidden by default) -->
|
||||
<div id="adminCodeField" class="hidden">
|
||||
<label for="admin_code" class="block text-sm font-medium text-gray-700 mb-1">Admin Code</label>
|
||||
<input type="text" name="admin_code" id="admin_code"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
placeholder="Enter your admin's code">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="register_password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
||||
<input type="password" name="password" id="register_password" required
|
||||
class="w-full px-3 py-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
||||
</div>
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-3 hover:bg-blue-700 font-medium transition-colors mt-6">
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-3 hover:bg-blue-700 font-medium transition-colors rounded mt-6">
|
||||
Create Account
|
||||
</button>
|
||||
</form>
|
||||
@@ -406,9 +527,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<script>
|
||||
// Initialize Alpine.js data for mobile menu
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('sidebar', () => ({
|
||||
open: false
|
||||
}));
|
||||
});
|
||||
|
||||
// Smooth scrolling for navigation links
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const links = document.querySelectorAll('a[href^="#"]');
|
||||
@@ -477,6 +606,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAdminCodeField() {
|
||||
const role = document.getElementById("role").value;
|
||||
const field = document.getElementById("adminCodeField");
|
||||
field.classList.toggle("hidden", role !== "3"); // show only if Volunteer
|
||||
}
|
||||
|
||||
// Handle escape key
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
@@ -484,7 +619,29 @@
|
||||
closeRegisterModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking outside (for landing page)
|
||||
document.addEventListener('click', function(event) {
|
||||
const mobileMenuButton = event.target.closest('[\\@click="mobileMenuOpen = !mobileMenuOpen"]');
|
||||
const mobileMenu = event.target.closest('.md\\:hidden .bg-white');
|
||||
|
||||
if (!mobileMenuButton && !mobileMenu) {
|
||||
// This will be handled by Alpine.js automatically
|
||||
}
|
||||
});
|
||||
|
||||
// Handle window resize to ensure proper mobile behavior
|
||||
window.addEventListener('resize', function() {
|
||||
if (window.innerWidth >= 1024) {
|
||||
// Close mobile menus on desktop
|
||||
const sidebarComponent = document.querySelector('[x-data]');
|
||||
if (sidebarComponent && sidebarComponent.__x) {
|
||||
sidebarComponent.__x.$data.sidebarOpen = false;
|
||||
sidebarComponent.__x.$data.mobileMenuOpen = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
{{end}}
|
||||
@@ -1,9 +1,17 @@
|
||||
{{ define "content" }}
|
||||
<div class="min-h-screen bg-gray-100">
|
||||
<!-- Header -->
|
||||
<div class="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||||
<div class="max-w-2xl mx-auto px-4 py-4">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Posts</h1>
|
||||
<!-- 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-users{{end}} text-blue-600"
|
||||
></i>
|
||||
<span class="text-sm font-medium">Volunteer Management</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,199 +1,372 @@
|
||||
{{ define "content" }}
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- Header Bar -->
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<!-- 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 space-x-3">
|
||||
<i class="fas fa-user-circle text-blue-600 text-xl"></i>
|
||||
<h1 class="text-xl font-semibold text-gray-900">User Profile</h1>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 text-sm text-gray-600">
|
||||
<i class="fas fa-shield-check text-blue-500"></i>
|
||||
<span>Secure Profile Management</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<i
|
||||
class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-users{{end}} text-blue-600"
|
||||
></i>
|
||||
<span class="text-sm font-medium">Volunteer Management</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="p-6">
|
||||
<!-- Profile Overview Tile -->
|
||||
<div class="bg-white border border-gray-200 mb-6">
|
||||
<div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900 flex items-center">
|
||||
<i class="fas fa-id-card text-blue-600 mr-3"></i>
|
||||
Profile Overview
|
||||
</h2>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- User Info -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
{{ .User.FirstName }} {{ .User.LastName }}
|
||||
</h3>
|
||||
<p class="text-gray-600">{{ .User.Email }}</p>
|
||||
<div class="flex items-center mt-2 space-x-4">
|
||||
<span
|
||||
class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
|
||||
>
|
||||
<i class="fas fa-user-check mr-1"></i>
|
||||
Active User
|
||||
</span>
|
||||
<span class="text-xs text-gray-500"
|
||||
>ID: {{ .User.UserID }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Stats -->
|
||||
<div class="bg-gray-50 border border-gray-200 p-4">
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-3">
|
||||
Account Information
|
||||
</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">User ID:</span>
|
||||
<span class="font-mono text-gray-900">{{ .User.UserID }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Role:</span>
|
||||
<span class="text-gray-900">{{ if eq .User.RoleID 1 }}Admin
|
||||
{{ else if eq .User.RoleID 2 }}Team Leader
|
||||
{{ else }}Volunteer
|
||||
{{ end }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Status:</span>
|
||||
<span class="text-green-600 font-medium">Active</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Profile Info Section -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
{{ .User.FirstName }} {{ .User.LastName }}
|
||||
</h3>
|
||||
<p class="text-gray-600">{{ .User.Email }}</p>
|
||||
<div class="flex items-center mt-2 space-x-4">
|
||||
<span
|
||||
class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
|
||||
>
|
||||
<i class="fas fa-user-check mr-1"></i>
|
||||
Active User
|
||||
</span>
|
||||
<span class="text-gray-600">Signup Code:</span>
|
||||
<span class="font-mono text-gray-900">{{ .User.AdminCode }}</span>
|
||||
<span class="text-gray-600">User ID:</span>
|
||||
<span class="font-mono text-gray-900">{{ .User.UserID }}</span>
|
||||
<span class="text-gray-600">Role:</span>
|
||||
<span class="text-gray-900">
|
||||
{{ if eq .User.RoleID 1 }}Admin {{ else if eq .User.RoleID 2
|
||||
}}Team Leader {{ else }}Volunteer {{ end }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Profile Form Tile -->
|
||||
<div class="bg-white border border-gray-200 mt-0 m-6">
|
||||
<div class="bg-blue-50 border-b border-gray-200 px-6 py-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900 flex items-center">
|
||||
<i class="fas fa-edit text-blue-600 mr-3"></i>
|
||||
Edit Profile Information
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<form method="post" action="/profile/update">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- First Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
First Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
value="{{ .User.FirstName }}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter first name"
|
||||
/>
|
||||
</div>
|
||||
<!-- Edit Profile Section -->
|
||||
<div class="border-t border-gray-200 pt-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
|
||||
<i class="fas fa-edit text-blue-600 mr-3"></i>
|
||||
Edit Profile Information
|
||||
</h3>
|
||||
|
||||
<!-- Last Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Last Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
value="{{ .User.LastName }}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter last name"
|
||||
/>
|
||||
</div>
|
||||
<!-- Edit Profile Form -->
|
||||
<form method="post" action="/profile/update">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- First Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
First Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
value="{{ .User.FirstName }}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter first name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email (Read-only) -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Email Address
|
||||
<span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-1"
|
||||
>Read Only</span
|
||||
>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{ .User.Email }}"
|
||||
disabled
|
||||
class="w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||
<i class="fas fa-lock text-gray-400"></i>
|
||||
</div>
|
||||
<!-- Last Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Last Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
value="{{ .User.LastName }}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter last name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email (Read-only) -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Email Address
|
||||
<span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-1"
|
||||
>Read Only</span
|
||||
>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{ .User.Email }}"
|
||||
disabled
|
||||
class="w-full px-4 py-3 border border-gray-300 bg-gray-100 text-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||
<i class="fas fa-lock text-gray-400"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
Contact system administrator to change email
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value="{{ .User.Phone }}"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter phone number"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
Contact system administrator to change email
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div
|
||||
class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
|
||||
>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
|
||||
Changes will be applied immediately after saving
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick="window.history.back()"
|
||||
class="px-6 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"
|
||||
>
|
||||
<i class="fas fa-times mr-2"></i>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-save mr-2"></i>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value="{{ .User.Phone }}"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter phone number"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profile Form Actions -->
|
||||
<div
|
||||
class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
|
||||
>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
|
||||
Changes will be applied immediately after saving
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick="window.history.back()"
|
||||
class="px-6 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"
|
||||
>
|
||||
<i class="fas fa-times mr-2"></i>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-save mr-2"></i>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Configuration Settings Section -->
|
||||
<div class="border-t border-gray-200 pt-8 mt-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
|
||||
<i class="fas fa-cog text-blue-600 mr-3"></i>
|
||||
Configuration Settings
|
||||
</h3>
|
||||
|
||||
<form method="post" action="/profile/settings" id="settingsForm">
|
||||
<div class="space-y-6">
|
||||
<!-- Add New Setting -->
|
||||
<div class="bg-white border border-gray-200 p-6">
|
||||
<h4 class="text-md font-semibold text-gray-800 mb-4">
|
||||
Add New Setting
|
||||
</h4>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Setting Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="newSettingName"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter setting name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Setting Value
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="newSettingValue"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter setting value"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button
|
||||
type="button"
|
||||
onclick="addSetting()"
|
||||
class="w-full px-6 py-3 bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-plus mr-2"></i>
|
||||
Add Setting
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Settings -->
|
||||
<div class="bg-white border border-gray-200 p-6">
|
||||
<h4 class="text-md font-semibold text-gray-800 mb-4">
|
||||
Current Settings
|
||||
</h4>
|
||||
<div id="settingsList" class="space-y-3">
|
||||
<!-- Settings will be dynamically added here -->
|
||||
<div class="text-gray-500 text-sm" id="noSettingsMessage">
|
||||
No settings configured yet. Add your first setting above.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Form Actions -->
|
||||
<div
|
||||
class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
|
||||
>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
|
||||
Settings are applied immediately when added or removed
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick="clearAllSettings()"
|
||||
class="px-6 py-2 border border-red-300 text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-trash mr-2"></i>
|
||||
Clear All
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-save mr-2"></i>
|
||||
Save Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let settings = [];
|
||||
|
||||
function addSetting() {
|
||||
const nameInput = document.getElementById("newSettingName");
|
||||
const valueInput = document.getElementById("newSettingValue");
|
||||
|
||||
const name = nameInput.value.trim();
|
||||
const value = valueInput.value.trim();
|
||||
|
||||
if (!name || !value) {
|
||||
alert("Please enter both setting name and value");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if setting already exists
|
||||
const existingIndex = settings.findIndex(
|
||||
(s) => s.name.toLowerCase() === name.toLowerCase()
|
||||
);
|
||||
if (existingIndex !== -1) {
|
||||
// Update existing setting
|
||||
settings[existingIndex].value = value;
|
||||
} else {
|
||||
// Add new setting
|
||||
settings.push({ name, value });
|
||||
}
|
||||
|
||||
// Clear inputs
|
||||
nameInput.value = "";
|
||||
valueInput.value = "";
|
||||
|
||||
// Update display
|
||||
displaySettings();
|
||||
}
|
||||
|
||||
function removeSetting(index) {
|
||||
settings.splice(index, 1);
|
||||
displaySettings();
|
||||
}
|
||||
|
||||
function displaySettings() {
|
||||
const settingsList = document.getElementById("settingsList");
|
||||
const noSettingsMessage = document.getElementById("noSettingsMessage");
|
||||
|
||||
if (settings.length === 0) {
|
||||
noSettingsMessage.style.display = "block";
|
||||
settingsList.innerHTML =
|
||||
'<div class="text-gray-500 text-sm" id="noSettingsMessage">No settings configured yet. Add your first setting above.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
noSettingsMessage.style.display = "none";
|
||||
|
||||
settingsList.innerHTML = settings
|
||||
.map(
|
||||
(setting, index) => `
|
||||
<div class="flex items-center justify-between p-4 border border-gray-200 bg-gray-50">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="font-semibold text-gray-900">${setting.name}:</span>
|
||||
<span class="text-gray-700">${setting.value}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick="removeSetting(${index})"
|
||||
class="px-3 py-1 text-red-600 hover:text-red-800 focus:outline-none"
|
||||
title="Remove setting"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function clearAllSettings() {
|
||||
if (settings.length === 0) return;
|
||||
|
||||
if (confirm("Are you sure you want to clear all settings?")) {
|
||||
settings = [];
|
||||
displaySettings();
|
||||
}
|
||||
}
|
||||
|
||||
// Allow Enter key to add setting
|
||||
document
|
||||
.getElementById("newSettingName")
|
||||
.addEventListener("keypress", function (e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
document.getElementById("newSettingValue").focus();
|
||||
}
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("newSettingValue")
|
||||
.addEventListener("keypress", function (e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addSetting();
|
||||
}
|
||||
});
|
||||
|
||||
// Form submission handler
|
||||
document
|
||||
.getElementById("settingsForm")
|
||||
.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Here you would typically send the settings to your server
|
||||
console.log("Saving settings:", settings);
|
||||
|
||||
// Show success message
|
||||
alert("Settings saved successfully!");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Professional square corner design */
|
||||
* {
|
||||
@@ -216,23 +389,21 @@
|
||||
box-shadow: 0 0 0 2px #3b82f6;
|
||||
}
|
||||
|
||||
/* Hover effects for tiles */
|
||||
.hover\:bg-blue-50:hover {
|
||||
background-color: #eff6ff;
|
||||
/* Hover effects */
|
||||
.hover\:bg-gray-50:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.hover\:border-blue-500:hover {
|
||||
border-color: #3b82f6;
|
||||
.hover\:bg-blue-700:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
/* Professional table-like layout */
|
||||
.grid {
|
||||
display: grid;
|
||||
.hover\:bg-green-700:hover {
|
||||
background-color: #15803d;
|
||||
}
|
||||
|
||||
/* Ensure full width usage */
|
||||
.min-h-screen {
|
||||
width: 100%;
|
||||
.hover\:bg-red-50:hover {
|
||||
background-color: #fef2f2;
|
||||
}
|
||||
|
||||
/* Professional button styling */
|
||||
@@ -260,6 +431,10 @@
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.bg-green-600 {
|
||||
background-color: #16a34a;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 1024px) {
|
||||
.lg\:grid-cols-2 {
|
||||
|
||||
@@ -1,45 +1,512 @@
|
||||
{{ define "content" }}
|
||||
<h2>Edit Volunteer</h2>
|
||||
<form method="POST" action="/volunteer/edit">
|
||||
<input type="hidden" name="user_id" value="{{.Volunteer.UserID}}" />
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- Header Bar -->
|
||||
|
||||
<label>First Name:</label>
|
||||
<input type="text" name="first_name" value="{{.Volunteer.FirstName}}" /><br />
|
||||
<!-- 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-users{{end}} text-blue-600"
|
||||
></i>
|
||||
<span class="text-sm font-medium">Volunteer Management</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>Last Name:</label>
|
||||
<input type="text" name="last_name" value="{{.Volunteer.LastName}}" /><br />
|
||||
<!-- Main Content -->
|
||||
<div class="p-6">
|
||||
<!-- Volunteer Info Section -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
{{ .Volunteer.FirstName }} {{ .Volunteer.LastName }}
|
||||
</h3>
|
||||
<p class="text-gray-600">{{ .Volunteer.Email }}</p>
|
||||
<div class="flex items-center mt-2 space-x-4">
|
||||
<span
|
||||
class="inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
|
||||
>
|
||||
<i class="fas fa-user-check mr-1"></i>
|
||||
Volunteer
|
||||
</span>
|
||||
<span class="text-gray-600">User ID:</span>
|
||||
<span class="font-mono text-gray-900">{{ .Volunteer.UserID }}</span>
|
||||
<span class="text-gray-600">Current Role:</span>
|
||||
<span class="text-gray-900">
|
||||
{{ if eq .Volunteer.RoleID 2 }}Team Leader{{ else }}Volunteer{{
|
||||
end }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="email" name="email" value="{{.Volunteer.Email}}" /><br />
|
||||
<!-- Edit Volunteer Section -->
|
||||
<div class="border-t border-gray-200 pt-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
|
||||
<i class="fas fa-edit text-blue-600 mr-3"></i>
|
||||
Edit Volunteer Information
|
||||
</h3>
|
||||
|
||||
<label>Phone:</label>
|
||||
<input type="text" name="phone" value="{{.Volunteer.Phone}}" /><br />
|
||||
<!-- Edit Volunteer Form -->
|
||||
<form method="POST" action="/volunteer/edit">
|
||||
<input type="hidden" name="user_id" value="{{.Volunteer.UserID}}" />
|
||||
|
||||
<label for="role_id">Role</label><br />
|
||||
<select name="role_id" id="role_id" required>
|
||||
<option value="">--Select Role--</option>
|
||||
<option
|
||||
type="number"
|
||||
value="3"
|
||||
{{if
|
||||
eq
|
||||
.Volunteer.RoleID
|
||||
3}}selected{{end}}
|
||||
>
|
||||
Volunteer
|
||||
</option>
|
||||
<option
|
||||
type="number"
|
||||
value="2"
|
||||
{{if
|
||||
eq
|
||||
.Volunteer.RoleID
|
||||
2}}selected{{end}}
|
||||
>
|
||||
Team Leader
|
||||
</option>
|
||||
</select>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- First Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
First Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
value="{{.Volunteer.FirstName}}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter first name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
{{end}}
|
||||
<!-- Last Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Last Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
value="{{.Volunteer.LastName}}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter last name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Email Address <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{.Volunteer.Email}}"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter email address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="phone"
|
||||
value="{{.Volunteer.Phone}}"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter phone number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Role Selection -->
|
||||
<div class="lg:col-span-2">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Role Assignment <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
name="role_id"
|
||||
id="role_id"
|
||||
required
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
>
|
||||
<option value="">--Select Role--</option>
|
||||
<option value="3" {{if eq .Volunteer.RoleID 3}}selected{{end}}>
|
||||
Volunteer
|
||||
</option>
|
||||
<option value="2" {{if eq .Volunteer.RoleID 2}}selected{{end}}>
|
||||
Team Leader
|
||||
</option>
|
||||
</select>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
Team Leaders can manage volunteers and access additional features
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div
|
||||
class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
|
||||
>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
|
||||
Changes will be applied immediately after saving
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick="window.history.back()"
|
||||
class="px-6 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"
|
||||
>
|
||||
<i class="fas fa-times mr-2"></i>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-save mr-2"></i>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Settings Section -->
|
||||
<div class="border-t border-gray-200 pt-8 mt-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center">
|
||||
<i class="fas fa-cog text-blue-600 mr-3"></i>
|
||||
Volunteer Settings
|
||||
</h3>
|
||||
|
||||
<form
|
||||
method="post"
|
||||
action="/volunteer/settings"
|
||||
id="volunteerSettingsForm"
|
||||
>
|
||||
<div class="space-y-6">
|
||||
<!-- Add New Setting -->
|
||||
<div class="bg-white border border-gray-200 p-6">
|
||||
<h4 class="text-md font-semibold text-gray-800 mb-4">
|
||||
Add New Setting
|
||||
</h4>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Setting Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="newVolunteerSettingName"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter setting name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
Setting Value
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="newVolunteerSettingValue"
|
||||
class="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
|
||||
placeholder="Enter setting value"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button
|
||||
type="button"
|
||||
onclick="addVolunteerSetting()"
|
||||
class="w-full px-6 py-3 bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-plus mr-2"></i>
|
||||
Add Setting
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Settings -->
|
||||
<div class="bg-white border border-gray-200 p-6">
|
||||
<h4 class="text-md font-semibold text-gray-800 mb-4">
|
||||
Current Settings
|
||||
</h4>
|
||||
<div id="volunteerSettingsList" class="space-y-3">
|
||||
<!-- Settings will be dynamically added here -->
|
||||
<div
|
||||
class="text-gray-500 text-sm"
|
||||
id="noVolunteerSettingsMessage"
|
||||
>
|
||||
No settings configured for this volunteer yet. Add settings
|
||||
above.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Form Actions -->
|
||||
<div
|
||||
class="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center"
|
||||
>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<i class="fas fa-info-circle text-blue-500 mr-2"></i>
|
||||
Settings are specific to this volunteer and applied immediately
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick="clearAllVolunteerSettings()"
|
||||
class="px-6 py-2 border border-red-300 text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-trash mr-2"></i>
|
||||
Clear All
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
|
||||
>
|
||||
<i class="fas fa-save mr-2"></i>
|
||||
Save Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let volunteerSettings = [];
|
||||
|
||||
function addVolunteerSetting() {
|
||||
const nameInput = document.getElementById("newVolunteerSettingName");
|
||||
const valueInput = document.getElementById("newVolunteerSettingValue");
|
||||
|
||||
const name = nameInput.value.trim();
|
||||
const value = valueInput.value.trim();
|
||||
|
||||
if (!name || !value) {
|
||||
alert("Please enter both setting name and value");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if setting already exists
|
||||
const existingIndex = volunteerSettings.findIndex(
|
||||
(s) => s.name.toLowerCase() === name.toLowerCase()
|
||||
);
|
||||
if (existingIndex !== -1) {
|
||||
// Update existing setting
|
||||
volunteerSettings[existingIndex].value = value;
|
||||
} else {
|
||||
// Add new setting
|
||||
volunteerSettings.push({ name, value });
|
||||
}
|
||||
|
||||
// Clear inputs
|
||||
nameInput.value = "";
|
||||
valueInput.value = "";
|
||||
|
||||
// Update display
|
||||
displayVolunteerSettings();
|
||||
}
|
||||
|
||||
function removeVolunteerSetting(index) {
|
||||
volunteerSettings.splice(index, 1);
|
||||
displayVolunteerSettings();
|
||||
}
|
||||
|
||||
function displayVolunteerSettings() {
|
||||
const settingsList = document.getElementById("volunteerSettingsList");
|
||||
const noSettingsMessage = document.getElementById(
|
||||
"noVolunteerSettingsMessage"
|
||||
);
|
||||
|
||||
if (volunteerSettings.length === 0) {
|
||||
settingsList.innerHTML =
|
||||
'<div class="text-gray-500 text-sm" id="noVolunteerSettingsMessage">No settings configured for this volunteer yet. Add settings above.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
settingsList.innerHTML = volunteerSettings
|
||||
.map(
|
||||
(setting, index) => `
|
||||
<div class="flex items-center justify-between p-4 border border-gray-200 bg-gray-50">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="font-semibold text-gray-900">${setting.name}:</span>
|
||||
<span class="text-gray-700">${setting.value}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick="removeVolunteerSetting(${index})"
|
||||
class="px-3 py-1 text-red-600 hover:text-red-800 focus:outline-none"
|
||||
title="Remove setting"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function clearAllVolunteerSettings() {
|
||||
if (volunteerSettings.length === 0) return;
|
||||
|
||||
if (
|
||||
confirm("Are you sure you want to clear all settings for this volunteer?")
|
||||
) {
|
||||
volunteerSettings = [];
|
||||
displayVolunteerSettings();
|
||||
}
|
||||
}
|
||||
|
||||
// Allow Enter key to add setting
|
||||
document
|
||||
.getElementById("newVolunteerSettingName")
|
||||
.addEventListener("keypress", function (e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
document.getElementById("newVolunteerSettingValue").focus();
|
||||
}
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("newVolunteerSettingValue")
|
||||
.addEventListener("keypress", function (e) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addVolunteerSetting();
|
||||
}
|
||||
});
|
||||
|
||||
// Volunteer Settings form submission handler
|
||||
document
|
||||
.getElementById("volunteerSettingsForm")
|
||||
.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Here you would typically send the settings to your server
|
||||
console.log("Saving volunteer settings:", volunteerSettings);
|
||||
|
||||
// Show success message
|
||||
alert("Volunteer settings saved successfully!");
|
||||
});
|
||||
|
||||
// Form validation for main volunteer form
|
||||
document
|
||||
.querySelector('form[action="/volunteer/edit"]')
|
||||
.addEventListener("submit", function (e) {
|
||||
const firstName = document
|
||||
.querySelector('input[name="first_name"]')
|
||||
.value.trim();
|
||||
const lastName = document
|
||||
.querySelector('input[name="last_name"]')
|
||||
.value.trim();
|
||||
const email = document.querySelector('input[name="email"]').value.trim();
|
||||
const roleId = document.querySelector('select[name="role_id"]').value;
|
||||
|
||||
if (!firstName || !lastName || !email || !roleId) {
|
||||
e.preventDefault();
|
||||
alert("Please fill in all required fields.");
|
||||
return false;
|
||||
}
|
||||
|
||||
// Email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
e.preventDefault();
|
||||
alert("Please enter a valid email address.");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Professional square corner design */
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Clean transitions */
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
.transition-colors {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Focus states with blue accent */
|
||||
input:focus,
|
||||
select:focus {
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
box-shadow: 0 0 0 2px #3b82f6;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.hover\:bg-gray-50:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.hover\:bg-blue-50:hover {
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
|
||||
.hover\:bg-blue-700:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.hover\:bg-orange-50:hover {
|
||||
background-color: #fff7ed;
|
||||
}
|
||||
|
||||
.hover\:bg-red-50:hover {
|
||||
background-color: #fef2f2;
|
||||
}
|
||||
|
||||
.hover\:bg-green-700:hover {
|
||||
background-color: #15803d;
|
||||
}
|
||||
|
||||
/* Professional button styling */
|
||||
button {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Status indicators */
|
||||
.bg-blue-100 {
|
||||
background-color: #dbeafe;
|
||||
}
|
||||
|
||||
.text-blue-800 {
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* Select styling */
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 0.5rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em 1.5em;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 1024px) {
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lg\:grid-cols-3 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lg\:col-span-2 {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,36 +1,114 @@
|
||||
{{ define "content" }}
|
||||
<div class="p-6 space-y-6">
|
||||
<h1 class="text-2xl font-bold mb-4">Team Builder</h1>
|
||||
|
||||
{{range .TeamLeads}}
|
||||
<div class="mb-4 p-4 bg-white rounded shadow">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-bold">{{.Name}}</span>
|
||||
<form action="/team_builderx" method="POST" class="flex space-x-2">
|
||||
<input type="hidden" name="team_lead_id" value="{{.ID}}" />
|
||||
<select name="volunteer_id" class="border px-2 py-1 rounded">
|
||||
<option value="">--Select Volunteer--</option>
|
||||
{{range $.UnassignedVolunteers}}
|
||||
<option value="{{.ID}}">{{.Name}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
<button type="submit" class="bg-blue-500 text-white px-3 py-1 rounded">
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- 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-2">
|
||||
<i
|
||||
class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-users{{end}} text-blue-600"
|
||||
></i>
|
||||
<span class="text-sm font-medium">Volunteer Management</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List of already assigned volunteers -->
|
||||
{{if .Volunteers}}
|
||||
<ul class="mt-2 list-disc list-inside">
|
||||
{{range .Volunteers}}
|
||||
<li>{{.Name}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<p class="text-gray-500 mt-1">No volunteers assigned yet.</p>
|
||||
<!-- Main Content -->
|
||||
<div class="p-6 space-y-6">
|
||||
{{range .TeamLeads}} {{ $teamLeadID := .ID }}
|
||||
<!-- store team lead ID -->
|
||||
|
||||
<div class="bg-white border border-gray-200 shadow-sm">
|
||||
<!-- Team Lead Header -->
|
||||
<div
|
||||
class="flex justify-between items-center px-4 py-3 border-b border-gray-200"
|
||||
>
|
||||
<div class="flex items-center space-x-3">
|
||||
<i class="fas fa-user-tie text-blue-600"></i>
|
||||
<span class="font-semibold text-gray-900">{{.Name}}</span>
|
||||
</div>
|
||||
<form
|
||||
action="/team_builder"
|
||||
method="POST"
|
||||
class="flex items-center space-x-3"
|
||||
>
|
||||
<input type="hidden" name="team_lead_id" value="{{.ID}}" />
|
||||
|
||||
<select
|
||||
name="volunteer_id"
|
||||
class="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 Volunteer--</option>
|
||||
{{range $.UnassignedVolunteers}}
|
||||
<option value="{{.ID}}">{{.Name}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
>
|
||||
<i class="fas fa-plus mr-2"></i> Add
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Assigned Volunteers -->
|
||||
<div class="px-6 py-4">
|
||||
{{if .Volunteers}}
|
||||
<ul class="space-y-2">
|
||||
{{range .Volunteers}}
|
||||
<li
|
||||
class="flex items-center justify-between text-gray-800 border-b border-gray-200 py-2"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fas fa-user text-gray-500"></i>
|
||||
<span>{{.Name}}</span>
|
||||
</div>
|
||||
<form
|
||||
action="/team_builder/remove_volunteer"
|
||||
method="POST"
|
||||
class="flex-shrink-0"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="team_lead_id"
|
||||
value="{{ $teamLeadID }}"
|
||||
/>
|
||||
<input type="hidden" name="volunteer_id" value="{{.ID}}" />
|
||||
<button
|
||||
type="submit"
|
||||
aria-label="Remove {{.Name}}"
|
||||
class="px-3 py-1 bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-1 focus:ring-red-500"
|
||||
>
|
||||
<i class="fas fa-times"></i> Remove
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<p class="text-gray-500 italic">No volunteers assigned yet.</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</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>
|
||||
{{ end }}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<i
|
||||
class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-users{{end}} text-blue-600"
|
||||
></i>
|
||||
<span class="text-sm font-medium">Volunteers</span>
|
||||
<span class="text-sm font-medium">Volunteer Management</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user