415 lines
12 KiB
HTML
415 lines
12 KiB
HTML
{{ define "content" }}
|
|
<div class="min-h-screen bg-gray-50">
|
|
<!-- Header Bar -->
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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="text-gray-600">User Role:</span>
|
|
<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>
|
|
{{ if eq .Volunteer.RoleID 2 }}Team Leader{{ else }}Volunteer{{
|
|
end }}
|
|
</span>
|
|
<span class="text-gray-600">User ID:</span>
|
|
<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.UserID }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Edit Volunteer Form -->
|
|
<form method="POST" action="/volunteer/edit">
|
|
<input type="hidden" name="user_id" value="{{.Volunteer.UserID}}" />
|
|
|
|
<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>
|
|
|
|
<!-- 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="" disabled selected hidden>Select Role</option>
|
|
<option value="2" {{if eq .Volunteer.RoleID 2}}selected{{end}}>
|
|
Team Leader
|
|
</option>
|
|
<option value="3" {{if eq .Volunteer.RoleID 3}}selected{{end}}>
|
|
Volunteer
|
|
</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>
|
|
</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 }}
|