Initial commit
This commit is contained in:
Mann Patel
201
app/internal/templates/address/address.html
Normal file
201
app/internal/templates/address/address.html
Normal file
@@ -0,0 +1,201 @@
|
||||
{{ 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">
|
||||
<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-map-marker-alt{{end}} text-green-600"
|
||||
></i>
|
||||
<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
|
||||
{{.Pagination.TotalRecords}} addresses
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</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
|
||||
id="pageSize"
|
||||
onchange="changePageSize(this.value)"
|
||||
class="px-3 py-1 text-sm border border-gray-200 rounded bg-white"
|
||||
>
|
||||
<option value="20" {{if eq .Pagination.PageSize 20}}selected{{end}}>
|
||||
20
|
||||
</option>
|
||||
<option value="50" {{if eq .Pagination.PageSize 50}}selected{{end}}>
|
||||
50
|
||||
</option>
|
||||
<option
|
||||
value="100"
|
||||
{{if
|
||||
eq
|
||||
.Pagination.PageSize
|
||||
100}}selected{{end}}
|
||||
>
|
||||
100
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Page Navigation -->
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Previous Button -->
|
||||
<button
|
||||
onclick="goToPage({{.Pagination.PreviousPage}})"
|
||||
{{if
|
||||
not
|
||||
.Pagination.HasPrevious}}disabled{{end}}
|
||||
class="px-3 py-1 text-sm border border-gray-200 rounded {{if .Pagination.HasPrevious}}hover:bg-gray-50 text-gray-700{{else}}text-gray-400 cursor-not-allowed{{end}}"
|
||||
>
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
|
||||
<!-- Page Info -->
|
||||
<span class="px-2 text-gray-600">
|
||||
{{.Pagination.CurrentPage}} / {{.Pagination.TotalPages}}
|
||||
</span>
|
||||
|
||||
<!-- Next Button -->
|
||||
<button
|
||||
onclick="goToPage({{.Pagination.NextPage}})"
|
||||
{{if
|
||||
not
|
||||
.Pagination.HasNext}}disabled{{end}}
|
||||
class="px-3 py-1 text-sm border border-gray-200 rounded {{if .Pagination.HasNext}}hover:bg-gray-50 text-gray-700{{else}}text-gray-400 cursor-not-allowed{{end}}"
|
||||
>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Wrapper -->
|
||||
<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>
|
||||
</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
|
||||
class="inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full"
|
||||
>
|
||||
<i class="fas fa-check mr-1"></i> Valid
|
||||
</span>
|
||||
{{ else }}
|
||||
<span
|
||||
class="inline-flex items-center px-2 py-1 text-xs font-medium bg-red-100 text-red-700 rounded-full"
|
||||
>
|
||||
<i class="fas fa-times mr-1"></i> Invalid
|
||||
</span>
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
{{ else }}
|
||||
<tr>
|
||||
<td colspan="7" class="px-6 py-8 text-center text-gray-500">
|
||||
No addresses found
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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();
|
||||
}
|
||||
</script>
|
||||
{{ end }}
|
||||
230
app/internal/templates/dashboard/dashboard.html
Normal file
230
app/internal/templates/dashboard/dashboard.html
Normal file
@@ -0,0 +1,230 @@
|
||||
{{ define "content" }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{.Title}}</title>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://www.gstatic.com/charts/loader.js"
|
||||
></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Full Width Container -->
|
||||
<div class="min-h-screen w-full flex flex-col">
|
||||
<!-- Top Navigation Bar -->
|
||||
<div class="bg-white border-b border-gray-200 w-full">
|
||||
<div class="px-8 py-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-blue-600 flex items-center justify-center">
|
||||
<i class="fas fa-chart-bar text-white text-sm"></i>
|
||||
</div>
|
||||
<span class="text-xl font-semibold text-gray-900">
|
||||
Dashboard Overview
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
class="px-6 py-2.5 bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<i class="fas fa-download mr-2"></i>Export Data
|
||||
</button>
|
||||
<button
|
||||
class="px-6 py-2.5 border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<i class="fas fa-filter mr-2"></i>Filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Dashboard Content -->
|
||||
<div class="w-full">
|
||||
<!-- Stats Grid - Full Width -->
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 bg-white border-b border-gray-200"
|
||||
>
|
||||
<!-- Active Volunteers -->
|
||||
<div
|
||||
class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
onclick="focusMap()"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-12 h-12 bg-blue-50 flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-users text-blue-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-600 mb-1">
|
||||
Active Volunteers
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-gray-900">
|
||||
{{.VolunteerCount}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Addresses Visited -->
|
||||
<div
|
||||
class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
onclick="updateChart('visitors')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-12 h-12 bg-blue-50 flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-map-marker-alt text-blue-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-600 mb-1">
|
||||
Addresses Visited
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-gray-900">
|
||||
{{.ValidatedCount}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total Donations -->
|
||||
<div
|
||||
class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
onclick="updateChart('revenue')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-12 h-12 bg-blue-50 flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-dollar-sign text-blue-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-600 mb-1">Donation</p>
|
||||
<p class="text-2xl font-bold text-gray-900">
|
||||
${{.TotalDonations}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Houses Left -->
|
||||
<div
|
||||
class="p-8 hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
onclick="updateChart('conversion')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-12 h-12 bg-blue-50 flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-percentage text-blue-600 text-lg"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-600 mb-1">
|
||||
Houses Left
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-gray-900">
|
||||
{{.HousesLeftPercent}}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map Section - Full Width -->
|
||||
<div class="bg-white w-full">
|
||||
<div class="px-8 py-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-6">
|
||||
Location Analytics
|
||||
</h3>
|
||||
<div id="map" class="w-full h-[850px] border border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let map;
|
||||
|
||||
function focusMap() {
|
||||
// Center map example
|
||||
map.setCenter({ lat: 43.0896, lng: -79.0849 }); // Niagara Falls
|
||||
map.setZoom(12);
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
const niagaraFalls = { lat: 43.0896, lng: -79.0849 };
|
||||
|
||||
map = new google.maps.Map(document.getElementById("map"), {
|
||||
zoom: 12,
|
||||
center: niagaraFalls,
|
||||
});
|
||||
|
||||
new google.maps.Marker({
|
||||
position: niagaraFalls,
|
||||
map,
|
||||
title: "Niagara Falls",
|
||||
});
|
||||
}
|
||||
|
||||
// Google Charts
|
||||
google.charts.load("current", { packages: ["corechart", "line"] });
|
||||
google.charts.setOnLoadCallback(drawAnalyticsChart);
|
||||
|
||||
function drawAnalyticsChart() {
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn("string", "Time");
|
||||
data.addColumn("number", "Visitors");
|
||||
data.addColumn("number", "Revenue");
|
||||
|
||||
data.addRows([
|
||||
["Jan", 4200, 32000],
|
||||
["Feb", 4800, 38000],
|
||||
["Mar", 5200, 42000],
|
||||
["Apr", 4900, 39000],
|
||||
["May", 5800, 45000],
|
||||
["Jun", 6200, 48000],
|
||||
]);
|
||||
|
||||
var options = {
|
||||
title: "Performance Over Time",
|
||||
backgroundColor: "transparent",
|
||||
hAxis: { title: "Month" },
|
||||
vAxis: { title: "Value" },
|
||||
colors: ["#3B82F6", "#10B981"],
|
||||
chartArea: {
|
||||
left: 60,
|
||||
top: 40,
|
||||
width: "90%",
|
||||
height: "70%",
|
||||
},
|
||||
legend: { position: "top", alignment: "center" },
|
||||
};
|
||||
|
||||
var chart = new google.visualization.LineChart(
|
||||
document.getElementById("analytics_chart")
|
||||
);
|
||||
chart.draw(data, options);
|
||||
}
|
||||
|
||||
function updateChart(type) {
|
||||
drawAnalyticsChart();
|
||||
}
|
||||
</script>
|
||||
|
||||
<script
|
||||
async
|
||||
defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
122
app/internal/templates/dashboard/volunteer_dashboard.html
Normal file
122
app/internal/templates/dashboard/volunteer_dashboard.html
Normal file
@@ -0,0 +1,122 @@
|
||||
{{ 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>
|
||||
</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>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
490
app/internal/templates/layout.html
Normal file
490
app/internal/templates/layout.html
Normal file
@@ -0,0 +1,490 @@
|
||||
{{ define "layout" }}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{if .Title}}{{.Title}}{{else}}Poll System{{end}}</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="//unpkg.com/alpinejs" defer></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
/>
|
||||
</head>
|
||||
<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="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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex h-full">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-64 bg-gray-50 border-r border-gray-200 flex-shrink-0">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 flex flex-col overflow-hidden min-h-screen">
|
||||
<div class="bg-white flex-1 overflow-auto pb-[60px]">
|
||||
{{ template "content" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<!-- Landing Page -->
|
||||
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-gray-100">
|
||||
<!-- 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">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 bg-blue-600 text-white text-sm flex items-center justify-center font-bold">
|
||||
L
|
||||
</div>
|
||||
<span class="text-xl font-semibold text-gray-900">Poll System</span>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
Get Started
|
||||
</button>
|
||||
</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">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<p class="text-gray-600">Monitor progress with comprehensive analytics and detailed reporting dashboards.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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>
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-6">About Poll System</h2>
|
||||
<p class="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">
|
||||
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">
|
||||
<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">
|
||||
<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">
|
||||
<i class="fas fa-check text-green-600 text-sm"></i>
|
||||
</div>
|
||||
<span class="text-gray-700">Comprehensive reporting tools</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="bg-gradient-to-br from-blue-500 to-blue-700 p-8 text-white">
|
||||
<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>
|
||||
<p class="text-lg opacity-90 mb-6">
|
||||
Join hundreds of organizations already using Poll System to manage their operations efficiently.
|
||||
</p>
|
||||
<div class="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div class="text-2xl font-bold">500+</div>
|
||||
<div class="text-sm opacity-80">Volunteers</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold">50+</div>
|
||||
<div class="text-sm opacity-80">Organizations</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold">1000+</div>
|
||||
<div class="text-sm opacity-80">Addresses</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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="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">
|
||||
L
|
||||
</div>
|
||||
<span class="text-xl font-semibold">Poll System</span>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4 max-w-md">
|
||||
Streamlining polling operations with comprehensive volunteer management,
|
||||
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">
|
||||
<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">
|
||||
<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">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Platform</h4>
|
||||
<ul class="space-y-2 text-gray-400">
|
||||
<li><a href="#" class="hover:text-white transition-colors">Dashboard</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">Volunteers</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">Addresses</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">Reports</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold mb-4">Support</h4>
|
||||
<ul class="space-y-2 text-gray-400">
|
||||
<li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">Contact Us</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
|
||||
<li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||||
<p>© 2025 Poll System. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</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]">
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Side - Form -->
|
||||
<div class="flex-1 p-8">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="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>
|
||||
</div>
|
||||
<form method="POST" action="/login" class="space-y-6">
|
||||
<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">
|
||||
</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">
|
||||
</div>
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-3 hover:bg-blue-700 font-medium transition-colors">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
<p class="text-center text-sm text-gray-600 mt-6">
|
||||
Don't have an account?
|
||||
<button onclick="switchToRegister()" class="text-blue-600 hover:text-blue-700 font-medium">Sign up</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Side - Form -->
|
||||
<div class="flex-1 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>
|
||||
<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>
|
||||
<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">
|
||||
</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">
|
||||
</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">
|
||||
</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">
|
||||
</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">
|
||||
<option value="">Select role</option>
|
||||
<option value="1">Admin</option>
|
||||
<option value="2">Team Leader</option>
|
||||
<option value="3">Volunteer</option>
|
||||
</select>
|
||||
</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">
|
||||
</div>
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-3 hover:bg-blue-700 font-medium transition-colors mt-6">
|
||||
Create Account
|
||||
</button>
|
||||
</form>
|
||||
<p class="text-center text-sm text-gray-600 mt-4">
|
||||
Already have an account?
|
||||
<button onclick="switchToLogin()" class="text-blue-600 hover:text-blue-700 font-medium">Sign in</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<script>
|
||||
// Smooth scrolling for navigation links
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const links = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
for (const link of links) {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href').substring(1);
|
||||
const targetElement = document.getElementById(targetId);
|
||||
|
||||
if (targetElement) {
|
||||
const offsetTop = targetElement.offsetTop - 80; // Account for fixed navbar
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function openLoginModal() {
|
||||
document.getElementById('loginModal').classList.remove('hidden');
|
||||
document.getElementById('loginModal').classList.add('flex');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeLoginModal() {
|
||||
document.getElementById('loginModal').classList.add('hidden');
|
||||
document.getElementById('loginModal').classList.remove('flex');
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
function openRegisterModal() {
|
||||
document.getElementById('registerModal').classList.remove('hidden');
|
||||
document.getElementById('registerModal').classList.add('flex');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeRegisterModal() {
|
||||
document.getElementById('registerModal').classList.add('hidden');
|
||||
document.getElementById('registerModal').classList.remove('flex');
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
function switchToRegister() {
|
||||
closeLoginModal();
|
||||
setTimeout(() => openRegisterModal(), 100);
|
||||
}
|
||||
|
||||
function switchToLogin() {
|
||||
closeRegisterModal();
|
||||
setTimeout(() => openLoginModal(), 100);
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
window.onclick = function(event) {
|
||||
const loginModal = document.getElementById('loginModal');
|
||||
const registerModal = document.getElementById('registerModal');
|
||||
|
||||
if (event.target === loginModal) {
|
||||
closeLoginModal();
|
||||
}
|
||||
if (event.target === registerModal) {
|
||||
closeRegisterModal();
|
||||
}
|
||||
}
|
||||
|
||||
// Handle escape key
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
closeLoginModal();
|
||||
closeRegisterModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
369
app/internal/templates/posts.html
Normal file
369
app/internal/templates/posts.html
Normal file
@@ -0,0 +1,369 @@
|
||||
{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<!-- Create Post Form -->
|
||||
<div class="bg-white border-b border-gray-200 p-6">
|
||||
<form
|
||||
action="/posts"
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
class="space-y-4"
|
||||
>
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-10 h-10 bg-blue-500 flex items-center justify-center text-white font-semibold"
|
||||
>
|
||||
U
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<textarea
|
||||
id="content"
|
||||
name="content"
|
||||
placeholder="What's on your mind?"
|
||||
class="w-full px-0 py-2 text-gray-900 placeholder-gray-500 border-0 resize-none focus:outline-none focus:ring-0"
|
||||
rows="3"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between pt-4 border-t border-gray-100"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<label
|
||||
for="image"
|
||||
class="cursor-pointer flex items-center space-x-2 text-blue-500 hover:text-blue-600"
|
||||
>
|
||||
<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="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>
|
||||
<span class="text-sm font-medium">Photo</span>
|
||||
</label>
|
||||
<input
|
||||
id="image"
|
||||
type="file"
|
||||
name="image"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 text-sm font-semibold transition-colors disabled:opacity-50"
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Image preview -->
|
||||
<div id="imagePreview" class="hidden">
|
||||
<img
|
||||
id="previewImg"
|
||||
class="w-full h-64 object-cover border"
|
||||
alt="Preview"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
id="removeImage"
|
||||
class="mt-2 text-red-500 text-sm hover:text-red-600"
|
||||
>
|
||||
Remove image
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Posts Feed -->
|
||||
<div class="space-y-0">
|
||||
{{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>
|
||||
</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">
|
||||
<!-- Like Button -->
|
||||
<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"
|
||||
>
|
||||
<i class="fa-solid fa-thumbs-up text-lg"></i>
|
||||
<span class="text-sm font-medium like-count">0</span>
|
||||
</button>
|
||||
|
||||
<!-- Dislike 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"
|
||||
>
|
||||
<i class="fa-solid fa-thumbs-down text-lg"></i>
|
||||
<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>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Custom styles for Instagram-like feel */
|
||||
.reaction-btn.active {
|
||||
color: #3b82f6 !important;
|
||||
}
|
||||
|
||||
.reaction-btn.active svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.reaction-btn.dislike-active {
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
/* Smooth transitions */
|
||||
.reaction-btn {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.reaction-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
button:focus {
|
||||
outline: 2px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: 2px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const fileInput = document.getElementById("image");
|
||||
const imagePreview = document.getElementById("imagePreview");
|
||||
const previewImg = document.getElementById("previewImg");
|
||||
const removeImageBtn = document.getElementById("removeImage");
|
||||
const form = document.querySelector("form");
|
||||
|
||||
// Image upload preview
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener("change", function (e) {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
console.log(
|
||||
"Selected file:",
|
||||
file.name,
|
||||
"Size:",
|
||||
file.size,
|
||||
"Type:",
|
||||
file.type
|
||||
);
|
||||
|
||||
// Validate file size (10MB max)
|
||||
if (file.size > 10 * 1024 * 1024) {
|
||||
alert("File is too large. Maximum size is 10MB.");
|
||||
this.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file type
|
||||
const allowedTypes = [
|
||||
"image/jpeg",
|
||||
"image/jpg",
|
||||
"image/png",
|
||||
"image/gif",
|
||||
"image/webp",
|
||||
];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
alert("Invalid file type. Please select a valid image file.");
|
||||
this.value = "";
|
||||
return;
|
||||
}
|
||||
|
||||
// Show preview
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
previewImg.src = e.target.result;
|
||||
imagePreview.classList.remove("hidden");
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Remove image preview
|
||||
if (removeImageBtn) {
|
||||
removeImageBtn.addEventListener("click", function () {
|
||||
fileInput.value = "";
|
||||
imagePreview.classList.add("hidden");
|
||||
previewImg.src = "";
|
||||
});
|
||||
}
|
||||
|
||||
// Reaction buttons
|
||||
const reactionBtns = document.querySelectorAll(".reaction-btn");
|
||||
reactionBtns.forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
const postId = this.dataset.postId;
|
||||
const reaction = this.dataset.reaction;
|
||||
|
||||
// Toggle active state
|
||||
if (reaction === "like") {
|
||||
this.classList.toggle("active");
|
||||
// Remove dislike active state from sibling
|
||||
const dislikeBtn = this.parentElement.querySelector(
|
||||
'[data-reaction="dislike"]'
|
||||
);
|
||||
dislikeBtn.classList.remove("dislike-active");
|
||||
} else {
|
||||
this.classList.toggle("dislike-active");
|
||||
// Remove like active state from sibling
|
||||
const likeBtn = this.parentElement.querySelector(
|
||||
'[data-reaction="like"]'
|
||||
);
|
||||
likeBtn.classList.remove("active");
|
||||
}
|
||||
|
||||
// Update count (mock implementation)
|
||||
const countSpan = this.querySelector("span");
|
||||
const currentCount = parseInt(countSpan.textContent);
|
||||
const isActive =
|
||||
this.classList.contains("active") ||
|
||||
this.classList.contains("dislike-active");
|
||||
countSpan.textContent = isActive
|
||||
? currentCount + 1
|
||||
: Math.max(0, currentCount - 1);
|
||||
|
||||
console.log(`${reaction} clicked for post ${postId}`);
|
||||
|
||||
// Here you would typically send an AJAX request to update the backend
|
||||
// fetch(`/posts/${postId}/react`, {
|
||||
// method: 'POST',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// body: JSON.stringify({ reaction: reaction })
|
||||
// });
|
||||
});
|
||||
});
|
||||
|
||||
// Form submission
|
||||
if (form) {
|
||||
form.addEventListener("submit", function (e) {
|
||||
const content = document.getElementById("content").value.trim();
|
||||
const hasImage = fileInput.files.length > 0;
|
||||
|
||||
if (!content && !hasImage) {
|
||||
e.preventDefault();
|
||||
alert("Please add some content or an image to your post.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Form being submitted...");
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-resize textarea
|
||||
const textarea = document.getElementById("content");
|
||||
if (textarea) {
|
||||
textarea.addEventListener("input", function () {
|
||||
this.style.height = "auto";
|
||||
this.style.height = this.scrollHeight + "px";
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scroll to top when clicking header
|
||||
const header = document.querySelector("h1");
|
||||
if (header) {
|
||||
header.addEventListener("click", function () {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
274
app/internal/templates/profile/profile.html
Normal file
274
app/internal/templates/profile/profile.html
Normal file
@@ -0,0 +1,274 @@
|
||||
{{ 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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Professional square corner design */
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Clean transitions */
|
||||
input,
|
||||
button,
|
||||
.transition-colors {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Focus states with blue accent */
|
||||
input:focus {
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
box-shadow: 0 0 0 2px #3b82f6;
|
||||
}
|
||||
|
||||
/* Hover effects for tiles */
|
||||
.hover\:bg-blue-50:hover {
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
|
||||
.hover\:border-blue-500:hover {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Professional table-like layout */
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
/* Ensure full width usage */
|
||||
.min-h-screen {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Professional button styling */
|
||||
button {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Clean form inputs */
|
||||
input[disabled] {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Status indicators */
|
||||
.bg-blue-100 {
|
||||
background-color: #dbeafe;
|
||||
}
|
||||
|
||||
.text-blue-800 {
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* Progress bars */
|
||||
.bg-blue-600 {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
/* 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));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
239
app/internal/templates/schedual/schedual.html
Normal file
239
app/internal/templates/schedual/schedual.html
Normal file
@@ -0,0 +1,239 @@
|
||||
{{ define "content" }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Interactive Dashboard</title>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://www.gstatic.com/charts/loader.js"
|
||||
></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<!-- Top Navigation -->
|
||||
<div class="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fas fa-chart-bar text-blue-600"></i>
|
||||
<span class="text-xl font-semibold text-gray-800">
|
||||
Schedual Overview
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
class="px-5 py-2 bg-blue-600 text-white text-sm hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<i class="fas fa-download mr-2"></i>Export Data
|
||||
</button>
|
||||
<button
|
||||
class="px-5 py-2 border border-gray-300 text-gray-700 text-sm hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<i class="fas fa-filter mr-2"></i>Filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<div class="flex-1 overflow-auto">
|
||||
<!-- Top Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- Active Locations Card -->
|
||||
<div
|
||||
class="bg-white border-r border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
|
||||
onclick="focusMap()"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-14 h-14 bg-blue-100 flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
Active Locations
|
||||
</p>
|
||||
<p class="text-2xl font-bold text-gray-900">24</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total Visitors Card -->
|
||||
<div
|
||||
class="bg-white border-r border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
|
||||
onclick="updateChart('visitors')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-14 h-14 bg-green-100 flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-users text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-600">Total Visitors</p>
|
||||
<p class="text-2xl font-bold text-gray-900">12,847</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Revenue Card -->
|
||||
<div
|
||||
class="bg-white border-r border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
|
||||
onclick="updateChart('revenue')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-14 h-14 bg-purple-100 flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-dollar-sign text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-600">Revenue</p>
|
||||
<p class="text-2xl font-bold text-gray-900">$47,392</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversion Rate Card -->
|
||||
<div
|
||||
class="bg-white border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
|
||||
onclick="updateChart('conversion')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="w-14 h-14 bg-orange-100 flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-percentage text-orange-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-600">Conversion Rate</p>
|
||||
<p class="text-2xl font-bold text-gray-900">3.2%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Full Width Google Map -->
|
||||
<div class="bg-white border-b border-gray-200 p-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-6">
|
||||
Location Analytics
|
||||
</h3>
|
||||
<div id="map" class="w-full h-[600px] border border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Performance Metrics Chart - Full Width Bottom -->
|
||||
<div class="bg-white border-gray-200 p-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900">
|
||||
Performance Metrics
|
||||
</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
onclick="updateChart('daily')"
|
||||
class="px-3 py-1 text-sm border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Daily
|
||||
</button>
|
||||
<button
|
||||
onclick="updateChart('weekly')"
|
||||
class="px-3 py-1 text-sm bg-blue-600 text-white hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Weekly
|
||||
</button>
|
||||
<button
|
||||
onclick="updateChart('monthly')"
|
||||
class="px-3 py-1 text-sm border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="analytics_chart" class="w-full h-[400px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let map;
|
||||
|
||||
function focusMap() {
|
||||
// Center map example
|
||||
map.setCenter({ lat: 43.0896, lng: -79.0849 }); // Niagara Falls
|
||||
map.setZoom(12);
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
const niagaraFalls = { lat: 43.0896, lng: -79.0849 };
|
||||
|
||||
map = new google.maps.Map(document.getElementById("map"), {
|
||||
zoom: 12,
|
||||
center: niagaraFalls,
|
||||
});
|
||||
|
||||
new google.maps.Marker({
|
||||
position: niagaraFalls,
|
||||
map,
|
||||
title: "Niagara Falls",
|
||||
});
|
||||
}
|
||||
|
||||
// Google Charts
|
||||
google.charts.load("current", { packages: ["corechart", "line"] });
|
||||
google.charts.setOnLoadCallback(drawAnalyticsChart);
|
||||
|
||||
function drawAnalyticsChart() {
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn("string", "Time");
|
||||
data.addColumn("number", "Visitors");
|
||||
data.addColumn("number", "Revenue");
|
||||
|
||||
data.addRows([
|
||||
["Jan", 4200, 32000],
|
||||
["Feb", 4800, 38000],
|
||||
["Mar", 5200, 42000],
|
||||
["Apr", 4900, 39000],
|
||||
["May", 5800, 45000],
|
||||
["Jun", 6200, 48000],
|
||||
]);
|
||||
|
||||
var options = {
|
||||
title: "Performance Over Time",
|
||||
backgroundColor: "transparent",
|
||||
hAxis: { title: "Month" },
|
||||
vAxis: { title: "Value" },
|
||||
colors: ["#3B82F6", "#10B981"],
|
||||
chartArea: {
|
||||
left: 60,
|
||||
top: 40,
|
||||
width: "90%",
|
||||
height: "70%",
|
||||
},
|
||||
legend: { position: "top", alignment: "center" },
|
||||
};
|
||||
|
||||
var chart = new google.visualization.LineChart(
|
||||
document.getElementById("analytics_chart")
|
||||
);
|
||||
chart.draw(data, options);
|
||||
}
|
||||
|
||||
function updateChart(type) {
|
||||
drawAnalyticsChart();
|
||||
}
|
||||
</script>
|
||||
|
||||
<script
|
||||
async
|
||||
defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
45
app/internal/templates/volunteer/edit_volunteer.html
Normal file
45
app/internal/templates/volunteer/edit_volunteer.html
Normal file
@@ -0,0 +1,45 @@
|
||||
{{ define "content" }}
|
||||
<h2>Edit Volunteer</h2>
|
||||
<form method="POST" action="/volunteer/edit">
|
||||
<input type="hidden" name="user_id" value="{{.Volunteer.UserID}}" />
|
||||
|
||||
<label>First Name:</label>
|
||||
<input type="text" name="first_name" value="{{.Volunteer.FirstName}}" /><br />
|
||||
|
||||
<label>Last Name:</label>
|
||||
<input type="text" name="last_name" value="{{.Volunteer.LastName}}" /><br />
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="email" name="email" value="{{.Volunteer.Email}}" /><br />
|
||||
|
||||
<label>Phone:</label>
|
||||
<input type="text" name="phone" value="{{.Volunteer.Phone}}" /><br />
|
||||
|
||||
<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>
|
||||
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
{{end}}
|
||||
36
app/internal/templates/volunteer/team_builder.html
Normal file
36
app/internal/templates/volunteer/team_builder.html
Normal file
@@ -0,0 +1,36 @@
|
||||
{{ 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>
|
||||
|
||||
<!-- 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>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{ end }}
|
||||
299
app/internal/templates/volunteer/volunteer.html
Normal file
299
app/internal/templates/volunteer/volunteer.html
Normal file
@@ -0,0 +1,299 @@
|
||||
{{ define "content" }}
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 flex flex-col overflow-hidden" x-data="volunteerTable()">
|
||||
<!-- 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">Volunteers</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 gap-4 text-sm">
|
||||
<!-- Search -->
|
||||
<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"
|
||||
x-model="searchTerm"
|
||||
placeholder="Search volunteers..."
|
||||
class="w-64 pl-8 pr-3 py-2 text-sm border border-gray-200 bg-white focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Role Filter -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="roleFilter" class="text-gray-600 font-medium">Role:</label>
|
||||
<select
|
||||
x-model="roleFilter"
|
||||
class="px-3 py-2 text-sm border border-gray-200 bg-white focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
>
|
||||
<option value="">All Roles</option>
|
||||
<option value="1">Admin</option>
|
||||
<option value="2">Team Leader</option>
|
||||
<option value="3">Volunteer</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Clear Filters -->
|
||||
<button
|
||||
@click="clearFilters()"
|
||||
class="px-3 py-2 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<i class="fas fa-times mr-1"></i>Clear
|
||||
</button>
|
||||
|
||||
<!-- Results Count -->
|
||||
<div class="ml-auto">
|
||||
<span class="text-gray-600 text-sm">
|
||||
Showing <span x-text="filteredVolunteers.length"></span> of
|
||||
<span x-text="volunteers.length"></span> volunteers
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Wrapper -->
|
||||
<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">
|
||||
<tr
|
||||
class="text-left text-gray-700 font-medium border-b border-gray-200"
|
||||
>
|
||||
<th class="px-4 py-3 whitespace-nowrap">
|
||||
<div
|
||||
class="flex items-center gap-2 cursor-pointer"
|
||||
@click="sortBy('UserID')"
|
||||
>
|
||||
ID <i class="fas" :class="getSortIcon('UserID')"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">
|
||||
<div
|
||||
class="flex items-center gap-2 cursor-pointer"
|
||||
@click="sortBy('FirstName')"
|
||||
>
|
||||
First Name <i class="fas" :class="getSortIcon('FirstName')"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">
|
||||
<div
|
||||
class="flex items-center gap-2 cursor-pointer"
|
||||
@click="sortBy('LastName')"
|
||||
>
|
||||
Last Name <i class="fas" :class="getSortIcon('LastName')"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">
|
||||
<div
|
||||
class="flex items-center gap-2 cursor-pointer"
|
||||
@click="sortBy('Email')"
|
||||
>
|
||||
Email <i class="fas" :class="getSortIcon('Email')"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">
|
||||
<div
|
||||
class="flex items-center gap-2 cursor-pointer"
|
||||
@click="sortBy('Phone')"
|
||||
>
|
||||
Phone <i class="fas" :class="getSortIcon('Phone')"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">
|
||||
<div
|
||||
class="flex items-center gap-2 cursor-pointer"
|
||||
@click="sortBy('RoleID')"
|
||||
>
|
||||
Role <i class="fas" :class="getSortIcon('RoleID')"></i>
|
||||
</div>
|
||||
</th>
|
||||
<th class="px-6 py-3 whitespace-nowrap">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- Table Body -->
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<template
|
||||
x-for="volunteer in filteredVolunteers"
|
||||
:key="volunteer.UserID"
|
||||
>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td
|
||||
class="px-6 py-3 whitespace-nowrap"
|
||||
x-text="volunteer.UserID"
|
||||
></td>
|
||||
<td
|
||||
class="px-6 py-3 whitespace-nowrap"
|
||||
x-text="volunteer.FirstName"
|
||||
></td>
|
||||
<td
|
||||
class="px-6 py-3 whitespace-nowrap"
|
||||
x-text="volunteer.LastName"
|
||||
></td>
|
||||
<td
|
||||
class="px-6 py-3 whitespace-nowrap"
|
||||
x-text="volunteer.Email"
|
||||
></td>
|
||||
<td
|
||||
class="px-6 py-3 whitespace-nowrap"
|
||||
x-text="volunteer.Phone"
|
||||
></td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
<span
|
||||
class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800"
|
||||
x-text="getRoleName(volunteer.RoleID)"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<a
|
||||
:href="`/volunteer/edit?id=${volunteer.UserID}`"
|
||||
class="text-blue-600 hover:text-blue-800 font-medium text-xs px-2 py-1 hover:bg-blue-50 transition-colors"
|
||||
>Edit</a
|
||||
>
|
||||
<form
|
||||
action="/volunteer/delete"
|
||||
method="POST"
|
||||
class="inline-block"
|
||||
>
|
||||
<input type="hidden" name="id" :value="volunteer.UserID" />
|
||||
<button
|
||||
type="submit"
|
||||
class="text-red-600 hover:text-red-800 font-medium text-xs px-2 py-1 hover:bg-red-50 transition-colors"
|
||||
@click="return confirm('Are you sure you want to delete this volunteer?')"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- No Results Message -->
|
||||
<div x-show="filteredVolunteers.length === 0" class="text-center py-12">
|
||||
<i class="fas fa-search text-gray-400 text-3xl mb-4"></i>
|
||||
<p class="text-gray-600 text-lg mb-2">No volunteers found</p>
|
||||
<p class="text-gray-500 text-sm">
|
||||
Try adjusting your search or filter criteria
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
|
||||
defer
|
||||
></script>
|
||||
<script>
|
||||
function volunteerTable() {
|
||||
return {
|
||||
searchTerm: '',
|
||||
roleFilter: '',
|
||||
sortColumn: '',
|
||||
sortDirection: 'asc',
|
||||
volunteers: [
|
||||
{{ range .Users }}
|
||||
{
|
||||
UserID: {{ .UserID }},
|
||||
FirstName: "{{ .FirstName }}",
|
||||
LastName: "{{ .LastName }}",
|
||||
Email: "{{ .Email }}",
|
||||
Phone: "{{ .Phone }}",
|
||||
RoleID: {{ .RoleID }}
|
||||
},
|
||||
{{ end }}
|
||||
],
|
||||
|
||||
get filteredVolunteers() {
|
||||
let filtered = this.volunteers.filter(volunteer => {
|
||||
// Search filter
|
||||
const searchMatch = !this.searchTerm ||
|
||||
volunteer.FirstName.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
|
||||
volunteer.LastName.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
|
||||
volunteer.Email.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
|
||||
volunteer.Phone.includes(this.searchTerm);
|
||||
|
||||
// Role filter
|
||||
const roleMatch = !this.roleFilter || volunteer.RoleID.toString() === this.roleFilter;
|
||||
|
||||
return searchMatch && roleMatch;
|
||||
});
|
||||
|
||||
// Sort filtered results
|
||||
if (this.sortColumn) {
|
||||
filtered.sort((a, b) => {
|
||||
let aValue = a[this.sortColumn];
|
||||
let bValue = b[this.sortColumn];
|
||||
|
||||
// Handle string comparison
|
||||
if (typeof aValue === 'string') {
|
||||
aValue = aValue.toLowerCase();
|
||||
bValue = bValue.toLowerCase();
|
||||
}
|
||||
|
||||
let comparison = 0;
|
||||
if (aValue > bValue) comparison = 1;
|
||||
if (aValue < bValue) comparison = -1;
|
||||
|
||||
return this.sortDirection === 'asc' ? comparison : -comparison;
|
||||
});
|
||||
}
|
||||
|
||||
return filtered;
|
||||
},
|
||||
|
||||
sortBy(column) {
|
||||
if (this.sortColumn === column) {
|
||||
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
this.sortColumn = column;
|
||||
this.sortDirection = 'asc';
|
||||
}
|
||||
},
|
||||
|
||||
getSortIcon(column) {
|
||||
if (this.sortColumn !== column) {
|
||||
return 'fa-sort text-gray-400';
|
||||
}
|
||||
return this.sortDirection === 'asc' ? 'fa-sort-up text-blue-600' : 'fa-sort-down text-blue-600';
|
||||
},
|
||||
|
||||
getRoleName(roleId) {
|
||||
switch (roleId) {
|
||||
case 1: return 'Admin';
|
||||
case 2: return 'Team Leader';
|
||||
case 3: return 'Volunteer';
|
||||
default: return 'Unknown';
|
||||
}
|
||||
},
|
||||
|
||||
clearFilters() {
|
||||
this.searchTerm = '';
|
||||
this.roleFilter = '';
|
||||
this.sortColumn = '';
|
||||
this.sortDirection = 'asc';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user