265 lines
9.3 KiB
HTML
265 lines
9.3 KiB
HTML
{{ 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-map-marker-alt{{end}} text-green-600"
|
|
></i>
|
|
<span class="text-sm font-medium"> Address Database </span>
|
|
</div>
|
|
</div>
|
|
{{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">
|
|
<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 Addresses"
|
|
class="w-full pl-8 pr-3 py-2 text-sm border border-gray-200 rounded bg-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{{if .Pagination}}
|
|
<div class="flex items-center gap-4 text-sm">
|
|
<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>
|
|
<div class="flex items-center gap-2">
|
|
<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>
|
|
<span class="px-2 text-gray-600"
|
|
>{{.Pagination.CurrentPage}} / {{.Pagination.TotalPages}}</span
|
|
>
|
|
<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 -->
|
|
<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">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>
|
|
<th class="px-6 py-3 whitespace-nowrap">Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
{{ range .Addresses }}
|
|
<tr class="hover:bg-gray-50">
|
|
<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>
|
|
<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>
|
|
<td class="px-6 py-3 whitespace-nowrap">
|
|
{{ if .Assigned }}
|
|
<form
|
|
action="/remove_assigned_address"
|
|
method="POST"
|
|
class="inline-block"
|
|
>
|
|
<input type="hidden" name="address_id" value="{{ .AddressID }}" />
|
|
<input type="hidden" name="user_id" value="{{ .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"
|
|
>
|
|
Delete
|
|
</button>
|
|
</form>
|
|
{{ else }}
|
|
<span class="text-gray-400 text-xs">-</span>
|
|
{{ end }}
|
|
</td>
|
|
</tr>
|
|
{{ else }}
|
|
<tr>
|
|
<td colspan="9" class="px-6 py-8 text-center text-gray-500">
|
|
No addresses found
|
|
</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
</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>
|
|
</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);
|
|
urlParams.set("page", 1);
|
|
window.location.search = urlParams.toString();
|
|
}
|
|
</script>
|
|
{{ end }}
|