Add quick report page mock
This commit is contained in:
parent
bba22ec039
commit
376d471b17
3 changed files with 137 additions and 0 deletions
|
|
@ -15,12 +15,14 @@ var EmbeddedStaticFS embed.FS
|
||||||
|
|
||||||
type ContextNuisance struct{}
|
type ContextNuisance struct{}
|
||||||
type ContextPool struct{}
|
type ContextPool struct{}
|
||||||
|
type ContextQuick struct{}
|
||||||
type ContextRoot struct{}
|
type ContextRoot struct{}
|
||||||
type ContextStatus struct{}
|
type ContextStatus struct{}
|
||||||
|
|
||||||
var (
|
var (
|
||||||
Nuisance = buildTemplate("nuisance", "base")
|
Nuisance = buildTemplate("nuisance", "base")
|
||||||
Pool = buildTemplate("pool", "base")
|
Pool = buildTemplate("pool", "base")
|
||||||
|
Quick = buildTemplate("quick", "base")
|
||||||
Root = buildTemplate("root", "base")
|
Root = buildTemplate("root", "base")
|
||||||
Status = buildTemplate("status", "base")
|
Status = buildTemplate("status", "base")
|
||||||
)
|
)
|
||||||
|
|
|
||||||
127
htmlpage/public-reports/template/quick.html
Normal file
127
htmlpage/public-reports/template/quick.html
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
{{template "base.html" .}}
|
||||||
|
|
||||||
|
{{define "title"}}Dash{{end}}
|
||||||
|
{{define "extraheader"}}
|
||||||
|
<style>
|
||||||
|
.district-logo {
|
||||||
|
max-height: 60px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-upload-area {
|
||||||
|
border: 2px dashed #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-preview {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-preview img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
padding: 15px 0;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-info {
|
||||||
|
background-color: #e9f5ff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.header-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{{end}}
|
||||||
|
{{define "content"}}
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="container mb-5">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="card shadow-sm">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h2 class="card-title text-center mb-4">Quick Mosquito Report</h2>
|
||||||
|
|
||||||
|
<!-- Form -->
|
||||||
|
<form action="/service-request-quick-confirmation" method="get">
|
||||||
|
<!-- Location Automatic Collection Note -->
|
||||||
|
<div class="location-info d-flex align-items-center mb-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-geo-alt me-2" viewBox="0 0 16 16">
|
||||||
|
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
|
||||||
|
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Your location and current time will be automatically collected with your report.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Photo Upload -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="photos" class="form-label fw-bold">Photos (Optional)</label>
|
||||||
|
<div class="photo-upload-area">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-camera mb-2" viewBox="0 0 16 16">
|
||||||
|
<path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
|
||||||
|
<path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<input type="file" id="photos" class="d-none" accept="image/*" multiple>
|
||||||
|
<button type="button" class="btn btn-outline-primary mb-2" onclick="document.getElementById('photos').click()">Add Photos</button>
|
||||||
|
</div>
|
||||||
|
<small class="d-block text-muted">Take pictures of the mosquito problem area</small>
|
||||||
|
|
||||||
|
<!-- Photo Preview Area (would be populated by JavaScript) -->
|
||||||
|
<div class="photo-preview mt-3">
|
||||||
|
<!-- Example preview images (these would be dynamically added) -->
|
||||||
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='%23dddddd'%3E%3Crect width='80' height='80' fill='%23eeeeee'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='12' fill='%23999999'%3EPreview%3C/text%3E%3C/svg%3E" alt="Preview">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Comments -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="comments" class="form-label fw-bold">Comments</label>
|
||||||
|
<textarea class="form-control" id="comments" rows="4" placeholder="Describe the mosquito issue (e.g., standing water, high mosquito activity, time of day they're most active)"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Submit Button -->
|
||||||
|
<button type="submit" class="btn btn-success w-100 submit-btn mt-4">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-send-fill me-2" viewBox="0 0 16 16">
|
||||||
|
<path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"/>
|
||||||
|
</svg>
|
||||||
|
Submit Report
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Back Link -->
|
||||||
|
<div class="text-center mt-3">
|
||||||
|
<a href="javascript:history.back()" class="text-decoration-none">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left me-1" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
|
||||||
|
</svg>
|
||||||
|
Back to home
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{{end}}
|
||||||
|
|
@ -13,6 +13,7 @@ func Router() chi.Router {
|
||||||
r.Get("/", getRoot)
|
r.Get("/", getRoot)
|
||||||
r.Get("/nuisance", getNuisance)
|
r.Get("/nuisance", getNuisance)
|
||||||
r.Get("/pool", getPool)
|
r.Get("/pool", getPool)
|
||||||
|
r.Get("/quick", getQuick)
|
||||||
r.Get("/status", getStatus)
|
r.Get("/status", getStatus)
|
||||||
localFS := http.Dir("./static")
|
localFS := http.Dir("./static")
|
||||||
htmlpage.FileServer(r, "/static", localFS, publicreports.EmbeddedStaticFS, "static")
|
htmlpage.FileServer(r, "/static", localFS, publicreports.EmbeddedStaticFS, "static")
|
||||||
|
|
@ -41,6 +42,13 @@ func getPool(w http.ResponseWriter, r *http.Request) {
|
||||||
publicreports.ContextPool{},
|
publicreports.ContextPool{},
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
func getQuick(w http.ResponseWriter, r *http.Request) {
|
||||||
|
htmlpage.RenderOrError(
|
||||||
|
w,
|
||||||
|
publicreports.Quick,
|
||||||
|
publicreports.ContextQuick{},
|
||||||
|
)
|
||||||
|
}
|
||||||
func getStatus(w http.ResponseWriter, r *http.Request) {
|
func getStatus(w http.ResponseWriter, r *http.Request) {
|
||||||
htmlpage.RenderOrError(
|
htmlpage.RenderOrError(
|
||||||
w,
|
w,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue