Initial commit
This commit is contained in:
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 }}
|
||||
Reference in New Issue
Block a user