Add mock of the messages page
This commit is contained in:
parent
7d33354acb
commit
8150af5889
3 changed files with 379 additions and 0 deletions
364
html/template/sync/message-list.html
Normal file
364
html/template/sync/message-list.html
Normal file
|
|
@ -0,0 +1,364 @@
|
|||
{{ template "sync/layout/authenticated.html" . }}
|
||||
|
||||
{{ define "title" }}Dash{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<style>
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.message-card {
|
||||
transition: transform 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.message-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.unread {
|
||||
border-left: 4px solid #0d6efd;
|
||||
}
|
||||
.high-priority {
|
||||
border-left: 4px solid #dc3545;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="container mt-4">
|
||||
<div class="row mb-4">
|
||||
<div class="col">
|
||||
<h2><i class="fas fa-envelope me-2"></i> Message Center</h2>
|
||||
<p class="text-muted">
|
||||
Manage incoming communications from the public and field technicians
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-outline-primary">
|
||||
<i class="fas fa-sync-alt me-1"></i> Refresh
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-filter me-1"></i> Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message Filter Tabs -->
|
||||
<ul class="nav nav-tabs mb-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#"
|
||||
>All Messages <span class="badge bg-primary ms-1">12</span></a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"
|
||||
>Public Reports <span class="badge bg-success ms-1">5</span></a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"
|
||||
>Service Requests
|
||||
<span class="badge bg-warning text-dark ms-1">4</span></a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"
|
||||
>Field Technicians <span class="badge bg-info ms-1">3</span></a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search messages..."
|
||||
/>
|
||||
<button class="btn btn-outline-secondary" type="button">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end mt-2 mt-md-0">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">
|
||||
Newest First
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">
|
||||
Priority
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages List -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-light">
|
||||
<strong>New Messages</strong>
|
||||
</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<!-- Message from technician -->
|
||||
<div class="list-group-item message-card unread p-3">
|
||||
<div class="d-flex w-100 justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar bg-info me-3"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Field Technician: Sarah Johnson"
|
||||
>
|
||||
SJ
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">
|
||||
Sarah Johnson
|
||||
<span class="badge bg-info ms-1">Technician</span>
|
||||
</h6>
|
||||
<p class="mb-1 text-truncate" style="max-width: 500px;">
|
||||
Completed larvicide application at Thompson Creek. Water level
|
||||
higher than expected, may need follow-up next week.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small class="text-muted">20 minutes ago</small>
|
||||
<div class="mt-1">
|
||||
<i
|
||||
class="fas fa-paperclip text-secondary me-1"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Has attachments"
|
||||
></i>
|
||||
<i
|
||||
class="fas fa-map-marker-alt text-danger me-1"
|
||||
data-bs-toggle="tooltip"
|
||||
title="GPS location included"
|
||||
></i>
|
||||
<i
|
||||
class="fas fa-exclamation-circle text-warning"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Requires follow-up"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message from public with breeding source report -->
|
||||
<div class="list-group-item message-card unread high-priority p-3">
|
||||
<div class="d-flex w-100 justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3 text-center" style="width: 40px;">
|
||||
<i class="fas fa-user-circle fa-2x text-secondary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">
|
||||
Robert Miller
|
||||
<span class="badge bg-success ms-1">Public Report</span>
|
||||
</h6>
|
||||
<p class="mb-1 text-truncate" style="max-width: 500px;">
|
||||
Large standing water in abandoned lot at 1234 Maple Street.
|
||||
Many mosquitoes in the area making it impossible to use
|
||||
backyard.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small class="text-muted">1 hour ago</small>
|
||||
<div class="mt-1">
|
||||
<i
|
||||
class="fas fa-image text-secondary me-1"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Contains images"
|
||||
></i>
|
||||
<i
|
||||
class="fas fa-map-marker-alt text-danger me-1"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Location provided"
|
||||
></i>
|
||||
<i
|
||||
class="fas fa-exclamation-triangle text-danger"
|
||||
data-bs-toggle="tooltip"
|
||||
title="High priority"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message from public with service request -->
|
||||
<div class="list-group-item message-card p-3">
|
||||
<div class="d-flex w-100 justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3 text-center" style="width: 40px;">
|
||||
<i class="fas fa-user-circle fa-2x text-secondary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">
|
||||
Emily Wilson
|
||||
<span class="badge bg-warning text-dark ms-1"
|
||||
>Service Request</span
|
||||
>
|
||||
</h6>
|
||||
<p class="mb-1 text-truncate" style="max-width: 500px;">
|
||||
Following up on appointment #2315. When will the technician be
|
||||
arriving? I need to make sure someone is home.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small class="text-muted">3 hours ago</small>
|
||||
<div class="mt-1">
|
||||
<i
|
||||
class="fas fa-calendar-alt text-primary me-1"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Related to appointment"
|
||||
></i>
|
||||
<i
|
||||
class="fas fa-clock text-warning"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Awaiting response"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message from technician -->
|
||||
<div class="list-group-item message-card p-3">
|
||||
<div class="d-flex w-100 justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar bg-success me-3"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Field Technician: Mike Torres"
|
||||
>
|
||||
MT
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">
|
||||
Mike Torres <span class="badge bg-info ms-1">Technician</span>
|
||||
</h6>
|
||||
<p class="mb-1 text-truncate" style="max-width: 500px;">
|
||||
Trap collection complete for sectors 4, 5, and 6. Samples
|
||||
being delivered to lab this afternoon. High counts in sector
|
||||
5.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small class="text-muted">5 hours ago</small>
|
||||
<div class="mt-1">
|
||||
<i
|
||||
class="fas fa-vial text-success me-1"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Lab samples"
|
||||
></i>
|
||||
<i
|
||||
class="fas fa-chart-bar text-primary"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Contains surveillance data"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message from public with breeding source -->
|
||||
<div class="list-group-item message-card p-3">
|
||||
<div class="d-flex w-100 justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3 text-center" style="width: 40px;">
|
||||
<i class="fas fa-user-circle fa-2x text-secondary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">
|
||||
Jennifer Adams
|
||||
<span class="badge bg-success ms-1">Public Report</span>
|
||||
</h6>
|
||||
<p class="mb-1 text-truncate" style="max-width: 500px;">
|
||||
Storm drain on corner of Oak and Pine appears to be clogged
|
||||
and creating standing water. Mosquitoes are bad in this area.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small class="text-muted">Yesterday</small>
|
||||
<div class="mt-1">
|
||||
<i
|
||||
class="fas fa-map-marker-alt text-danger me-1"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Location provided"
|
||||
></i>
|
||||
<i
|
||||
class="fas fa-check-circle text-success"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Assigned to technician"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Older Messages Section -->
|
||||
<div class="card">
|
||||
<div class="card-header bg-light d-flex justify-content-between">
|
||||
<strong>Earlier Messages</strong>
|
||||
<a href="#" class="text-decoration-none">View all</a>
|
||||
</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<!-- Abbreviated list of older messages -->
|
||||
<div class="list-group-item message-card p-3">
|
||||
<div class="d-flex w-100 justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar bg-secondary me-3"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Field Technician: David Chen"
|
||||
>
|
||||
DC
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-1">
|
||||
David Chen <span class="badge bg-info ms-1">Technician</span>
|
||||
</h6>
|
||||
<p class="mb-1 text-truncate" style="max-width: 500px;">
|
||||
Weekly surveillance report submitted for Western District. All
|
||||
traps processed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<small class="text-muted">2 days ago</small>
|
||||
<div class="mt-1">
|
||||
<i
|
||||
class="fas fa-file-pdf text-danger me-1"
|
||||
data-bs-toggle="tooltip"
|
||||
title="PDF Report Attached"
|
||||
></i>
|
||||
<i
|
||||
class="fas fa-check text-success"
|
||||
data-bs-toggle="tooltip"
|
||||
title="Completed"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- More messages would go here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
14
sync/messages.go
Normal file
14
sync/messages.go
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
package sync
|
||||
|
||||
import (
|
||||
"context"
|
||||
|
||||
"github.com/Gleipnir-Technology/nidus-sync/db/models"
|
||||
)
|
||||
|
||||
type contentMessageList struct{}
|
||||
|
||||
func getMessageList(ctx context.Context, user *models.User) (string, interface{}, *errorWithStatus) {
|
||||
content := contentMessageList{}
|
||||
return "sync/message-list.html", content, nil
|
||||
}
|
||||
|
|
@ -49,6 +49,7 @@ func Router() chi.Router {
|
|||
r.Route("/api", api.AddRoutes)
|
||||
r.Method("GET", "/cell/{cell}", auth.NewEnsureAuth(getCellDetails))
|
||||
r.Method("GET", "/layout-test", auth.NewEnsureAuth(getLayoutTest))
|
||||
r.Method("GET", "/message", authenticatedHandler(getMessageList))
|
||||
r.Method("GET", "/notification", auth.NewEnsureAuth(getNotificationList))
|
||||
r.Method("GET", "/pool", auth.NewEnsureAuth(getPoolList))
|
||||
r.Method("GET", "/pool/upload", auth.NewEnsureAuth(getPoolUpload))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue