Change public-report to rmo

We're leaning into the branding and shorter directory names
This commit is contained in:
Eli Ribble 2026-01-29 23:55:41 +00:00
parent bb692cced9
commit e7681c7d6e
No known key found for this signature in database
44 changed files with 20 additions and 20 deletions

18
rmo/email.go Normal file
View file

@ -0,0 +1,18 @@
package rmo
import (
"fmt"
"net/http"
//"github.com/Gleipnir-Technology/nidus-sync/comms/email"
"github.com/go-chi/chi/v5"
)
func getEmailByCode(w http.ResponseWriter, r *http.Request) {
code := chi.URLParam(r, "code")
if code == "" {
http.Error(w, "You must specify a code", http.StatusBadRequest)
return
}
fmt.Fprintf(w, "Pretend email contet for %s", code)
}

78
rmo/endpoint.go Normal file
View file

@ -0,0 +1,78 @@
package rmo
import (
"fmt"
"net/http"
"github.com/Gleipnir-Technology/nidus-sync/config"
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
"github.com/rs/zerolog/log"
)
type ContentPrivacy struct {
Address string
Company string
Site string
URLReport string
}
type ContentRoot struct{}
var (
PrivacyT = buildTemplate("privacy", "base")
RootT = buildTemplate("root", "base")
TermsT = buildTemplate("terms", "base")
)
func getPrivacy(w http.ResponseWriter, r *http.Request) {
htmlpage.RenderOrError(
w,
PrivacyT,
ContentPrivacy{
Address: "2726 S Quinn Ave, Gilbert, AZ, USA",
Company: "Gleipnir LLC",
Site: "Report Mosquitoes Online",
URLReport: config.MakeURLReport("/"),
},
)
}
func getRoot(w http.ResponseWriter, r *http.Request) {
htmlpage.RenderOrError(
w,
RootT,
ContentRoot{},
)
}
func getRobots(w http.ResponseWriter, r *http.Request) {
fmt.Fprint(w, "User-agent: *\n")
fmt.Fprint(w, "Allow: /\n")
}
func getTerms(w http.ResponseWriter, r *http.Request) {
htmlpage.RenderOrError(
w,
TermsT,
ContentRoot{},
)
}
// Respond with an error that is visible to the user
func respondError(w http.ResponseWriter, m string, e error, s int) {
log.Warn().Int("status", s).Err(e).Str("user message", m).Msg("Responding with an error")
http.Error(w, m, s)
}
func boolFromForm(r *http.Request, k string) bool {
s := r.PostFormValue(k)
if s == "on" {
return true
}
return false
}
func postFormValueOrNone(r *http.Request, k string) string {
v := r.PostFormValue(k)
if v == "" {
return "none"
}
return v
}

69
rmo/geospatial.go Normal file
View file

@ -0,0 +1,69 @@
package rmo
import (
"fmt"
"net/http"
"strconv"
"github.com/Gleipnir-Technology/nidus-sync/h3utils"
"github.com/rs/zerolog/log"
"github.com/uber/h3-go/v4"
)
type GeospatialData struct {
Cell h3.Cell
GeometryQuery string
Populated bool
}
func geospatialFromForm(r *http.Request) (GeospatialData, error) {
lat := r.FormValue("latitude")
lng := r.FormValue("longitude")
accuracy_type := r.FormValue("latlng-accuracy-type")
accuracy_value := r.FormValue("latlng-accuracy-value")
if lat == "" || lng == "" {
return GeospatialData{Populated: false}, nil
}
latitude, err := strconv.ParseFloat(lat, 64)
if err != nil {
return GeospatialData{Populated: false}, fmt.Errorf("Failed to create parse latitude: %v", err)
}
longitude, err := strconv.ParseFloat(lng, 64)
if err != nil {
return GeospatialData{Populated: false}, fmt.Errorf("Failed to create parse longitude: %v", err)
}
var resolution int
switch accuracy_type {
// These accuracy_type strings come from the Mapbox Geocoding API definition and
// are far from scientific
case "rooftop":
resolution = 14
case "parcel":
resolution = 13
case "point":
resolution = 13
case "interpolated":
resolution = 12
case "approximate":
resolution = 11
case "intersection":
resolution = 10
// This is a special indicator that we got our location from the browser measurements
case "meters":
accuracy_in_meters, err := strconv.ParseFloat(accuracy_value, 64)
if err != nil {
return GeospatialData{Populated: false}, fmt.Errorf("Failed to parse '%s' as an accuracy in meters: %v", accuracy_value, err)
}
resolution = h3utils.MeterAccuracyToH3Resolution(accuracy_in_meters)
default:
log.Warn().Str("accuracy-type", accuracy_type).Msg("unrecognized accuracy type, this indicates either a weird client or misbehaving web page. Defaulting to resolution 13")
resolution = 13
}
cell, err := h3utils.GetCell(longitude, latitude, resolution)
return GeospatialData{
Cell: cell,
GeometryQuery: fmt.Sprintf("ST_GeometryFromText('Point(%f %f)')", longitude, latitude),
Populated: true,
}, nil
}

179
rmo/image-upload.go Normal file
View file

@ -0,0 +1,179 @@
package rmo
import (
"bytes"
"context"
"fmt"
"image"
_ "image/gif" // register GIF format
_ "image/jpeg" // register JPEG format
_ "image/png" // register PNG format
"io"
"mime/multipart"
"net/http"
"time"
"github.com/Gleipnir-Technology/bob"
"github.com/Gleipnir-Technology/bob/dialect/psql"
"github.com/Gleipnir-Technology/bob/dialect/psql/um"
"github.com/Gleipnir-Technology/nidus-sync/db/models"
"github.com/Gleipnir-Technology/nidus-sync/userfile"
"github.com/aarondl/opt/omit"
"github.com/aarondl/opt/omitnull"
"github.com/google/uuid"
"github.com/rs/zerolog/log"
"github.com/rwcarlsen/goexif/exif"
//exif "github.com/rwcarlsen/goexif/exif"
//"github.com/dsoprea/go-exif-extra/format"
)
type GPS struct {
Latitude float64
Longitude float64
}
type ExifCollection struct {
GPS *GPS
Tags map[string]string
}
type ImageUpload struct {
Bounds image.Rectangle
ContentType string
Exif ExifCollection
Format string
UploadFilesize int
UploadFilename string
UUID uuid.UUID
}
func extractExif(content_type string, file_bytes []byte) (result ExifCollection, err error) {
/*
Using "github.com/evanoberholster/imagemeta"
meta, err := imagemeta.Decode(bytes.NewReader(file_bytes))
if err != nil {
return result, fmt.Errorf("Failed to decode image meta: %w", err)
}
result.GPS = &GPS{
Latitude: meta.GPS.Latitude(),
Longitude: meta.GPS.Longitude(),
}
return result, err
*/
exif, err := exif.Decode(bytes.NewReader(file_bytes))
if err != nil {
return result, fmt.Errorf("Failed to decode image meta: %w", err)
}
lat, lng, _ := exif.LatLong()
result.GPS = &GPS{
Latitude: lat,
Longitude: lng,
}
return result, err
}
func extractImageUpload(headers *multipart.FileHeader) (upload ImageUpload, err error) {
file, err := headers.Open()
if err != nil {
return upload, fmt.Errorf("Failed to open header: %w", err)
}
defer file.Close()
file_bytes, err := io.ReadAll(file)
content_type := http.DetectContentType(file_bytes)
exif, err := extractExif(content_type, file_bytes)
if err != nil {
//return upload, fmt.Errorf("Failed to extract EXIF data: %w", err)
log.Warn().Err(err).Msg("Failed to extract EXIF data")
}
log.Debug().Float64("lat", exif.GPS.Latitude).Float64("lng", exif.GPS.Longitude).Msg("extracted GPS from exif")
i, format, err := image.Decode(bytes.NewReader(file_bytes))
if err != nil {
return upload, fmt.Errorf("Failed to decode image file: %w", err)
}
u, err := uuid.NewUUID()
if err != nil {
return upload, fmt.Errorf("Failed to create quick report photo uuid", err)
}
err = userfile.PublicImageFileContentWrite(u, bytes.NewReader(file_bytes))
if err != nil {
return upload, fmt.Errorf("Failed to write image file to disk: %w", err)
}
log.Info().Int("size", len(file_bytes)).Str("uploaded_filename", headers.Filename).Str("content-type", content_type).Str("uuid", u.String()).Msg("Saved an uploaded file to disk")
return ImageUpload{
Bounds: i.Bounds(),
ContentType: content_type,
Exif: exif,
Format: format,
UploadFilename: headers.Filename,
UploadFilesize: len(file_bytes),
UUID: u,
}, nil
}
func extractImageUploads(r *http.Request) (uploads []ImageUpload, err error) {
uploads = make([]ImageUpload, 0)
for _, fheaders := range r.MultipartForm.File {
for _, headers := range fheaders {
upload, err := extractImageUpload(headers)
if err != nil {
return make([]ImageUpload, 0), fmt.Errorf("Failed to extract photo upload: %w", err)
}
uploads = append(uploads, upload)
}
}
return uploads, nil
}
func saveImageUploads(ctx context.Context, tx bob.Tx, uploads []ImageUpload) (models.PublicreportImageSlice, error) {
images := make(models.PublicreportImageSlice, 0)
for _, u := range uploads {
image, err := models.PublicreportImages.Insert(&models.PublicreportImageSetter{
ContentType: omit.From(u.ContentType),
Created: omit.From(time.Now()),
//Location: psql.Raw("NULL"),
Location: omitnull.FromPtr[string](nil),
ResolutionX: omit.From(int32(u.Bounds.Max.X)),
ResolutionY: omit.From(int32(u.Bounds.Max.Y)),
StorageUUID: omit.From(u.UUID),
StorageSize: omit.From(int64(u.UploadFilesize)),
UploadedFilename: omit.From(u.UploadFilename),
}).One(ctx, tx)
if err != nil {
return images, fmt.Errorf("Failed to create photo records: %w", err)
}
// TODO: figure out how to do this via the setter...?
if u.Exif.GPS != nil {
_, err = psql.Update(
um.Table("publicreport.image"),
um.SetCol("location").To(fmt.Sprintf("ST_GeometryFromText('Point(%f %f)')", u.Exif.GPS.Longitude, u.Exif.GPS.Latitude)),
um.Where(psql.Quote("id").EQ(psql.Arg(image.ID))),
).Exec(ctx, tx)
}
exif_setters := make([]*models.PublicreportImageExifSetter, 0)
for k, v := range u.Exif.Tags {
exif_setters = append(exif_setters, &models.PublicreportImageExifSetter{
ImageID: omit.From(image.ID),
Name: omit.From(k),
Value: omit.From(v),
})
}
if len(exif_setters) > 0 {
_, err = models.PublicreportImageExifs.Insert(bob.ToMods(exif_setters...)).Exec(ctx, tx)
if err != nil {
return images, fmt.Errorf("Failed to create photo exif records: %w", err)
}
}
images = append(images, image)
log.Info().Int32("id", image.ID).Int("tags", len(u.Exif.Tags)).Msg("Saved an uploaded file to the database")
}
return images, nil
}

18
rmo/image.go Normal file
View file

@ -0,0 +1,18 @@
package rmo
import (
"net/http"
"github.com/Gleipnir-Technology/nidus-sync/userfile"
"github.com/go-chi/chi/v5"
)
// ServeImageByUUID reads an image with the given UUID from disk and writes it to the HTTP response
func getImageByUUID(w http.ResponseWriter, r *http.Request) {
uid := chi.URLParam(r, "uuid")
if uid == "" {
http.NotFound(w, r)
return
}
userfile.PublicImageFileToResponse(w, uid)
}

83
rmo/mock.go Normal file
View file

@ -0,0 +1,83 @@
package rmo
import (
"net/http"
"github.com/Gleipnir-Technology/nidus-sync/config"
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
"github.com/go-chi/chi/v5"
)
var (
mockDistrictRootT = buildTemplate("mock/district-root", "base")
mockNuisanceT = buildTemplate("mock/nuisance", "base")
mockNuisanceSubmitCompleteT = buildTemplate("mock/nuisance-submit-complete", "base")
mockRootT = buildTemplate("mock/root", "base")
mockStatusT = buildTemplate("mock/status", "base")
mockWaterT = buildTemplate("mock/water", "base")
)
type ContentDistrict struct {
Name string
URLLogo string
}
type ContentURL struct {
Nuisance string
NuisanceSubmitComplete string
Status string
Tegola string
Water string
}
type ContentMock struct {
District ContentDistrict
MapboxToken string
ReportID string
URL ContentURL
}
func addMockRoutes(r chi.Router) {
r.Get("/", renderMock(mockRootT))
r.Get("/district/{slug}", renderMock(mockDistrictRootT))
r.Get("/district/{slug}/nuisance", renderMock(mockNuisanceT))
r.Get("/district/{slug}/nuisance-submit-complete", renderMock(mockNuisanceSubmitCompleteT))
r.Get("/district/{slug}/status", renderMock(mockStatusT))
r.Get("/district/{slug}/water", renderMock(mockWaterT))
r.Get("/nuisance", renderMock(mockNuisanceT))
r.Get("/nuisance-submit-complete", renderMock(mockNuisanceSubmitCompleteT))
r.Get("/status", renderMock(mockStatusT))
}
func makeContentURL(slug string) ContentURL {
return ContentURL{
Nuisance: makeURLMock(slug, "nuisance"),
NuisanceSubmitComplete: makeURLMock(slug, "nuisance-submit-complete"),
Status: makeURLMock(slug, "status"),
Tegola: config.MakeURLTegola("/"),
Water: makeURLMock(slug, "water"),
}
}
func makeURLMock(slug, p string) string {
return config.MakeURLReport("/mock/district/%s/%s", slug, p)
}
func renderMock(t *htmlpage.BuiltTemplate) func(http.ResponseWriter, *http.Request) {
return func(w http.ResponseWriter, r *http.Request) {
slug := chi.URLParam(r, "slug")
if slug == "" {
slug = "delta-mvcd"
}
htmlpage.RenderOrError(
w,
t,
ContentMock{
District: ContentDistrict{
Name: "Delta MVCD",
URLLogo: config.MakeURLNidus("/api/district/%s/logo", slug),
},
MapboxToken: config.MapboxToken,
ReportID: "abcd-1234-5678",
URL: makeContentURL(slug),
},
)
}
}

155
rmo/nuisance.go Normal file
View file

@ -0,0 +1,155 @@
package rmo
import (
"fmt"
"net/http"
"strconv"
"time"
"github.com/Gleipnir-Technology/nidus-sync/db"
"github.com/Gleipnir-Technology/nidus-sync/db/enums"
"github.com/Gleipnir-Technology/nidus-sync/db/models"
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
"github.com/aarondl/opt/omit"
"github.com/aarondl/opt/omitnull"
"github.com/rs/zerolog/log"
)
type ContextNuisance struct{}
type ContextNuisanceSubmitComplete struct {
ReportID string
}
var (
Nuisance = buildTemplate("nuisance", "base")
NuisanceSubmitComplete = buildTemplate("nuisance-submit-complete", "base")
)
func getNuisance(w http.ResponseWriter, r *http.Request) {
htmlpage.RenderOrError(
w,
Nuisance,
ContextNuisance{},
)
}
func getNuisanceSubmitComplete(w http.ResponseWriter, r *http.Request) {
report := r.URL.Query().Get("report")
htmlpage.RenderOrError(
w,
NuisanceSubmitComplete,
ContextNuisanceSubmitComplete{
ReportID: report,
},
)
}
func postNuisance(w http.ResponseWriter, r *http.Request) {
err := r.ParseForm()
if err != nil {
respondError(w, "Failed to parse form", err, http.StatusBadRequest)
return
}
tod_early := boolFromForm(r, "tod-early")
tod_day := boolFromForm(r, "tod-day")
tod_evening := boolFromForm(r, "tod-evening")
tod_night := boolFromForm(r, "tod-night")
source_stagnant := boolFromForm(r, "source-stagnant")
source_container := boolFromForm(r, "source-container")
source_roof := boolFromForm(r, "source-container")
request_call := boolFromForm(r, "request-call")
duration_str := postFormValueOrNone(r, "duration")
var duration enums.PublicreportNuisancedurationtype
err = duration.Scan(duration_str)
if err != nil {
respondError(w, fmt.Sprintf("Failed to interpret 'duration' of '%s'", duration_str), err, http.StatusBadRequest)
return
}
inspection_type_str := postFormValueOrNone(r, "inspection-type")
var inspection_type enums.PublicreportNuisanceinspectiontype
err = inspection_type.Scan(inspection_type_str)
if err != nil {
respondError(w, fmt.Sprintf("Failed to interpret 'inspection-type' of '%s'", inspection_type_str), err, http.StatusBadRequest)
return
}
source_location_str := postFormValueOrNone(r, "source-location")
var source_location enums.PublicreportNuisancelocationtype
err = source_location.Scan(source_location_str)
if err != nil {
respondError(w, fmt.Sprintf("Failed to interpret 'source-location' of '%s'", source_location_str), err, http.StatusBadRequest)
return
}
preferred_date_range_str := postFormValueOrNone(r, "preferred-date-range")
var preferred_date_range enums.PublicreportNuisancepreferreddaterangetype
err = preferred_date_range.Scan(preferred_date_range_str)
if err != nil {
respondError(w, fmt.Sprintf("Failed to interpret 'preferred-date-range' of '%s'", preferred_date_range_str), err, http.StatusBadRequest)
return
}
preferred_time_str := postFormValueOrNone(r, "preferred-time")
var preferred_time enums.PublicreportNuisancepreferredtimetype
err = preferred_time.Scan(preferred_time_str)
if err != nil {
respondError(w, fmt.Sprintf("Failed to interpret 'preferred-time' of '%s'", preferred_time_str), err, http.StatusBadRequest)
return
}
severity_str := r.PostFormValue("severity")
severity, err := strconv.ParseInt(severity_str, 10, 16)
if err != nil {
respondError(w, fmt.Sprintf("Failed to interpret 'severity' of '%s' as an integer", severity_str), err, http.StatusBadRequest)
return
}
source_description := r.PostFormValue("source-description")
address := r.PostFormValue("address")
name := r.PostFormValue("name")
phone := r.PostFormValue("phone")
email := r.PostFormValue("email")
additional_info := r.PostFormValue("additional-info")
public_id, err := GenerateReportID()
if err != nil {
respondError(w, "Failed to create quick report public ID", err, http.StatusInternalServerError)
return
}
log.Info().Str("address", address).Str("name", name).Msg("Got report")
setter := models.PublicreportNuisanceSetter{
AdditionalInfo: omit.From(additional_info),
Created: omit.From(time.Now()),
Duration: omit.From(duration),
Email: omit.From(email),
InspectionType: omit.From(inspection_type),
Location: omitnull.FromPtr[string](nil),
PreferredDateRange: omit.From(preferred_date_range),
PreferredTime: omit.From(preferred_time),
PublicID: omit.From(public_id),
RequestCall: omit.From(request_call),
Severity: omit.From(int16(severity)),
SourceContainer: omit.From(source_container),
SourceDescription: omit.From(source_description),
SourceRoof: omit.From(source_roof),
SourceLocation: omit.From(source_location),
SourceStagnant: omit.From(source_stagnant),
Status: omit.From(enums.PublicreportReportstatustypeReported),
TimeOfDayDay: omit.From(tod_day),
TimeOfDayEarly: omit.From(tod_early),
TimeOfDayEvening: omit.From(tod_evening),
TimeOfDayNight: omit.From(tod_night),
ReporterAddress: omit.From(address),
ReporterEmail: omit.From(email),
ReporterName: omit.From(name),
ReporterPhone: omit.From(phone),
}
nuisance, err := models.PublicreportNuisances.Insert(&setter).One(r.Context(), db.PGInstance.BobDB)
if err != nil {
respondError(w, "Failed to create database record", err, http.StatusInternalServerError)
return
}
log.Info().Str("public_id", public_id).Int32("id", nuisance.ID).Msg("Created nuisance report")
http.Redirect(w, r, fmt.Sprintf("/nuisance-submit-complete?report=%s", public_id), http.StatusFound)
}

29
rmo/page.go Normal file
View file

@ -0,0 +1,29 @@
package rmo
import (
"embed"
"fmt"
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
)
//go:embed template/*
var embeddedFiles embed.FS
var components = [...]string{"footer", "header", "photo-upload", "photo-upload-header"}
var svgs = [...]string{"check-report", "mosquito", "pond"}
func buildTemplate(files ...string) *htmlpage.BuiltTemplate {
subdir := "rmo"
full_files := make([]string, 0)
for _, f := range files {
full_files = append(full_files, fmt.Sprintf("%s/template/%s.html", subdir, f))
}
for _, c := range components {
full_files = append(full_files, fmt.Sprintf("%s/template/component/%s.html", subdir, c))
}
for _, c := range svgs {
full_files = append(full_files, fmt.Sprintf("%s/template/svg/%s.svg", subdir, c))
}
return htmlpage.NewBuiltTemplate(embeddedFiles, "rmo/", full_files...)
}

177
rmo/pool.go Normal file
View file

@ -0,0 +1,177 @@
package rmo
import (
"fmt"
"net/http"
"strconv"
"time"
"github.com/Gleipnir-Technology/bob"
"github.com/Gleipnir-Technology/bob/dialect/psql"
"github.com/Gleipnir-Technology/bob/dialect/psql/um"
"github.com/Gleipnir-Technology/nidus-sync/config"
"github.com/Gleipnir-Technology/nidus-sync/db"
"github.com/Gleipnir-Technology/nidus-sync/db/enums"
"github.com/Gleipnir-Technology/nidus-sync/db/models"
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
"github.com/aarondl/opt/omit"
"github.com/rs/zerolog/log"
)
type ContextPool struct {
MapboxToken string
}
type ContextPoolSubmitComplete struct {
ReportID string
}
var (
Pool = buildTemplate("pool", "base")
PoolSubmitComplete = buildTemplate("pool-submit-complete", "base")
)
func getPool(w http.ResponseWriter, r *http.Request) {
htmlpage.RenderOrError(
w,
Pool,
ContextPool{
MapboxToken: config.MapboxToken,
},
)
}
func getPoolSubmitComplete(w http.ResponseWriter, r *http.Request) {
report := r.URL.Query().Get("report")
htmlpage.RenderOrError(
w,
PoolSubmitComplete,
ContextPoolSubmitComplete{
ReportID: report,
},
)
}
func postPool(w http.ResponseWriter, r *http.Request) {
err := r.ParseMultipartForm(32 << 10) // 32 MB buffer
if err != nil {
respondError(w, "Failed to parse form", err, http.StatusBadRequest)
return
}
access_comments := r.FormValue("access-comments")
access_gate := boolFromForm(r, "access-gate")
access_fence := boolFromForm(r, "access-fence")
access_locked := boolFromForm(r, "access-locked")
access_dog := boolFromForm(r, "access-dog")
access_other := boolFromForm(r, "access-other")
address := r.FormValue("address")
address_country := r.FormValue("address-country")
address_postcode := r.FormValue("address-postcode")
address_place := r.FormValue("address-place")
address_region := r.FormValue("address-region")
address_street := r.FormValue("address-street")
comments := r.FormValue("comments")
has_adult := boolFromForm(r, "has-adult")
has_larvae := boolFromForm(r, "has-larvae")
has_pupae := boolFromForm(r, "has-pupae")
map_zoom_str := r.FormValue("map-zoom")
owner_email := r.FormValue("owner-email")
owner_name := r.FormValue("owner-name")
owner_phone := r.FormValue("owner-phone")
reporter_email := r.FormValue("reporter-email")
reporter_name := r.FormValue("reporter-name")
reporter_phone := r.FormValue("reporter-phone")
subscribe := boolFromForm(r, "subscribe")
map_zoom, err := strconv.ParseFloat(map_zoom_str, 32)
if err != nil {
respondError(w, "Failed to parse zoom level", err, http.StatusBadRequest)
return
}
public_id, err := GenerateReportID()
if err != nil {
respondError(w, "Failed to create pool report public ID", err, http.StatusInternalServerError)
return
}
ctx := r.Context()
tx, err := db.PGInstance.BobDB.BeginTx(ctx, nil)
if err != nil {
respondError(w, "Failed to create transaction", err, http.StatusInternalServerError)
return
}
defer tx.Rollback(ctx)
setter := models.PublicreportPoolSetter{
AccessComments: omit.From(access_comments),
AccessGate: omit.From(access_gate),
AccessFence: omit.From(access_fence),
AccessLocked: omit.From(access_locked),
AccessDog: omit.From(access_dog),
AccessOther: omit.From(access_other),
Address: omit.From(address),
AddressCountry: omit.From(address_country),
AddressPostCode: omit.From(address_postcode),
AddressPlace: omit.From(address_place),
AddressStreet: omit.From(address_street),
AddressRegion: omit.From(address_region),
Comments: omit.From(comments),
Created: omit.From(time.Now()),
//H3cell: add later
HasAdult: omit.From(has_adult),
HasLarvae: omit.From(has_larvae),
HasPupae: omit.From(has_pupae),
//Location: add later
MapZoom: omit.From(map_zoom),
OwnerEmail: omit.From(owner_email),
OwnerName: omit.From(owner_name),
OwnerPhone: omit.From(owner_phone),
PublicID: omit.From(public_id),
ReporterEmail: omit.From(reporter_email),
ReporterName: omit.From(reporter_name),
ReporterPhone: omit.From(reporter_phone),
Status: omit.From(enums.PublicreportReportstatustypeReported),
Subscribe: omit.From(subscribe),
}
pool, err := models.PublicreportPools.Insert(&setter).One(ctx, tx)
if err != nil {
respondError(w, "Failed to create database record", err, http.StatusInternalServerError)
return
}
geospatial, err := geospatialFromForm(r)
if err != nil {
respondError(w, "Failed to handle geospatial data", err, http.StatusInternalServerError)
return
}
if geospatial.Populated {
_, err = psql.Update(
um.Table("publicreport.pool"),
um.SetCol("h3cell").ToArg(geospatial.Cell),
um.SetCol("location").To(geospatial.GeometryQuery),
um.Where(psql.Quote("id").EQ(psql.Arg(pool.ID))),
).Exec(ctx, tx)
if err != nil {
respondError(w, "Failed to insert publicreport.pool", err, http.StatusInternalServerError)
return
}
}
log.Info().Int32("id", pool.ID).Str("public_id", pool.PublicID).Msg("Created pool report")
uploads, err := extractImageUploads(r)
if err != nil {
respondError(w, "Failed to extract image uploads", err, http.StatusInternalServerError)
return
}
images, err := saveImageUploads(r.Context(), tx, uploads)
setters := make([]*models.PublicreportPoolImageSetter, 0)
for _, image := range images {
setters = append(setters, &models.PublicreportPoolImageSetter{
ImageID: omit.From(int32(image.ID)),
PoolID: omit.From(int32(pool.ID)),
})
}
_, err = models.PublicreportPoolImages.Insert(bob.ToMods(setters...)).Exec(r.Context(), tx)
if err != nil {
respondError(w, "Failed to save upload relationships", err, http.StatusInternalServerError)
return
}
tx.Commit(ctx)
http.Redirect(w, r, fmt.Sprintf("/pool-submit-complete?report=%s", public_id), http.StatusFound)
}

271
rmo/quick.go Normal file
View file

@ -0,0 +1,271 @@
package rmo
import (
"context"
"fmt"
"net/http"
"strconv"
"time"
"github.com/Gleipnir-Technology/bob"
"github.com/Gleipnir-Technology/bob/dialect/psql"
"github.com/Gleipnir-Technology/bob/dialect/psql/um"
"github.com/Gleipnir-Technology/nidus-sync/background"
"github.com/Gleipnir-Technology/nidus-sync/config"
"github.com/Gleipnir-Technology/nidus-sync/db"
"github.com/Gleipnir-Technology/nidus-sync/db/enums"
"github.com/Gleipnir-Technology/nidus-sync/db/models"
"github.com/Gleipnir-Technology/nidus-sync/h3utils"
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
"github.com/Gleipnir-Technology/nidus-sync/platform"
"github.com/Gleipnir-Technology/nidus-sync/platform/text"
"github.com/aarondl/opt/omit"
"github.com/aarondl/opt/omitnull"
"github.com/rs/zerolog/log"
)
type ContentQuick struct{}
type ContentQuickSubmitComplete struct {
District *District
ReportID string
}
type ContentRegisterNotificationsComplete struct {
ReportID string
}
type District struct {
LogoURL string
Name string
}
var (
quickT = buildTemplate("quick", "base")
quickSubmitCompleteT = buildTemplate("quick-submit-complete", "base")
registerNotificationsCompleteT = buildTemplate("register-notifications-complete", "base")
)
func getQuick(w http.ResponseWriter, r *http.Request) {
htmlpage.RenderOrError(
w,
quickT,
ContentQuick{},
)
}
func getQuickSubmitComplete(w http.ResponseWriter, r *http.Request) {
ctx := r.Context()
report_id := r.URL.Query().Get("report")
report, err := models.PublicreportQuicks.Query(
models.SelectWhere.PublicreportQuicks.PublicID.EQ(report_id),
).One(ctx, db.PGInstance.BobDB)
if err != nil {
respondError(w, "Failed to get report", err, http.StatusInternalServerError)
return
}
var district *District
if !report.OrganizationID.IsNull() {
org_id := report.OrganizationID.MustGet()
org, err := models.Organizations.Query(
models.Preload.Organization.ImportDistrictGidDistrict(),
models.SelectWhere.Organizations.ID.EQ(org_id),
).One(ctx, db.PGInstance.BobDB)
if err != nil {
respondError(w, "Failed to get org", err, http.StatusInternalServerError)
return
}
d := org.R.ImportDistrictGidDistrict
log.Debug().Int32("org_id", org.ID).Int32("d_gid", d.Gid).Msg("Getting district")
if d != nil {
district = &District{
LogoURL: config.MakeURLNidus("/api/district/%s/logo", org.Slug.GetOr("placeholder")),
Name: d.Agency.GetOr("Unknown"),
}
}
}
htmlpage.RenderOrError(
w,
quickSubmitCompleteT,
ContentQuickSubmitComplete{
District: district,
ReportID: report.PublicID,
},
)
}
func getRegisterNotificationsComplete(w http.ResponseWriter, r *http.Request) {
report := r.URL.Query().Get("report")
htmlpage.RenderOrError(
w,
registerNotificationsCompleteT,
ContentRegisterNotificationsComplete{
ReportID: report,
},
)
}
func matchDistrict(ctx context.Context, longitude, latitude float64, images []ImageUpload) (*int32, error) {
for _, image := range images {
if image.Exif.GPS == nil {
continue
}
_, org, err := platform.DistrictForLocation(ctx, image.Exif.GPS.Longitude, image.Exif.GPS.Latitude)
if err != nil {
log.Warn().Err(err).Msg("Failed to get district for location")
continue
}
if org != nil {
return &org.ID, nil
}
}
_, org, err := platform.DistrictForLocation(ctx, longitude, latitude)
if err != nil {
log.Warn().Err(err).Msg("Failed to get district for location")
return nil, fmt.Errorf("Failed to get district for location: %w", err)
}
if org == nil {
log.Debug().Err(err).Float64("lng", longitude).Float64("lat", latitude).Msg("No district match by report location")
return nil, nil
}
log.Debug().Err(err).Int32("org_id", org.ID).Float64("lng", longitude).Float64("lat", latitude).Msg("Found district match by report location")
return &org.ID, nil
}
func postQuick(w http.ResponseWriter, r *http.Request) {
err := r.ParseMultipartForm(32 << 10) // 32 MB buffer
if err != nil {
respondError(w, "Failed to parse form", err, http.StatusBadRequest)
return
}
lat := r.FormValue("latitude")
lng := r.FormValue("longitude")
comments := r.FormValue("comments")
latitude, err := strconv.ParseFloat(lat, 64)
if err != nil {
respondError(w, "Failed to create parse latitude", err, http.StatusBadRequest)
return
}
longitude, err := strconv.ParseFloat(lng, 64)
if err != nil {
respondError(w, "Failed to create parse longitude", err, http.StatusBadRequest)
return
}
u, err := GenerateReportID()
if err != nil {
respondError(w, "Failed to create quick report public ID", err, http.StatusInternalServerError)
return
}
ctx := r.Context()
tx, err := db.PGInstance.BobDB.BeginTx(ctx, nil)
if err != nil {
respondError(w, "Failed to create transaction", err, http.StatusInternalServerError)
return
}
defer tx.Rollback(ctx)
uploads, err := extractImageUploads(r)
log.Info().Int("len", len(uploads)).Msg("extracted uploads")
if err != nil {
respondError(w, "Failed to extract image uploads", err, http.StatusInternalServerError)
return
}
images, err := saveImageUploads(ctx, tx, uploads)
if err != nil {
respondError(w, "Failed to save image uploads", err, http.StatusInternalServerError)
return
}
organization_id, err := matchDistrict(ctx, longitude, latitude, uploads)
if err != nil {
log.Warn().Err(err).Msg("Failed to match district")
}
log.Info().Int("len", len(images)).Msg("saved uploads")
c, err := h3utils.GetCell(longitude, latitude, 15)
setter := models.PublicreportQuickSetter{
Address: omit.From(""),
Created: omit.From(time.Now()),
Comments: omit.From(comments),
OrganizationID: omitnull.FromPtr(organization_id),
//Location: omitnull.From(fmt.Sprintf("ST_GeometryFromText(Point(%s %s))", longitude, latitude)),
H3cell: omitnull.From(c.String()),
PublicID: omit.From(u),
ReporterEmail: omit.From(""),
ReporterPhone: omit.From(""),
Status: omit.From(enums.PublicreportReportstatustypeReported),
}
quick, err := models.PublicreportQuicks.Insert(&setter).One(ctx, tx)
if err != nil {
respondError(w, "Failed to create database record", err, http.StatusInternalServerError)
return
}
_, err = psql.Update(
um.Table("publicreport.quick"),
um.SetCol("location").To(fmt.Sprintf("ST_GeometryFromText('Point(%f %f)')", longitude, latitude)),
um.Where(psql.Quote("id").EQ(psql.Arg(quick.ID))),
).Exec(ctx, tx)
if err != nil {
respondError(w, "Failed to insert publicreport", err, http.StatusInternalServerError)
return
}
log.Info().Float64("latitude", latitude).Float64("longitude", longitude).Msg("Got upload")
if len(images) > 0 {
setters := make([]*models.PublicreportQuickImageSetter, 0)
for _, image := range images {
setters = append(setters, &models.PublicreportQuickImageSetter{
ImageID: omit.From(int32(image.ID)),
QuickID: omit.From(int32(quick.ID)),
})
}
_, err = models.PublicreportQuickImages.Insert(bob.ToMods(setters...)).Exec(ctx, tx)
if err != nil {
respondError(w, "Failed to save reference to images", err, http.StatusInternalServerError)
return
}
log.Info().Int("len", len(images)).Msg("saved uploads")
}
tx.Commit(ctx)
http.Redirect(w, r, fmt.Sprintf("/quick-submit-complete?report=%s", u), http.StatusFound)
}
func postRegisterNotifications(w http.ResponseWriter, r *http.Request) {
err := r.ParseForm()
if err != nil {
respondError(w, "Failed to parse form", err, http.StatusBadRequest)
return
}
consent := r.PostFormValue("consent")
email := r.PostFormValue("email")
phone_str := r.PostFormValue("phone")
report_id := r.PostFormValue("report_id")
if consent != "on" {
respondError(w, "You must consent", nil, http.StatusBadRequest)
return
}
if email == "" && phone_str == "" {
http.Redirect(w, r, fmt.Sprintf("/quick-submit-complete?report=%s", report_id), http.StatusFound)
return
}
phone, err := text.ParsePhoneNumber(phone_str)
result, err := psql.Update(
um.Table("publicreport.quick"),
um.SetCol("reporter_email").ToArg(email),
um.SetCol("reporter_phone").ToArg(phone),
um.Where(psql.Quote("public_id").EQ(psql.Arg(report_id))),
).Exec(r.Context(), db.PGInstance.BobDB)
if err != nil {
respondError(w, "Failed to update report", err, http.StatusInternalServerError)
return
}
rowcount, err := result.RowsAffected()
if err != nil {
respondError(w, "Failed to get rows affected", err, http.StatusInternalServerError)
return
}
if email != "" {
background.ReportSubscriptionConfirmationEmail(email, report_id)
}
if phone_str != "" {
background.ReportSubscriptionConfirmationText(*phone, report_id)
}
if rowcount == 0 {
http.Redirect(w, r, fmt.Sprintf("/error?code=no-rows-affected&report=%s", report_id), http.StatusFound)
} else {
http.Redirect(w, r, fmt.Sprintf("/register-notifications-complete?report=%s", report_id), http.StatusFound)
}
}

33
rmo/report.go Normal file
View file

@ -0,0 +1,33 @@
package rmo
import (
"crypto/rand"
"fmt"
"math/big"
"strings"
)
// GenerateReportID creates a 12-character random string using only unambiguous
// capital letters and numbers
func GenerateReportID() (string, error) {
// Define character set (no O/0, I/l/1, 2/Z to avoid confusion)
const charset = "ABCDEFGHJKLMNPQRSTUVWXY3456789"
const length = 12
var builder strings.Builder
builder.Grow(length)
// Use crypto/rand for secure randomness
for i := 0; i < length; i++ {
// Generate a random index within our charset
n, err := rand.Int(rand.Reader, big.NewInt(int64(len(charset))))
if err != nil {
return "", fmt.Errorf("failed to generate random number: %w", err)
}
// Add the randomly selected character to our ID
builder.WriteByte(charset[n.Int64()])
}
return builder.String(), nil
}

33
rmo/routes.go Normal file
View file

@ -0,0 +1,33 @@
package rmo
import (
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
"github.com/go-chi/chi/v5"
)
func Router() chi.Router {
r := chi.NewRouter()
r.Get("/", getRoot)
r.Get("/privacy", getPrivacy)
r.Get("/robots.txt", getRobots)
r.Get("/email", getEmailByCode)
r.Get("/image/{uuid}", getImageByUUID)
r.Route("/mock", addMockRoutes)
r.Get("/nuisance", getNuisance)
r.Post("/nuisance-submit", postNuisance)
r.Get("/nuisance-submit-complete", getNuisanceSubmitComplete)
r.Get("/pool", getPool)
r.Post("/pool-submit", postPool)
r.Get("/pool-submit-complete", getPoolSubmitComplete)
r.Get("/quick", getQuick)
r.Post("/quick-submit", postQuick)
r.Get("/quick-submit-complete", getQuickSubmitComplete)
r.Post("/register-notifications", postRegisterNotifications)
r.Get("/register-notifications-complete", getRegisterNotificationsComplete)
r.Get("/search", getSearch)
r.Get("/status", getStatus)
r.Get("/status/{report_id}", getStatusByID)
r.Get("/terms-of-service", getTerms)
htmlpage.AddStaticRoute(r, "/static")
return r
}

28
rmo/search.go Normal file
View file

@ -0,0 +1,28 @@
package rmo
import (
"net/http"
"github.com/Gleipnir-Technology/nidus-sync/config"
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
)
type ContentSearch struct {
MapboxToken string
URLTegola string
}
var (
Search = buildTemplate("search", "base")
)
func getSearch(w http.ResponseWriter, r *http.Request) {
htmlpage.RenderOrError(
w,
Search,
ContentSearch{
MapboxToken: config.MapboxToken,
URLTegola: config.MakeURLTegola("/"),
},
)
}

336
rmo/status.go Normal file
View file

@ -0,0 +1,336 @@
package rmo
import (
"context"
"fmt"
"net/http"
"strings"
"time"
"github.com/Gleipnir-Technology/bob"
"github.com/Gleipnir-Technology/bob/dialect/psql"
"github.com/Gleipnir-Technology/bob/dialect/psql/sm"
"github.com/Gleipnir-Technology/nidus-sync/config"
"github.com/Gleipnir-Technology/nidus-sync/db"
"github.com/Gleipnir-Technology/nidus-sync/db/models"
"github.com/Gleipnir-Technology/nidus-sync/db/sql"
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
"github.com/go-chi/chi/v5"
"github.com/rs/zerolog/log"
"github.com/stephenafamo/scan"
/*
"github.com/Gleipnir-Technology/nidus-sync/db"
"github.com/Gleipnir-Technology/nidus-sync/h3utils"
"github.com/aarondl/opt/omit"
"github.com/aarondl/opt/omitnull"
*/)
type Contact struct {
Email string
Name string
Phone string
}
type Image struct {
Location string
URL string
}
type Report struct {
Address string
Comments string
Created time.Time
District string
ID string
Images []Image
Location string // GeoJSON
Reporter Contact
SiteOwner Contact
Type string
}
type ContentStatus struct {
Error string
ReportID string
}
type ContentStatusByID struct {
MapboxToken string
Report Report
}
var (
Status = buildTemplate("status", "base")
StatusByID = buildTemplate("status-by-id", "base")
)
func formatReportID(s string) string {
// truncate down if too long
if len(s) > 12 {
s = s[:12]
}
// If less than 4 characters, return as is
if len(s) < 4 {
return s
}
// If at least 8 characters, add hyphens at positions 4 and 8
if len(s) >= 8 {
return s[0:4] + "-" + s[4:8] + "-" + s[8:]
}
// If at least 4 characters but less than 8, add hyphen only at position 4
return s[0:4] + "-" + s[4:]
}
func getStatus(w http.ResponseWriter, r *http.Request) {
report_id_str := r.URL.Query().Get("report")
if report_id_str == "" {
htmlpage.RenderOrError(
w,
Status,
ContentStatus{
Error: "",
ReportID: "",
},
)
return
}
report_id := sanitizeReportID(report_id_str)
report_id_str = formatReportID(report_id)
results, err := sql.PublicreportIDTable(report_id).All(r.Context(), db.PGInstance.BobDB)
if err != nil {
respondError(w, "Failed to query for report", err, http.StatusInternalServerError)
return
}
if len(results) != 1 {
log.Error().Int("count", len(results)).Str("report_id", report_id_str).Msg("Got too many results for report id. This is a programmer error.")
htmlpage.RenderOrError(
w,
Status,
ContentStatus{
Error: "Sorry, server's confused",
ReportID: report_id_str,
},
)
}
result := results[0]
if result.ExistsSomewhere {
http.Redirect(w, r, fmt.Sprintf("/status/%s", report_id), http.StatusFound)
return
}
htmlpage.RenderOrError(
w,
Status,
ContentStatus{
Error: "Sorry, we can't find that report",
ReportID: report_id_str,
},
)
}
func contentFromNuisance(ctx context.Context, report_id string) (result ContentStatusByID, err error) {
nuisance, err := models.PublicreportNuisances.Query(
models.SelectWhere.PublicreportNuisances.PublicID.EQ(report_id),
).One(ctx, db.PGInstance.BobDB)
if err != nil {
return result, fmt.Errorf("Failed to query nuisance %s: %w", report_id, err)
}
result.Report.ID = report_id
result.Report.Address = nuisance.Address
result.Report.Created = nuisance.Created
result.Report.Reporter.Email = nuisance.ReporterEmail
result.Report.Reporter.Name = nuisance.ReporterName
result.Report.Reporter.Phone = nuisance.ReporterPhone
type LocationGeoJSON struct {
Location string
}
row, err := bob.One(ctx, db.PGInstance.BobDB, psql.Select(
sm.From(
psql.F("ST_AsGeoJSON", "location"),
).As("location"),
sm.Where(psql.Quote("public_id").EQ(psql.Arg(report_id))),
), scan.StructMapper[LocationGeoJSON]())
if err != nil {
return result, fmt.Errorf("Failed to query nuisance %s: %w", report_id, err)
}
result.Report.Location = row.Location
return result, err
}
func contentFromPool(ctx context.Context, report_id string) (result ContentStatusByID, err error) {
return result, err
}
func contentFromQuick(ctx context.Context, report_id string) (result ContentStatusByID, err error) {
quick, err := models.PublicreportQuicks.Query(
models.SelectWhere.PublicreportQuicks.PublicID.EQ(report_id),
).One(ctx, db.PGInstance.BobDB)
if err != nil {
return result, fmt.Errorf("Failed to query nuisance %s: %w", report_id, err)
}
images, err := sql.PublicreportImageWithJSONByQuickID(quick.ID).All(ctx, db.PGInstance.BobDB)
if err != nil {
return result, fmt.Errorf("Failed to get images %s: %w", report_id, err)
}
result.Report.ID = report_id
result.Report.Address = quick.Address
result.Report.Comments = quick.Comments
result.Report.Created = quick.Created
result.Report.District = "Unknown"
result.Report.Reporter.Email = quick.ReporterEmail
result.Report.Reporter.Name = "-"
result.Report.Reporter.Phone = quick.ReporterPhone
result.Report.Type = "Quick"
for _, image := range images {
result.Report.Images = append(result.Report.Images, Image{
Location: image.LocationJSON,
URL: config.MakeURLReport("/image/%s", image.StorageUUID.String()),
})
}
type LocationGeoJSON struct {
Location string
}
location, err := bob.One(ctx, db.PGInstance.BobDB, psql.Select(
sm.Columns(
psql.F("ST_AsGeoJSON", "location"),
),
sm.From("publicreport.quick"),
sm.Where(psql.Quote("public_id").EQ(psql.Arg(report_id))),
), scan.SingleColumnMapper[string])
if err != nil {
return result, fmt.Errorf("Failed to query nuisance %s: %w", report_id, err)
}
result.Report.Location = location
return result, err
}
func getStatusByID(w http.ResponseWriter, r *http.Request) {
report_id := chi.URLParam(r, "report_id")
ctx := r.Context()
location, err := models.PublicreportReportLocations.Query(
models.SelectWhere.PublicreportReportLocations.PublicID.EQ(report_id),
).One(ctx, db.PGInstance.BobDB)
if err != nil {
respondError(w, "Failed to find report", err, http.StatusBadRequest)
return
}
var content ContentStatusByID
switch location.TableName.MustGet() {
case "nuisance":
content, err = contentFromNuisance(ctx, report_id)
case "pool":
content, err = contentFromPool(ctx, report_id)
case "quick":
content, err = contentFromQuick(ctx, report_id)
}
content.MapboxToken = config.MapboxToken
htmlpage.RenderOrError(
w,
StatusByID,
content,
)
}
/*
func getQuick(w http.ResponseWriter, r *http.Request) {
htmlpage.RenderOrError(
w,
Quick,
ContentQuick{},
)
}
func getQuickSubmitComplete(w http.ResponseWriter, r *http.Request) {
report := r.URL.Query().Get("report")
htmlpage.RenderOrError(
w,
QuickSubmitComplete,
ContentQuickSubmitComplete{
ReportID: report,
},
)
}
func postQuick(w http.ResponseWriter, r *http.Request) {
err := r.ParseMultipartForm(32 << 10) // 32 MB buffer
if err != nil {
respondError(w, "Failed to parse form", err, http.StatusBadRequest)
return
}
lat := r.FormValue("latitude")
lng := r.FormValue("longitude")
comments := r.FormValue("comments")
//photos := r.FormValue("photos")
latitude, err := strconv.ParseFloat(lat, 64)
if err != nil {
respondError(w, "Failed to create parse latitude", err, http.StatusBadRequest)
return
}
longitude, err := strconv.ParseFloat(lng, 64)
if err != nil {
respondError(w, "Failed to create parse longitude", err, http.StatusBadRequest)
return
}
u, err := GenerateReportID()
if err != nil {
respondError(w, "Failed to create quick report public ID", err, http.StatusInternalServerError)
return
}
c, err := h3utils.GetCell(longitude, latitude, 15)
setter := models.PublicreportQuickSetter{
Created: omit.From(time.Now()),
Comments: omit.From(comments),
//Location: omitnull.From(fmt.Sprintf("ST_GeometryFromText(Point(%s %s))", longitude, latitude)),
H3cell: omitnull.From(c.String()),
PublicID: omit.From(u),
ReporterEmail: omit.From(""),
ReporterPhone: omit.From(""),
}
quick, err := models.PublicreportQuicks.Insert(&setter).One(r.Context(), db.PGInstance.BobDB)
if err != nil {
respondError(w, "Failed to create database record", err, http.StatusInternalServerError)
return
}
_, err = psql.Update(
um.Table("publicreport.quick"),
um.SetCol("location").To(fmt.Sprintf("ST_GeometryFromText('Point(%f %f)')", longitude, latitude)),
um.Where(psql.Quote("id").EQ(psql.Arg(quick.ID))),
).Exec(r.Context(), db.PGInstance.BobDB)
if err != nil {
respondError(w, "Failed to insert publicreport", err, http.StatusInternalServerError)
return
}
log.Info().Float64("latitude", latitude).Float64("longitude", longitude).Msg("Got upload")
photoSetters := make([]*models.PublicreportQuickPhotoSetter, 0)
uploads, err := extractPhotoUploads(r)
if err != nil {
respondError(w, "Failed to extract photo uploads", err, http.StatusInternalServerError)
return
}
for _, u := range uploads {
photoSetters = append(photoSetters, &models.PublicreportQuickPhotoSetter{
Filename: omit.From(u.Filename),
Size: omit.From(u.Size),
UUID: omit.From(u.UUID),
})
}
err = quick.InsertQuickPhotos(r.Context(), db.PGInstance.BobDB, photoSetters...)
if err != nil {
respondError(w, "Failed to create photo records", err, http.StatusInternalServerError)
return
}
http.Redirect(w, r, fmt.Sprintf("/quick-submit-complete?report=%s", u), http.StatusFound)
}
*/
func sanitizeReportID(r string) string {
result := ""
for _, char := range r {
if char != '-' {
result += string(char)
}
}
return strings.ToUpper(result)
}

20
rmo/template/base.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{template "title" .}} - Report Mosquitoes Online</title>
<!-- Bootstrap CSS -->
<link href="/static/vendor/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Fontawesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
{{block "extraheader" .}} {{end}}
</head>
<body>
{{template "content" .}}
{{template "footer" .}}
<script src="/static/vendor/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View file

@ -0,0 +1,15 @@
{{define "footer"}}
<footer class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Powered by <a href="/">Report Mosquitoes Online</a></p>
<p class="mb-0">&copy; 2025 Gleipnir LLC</p>
</div>
<div class="col-md-6 text-md-end">
<p class="mb-0">Contact: support@mosquitoes.online</p>
</div>
</div>
</div>
</footer>
{{end}}

View file

@ -0,0 +1,13 @@
{{define "header"}}
<header class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class="container">
<div class="d-flex align-items-center">
<a class="navbar-brand d-flex align-items-center" href="/">
<img src="{{.District.URLLogo}}" style="height: 48px;" alt="District logo"></img>
</a>
<h1 class="mb-0 ms-3">{{.District.Name}}</h1>
</div>
</div>
</header>
{{end}}

View file

@ -0,0 +1,2 @@
{{define "map-header"}}
{{end}}

View file

@ -0,0 +1,84 @@
{{define "map"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
<script>
const geojson = JSON.parse({{.GeoJSON}})
function addMarkers(map, markers) {
for (let i = 0; i < markers.length; i++) {
let marker = markers[i];
marker.addTo(map);
}
}
function mapMarkers() {
const markers = [
{{ range .Markers }}
new mapboxgl.Marker().setLngLat([{{.LatLng.Lng}}, {{.LatLng.Lat}}])
{{end}}
];
return markers;
}
function onLoad() {
console.log("Setting up the map...", geojson);
mapboxgl.accessToken = {{ .MapboxToken }};
const map = new mapboxgl.Map({
container: "map",
center: [{{.Center.Lng}}, {{.Center.Lat}}],
style: 'mapbox://styles/mapbox/streets-v12', // style URL
zoom: {{.Zoom}},
});
map.on("load", function() {
console.log("Map post-load...");
addMarkers(map, mapMarkers());
const sourceId = 'h3-hexes';
const layerId = 'h3-hexes-layer';
let source = map.getSource(sourceId);
if (!source) {
map.addSource(sourceId, {
type: 'geojson',
data: geojson
});
map.addLayer({
id: layerId,
source: sourceId,
type: 'fill',
interactive: false,
paint: {
'fill-color': '#F00000',
'fill-opacity': 0.3
}
});
source = map.getSource(sourceId);
}
source.setData(geojson);
console.log("Map post-load done.");
});
console.log("Map init done.");
}
window.addEventListener("load", onLoad);
</script>
<style>
.map-container {
background-color: #e9ecef;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
height: 500px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
#map {
height: 500px;
width:100%;
margin-bottom: 10px;
}
#map img {
max-width: none;
min-width: 0px;
height: auto;
}
</style>
{{end}}

View file

@ -0,0 +1,126 @@
{{define "photo-upload-header"}}
<style>
.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;
}
</style>
<script>
/**
* Handle photo selection and preview
*/
function handlePhotoSelection() {
const photoInput = document.getElementById('photos');
const photoPreviewContainer = document.getElementById('photoPreviewContainer');
// Clear previous previews
photoPreviewContainer.innerHTML = '';
// Check if files were selected
if (photoInput.files && photoInput.files.length > 0) {
// Loop through selected files
Array.from(photoInput.files).forEach((file, index) => {
console.log("Handling", index, file);
if (!file.type.match('image.*')) {
console.log("Skipping non-image file", file.type);
return; // Skip non-image files
}
// Create preview container
const previewContainer = document.createElement('div');
previewContainer.className = 'position-relative m-1';
// Create image preview
const img = document.createElement('img');
img.className = 'img-thumbnail';
img.style.width = '100px';
img.style.height = '100px';
img.style.objectFit = 'cover';
// Read file and set preview
const reader = new FileReader();
reader.onload = (e) => {
img.src = e.target.result;
};
reader.readAsDataURL(file);
// Create remove button
const removeBtn = document.createElement('button');
removeBtn.type = 'button';
removeBtn.className = 'btn btn-sm btn-danger position-absolute top-0 end-0';
removeBtn.innerHTML = '&times;';
removeBtn.style.fontSize = '10px';
removeBtn.style.padding = '0 5px';
// Handle remove button click
removeBtn.addEventListener('click', function() {
// Create a new FileList without this file
// Since FileList is immutable, we need to reset the input
// This is a bit tricky and requires recreating the input
previewContainer.remove();
// If this was the last image, clear the input entirely
if (photoPreviewContainer.children.length === 0) {
photoInput.value = '';
}
// Note: Unfortunately, selectively removing files from a FileList isn't straightforward
// In a real implementation, we might track selected files in an array and recreate the input
});
// Add elements to the preview container
previewContainer.appendChild(img);
previewContainer.appendChild(removeBtn);
photoPreviewContainer.appendChild(previewContainer);
});
}
}
document.addEventListener('DOMContentLoaded', function() {
// Elements
const photoInput = document.getElementById('photos');
// Handle photo selection
photoInput.addEventListener('change', handlePhotoSelection);
// Handle drag and drop
const photoDropArea = document.getElementById('photoDropArea');
photoDropArea.addEventListener('dragover', function(e) {
e.preventDefault();
photoDropArea.style.backgroundColor = '#e9ecef';
});
photoDropArea.addEventListener('dragleave', function() {
photoDropArea.style.backgroundColor = '#f8f9fa';
});
photoDropArea.addEventListener('drop', function(e) {
e.preventDefault();
photoDropArea.style.backgroundColor = '#f8f9fa';
if (e.dataTransfer.files.length) {
handleFiles(e.dataTransfer.files);
}
});
});
</script>
{{end}}

View file

@ -0,0 +1,18 @@
{{define "photo-upload"}}
<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 class="file-upload-container" id="photoDropArea">
<input type="file" id="photos" name="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 -->
<div id="photoPreviewContainer" class="photo-preview mt-3 d-flex flex-wrap">
<!-- Image previews will be added here by JavaScript -->
</div>
</div>
{{end}}

View file

@ -0,0 +1,93 @@
{{template "base.html" .}}
{{define "title"}}Main{{end}}
{{define "extraheader"}}
<style>
.service-card {
transition: transform 0.3s;
height: 100%;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.district-logo {
display:block;
margin-left:auto;
margin-right:auto;
max-height: 88px;
width: auto;
}
.quick-report-mobile {
background-color: #ff9800;
}
.quick-report-desktop {
background-color: #ffefd5;
border-left: 4px solid #ff9800;
}
</style>
{{end}}
{{define "content"}}
<!-- Main Content -->
<main>
<!-- Introduction Section -->
<section class="py-5 bg-primary text-white">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<h2 class="text-center mb-4">Report a Mosquito Problem</h2>
<img class="district-logo" src="{{.District.URLLogo}}" />
<p class="lead text-center">Submit a report to help reduce mosquito activity in your neighborhood.</p>
<p class="lead text-center">Report Mosquitoes Online works with local mosquito control agencies to receive public reports. For this area, mosquito control services are provided by Delta Mosquito and Vector Control District.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-5">
<div class="container">
<h3 class="text-center mb-4">How Can We Help You Today?</h3>
<div class="row g-4">
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
{{ template "svg/mosquito" }}
</div>
<h4 class="card-title">Report Mosquito Nuisance</h4>
<p class="card-text">Report areas with high adult mosquito activity causing discomfort or concern.</p>
<a href="{{ .URL.Nuisance }}" class="btn btn-primary mt-3">Report Problem</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
{{ template "svg/pond" }}
</div>
<h4 class="card-title">Report Standing Water</h4>
<p class="card-text">Report any water that has been sitting for several days, where mosquitoes can live.</p>
<a href="{{.URL.Water}}" class="btn btn-primary mt-3">Report Water</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
{{ template "svg/check-report" }}
</div>
<h4 class="card-title">Follow-up or Check Status</h4>
<p class="card-text">Check on a previous request or view current mosquito activity in your area.</p>
<a href="{{.URL.Status}}" class="btn btn-primary mt-3">Get Status</a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
{{end}}

View file

@ -0,0 +1,130 @@
{{template "base.html" .}}
{{define "title"}}Quick Report Complete{{end}}
{{define "extraheader"}}
<style>
</style>
<script>
</script>
{{end}}
{{define "content"}}
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Success Card -->
<div class="card shadow-sm border-success mb-4">
<div class="card-header bg-success text-white">
<h3 class="my-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-circle-fill me-2" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
Report Successfully Submitted
</h3>
</div>
<div class="card-body p-4">
<div class="text-center mb-4">
<p class="lead">Thank you for helping us control mosquito populations in your area!</p>
<div class="alert alert-info py-3">
<strong>Your Report ID:</strong>
<span class="fs-4 fw-bold">{{.ReportID|publicReportID}}</span>
</div>
<p class="text-muted">Please save this ID for your reference.</p>
{{ if not (eq .District nil) }}
<p>Your report will be handled by</p>
<p><b>{{ .District.Name }}</b></p>
<img src="{{ .District.URLLogo }}" width="256"/>
{{ end }}
</div>
<hr class="my-4">
<!-- Status Check Section -->
<div class="mb-4">
<h4 class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search me-2" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
Check Your Report Status
</h4>
<p>You can check the status of your report at any time using your Report ID.</p>
<a href="/status/{{.ReportID}}" class="btn btn-outline-primary">
Check Status
</a>
</div>
<hr class="my-4">
<!-- Notifications Section -->
<div>
<h4 class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bell me-2" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
</svg>
Get Updates
</h4>
<p>Provide your contact information to receive updates about your report.</p>
<form id="notificationForm" action="/register-notifications" method="post" class="needs-validation">
<input type="hidden" name="report_id" value="{{.ReportID}}">
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<div class="input-group">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
</span>
<input type="email" class="form-control" id="email" name="email" placeholder="your@email.com">
</div>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number (for SMS updates)</label>
<div class="input-group">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
</span>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890">
</div>
</div>
<div class="form-check mb-3 form-check">
<input class="form-check-input" type="checkbox" name="consent" required>
<label class="form-check-label" for="consent">
I consent to receiving updates about this report
</label>
<div class="invalid-feedback">
You must consent to receive notifications.
</div>
</div>
<button type="submit" class="btn btn-primary">Register for Updates</button>
</form>
</div>
</div>
</div>
<!-- Navigation Links -->
<div class="text-center">
<a href="/" class="btn btn-outline-secondary me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house me-1" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
</svg>
Return to Home
</a>
<a href="/report-mosquito" class="btn btn-outline-success">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle me-1" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
Submit Another Report
</a>
</div>
</div>
</div>
</div>
{{end}}

View file

@ -0,0 +1,513 @@
{{template "base.html" .}}
{{define "title"}}Nuisance{{end}}
{{define "extraheader"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<script src="/static/js/address-display.js"></script>
<script src="/static/js/address-suggestion.js"></script>
<script src="/static/js/geocode.js"></script>
<script src="/static/js/location.js"></script>
<script src="/static/js/map-locator.js"></script>
{{template "photo-upload-header"}}
<script>
const MAPBOX_ACCESS_TOKEN = "{{.MapboxToken}}";
// Handle inspection type selection
function selectInspectionType(type) {
// Remove selected class from both cards
document.getElementById('propertyInspection').classList.remove('selected');
document.getElementById('neighborhoodInspection').classList.remove('selected');
// Add selected class to chosen card
if (type === 'property') {
document.getElementById('propertyInspection').classList.add('selected');
document.getElementById('inspectionTypeProperty').checked = true;
document.getElementById('schedulingSection').style.display = 'block';
} else {
document.getElementById('neighborhoodInspection').classList.add('selected');
document.getElementById('inspectionTypeNeighborhood').checked = true;
document.getElementById('schedulingSection').style.display = 'none';
}
}
function toggleCollapse(something) {
el = document.getElementById(something)
if (el.classList.contains('collapse')) {
el.classList.remove('collapse');
} else {
el.classList.add('collapse');
}
}
// Check for source identification
document.addEventListener('DOMContentLoaded', function() {
const sourceCheckboxes = [
document.getElementById('sourceStagnantWater'),
document.getElementById('sourceContainers'),
document.getElementById('sourceGutters')
];
const sourceAlert = document.getElementById('sourceFoundAlert');
sourceCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
// If any source is checked, show the alert
if (sourceCheckboxes.some(cb => cb.checked)) {
sourceAlert.style.display = 'block';
} else {
sourceAlert.style.display = 'none';
}
});
});
// Elements
const photoInput = document.getElementById('photos');
// Handle photo selection
photoInput.addEventListener('change', handlePhotoSelection);
// Handle drag and drop
const photoDropArea = document.getElementById('photoDropArea');
photoDropArea.addEventListener('dragover', function(e) {
e.preventDefault();
photoDropArea.style.backgroundColor = '#e9ecef';
});
photoDropArea.addEventListener('dragleave', function() {
photoDropArea.style.backgroundColor = '#f8f9fa';
});
photoDropArea.addEventListener('drop', function(e) {
e.preventDefault();
photoDropArea.style.backgroundColor = '#f8f9fa';
if (e.dataTransfer.files.length) {
handleFiles(e.dataTransfer.files);
}
});
const mapLocator = document.querySelector("map-locator");
mapLocator.addEventListener("load", (event) => {
getGeolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}).then(position => {
mapLocator.jumpTo({
center: {
lng: position.coords.longitude,
lat: position.coords.latitude,
},
zoom: 14,
});
mapLocator.setMarker([
position.coords.longitude,
position.coords.latitude,
]);
geocodeReverse(MAPBOX_ACCESS_TOKEN, {
lat: position.coords.latitude,
lng: position.coords.longitude,
});
}).catch(error => {
console.log("location error", error);
})
})
//mapLocator.addEventListener("markerdragend",
let mapZoom = document.getElementById('map-zoom');
mapLocator.addEventListener("zoomend", function(e) {
mapZoom.value = e.target.getZoom();
});
mapLocator.addEventListener("markerdragend", (e) => {
const lngLat = marker.getLngLat();
//displaySelectedCoordinates(lngLat);
geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat);
});
const addressDisplay = document.querySelector("address-display");
const addressInput = document.querySelector("address-input");
addressInput.addEventListener("address-selected", (event) => {
const l = event.detail.location;
console.log("Address selected", l);
// Center map on selected address
mapSetMarker(l.geometry.coordinates);
mapJumpTo({
center: l.geometry.coordinates,
zoom: 14,
});
addressDisplay.show(l);
setLocationInputs(l);
});
});
</script>
<style>
.district-logo {
max-height: 80px;
width: auto;
}
.form-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid #dee2e6;
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 1rem;
padding-bottom: 0;
}
.section-heading {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.section-heading i {
margin-right: 10px;
font-size: 1.5rem;
color: #0d6efd;
}
.optional-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: normal;
margin-left: 8px;
}
.submit-container {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin-top: 2rem;
}
.source-card {
height: 100%;
transition: transform 0.3s;
}
.source-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.source-icon {
font-size: 2rem;
margin-bottom: 1rem;
color: #0d6efd;
}
.time-of-day-btn {
width: 100%;
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px 0;
}
.time-of-day-icon {
font-size: 1.5rem;
margin-bottom: 8px;
}
.time-label {
font-size: 0.9rem;
}
.severity-item {
text-align: center;
padding: 10px;
}
.severity-scale {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.btn-check:checked + .btn.time-of-day-btn {
background-color: #0d6efd;
color: white;
}
.inspection-type-card {
cursor: pointer;
border: 1px solid #dee2e6;
padding: 20px;
border-radius: 5px;
height: 100%;
transition: all 0.3s;
}
.inspection-type-card.selected {
border-color: #0d6efd;
background-color: rgba(13, 110, 253, 0.05);
}
.inspection-type-card:hover {
border-color: #0d6efd;
}
.card-highlight {
border-left: 4px solid #0d6efd;
background-color: #f8f9fa;
}
</style>
{{end}}
{{define "content"}}
{{if .District}}
{{template "header" .}}
{{end}}
<div class="container">
<div class="row mb-4">
<div class="col-12">
<h2>Report Mosquito Nuisance</h2>
<p class="lead">Help us identify mosquito activity in your area</p>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="alert alert-info" role="alert">
<h5 class="alert-heading"><i class="bi bi-info-circle me-2"></i>How Your Report Helps</h5>
<p class="mb-0">When you submit this form, our team uses the information you provide along with mosquito surveillance data to identify likely mosquito production sites and plan effective control actions. This allows us to target the sources of mosquitoes and reduce mosquito populations in your neighborhood.</p>
</div>
</div>
</div>
<!-- Report Form -->
<form id="mosquitoNuisanceForm" action="/nuisance-submit" method="POST">
<!-- Location & Contact Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-geo-alt"></i>
<h3>Nuisance Location Information</h3>
</div>
<div class="col-md-6">
<div class="mb-3 position-relative">
<address-input
placeholder="Start typing an address (min 3 characters)"
api-key="{{ .MapboxToken }}">
</address-input>
</div>
</div>
</div>
<p class="small text-muted mb-2">You can also click on the map to mark the location precisely</p>
<map-locator api-key="{{ .MapboxToken }}"></map-locator>
<input type="hidden" id="map-zoom" name="map-zoom"/>
<!-- Mosquito Activity Section -->
<div class="form-section">
<div class="section-heading">
{{ template "svg/mosquito" }}
<h3>Mosquito Activity Information</h3>
<span class="optional-label">optional</span>
</div>
<p class="mb-4">The time when mosquitoes are active can help us identify the species and likely breeding sources.</p>
<!-- Time of Day -->
<div class="row mb-4">
<div class="col-12">
<label class="form-label">When do you typically notice mosquitoes? (Select all that apply)</label>
<div class="row">
<div class="col-6 col-md-3">
<input type="checkbox" class="btn-check" id="earlyMorning" name="tod-early" autocomplete="off">
<label class="btn btn-outline-primary time-of-day-btn" for="earlyMorning">
<span class="time-of-day-icon"><i class="bi bi-sunrise"></i></span>
<span class="time-label">Early Morning</span>
<small class="text-muted">5am-8am</small>
</label>
</div>
<div class="col-6 col-md-3">
<input type="checkbox" class="btn-check" id="daytime" name="tod-day" autocomplete="off">
<label class="btn btn-outline-primary time-of-day-btn" for="daytime">
<span class="time-of-day-icon"><i class="bi bi-sun"></i></span>
<span class="time-label">Daytime</span>
<small class="text-muted">8am-5pm</small>
</label>
</div>
<div class="col-6 col-md-3">
<input type="checkbox" class="btn-check" id="evening" name="tod-evening" autocomplete="off">
<label class="btn btn-outline-primary time-of-day-btn" for="evening">
<span class="time-of-day-icon"><i class="bi bi-sunset"></i></span>
<span class="time-label">Evening</span>
<small class="text-muted">5pm-9pm</small>
</label>
</div>
<div class="col-6 col-md-3">
<input type="checkbox" class="btn-check" id="night" name="tod-night" autocomplete="off">
<label class="btn btn-outline-primary time-of-day-btn" for="night">
<span class="time-of-day-icon"><i class="bi bi-moon-stars"></i></span>
<span class="time-label">Night</span>
<small class="text-muted">9pm-5am</small>
</label>
</div>
</div>
</div>
</div>
<!-- Duration -->
<div class="row mb-4">
<div class="col-md-6">
<label for="duration" class="form-label">How long have you been experiencing this mosquito problem?</label>
<select class="form-select" name="duration">
<option value="just-noticed">Just noticed recently</option>
<option value="few-days">A few days</option>
<option value="1-2-weeks">1-2 weeks</option>
<option value="2-4-weeks">2-4 weeks</option>
<option value="1-3-months">1-3 months</option>
<option value="seasonal">All season (recurring issue)</option>
</select>
</div>
<!-- Severity -->
<div class="col-md-6">
<label for="severityRange" class="form-label">How would you rate the severity of the mosquito problem?</label>
<input type="range" class="form-range" id="severityRange" min="1" max="5" name="severity" oninput="document.getElementById('severityValue').innerText = this.value">
<div class="severity-scale">
<div class="severity-item">
<div>Minor</div>
<small>Occasional mosquito</small>
</div>
<div class="severity-item">
<div>Moderate</div>
<small>Regular presence</small>
</div>
<div class="severity-item">
<div>Severe</div>
<small>Many mosquitoes</small>
</div>
</div>
<div class="text-center">
Current selection: <span id="severityValue">3</span>/5
</div>
</div>
</div>
<!-- Location -->
<div class="row">
<div class="col-md-12">
<label for="source-location" class="form-label">Where on your property do you notice the most mosquito activity?</label>
<select class="form-select" name="source-location">
<option value="">Please select</option>
<option value="front-yard">Front yard</option>
<option value="backyard">Back yard</option>
<option value="patio">Patio/deck area</option>
<option value="garden">Garden</option>
<option value="pool-area">Pool area</option>
<option value="throughout">Throughout the property</option>
<option value="indoors">Indoors</option>
<option value="other">Other area</option>
</select>
</div>
</div>
</div>
<button class="btn btn-warning" type="button" onClick="toggleCollapse('collapse-additional-fields')">
Answer a few more questions to better help us solve your mosquito problem
</button>
<div class="collapse" id="collapse-additional-fields">
<!-- Potential Sources Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-search"></i>
<h3>Potential Mosquito Sources</h3>
<span class="optional-label">optional</span>
</div>
<p class="mb-3">Have you noticed any of these common mosquito breeding sources in your area?</p>
<div class="card card-highlight mb-4">
<div class="card-body">
<h5 class="card-title">Did you know?</h5>
<p class="card-text">Mosquitoes can breed in as little as a bottle cap of water! Eliminating standing water is the most effective way to reduce mosquito populations.</p>
</div>
</div>
<div class="row g-4 mb-4">
<!-- Source 1 -->
<div class="col-md-4">
<div class="card source-card">
<div class="card-body text-center">
<div class="source-icon">
<i class="bi bi-water"></i>
</div>
<h5 class="card-title">Stagnant Water</h5>
<p class="card-text">Green pools, ponds, fountains, or birdbaths that aren't maintained</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="source-stagnant" id="sourceStagnantWater">
<label class="form-check-label" for="sourceStagnantWater">
I've noticed this
</label>
</div>
</div>
</div>
</div>
<!-- Source 2 -->
<div class="col-md-4">
<div class="card source-card">
<div class="card-body text-center">
<div class="source-icon">
<i class="bi bi-droplet"></i>
</div>
<h5 class="card-title">Containers</h5>
<p class="card-text">Buckets, planters, toys, tires, or any items that collect rainwater</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="source-container" id="sourceContainers">
<label class="form-check-label" for="sourceContainers">
I've noticed this
</label>
</div>
</div>
</div>
</div>
<!-- Source 3 -->
<div class="col-md-4">
<div class="card source-card">
<div class="card-body text-center">
<div class="source-icon">
<i class="bi bi-house"></i>
</div>
<h5 class="card-title">Roof & Gutters</h5>
<p class="card-text">Clogged street gutters, yard drains, or AC units that collect water</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="source-gutters" id="sourceGutters">
<label class="form-check-label" for="sourceGutters">
I've noticed this
</label>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-warning mb-4" id="sourceFoundAlert" style="display: none;">
<h5 class="alert-heading"><i class="bi bi-exclamation-triangle me-2"></i>Potential Breeding Source Found!</h5>
<p>It looks like you may have identified a mosquito breeding source. If you'd like to report a specific source (like a green pool), please use our <a href="/report-green-pool" class="alert-link">Report a Green Pool</a> form for faster service.</p>
</div>
<div class="row">
<div class="col-md-12">
<label for="otherSources" class="form-label">Have you noticed any other potential mosquito breeding sources?</label>
<textarea class="form-control" id="otherSources" name="source-description" rows="2" placeholder="Describe any other potential breeding sites you've noticed..."></textarea>
{{template "photo-upload"}}
</div>
</div>
</div>
<div class="form-section">
<div class="section-heading">
<i class="bi bi-card-text"></i>
<h3>Additional Information</h3>
<span class="optional-label">optional</span>
</div>
<div class="row">
<div class="col-md-12">
<label for="additionalInfo" class="form-label">Is there anything else you'd like us to know?</label>
<textarea class="form-control" id="additionalInfo" name="additional-info" rows="4" placeholder="Additional details about the mosquito issue..."></textarea>
</div>
</div>
</div>
</div>
<!-- Submit Section -->
<div class="submit-container">
<div class="row align-items-center">
<div class="col-md-8">
<p class="mb-0"><strong>Thank you for reporting this mosquito issue.</strong></p>
<p class="mb-0 small text-muted">After submission, you'll receive a confirmation with a report ID and further information.</p>
</div>
<div class="col-md-4 text-md-end mt-3 mt-md-0">
<a class="btn btn-primary btn-lg" href="{{.URL.NuisanceSubmitComplete}}">
Submit Report
</a>
</div>
</div>
</div>
</form>
</div>
{{end}}

View file

@ -0,0 +1,88 @@
{{template "base.html" .}}
{{define "title"}}Main{{end}}
{{define "extraheader"}}
<style>
.service-card {
transition: transform 0.3s;
height: 100%;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.district-logo {
max-height: 80px;
width: auto;
}
.quick-report-mobile {
background-color: #ff9800;
}
.quick-report-desktop {
background-color: #ffefd5;
border-left: 4px solid #ff9800;
}
</style>
{{end}}
{{define "content"}}
<!-- Main Content -->
<main>
<!-- Introduction Section -->
<section class="py-5 bg-primary text-white">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<h2 class="text-center mb-4">Report Mosquitoes Online</h2>
<p class="lead text-center">This is the reporting page for mosquito problems in your area.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-5">
<div class="container">
<h3 class="text-center mb-4">How Can We Help You Today?</h3>
<div class="row g-4">
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
{{ template "svg/mosquito" }}
</div>
<h4 class="card-title">Report Mosquito Nuisance</h4>
<p class="card-text">Report areas with high adult mosquito activity causing discomfort or concern.</p>
<a href="{{ .URL.Nuisance }}" class="btn btn-primary mt-3">Report Problem</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
{{ template "svg/pond" }}
</div>
<h4 class="card-title">Report Standing Water</h4>
<p class="card-text">Report any water that has been sitting for several days, where mosquitoes can live.</p>
<a href="{{ .URL.Water }}" class="btn btn-primary mt-3">Report Source</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
{{ template "svg/check-report" }}
</div>
<h4 class="card-title">Follow-up or Check Status</h4>
<p class="card-text">Check on a previous request or view current mosquito activity in your area.</p>
<a href="{{ .URL.Status }}" class="btn btn-primary mt-3">Get Status</a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
{{end}}

View file

@ -0,0 +1,207 @@
{{template "base.html" .}}
{{define "title"}}Status{{end}}
{{define "extraheader"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<script src="/static/js/geocode.js"></script>
<script src="/static/js/location.js"></script>
<script src="/static/js/map-multipoint.js"></script>
<script src="/static/js/report-table.js"></script>
<style>
.map-container {
background-color: #e9ecef;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
height: 500px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
#map {
height: 500px;
width:100%;
margin-bottom: 10px;
}
#map img {
max-width: none;
min-width: 0px;
height: auto;
}
.search-box {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
}
@media (max-width: 768px) {
.map-container {
height: 300px;
}
}
</style>
<script>
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
var markers = [];
// Because features come from tiled vector data, feature geometries may be split
// or duplicated across tile boundaries. As a result, features may appear
// multiple times in query results.
function getUniqueFeatures(features, comparatorProperty) {
const uniqueIds = new Set();
const uniqueFeatures = [];
for (const feature of features) {
const id = feature.properties[comparatorProperty];
if (!uniqueIds.has(id)) {
uniqueIds.add(id);
uniqueFeatures.push(feature);
}
}
return uniqueFeatures;
}
function renderReports(features) {
console.log("render reports", features);
const report_table = document.querySelector('report-table');
let reports = [];
for (const feature of features) {
reports.push({
address: feature.properties.address,
created: feature.properties.created,
id: feature.properties.public_id,
status: feature.properties.status,
type: feature.properties.table_name
});
}
report_table.reports = reports;
}
function onLoad() {
const map = document.querySelector("map-multipoint");
map.addEventListener("load", (event) => {
map.addSource('tegola-mosquito', {
'type': 'vector',
'tiles': [
'{{.URL.Tegola}}maps/mosquito/{z}/{x}/{y}'
]
});
map.addLayer({
'id': 'mosquito',
'source': 'tegola-mosquito',
'source-layer': 'report_location',
'type': 'circle',
'paint': {
'circle-color': '#4264fb',
'circle-radius': 7,
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
}
});
map.on('render', () => {
const features = map.queryRenderedFeatures({target: {layerId: 'mosquito'}});
if (features) {
const uniqueFeatures = getUniqueFeatures(features, 'public_id');
// Populate features for the listing overlay.
renderReports(uniqueFeatures);
}
});
getGeolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}).then(position => {
map.jumpTo({
center: {
lng: position.coords.longitude,
lat: position.coords.latitude,
},
zoom: 14,
});
}).catch(error => {
console.log("location error", error);
})
});
}
document.addEventListener('DOMContentLoaded', onLoad);
</script>
{{end}}
{{define "content"}}
{{if .District}}
{{template "header" .}}
{{end}}
<div class="container my-4">
<!-- Search Box -->
<div class="card search-box mb-4">
<div class="card-body">
<form class="row g-3 align-items-center">
<div class="col-md-9">
<label for="addressSearch" class="visually-hidden">Search by address</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-search"></i></span>
<input type="text" class="form-control form-control-lg" id="addressSearch"
placeholder="Enter a report ID, address, neighborhood, or zip code">
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-primary btn-lg w-100">Search</button>
</div>
<div class="col-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="mosquitoNuisance" checked>
<label class="form-check-label" for="mosquitoNuisance">Mosquito Nuisance</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="stagnantWater" checked>
<label class="form-check-label" for="gWaterreenPool">Stagnant Water</label>
</div>
</div>
</form>
</div>
</div>
<!-- Map Section -->
<div class="card mb-4">
<div class="card-header bg-info text-white">
<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Reports Map</h5>
</div>
<div class="card-body p-0">
<map-multipoint
api-key="{{ .MapboxToken }}"
latitude="36.3"
longitude="-119.2"
tegola="{{.URL.Tegola}}"
zoom="9"
/></map-multipoint>
</div>
</div>
<!-- Results Section -->
<div class="card">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0"><i class="fas fa-list me-2"></i>Reports Near You</h5>
<span class="badge bg-light text-dark">15 Reports Found</span>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<report-table />
</div>
</div>
<!--
<div class="card-footer">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
-->
</div>
</div>
{{end}}

View file

@ -0,0 +1,571 @@
{{template "base.html" .}}
{{define "title"}}Standing Water{{end}}
{{define "extraheader"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<script src="/static/js/address-display.js"></script>
<script src="/static/js/address-suggestion.js"></script>
<script src="/static/js/geocode.js"></script>
<script src="/static/js/location.js"></script>
<script src="/static/js/map-locator.js"></script>
{{template "photo-upload-header"}}
<style>
.district-logo {
max-height: 80px;
width: auto;
}
.form-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid #dee2e6;
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 1rem;
padding-bottom: 0;
}
.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;
}
.section-heading {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.section-heading i {
margin-right: 10px;
font-size: 1.5rem;
color: #0d6efd;
}
.optional-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: normal;
margin-left: 8px;
}
.submit-container {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin-top: 2rem;
}
</style>
<script>
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
function handlePhotoSelection() {
const photoInput = document.getElementById('photos');
const photoPreviewContainer = document.getElementById('photoPreviewContainer');
// Clear previous previews
photoPreviewContainer.innerHTML = '';
// Check if files were selected
if (photoInput.files && photoInput.files.length > 0) {
// Loop through selected files
Array.from(photoInput.files).forEach((file, index) => {
console.log("Handling", index, file);
if (!file.type.match('image.*')) {
console.log("Skipping non-image file", file.type);
return; // Skip non-image files
}
// Create preview container
const previewContainer = document.createElement('div');
previewContainer.className = 'position-relative m-1';
// Create image preview
const img = document.createElement('img');
img.className = 'img-thumbnail';
img.style.width = '100px';
img.style.height = '100px';
img.style.objectFit = 'cover';
// Read file and set preview
const reader = new FileReader();
reader.onload = (e) => {
img.src = e.target.result;
};
reader.readAsDataURL(file);
// Create remove button
const removeBtn = document.createElement('button');
removeBtn.type = 'button';
removeBtn.className = 'btn btn-sm btn-danger position-absolute top-0 end-0';
removeBtn.innerHTML = '&times;';
removeBtn.style.fontSize = '10px';
removeBtn.style.padding = '0 5px';
// Handle remove button click
removeBtn.addEventListener('click', function() {
// Create a new FileList without this file
// Since FileList is immutable, we need to reset the input
// This is a bit tricky and requires recreating the input
previewContainer.remove();
// If this was the last image, clear the input entirely
if (photoPreviewContainer.children.length === 0) {
photoInput.value = '';
}
// Note: Unfortunately, selectively removing files from a FileList isn't straightforward
// In a real implementation, we might track selected files in an array and recreate the input
});
// Add elements to the preview container
previewContainer.appendChild(img);
previewContainer.appendChild(removeBtn);
photoPreviewContainer.appendChild(previewContainer);
});
}
}
function setLocationInputs(location) {
let country = document.getElementById('address-country');
let latitude = document.getElementById('latitude');
let longitude = document.getElementById('longitude');
let latlngAccuracyType = document.getElementById('latlng-accuracy-type');
let postcode = document.getElementById('address-postcode');
let place = document.getElementById('address-place');
let region = document.getElementById('address-region');
let street = document.getElementById('address-street');
// Extract context data from properties
const props = location.properties;
const context = props.context || {};
// Populate structured fields
country.value = context.country.name;
latitude.value = props.coordinates.latitude;
longitude.value = props.coordinates.longitude;
latlngAccuracyType.value = props.coordinates.accuracy;
postcode.value = context.postcode.name;
place.value = context.place.name;
region.value = context.region.name;
street.value = context.country.name;
}
function toggleCollapse(something) {
el = document.getElementById(something)
if (el.classList.contains('collapse')) {
el.classList.remove('collapse');
} else {
el.classList.add('collapse');
}
}
document.addEventListener('DOMContentLoaded', function() {
// Elements
const photoInput = document.getElementById('photos');
// Handle photo selection
photoInput.addEventListener('change', handlePhotoSelection);
// Handle drag and drop
const photoDropArea = document.getElementById('photoDropArea');
photoDropArea.addEventListener('dragover', function(e) {
e.preventDefault();
photoDropArea.style.backgroundColor = '#e9ecef';
});
photoDropArea.addEventListener('dragleave', function() {
photoDropArea.style.backgroundColor = '#f8f9fa';
});
photoDropArea.addEventListener('drop', function(e) {
e.preventDefault();
photoDropArea.style.backgroundColor = '#f8f9fa';
if (e.dataTransfer.files.length) {
handleFiles(e.dataTransfer.files);
}
});
const mapLocator = document.querySelector("map-locator");
mapLocator.addEventListener("load", (event) => {
getGeolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}).then(position => {
mapLocator.jumpTo({
center: {
lng: position.coords.longitude,
lat: position.coords.latitude,
},
zoom: 14,
});
mapLocator.setMarker([
position.coords.longitude,
position.coords.latitude,
]);
geocodeReverse(MAPBOX_ACCESS_TOKEN, {
lat: position.coords.latitude,
lng: position.coords.longitude,
});
}).catch(error => {
console.log("location error", error);
})
})
let mapZoom = document.getElementById('map-zoom');
mapLocator.addEventListener("zoomend", function(e) {
mapZoom.value = e.target.getZoom();
});
mapLocator.addEventListener("markerdragend", (e) => {
const lngLat = marker.getLngLat();
//displaySelectedCoordinates(lngLat);
geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat);
});
const addressDisplay = document.querySelector("address-display");
const addressInput = document.querySelector("address-input");
addressInput.addEventListener("address-selected", (event) => {
const l = event.detail.location;
console.log("Address selected", l);
// Center map on selected address
mapSetMarker(l.geometry.coordinates);
mapJumpTo({
center: l.geometry.coordinates,
zoom: 14,
});
addressDisplay.show(l);
setLocationInputs(l);
});
});
function displaySelectedCoordinates(lngLat) {
const gpsDisplay = document.getElementById("gps-display");
gpsDisplay.classList.remove('d-none');
longitude.textContent = lngLat.lng;
latitude.textContent = lngLat.lat;
}
</script>
{{end}}
{{define "content"}}
{{if .District}}
{{template "header" .}}
{{end}}
<!-- Main Content -->
<main class="py-5">
<div class="container">
<!-- Page Title -->
<div class="row mb-4">
<div class="col-12">
<h2>Report Standing Water</h2>
<p class="lead">Help us locate and treat potential mosquito production sources in your area</p>
</div>
</div>
<!-- Info Alert -->
<div class="row mb-4">
<div class="col-12">
<div class="alert alert-info" role="alert">
<h5 class="alert-heading"><i class="bi bi-info-circle me-2"></i>All fields are optional</h5>
<p class="mb-0">We appreciate any information you can provide. The more details you share, the better we can address the issue. Photos and location information are especially helpful.</p>
</div>
</div>
</div>
<!-- Report Form -->
<form id="standingWater" action="/water-submit" method="POST" enctype="multipart/form-data">
<!-- Photo Upload Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-camera"></i>
<h3>Photos</h3>
</div>
<p class="mb-3">Photos help us identify the severity of the issue and may contain location data that can help us find the production source.</p>
<div class="mb-4">
{{template "photo-upload"}}
</div>
</div>
<!-- Additional Information Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-card-text"></i>
<h3>Additional Information</h3>
</div>
<p class="mb-3">Please provide any other information that might help us address this mosquito production source.</p>
<div class="row">
<div class="col-md-12">
<label for="comments" class="form-label">Additional Details</label>
<textarea class="form-control" id="comments" name="comments" rows="4" placeholder="Example: The house appears to be vacant. There is algae growth in the pool. I've noticed increased mosquito activity in the evenings."></textarea>
</div>
</div>
</div>
<!-- Location Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-geo-alt"></i>
<h3>Location</h3>
</div>
<p class="mb-3">Please provide the location of the potential mosquito production source. We may be able to extract this information from your photos if they contain location data.</p>
<div class="row mb-3">
<!-- Hidden fields for location data -->
<input type="hidden" id="address-country" name="address-country"/>
<input type="hidden" id="address-postcode" name="address-postcode"/>
<input type="hidden" id="address-place" name="address-place"/>
<input type="hidden" id="address-region" name="address-region"/>
<input type="hidden" id="address-street" name="address-street"/>
<input type="hidden" id="latitude" name="latitude"/>
<input type="hidden" id="longitude" name="longitude"/>
<input type="hidden" id="latlng-accuracy-type" name="latlng-accuracy-type"/>
<input type="hidden" id="latlng-accuracy-value" name="latlng-accuracy-value"/>
<div class="col-md-6">
<div class="mb-3 position-relative">
<address-input
placeholder="Start typing an address (min 3 characters)"
api-key="{{ .MapboxToken }}">
</address-input>
</div>
</div>
</div>
<p class="small text-muted mb-2">You can also click on the map to mark the location precisely</p>
<map-locator api-key="{{ .MapboxToken }}"></map-locator>
<input type="hidden" id="map-zoom" name="map-zoom"/>
</div>
<button class="btn btn-warning" type="button" onClick="toggleCollapse('collapse-additional-fields')">
Answer a few more questions to better help us solve your mosquito problem
</button>
<div class="collapse" id="collapse-additional-fields">
<!-- Source Details Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-water"></i>
<h3>Source Details</h3>
</div>
<div class="row mb-4">
<div class="col-md-6">
<label for="duration" class="form-label">How long has this production source been present?</label>
<select class="form-select" id="duration" name="source-duration">
<option value="none">I don't know</option>
<option value="less-than-week">Less than a week</option>
<option value="1-2-weeks">1-2 weeks</option>
<option value="2-4-weeks">2-4 weeks</option>
<option value="1-3-months">1-3 months</option>
<option value="more-than-3-months">More than 3 months</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label d-block">Have you observed any of the following? <a href="#" data-bs-toggle="modal" data-bs-target="#larvaeInfoModal"><i class="bi bi-question-circle small ms-1"></i></a></label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="larvae" name="has-larvae">
<label class="form-check-label" for="larvae">
Larvae (wigglers) in water
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pupae" name="has-pupae">
<label class="form-check-label" for="pupae">
Pupae (tumblers) in water
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="adult" name="has-adult">
<label class="form-check-label" for="adult">
Adult mosquitoes near the source
</label>
</div>
</div>
</div>
</div>
<!-- Access Information Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-unlock"></i>
<h3>Access Information</h3>
</div>
<p class="mb-3">Please provide any details about how to access the mosquito source. This helps our technicians when they visit the site.</p>
<div class="row mb-3">
<div class="col-md-12">
<label for="access-comments" class="form-label">How can the source be accessed?</label>
<textarea class="form-control" id="access-comments" name="access-comments" rows="3" placeholder="Example: The pool is in the backyard, which can be accessed through a side gate on the right side of the house."></textarea>
</div>
</div>
<div class="row mb-3">
<div class="col-md-12">
<label class="form-label d-block">Access obstacles (check all that apply):</label>
<div class="row">
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gate" name="access-gate">
<label class="form-check-label" for="gate">Gate</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="fence" name="access-fence">
<label class="form-check-label" for="fence">Fence</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="locked" name="access-locked">
<label class="form-check-label" for="locked">Locked entrance</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="dogs" name="access-dog">
<label class="form-check-label" for="dogs">Dogs/pets</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="access-other" name="access-other">
<label class="form-check-label" for="access-other">Other obstacle</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Information Sections -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-person-lines-fill"></i>
<h3>Contact Information</h3>
</div>
<!-- Property Owner Information -->
<h5 class="mb-3">Property Owner Information (if known)</h5>
<div class="row mb-4">
<div class="col-md-6 mb-3">
<label for="owner-name" class="form-label">Owner Name</label>
<input type="text" class="form-control" id="owner-name" name="owner-name">
</div>
<div class="col-md-6 mb-3">
<label for="owner-phone" class="form-label">Owner Phone</label>
<input type="tel" class="form-control" id="owner-phone" name="owner-phone">
</div>
<div class="col-md-12">
<label for="owner-email" class="form-label">Owner Email</label>
<input type="email" class="form-control" id="owner-email" name="owner-email">
</div>
</div>
<!-- Your Contact Information -->
<h5 class="mb-3">Your Contact Information (for updates)</h5>
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label for="reporter-name" class="form-label">Your Name</label>
<input type="text" class="form-control" id="reporter-name" name="reporter-name">
</div>
<div class="col-md-6 mb-3">
<label for="reporter-phone" class="form-label">Your Phone</label>
<input type="tel" class="form-control" id="reporter-phone" name="reporter-phone">
</div>
<div class="col-md-12 mb-3">
<label for="reporter-email" class="form-label">Your Email</label>
<input type="email" class="form-control" id="reporter-email" name="reporter-email">
</div>
<div class="col-md-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="subscribe" name="subscribe" checked>
<label class="form-check-label" for="subscribe">
I would like to receive updates on this report
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Submit Section -->
<div class="submit-container">
<div class="row align-items-center">
<div class="col-md-8">
<p class="mb-0"><strong>Thank you for helping us keep our community safe from mosquito-borne illnesses.</strong></p>
<p class="mb-0 small text-muted">After submission, you will receive a confirmation with a report ID for tracking purposes.</p>
</div>
<div class="col-md-4 text-md-end mt-3 mt-md-0">
<a class="btn btn-primary btn-lg" href="{{.URL.NuisanceSubmitComplete}}">
Submit Report
</a>
</div>
</div>
</div>
</form>
</div>
</main>
<!-- Larvae Info Modal -->
<div class="modal fade" id="larvaeInfoModal" tabindex="-1" aria-labelledby="larvaeInfoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="larvaeInfoModalLabel">How to Identify Mosquito Larvae and Pupae</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-4">
<div class="col-md-6">
<h6>Mosquito Larvae (Wigglers)</h6>
<p>Mosquito larvae, often called "wigglers," are:</p>
<ul>
<li>Small, worm-like aquatic organisms</li>
<li>Usually 1/4 to 1/2 inch long</li>
<li>Move with a wiggling motion in water</li>
<li>Hang upside-down at the water surface to breathe</li>
<li>Visible to the naked eye in standing water</li>
</ul>
</div>
<div class="col-md-6">
<h6>Mosquito Pupae (Tumblers)</h6>
<p>Mosquito pupae, often called "tumblers," are:</p>
<ul>
<li>Comma-shaped organisms</li>
<li>Typically darker than larvae</li>
<li>Move with a tumbling motion when disturbed</li>
<li>Rest at the water surface</li>
<li>The stage just before adult mosquitoes emerge</li>
</ul>
</div>
</div>
<p>When looking for mosquito larvae and pupae, check standing water sources like:</p>
<ul>
<li>Swimming pools</li>
<li>Bird baths</li>
<li>Buckets or containers</li>
<li>Drainage ditches</li>
<li>Plant saucers</li>
<li>Rain gutters</li>
</ul>
<p>If you see small creatures moving in standing water, there's a good chance they're mosquito larvae or pupae.</p>
<div class="text-center">
<a href="#" class="btn btn-outline-primary">View Detailed Identification Guide</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{{end}}

View file

@ -0,0 +1,115 @@
{{template "base.html" .}}
{{define "title"}}Nuisance Submission Complete{{end}}
{{define "extraheader"}}
<style>
</style>
<script>
</script>
{{end}}
{{define "content"}}
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-7">
<!-- Confirmation Card -->
<div class="card shadow-sm border-info mb-4">
<div class="card-header bg-info text-white">
<h3 class="my-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bell-fill me-2" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
</svg>
Nuisance Report Complete
</h3>
</div>
<div class="card-body p-4 text-center">
<div class="mb-4">
<div class="display-1 text-info mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
</div>
<h4 class="mb-3">Thank You!</h4>
<p class="lead">Your report has been successfully submitted.</p>
<div class="alert alert-secondary py-3 mt-3">
<strong>Report ID:</strong>
<span class="fs-5">{{.ReportID|publicReportID}}</span>
</div>
</div>
<hr class="my-4">
<!-- What to Expect Section -->
<div class="text-start mb-4">
<h5>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-info-circle me-2" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
What to Expect
</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-check me-2 text-success" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/>
<path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"/>
</svg>
A confirmation message has been sent to your contact information.
</li>
<li class="list-group-item bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check me-2 text-success" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
You will receive updates when:
<ul class="mt-2">
<li>Your report is assigned to a specialist</li>
<li>A site visit is scheduled</li>
<li>Treatment or remediation is completed</li>
<li>The case is resolved</li>
</ul>
</li>
<li class="list-group-item bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search me-2 text-success" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
You can check your report status anytime using your Report ID.
</li>
</ul>
</div>
<!-- Navigation Buttons -->
<div class="mt-4">
<a href="/status/{{.ReportID}}" class="btn btn-outline-primary me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search me-1" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
Check Report Status
</a>
<a href="/" class="btn btn-outline-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house me-1" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
</svg>
Return to Home
</a>
</div>
</div>
</div>
<!-- Optional: Additional Information Section -->
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-question-circle me-2" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
</svg>
Need Help?
</h5>
<p>If you need to update your contact information or have questions about your report, please contact our Mosquito Control Unit at <strong>(123) 456-7890</strong> or <a href="mailto:mosquito@example.gov">mosquito@example.gov</a> and reference your Report ID.</p>
</div>
</div>
</div>
</div>
</div>
{{end}}

500
rmo/template/nuisance.html Normal file
View file

@ -0,0 +1,500 @@
{{template "base.html" .}}
{{define "title"}}Nuisance{{end}}
{{define "extraheader"}}
<script>
// Handle inspection type selection
function selectInspectionType(type) {
// Remove selected class from both cards
document.getElementById('propertyInspection').classList.remove('selected');
document.getElementById('neighborhoodInspection').classList.remove('selected');
// Add selected class to chosen card
if (type === 'property') {
document.getElementById('propertyInspection').classList.add('selected');
document.getElementById('inspectionTypeProperty').checked = true;
document.getElementById('schedulingSection').style.display = 'block';
} else {
document.getElementById('neighborhoodInspection').classList.add('selected');
document.getElementById('inspectionTypeNeighborhood').checked = true;
document.getElementById('schedulingSection').style.display = 'none';
}
}
// Check for source identification
document.addEventListener('DOMContentLoaded', function() {
const sourceCheckboxes = [
document.getElementById('sourceStagnantWater'),
document.getElementById('sourceContainers'),
document.getElementById('sourceGutters')
];
const sourceAlert = document.getElementById('sourceFoundAlert');
sourceCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
// If any source is checked, show the alert
if (sourceCheckboxes.some(cb => cb.checked)) {
sourceAlert.style.display = 'block';
} else {
sourceAlert.style.display = 'none';
}
});
});
});
</script>
<style>
.district-logo {
max-height: 80px;
width: auto;
}
.form-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid #dee2e6;
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 1rem;
padding-bottom: 0;
}
.section-heading {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.section-heading i {
margin-right: 10px;
font-size: 1.5rem;
color: #0d6efd;
}
.optional-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: normal;
margin-left: 8px;
}
.submit-container {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin-top: 2rem;
}
.source-card {
height: 100%;
transition: transform 0.3s;
}
.source-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.source-icon {
font-size: 2rem;
margin-bottom: 1rem;
color: #0d6efd;
}
.time-of-day-btn {
width: 100%;
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px 0;
}
.time-of-day-icon {
font-size: 1.5rem;
margin-bottom: 8px;
}
.time-label {
font-size: 0.9rem;
}
.severity-item {
text-align: center;
padding: 10px;
}
.severity-scale {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.btn-check:checked + .btn.time-of-day-btn {
background-color: #0d6efd;
color: white;
}
.inspection-type-card {
cursor: pointer;
border: 1px solid #dee2e6;
padding: 20px;
border-radius: 5px;
height: 100%;
transition: all 0.3s;
}
.inspection-type-card.selected {
border-color: #0d6efd;
background-color: rgba(13, 110, 253, 0.05);
}
.inspection-type-card:hover {
border-color: #0d6efd;
}
.card-highlight {
border-left: 4px solid #0d6efd;
background-color: #f8f9fa;
}
</style>
{{end}}
{{define "content"}}
<div class="container">
<!-- Page Title -->
<div class="row mb-4">
<div class="col-12">
<h2>Report Mosquito Nuisance</h2>
<p class="lead">Help us identify mosquito activity in your area</p>
</div>
</div>
<!-- Info Alert -->
<div class="row mb-4">
<div class="col-12">
<div class="alert alert-info" role="alert">
<h5 class="alert-heading"><i class="bi bi-info-circle me-2"></i>About Mosquito Control</h5>
<p class="mb-0">While we don't spray for adult mosquitoes based on individual requests, your reports help us identify and eliminate breeding sources. Adult mosquito control is based on trap counts and disease testing. Your detailed information helps us prioritize our work and locate potential breeding sites.</p>
</div>
</div>
</div>
<!-- Report Form -->
<form id="mosquitoNuisanceForm" action="/nuisance-submit" method="POST">
<!-- Mosquito Activity Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-bug"></i>
<h3>Mosquito Activity Information</h3>
<span class="optional-label">optional</span>
</div>
<p class="mb-4">The time when mosquitoes are active can help us identify the species and likely breeding sources.</p>
<!-- Time of Day -->
<div class="row mb-4">
<div class="col-12">
<label class="form-label">When do you typically notice mosquitoes? (Select all that apply)</label>
<div class="row">
<div class="col-6 col-md-3">
<input type="checkbox" class="btn-check" id="earlyMorning" name="tod-early" autocomplete="off">
<label class="btn btn-outline-primary time-of-day-btn" for="earlyMorning">
<span class="time-of-day-icon"><i class="bi bi-sunrise"></i></span>
<span class="time-label">Early Morning</span>
<small class="text-muted">5am-8am</small>
</label>
</div>
<div class="col-6 col-md-3">
<input type="checkbox" class="btn-check" id="daytime" name="tod-day" autocomplete="off">
<label class="btn btn-outline-primary time-of-day-btn" for="daytime">
<span class="time-of-day-icon"><i class="bi bi-sun"></i></span>
<span class="time-label">Daytime</span>
<small class="text-muted">8am-5pm</small>
</label>
</div>
<div class="col-6 col-md-3">
<input type="checkbox" class="btn-check" id="evening" name="tod-evening" autocomplete="off">
<label class="btn btn-outline-primary time-of-day-btn" for="evening">
<span class="time-of-day-icon"><i class="bi bi-sunset"></i></span>
<span class="time-label">Evening</span>
<small class="text-muted">5pm-9pm</small>
</label>
</div>
<div class="col-6 col-md-3">
<input type="checkbox" class="btn-check" id="night" name="tod-night" autocomplete="off">
<label class="btn btn-outline-primary time-of-day-btn" for="night">
<span class="time-of-day-icon"><i class="bi bi-moon-stars"></i></span>
<span class="time-label">Night</span>
<small class="text-muted">9pm-5am</small>
</label>
</div>
</div>
</div>
</div>
<!-- Duration -->
<div class="row mb-4">
<div class="col-md-6">
<label for="duration" class="form-label">How long have you been experiencing this mosquito problem?</label>
<select class="form-select" name="duration">
<option value="just-noticed">Just noticed recently</option>
<option value="few-days">A few days</option>
<option value="1-2-weeks">1-2 weeks</option>
<option value="2-4-weeks">2-4 weeks</option>
<option value="1-3-months">1-3 months</option>
<option value="seasonal">All season (recurring issue)</option>
</select>
</div>
<!-- Severity -->
<div class="col-md-6">
<label for="severityRange" class="form-label">How would you rate the severity of the mosquito problem?</label>
<input type="range" class="form-range" id="severityRange" min="1" max="5" name="severity" oninput="document.getElementById('severityValue').innerText = this.value">
<div class="severity-scale">
<div class="severity-item">
<div>Minor</div>
<small>Occasional mosquito</small>
</div>
<div class="severity-item">
<div>Moderate</div>
<small>Regular presence</small>
</div>
<div class="severity-item">
<div>Severe</div>
<small>Many mosquitoes</small>
</div>
</div>
<div class="text-center">
Current selection: <span id="severityValue">3</span>/5
</div>
</div>
</div>
<!-- Location -->
<div class="row">
<div class="col-md-12">
<label for="source-location" class="form-label">Where on your property do you notice the most mosquito activity?</label>
<select class="form-select" name="source-location">
<option value="">Please select</option>
<option value="front-yard">Front yard</option>
<option value="backyard">Back yard</option>
<option value="patio">Patio/deck area</option>
<option value="garden">Garden</option>
<option value="pool-area">Pool area</option>
<option value="throughout">Throughout the property</option>
<option value="indoors">Indoors</option>
<option value="other">Other area</option>
</select>
</div>
</div>
</div>
<!-- Potential Sources Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-search"></i>
<h3>Potential Mosquito Sources</h3>
<span class="optional-label">optional</span>
</div>
<p class="mb-3">Have you noticed any of these common mosquito breeding sources in your area?</p>
<div class="card card-highlight mb-4">
<div class="card-body">
<h5 class="card-title">Did you know?</h5>
<p class="card-text">Mosquitoes can breed in as little as a bottle cap of water! Eliminating standing water is the most effective way to reduce mosquito populations.</p>
</div>
</div>
<div class="row g-4 mb-4">
<!-- Source 1 -->
<div class="col-md-4">
<div class="card source-card">
<div class="card-body text-center">
<div class="source-icon">
<i class="bi bi-water"></i>
</div>
<h5 class="card-title">Stagnant Water</h5>
<p class="card-text">Green pools, ponds, fountains, or birdbaths that aren't maintained</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="source-stagnant" id="sourceStagnantWater">
<label class="form-check-label" for="sourceStagnantWater">
I've noticed this
</label>
</div>
</div>
</div>
</div>
<!-- Source 2 -->
<div class="col-md-4">
<div class="card source-card">
<div class="card-body text-center">
<div class="source-icon">
<i class="bi bi-droplet"></i>
</div>
<h5 class="card-title">Containers</h5>
<p class="card-text">Buckets, planters, toys, tires, or any items that collect rainwater</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="source-container" id="sourceContainers">
<label class="form-check-label" for="sourceContainers">
I've noticed this
</label>
</div>
</div>
</div>
</div>
<!-- Source 3 -->
<div class="col-md-4">
<div class="card source-card">
<div class="card-body text-center">
<div class="source-icon">
<i class="bi bi-house"></i>
</div>
<h5 class="card-title">Roof & Gutters</h5>
<p class="card-text">Clogged gutters, flat roofs, or AC units that collect water</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="source-roof" id="sourceGutters">
<label class="form-check-label" for="sourceGutters">
I've noticed this
</label>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-warning mb-4" id="sourceFoundAlert" style="display: none;">
<h5 class="alert-heading"><i class="bi bi-exclamation-triangle me-2"></i>Potential Breeding Source Found!</h5>
<p>It looks like you may have identified a mosquito breeding source. If you'd like to report a specific source (like a green pool), please use our <a href="/report-green-pool" class="alert-link">Report a Green Pool</a> form for faster service.</p>
</div>
<div class="row">
<div class="col-md-12">
<label for="otherSources" class="form-label">Have you noticed any other potential mosquito breeding sources?</label>
<textarea class="form-control" id="otherSources" name="source-description" rows="2" placeholder="Describe any other potential breeding sites you've noticed..."></textarea>
</div>
</div>
</div>
<!-- Inspection Request Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-clipboard-check"></i>
<h3>Inspection Request</h3>
</div>
<p class="mb-4">Would you like our technicians to inspect for potential mosquito sources?</p>
<div class="row g-4 mb-4">
<div class="col-md-6">
<div class="inspection-type-card" onclick="selectInspectionType('property')" id="propertyInspection">
<h5><i class="bi bi-house-door me-2"></i>Property Inspection</h5>
<p>Request a technician to inspect your property for mosquito sources. We'll contact you to schedule a convenient time.</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="inspection-type" id="inspectionTypeProperty" value="property">
<label class="form-check-label" for="inspectionTypeProperty">
<strong>Schedule a property inspection</strong>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="inspection-type-card" onclick="selectInspectionType('neighborhood')" id="neighborhoodInspection">
<h5><i class="bi bi-map me-2"></i>Neighborhood Inspection</h5>
<p>Request a general inspection of your neighborhood. We'll survey the area for potential mosquito breeding sources.</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="inspection-type" id="inspectionTypeNeighborhood" value="neighborhood">
<label class="form-check-label" for="inspectionTypeNeighborhood">
<strong>Request neighborhood inspection</strong>
</label>
</div>
</div>
</div>
</div>
<!-- Property Inspection Scheduling (hidden by default) -->
<div id="schedulingSection" style="display: none;">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Schedule Property Inspection</h5>
<p class="card-text">Please indicate your availability for a technician visit.</p>
<div class="row mb-3">
<div class="col-md-6">
<label for="preferredDateRange" class="form-label">Preferred Date Range</label>
<select class="form-select" id="preferredDateRange" name="preferred-date-range">
<option value="">Select preferred dates</option>
<option value="next-week">Next week</option>
<option value="in-two-weeks">In two weeks</option>
<option value="any-time">Any time</option>
</select>
</div>
<div class="col-md-6">
<label for="preferredTime" class="form-label">Preferred Time of Day</label>
<select class="form-select" id="preferredTime" name="preferred-time">
<option value="">Select preferred time</option>
<option value="morning">Morning (8am-12pm)</option>
<option value="afternoon">Afternoon (12pm-4pm)</option>
<option value="any-time">Any time</option>
</select>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="requestCall" name="request-call">
<label class="form-check-label" for="requestCall">
Please call me to schedule a specific appointment time
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Location & Contact Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-geo-alt"></i>
<h3>Location & Contact Information</h3>
</div>
<div class="row mb-4">
<div class="col-md-12">
<label for="address" class="form-label">Your Address</label>
<input type="text" class="form-control" name="address" placeholder="Enter your street address">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="name" class="form-label">Your Name</label>
<input type="text" class="form-control" name="name">
</div>
<div class="col-md-6 mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input type="tel" class="form-control" id="phone" name="phone">
</div>
<div class="col-md-12 mb-3">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" name="email">
<div class="form-text">We'll use this to send you a confirmation and follow-up information.</div>
</div>
</div>
</div>
<div class="form-section">
<div class="section-heading">
<i class="bi bi-card-text"></i>
<h3>Additional Information</h3>
<span class="optional-label">optional</span>
</div>
<div class="row">
<div class="col-md-12">
<label for="additionalInfo" class="form-label">Is there anything else you'd like us to know?</label>
<textarea class="form-control" id="additionalInfo" name="additional-info" rows="4" placeholder="Additional details about the mosquito issue..."></textarea>
</div>
</div>
</div>
<!-- Submit Section -->
<div class="submit-container">
<div class="row align-items-center">
<div class="col-md-8">
<p class="mb-0"><strong>Thank you for reporting this mosquito issue.</strong></p>
<p class="mb-0 small text-muted">After submission, you'll receive a confirmation with a report ID and further information.</p>
</div>
<div class="col-md-4 text-md-end mt-3 mt-md-0">
<button type="submit" class="btn btn-primary btn-lg">
Submit Report
</button>
</div>
</div>
</div>
</form>
</div>
{{end}}

View file

@ -0,0 +1,115 @@
{{template "base.html" .}}
{{define "title"}}Nuisance Submission Complete{{end}}
{{define "extraheader"}}
<style>
</style>
<script>
</script>
{{end}}
{{define "content"}}
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-7">
<!-- Confirmation Card -->
<div class="card shadow-sm border-info mb-4">
<div class="card-header bg-info text-white">
<h3 class="my-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bell-fill me-2" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
</svg>
Pool Report Complete
</h3>
</div>
<div class="card-body p-4 text-center">
<div class="mb-4">
<div class="display-1 text-info mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
</div>
<h4 class="mb-3">Thank You!</h4>
<p class="lead">Your report has been successfully submitted.</p>
<div class="alert alert-secondary py-3 mt-3">
<strong>Report ID:</strong>
<span class="fs-5">{{.ReportID|publicReportID}}</span>
</div>
</div>
<hr class="my-4">
<!-- What to Expect Section -->
<div class="text-start mb-4">
<h5>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-info-circle me-2" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
What to Expect
</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-check me-2 text-success" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/>
<path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"/>
</svg>
A confirmation message has been sent to your contact information.
</li>
<li class="list-group-item bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check me-2 text-success" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
You will receive updates when:
<ul class="mt-2">
<li>Your report is assigned to a specialist</li>
<li>A site visit is scheduled</li>
<li>Treatment or remediation is completed</li>
<li>The case is resolved</li>
</ul>
</li>
<li class="list-group-item bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search me-2 text-success" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
You can check your report status anytime using your Report ID.
</li>
</ul>
</div>
<!-- Navigation Buttons -->
<div class="mt-4">
<a href="/status/{{.ReportID}}" class="btn btn-outline-primary me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search me-1" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
Check Report Status
</a>
<a href="/" class="btn btn-outline-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house me-1" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
</svg>
Return to Home
</a>
</div>
</div>
</div>
<!-- Optional: Additional Information Section -->
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-question-circle me-2" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
</svg>
Need Help?
</h5>
<p>If you need to update your contact information or have questions about your report, please contact our Mosquito Control Unit at <strong>(123) 456-7890</strong> or <a href="mailto:mosquito@example.gov">mosquito@example.gov</a> and reference your Report ID.</p>
</div>
</div>
</div>
</div>
</div>
{{end}}

572
rmo/template/pool.html Normal file
View file

@ -0,0 +1,572 @@
{{template "base.html" .}}
{{define "title"}}Green Pool{{end}}
{{define "extraheader"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<script src="/static/js/address-display.js"></script>
<script src="/static/js/address-suggestion.js"></script>
<script src="/static/js/geocode.js"></script>
<script src="/static/js/location.js"></script>
<script src="/static/js/map-locator.js"></script>
{{template "photo-upload-header"}}
<style>
.district-logo {
max-height: 80px;
width: auto;
}
.form-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid #dee2e6;
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 1rem;
padding-bottom: 0;
}
.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;
}
.section-heading {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.section-heading i {
margin-right: 10px;
font-size: 1.5rem;
color: #0d6efd;
}
.optional-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: normal;
margin-left: 8px;
}
.submit-container {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
margin-top: 2rem;
}
</style>
<script>
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
function handlePhotoSelection() {
const photoInput = document.getElementById('photos');
const photoPreviewContainer = document.getElementById('photoPreviewContainer');
// Clear previous previews
photoPreviewContainer.innerHTML = '';
// Check if files were selected
if (photoInput.files && photoInput.files.length > 0) {
// Loop through selected files
Array.from(photoInput.files).forEach((file, index) => {
console.log("Handling", index, file);
if (!file.type.match('image.*')) {
console.log("Skipping non-image file", file.type);
return; // Skip non-image files
}
// Create preview container
const previewContainer = document.createElement('div');
previewContainer.className = 'position-relative m-1';
// Create image preview
const img = document.createElement('img');
img.className = 'img-thumbnail';
img.style.width = '100px';
img.style.height = '100px';
img.style.objectFit = 'cover';
// Read file and set preview
const reader = new FileReader();
reader.onload = (e) => {
img.src = e.target.result;
};
reader.readAsDataURL(file);
// Create remove button
const removeBtn = document.createElement('button');
removeBtn.type = 'button';
removeBtn.className = 'btn btn-sm btn-danger position-absolute top-0 end-0';
removeBtn.innerHTML = '&times;';
removeBtn.style.fontSize = '10px';
removeBtn.style.padding = '0 5px';
// Handle remove button click
removeBtn.addEventListener('click', function() {
// Create a new FileList without this file
// Since FileList is immutable, we need to reset the input
// This is a bit tricky and requires recreating the input
previewContainer.remove();
// If this was the last image, clear the input entirely
if (photoPreviewContainer.children.length === 0) {
photoInput.value = '';
}
// Note: Unfortunately, selectively removing files from a FileList isn't straightforward
// In a real implementation, we might track selected files in an array and recreate the input
});
// Add elements to the preview container
previewContainer.appendChild(img);
previewContainer.appendChild(removeBtn);
photoPreviewContainer.appendChild(previewContainer);
});
}
}
function setLocationInputs(location) {
let country = document.getElementById('address-country');
let latitude = document.getElementById('latitude');
let longitude = document.getElementById('longitude');
let latlngAccuracyType = document.getElementById('latlng-accuracy-type');
let postcode = document.getElementById('address-postcode');
let place = document.getElementById('address-place');
let region = document.getElementById('address-region');
let street = document.getElementById('address-street');
// Extract context data from properties
const props = location.properties;
const context = props.context || {};
// Populate structured fields
country.value = context.country.name;
latitude.value = props.coordinates.latitude;
longitude.value = props.coordinates.longitude;
latlngAccuracyType.value = props.coordinates.accuracy;
postcode.value = context.postcode.name;
place.value = context.place.name;
region.value = context.region.name;
street.value = context.country.name;
}
document.addEventListener('DOMContentLoaded', function() {
// Elements
const photoInput = document.getElementById('photos');
// Handle photo selection
photoInput.addEventListener('change', handlePhotoSelection);
// Handle drag and drop
const photoDropArea = document.getElementById('photoDropArea');
photoDropArea.addEventListener('dragover', function(e) {
e.preventDefault();
photoDropArea.style.backgroundColor = '#e9ecef';
});
photoDropArea.addEventListener('dragleave', function() {
photoDropArea.style.backgroundColor = '#f8f9fa';
});
photoDropArea.addEventListener('drop', function(e) {
e.preventDefault();
photoDropArea.style.backgroundColor = '#f8f9fa';
if (e.dataTransfer.files.length) {
handleFiles(e.dataTransfer.files);
}
});
const mapLocator = document.querySelector("map-locator");
mapLocator.addEventListener("load", (event) => {
getGeolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}).then(position => {
mapLocator.jumpTo({
center: {
lng: position.coords.longitude,
lat: position.coords.latitude,
},
zoom: 14,
});
mapLocator.setMarker([
position.coords.longitude,
position.coords.latitude,
]);
geocodeReverse(MAPBOX_ACCESS_TOKEN, {
lat: position.coords.latitude,
lng: position.coords.longitude,
});
}).catch(error => {
console.log("location error", error);
})
})
mapLocator.addEventListener("markerdragend",
let mapZoom = document.getElementById('map-zoom');
mapLocator.addEventListener("zoomend", function(e) {
mapZoom.value = e.target.getZoom();
});
mapLocator.addEventListener("markerdragend", (e) => {
const lngLat = marker.getLngLat();
//displaySelectedCoordinates(lngLat);
geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat);
});
const addressDisplay = document.querySelector("address-display");
const addressInput = document.querySelector("address-input");
addressInput.addEventListener("address-selected", (event) => {
const l = event.detail.location;
console.log("Address selected", l);
// Center map on selected address
mapSetMarker(l.geometry.coordinates);
mapJumpTo({
center: l.geometry.coordinates,
zoom: 14,
});
addressDisplay.show(l);
setLocationInputs(l);
});
});
function displaySelectedCoordinates(lngLat) {
const gpsDisplay = document.getElementById("gps-display");
gpsDisplay.classList.remove('d-none');
longitude.textContent = lngLat.lng;
latitude.textContent = lngLat.lat;
}
</script>
{{end}}
{{define "content"}}
<!-- Main Content -->
<main class="py-5">
<div class="container">
<!-- Page Title -->
<div class="row mb-4">
<div class="col-12">
<h2>Report a Green Pool or Mosquito Source</h2>
<p class="lead">Help us locate and treat potential mosquito breeding sources in your area</p>
</div>
</div>
<!-- Info Alert -->
<div class="row mb-4">
<div class="col-12">
<div class="alert alert-info" role="alert">
<h5 class="alert-heading"><i class="bi bi-info-circle me-2"></i>All fields are optional</h5>
<p class="mb-0">We appreciate any information you can provide. The more details you share, the better we can address the issue. Photos and location information are especially helpful.</p>
</div>
</div>
</div>
<!-- Report Form -->
<form id="greenPoolForm" action="/pool-submit" method="POST" enctype="multipart/form-data">
<!-- Photo Upload Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-camera"></i>
<h3>Photos</h3>
<span class="optional-label">optional</span>
</div>
<p class="mb-3">Photos help us identify the severity of the issue and may contain location data that can help us find the source.</p>
<div class="mb-4">
{{template "photo-upload"}}
</div>
</div>
<!-- Location Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-geo-alt"></i>
<h3>Location</h3>
<span class="optional-label">optional</span>
</div>
<p class="mb-3">Please provide the location of the potential mosquito breeding source. We may be able to extract this information from your photos if they contain location data.</p>
<div class="row mb-3">
<!-- Hidden fields for location data -->
<input type="hidden" id="address-country" name="address-country"/>
<input type="hidden" id="address-postcode" name="address-postcode"/>
<input type="hidden" id="address-place" name="address-place"/>
<input type="hidden" id="address-region" name="address-region"/>
<input type="hidden" id="address-street" name="address-street"/>
<input type="hidden" id="latitude" name="latitude"/>
<input type="hidden" id="longitude" name="longitude"/>
<input type="hidden" id="latlng-accuracy-type" name="latlng-accuracy-type"/>
<input type="hidden" id="latlng-accuracy-value" name="latlng-accuracy-value"/>
<div class="col-md-6">
<div class="mb-3 position-relative">
<address-input
placeholder="Start typing an address (min 3 characters)"
api-key="{{ .MapboxToken }}">
</address-input>
</div>
</div>
<div class="col-md-6">
<address-display></address-display>
</div>
</div>
<p class="small text-muted mb-2">You can also click on the map to mark the location precisely</p>
<map-locator api-key="{{ .MapboxToken }}"></map-locator>
<input type="hidden" id="map-zoom" name="map-zoom"/>
</div>
<!-- Source Details Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-water"></i>
<h3>Source Details</h3>
<span class="optional-label">optional</span>
</div>
<div class="row mb-4">
<div class="col-md-6">
<label for="duration" class="form-label">How long has this source been present?</label>
<select class="form-select" id="duration" name="source-duration">
<option value="none">I don't know</option>
<option value="less-than-week">Less than a week</option>
<option value="1-2-weeks">1-2 weeks</option>
<option value="2-4-weeks">2-4 weeks</option>
<option value="1-3-months">1-3 months</option>
<option value="more-than-3-months">More than 3 months</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label d-block">Have you observed any of the following? <a href="#" data-bs-toggle="modal" data-bs-target="#larvaeInfoModal"><i class="bi bi-question-circle small ms-1"></i></a></label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="larvae" name="has-larvae">
<label class="form-check-label" for="larvae">
Larvae (wigglers) in water
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="pupae" name="has-pupae">
<label class="form-check-label" for="pupae">
Pupae (tumblers) in water
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="adult" name="has-adult">
<label class="form-check-label" for="adult">
Adult mosquitoes near the source
</label>
</div>
</div>
</div>
</div>
<!-- Access Information Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-unlock"></i>
<h3>Access Information</h3>
<span class="optional-label">optional</span>
</div>
<p class="mb-3">Please provide any details about how to access the mosquito source. This helps our technicians when they visit the site.</p>
<div class="row mb-3">
<div class="col-md-12">
<label for="access-comments" class="form-label">How can the source be accessed?</label>
<textarea class="form-control" id="access-comments" name="access-comments" rows="3" placeholder="Example: The pool is in the backyard, which can be accessed through a side gate on the right side of the house."></textarea>
</div>
</div>
<div class="row mb-3">
<div class="col-md-12">
<label class="form-label d-block">Access obstacles (check all that apply):</label>
<div class="row">
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gate" name="access-gate">
<label class="form-check-label" for="gate">Gate</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="fence" name="access-fence">
<label class="form-check-label" for="fence">Fence</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="locked" name="access-locked">
<label class="form-check-label" for="locked">Locked entrance</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="dogs" name="access-dog">
<label class="form-check-label" for="dogs">Dogs/pets</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="access-other" name="access-other">
<label class="form-check-label" for="access-other">Other obstacle</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Information Sections -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-person-lines-fill"></i>
<h3>Contact Information</h3>
<span class="optional-label">optional</span>
</div>
<!-- Property Owner Information -->
<h5 class="mb-3">Property Owner Information (if known)</h5>
<div class="row mb-4">
<div class="col-md-6 mb-3">
<label for="owner-name" class="form-label">Owner Name</label>
<input type="text" class="form-control" id="owner-name" name="owner-name">
</div>
<div class="col-md-6 mb-3">
<label for="owner-phone" class="form-label">Owner Phone</label>
<input type="tel" class="form-control" id="owner-phone" name="owner-phone">
</div>
<div class="col-md-12">
<label for="owner-email" class="form-label">Owner Email</label>
<input type="email" class="form-control" id="owner-email" name="owner-email">
</div>
</div>
<!-- Your Contact Information -->
<h5 class="mb-3">Your Contact Information (for updates)</h5>
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label for="reporter-name" class="form-label">Your Name</label>
<input type="text" class="form-control" id="reporter-name" name="reporter-name">
</div>
<div class="col-md-6 mb-3">
<label for="reporter-phone" class="form-label">Your Phone</label>
<input type="tel" class="form-control" id="reporter-phone" name="reporter-phone">
</div>
<div class="col-md-12 mb-3">
<label for="reporter-email" class="form-label">Your Email</label>
<input type="email" class="form-control" id="reporter-email" name="reporter-email">
</div>
<div class="col-md-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="subscribe" name="subscribe" checked>
<label class="form-check-label" for="subscribe">
I would like to receive updates on this report
</label>
</div>
</div>
</div>
</div>
<!-- Additional Information Section -->
<div class="form-section">
<div class="section-heading">
<i class="bi bi-card-text"></i>
<h3>Additional Information</h3>
<span class="optional-label">optional</span>
</div>
<p class="mb-3">Please provide any other information that might help us address this mosquito source.</p>
<div class="row">
<div class="col-md-12">
<label for="comments" class="form-label">Additional Details</label>
<textarea class="form-control" id="comments" name="comments" rows="4" placeholder="Example: The house appears to be vacant. There is algae growth in the pool. I've noticed increased mosquito activity in the evenings."></textarea>
</div>
</div>
</div>
<!-- Submit Section -->
<div class="submit-container">
<div class="row align-items-center">
<div class="col-md-8">
<p class="mb-0"><strong>Thank you for helping us keep our community safe from mosquito-borne illnesses.</strong></p>
<p class="mb-0 small text-muted">After submission, you will receive a confirmation with a report ID for tracking purposes.</p>
</div>
<div class="col-md-4 text-md-end mt-3 mt-md-0">
<button type="submit" class="btn btn-primary btn-lg">
Submit Report
</button>
</div>
</div>
</div>
</form>
<!-- Back Button -->
<div class="row mt-4">
<div class="col-12">
<a href="/" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left"></i> Back to Home
</a>
</div>
</div>
</div>
</main>
<!-- Larvae Info Modal -->
<div class="modal fade" id="larvaeInfoModal" tabindex="-1" aria-labelledby="larvaeInfoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="larvaeInfoModalLabel">How to Identify Mosquito Larvae and Pupae</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-4">
<div class="col-md-6">
<h6>Mosquito Larvae (Wigglers)</h6>
<p>Mosquito larvae, often called "wigglers," are:</p>
<ul>
<li>Small, worm-like aquatic organisms</li>
<li>Usually 1/4 to 1/2 inch long</li>
<li>Move with a wiggling motion in water</li>
<li>Hang upside-down at the water surface to breathe</li>
<li>Visible to the naked eye in standing water</li>
</ul>
</div>
<div class="col-md-6">
<h6>Mosquito Pupae (Tumblers)</h6>
<p>Mosquito pupae, often called "tumblers," are:</p>
<ul>
<li>Comma-shaped organisms</li>
<li>Typically darker than larvae</li>
<li>Move with a tumbling motion when disturbed</li>
<li>Rest at the water surface</li>
<li>The stage just before adult mosquitoes emerge</li>
</ul>
</div>
</div>
<p>When looking for mosquito larvae and pupae, check standing water sources like:</p>
<ul>
<li>Swimming pools</li>
<li>Bird baths</li>
<li>Buckets or containers</li>
<li>Drainage ditches</li>
<li>Plant saucers</li>
<li>Rain gutters</li>
</ul>
<p>If you see small creatures moving in standing water, there's a good chance they're mosquito larvae or pupae.</p>
<div class="text-center">
<a href="#" class="btn btn-outline-primary">View Detailed Identification Guide</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{{end}}

211
rmo/template/privacy.html Normal file
View file

@ -0,0 +1,211 @@
{{template "base.html" .}}
{{define "title"}}Privacy Policy{{end}}
{{define "extraheader"}}
{{end}}
{{define "content"}}
<div class="container">
<h1>Privacy Policy</h1>
<p>Last updated: January 20, 2026</p>
<p>This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You.</p>
<p>We use Your Personal Data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy.</p>
<h2>Interpretation and Definitions</h2>
<h3>Interpretation</h3>
<p>The words whose initial letters are capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.</p>
<h3>Definitions</h3>
<p>For the purposes of this Privacy Policy:</p>
<ul>
<li>
<p><strong>Account</strong> means a unique account created for You to access our Service or parts of our Service.</p>
</li>
<li>
<p><strong>Affiliate</strong> means an entity that controls, is controlled by, or is under common control with a party, where &quot;control&quot; means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.</p>
</li>
<li>
<p><strong>Company</strong> (referred to as either &quot;the Company&quot;, &quot;We&quot;, &quot;Us&quot; or &quot;Our&quot; in this Privacy Policy) refers to {{.Company}}, {{.Address}}</p>
</li>
<li>
<p><strong>Cookies</strong> are small files that are placed on Your computer, mobile device or any other device by a website, containing the details of Your browsing history on that website among its many uses.</p>
</li>
<li>
<p><strong>Country</strong> refers to: Arizona, United States</p>
</li>
<li>
<p><strong>Device</strong> means any device that can access the Service such as a computer, a cell phone or a digital tablet.</p>
</li>
<li>
<p><strong>Personal Data</strong> (or &quot;Personal Information&quot;) is any information that relates to an identified or identifiable individual.</p>
<p>We use &quot;Personal Data&quot; and &quot;Personal Information&quot; interchangeably unless a law uses a specific term.</p>
</li>
<li>
<p><strong>Service</strong> refers to the Website.</p>
</li>
<li>
<p><strong>Service Provider</strong> means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used.</p>
</li>
<li>
<p><strong>Usage Data</strong> refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).</p>
</li>
<li>
<p><strong>Website</strong> refers to {{.Site}} accessible from <a href="{{.URLReport}}" rel="external nofollow noopener" target="_blank">{{.URLReport}}</a>.</p>
</li>
<li>
<p><strong>You</strong> means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.</p>
</li>
</ul>
<h2>Collecting and Using Your Personal Data</h2>
<h3>Types of Data Collected</h3>
<h4>Personal Data</h4>
<p>While using Our Service, We may ask You to provide Us with certain personally identifiable information that can be used to contact or identify You. Personally identifiable information may include, but is not limited to:</p>
<ul>
<li>Email address</li>
<li>First name and last name</li>
<li>Phone number</li>
<li>Address, State, Province, ZIP/Postal code, City</li>
</ul>
<h4>Usage Data</h4>
<p>Usage Data is collected automatically when using the Service.</p>
<p>Usage Data may include information such as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data.</p>
<p>When You access the Service by or through a mobile device, We may collect certain information automatically, including, but not limited to, the type of mobile device You use, Your mobile device's unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic data.</p>
<p>We may also collect information that Your browser sends whenever You visit Our Service or when You access the Service by or through a mobile device.</p>
<h4>Tracking Technologies and Cookies</h4>
<p>We use Cookies and similar tracking technologies to track the activity on Our Service and store certain information. Tracking technologies We use include beacons, tags, and scripts to collect and track information and to improve and analyze Our Service. The technologies We use may include:</p>
<ul>
<li><strong>Cookies or Browser Cookies.</strong> A cookie is a small file placed on Your Device. You can instruct Your browser to refuse all Cookies or to indicate when a Cookie is being sent. However, if You do not accept Cookies, You may not be able to use some parts of our Service.</li>
</ul>
<p>Cookies can be &quot;Persistent&quot; or &quot;Session&quot; Cookies. Persistent Cookies remain on Your personal computer or mobile device when You go offline, while Session Cookies are deleted as soon as You close Your web browser.</p>
<p>Where required by law, we use non-essential cookies (such as analytics, advertising, and remarketing cookies) only with Your consent. You can withdraw or change Your consent at any time using Our cookie preferences tool (if available) or through Your browser/device settings. Withdrawing consent does not affect the lawfulness of processing based on consent before its withdrawal.</p>
<p>We use both Session and Persistent Cookies for the purposes set out below:</p>
<ul>
<li>
<p><strong>Necessary / Essential Cookies</strong></p>
<p>Type: Session Cookies</p>
<p>Administered by: Us</p>
<p>Purpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services.</p>
</li>
<li>
<p><strong>Functionality Cookies</strong></p>
<p>Type: Persistent Cookies</p>
<p>Administered by: Us</p>
<p>Purpose: These Cookies allow Us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website.</p>
</li>
</ul>
<p>For more information about the cookies we use and your choices regarding cookies, please visit our Cookies Policy or the Cookies section of Our Privacy Policy.</p>
<h3>Use of Your Personal Data</h3>
<p>The Company may use Personal Data for the following purposes:</p>
<ul>
<li>
<p><strong>To provide and maintain our Service</strong>, including to monitor the usage of our Service.</p>
</li>
<li>
<p><strong>To manage Your Account:</strong> to manage Your registration as a user of the Service. The Personal Data You provide can give You access to different functionalities of the Service that are available to You as a registered user.</p>
</li>
<li>
<p><strong>For the performance of a contract:</strong> the development, compliance and undertaking of the purchase contract for the products, items or services You have purchased or of any other contract with Us through the Service.</p>
</li>
<li>
<p><strong>To contact You:</strong> To contact You by email, telephone calls, SMS, or other equivalent forms of electronic communication, such as a mobile application's push notifications regarding updates or informative communications related to the functionalities, products or contracted services, including the security updates, when necessary or reasonable for their implementation.</p>
</li>
<li>
<p><strong>To provide You</strong> with news, special offers, and general information about other goods, services and events which We offer that are similar to those that you have already purchased or inquired about unless You have opted not to receive such information.</p>
</li>
<li>
<p><strong>To manage Your requests:</strong> To attend and manage Your requests to Us.</p>
</li>
<li>
<p><strong>For business transfers:</strong> We may use Your Personal Data to evaluate or conduct a merger, divestiture, restructuring, reorganization, dissolution, or other sale or transfer of some or all of Our assets, whether as a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which Personal Data held by Us about our Service users is among the assets transferred.</p>
</li>
<li>
<p><strong>For other purposes</strong>: We may use Your information for other purposes, such as data analysis, identifying usage trends, determining the effectiveness of our promotional campaigns and to evaluate and improve our Service, products, services, marketing and your experience.</p>
</li>
</ul>
<p>We may share Your Personal Data in the following situations:</p>
<ul>
<li><strong>With Service Providers:</strong> We may share Your Personal Data with Service Providers to monitor and analyze the use of our Service, to contact You.</li>
<li><strong>For business transfers:</strong> We may share or transfer Your Personal Data in connection with, or during negotiations of, any merger, sale of Company assets, financing, or acquisition of all or a portion of Our business to another company.</li>
<li><strong>With Affiliates:</strong> We may share Your Personal Data with Our affiliates, in which case we will require those affiliates to honor this Privacy Policy. Affiliates include Our parent company and any other subsidiaries, joint venture partners or other companies that We control or that are under common control with Us.</li>
<li><strong>With business partners:</strong> We may share Your Personal Data with Our business partners to offer You certain products, services or promotions.</li>
<li><strong>With other users:</strong> If Our Service offers public areas, when You share Personal Data or otherwise interact in the public areas with other users, such information may be viewed by all users and may be publicly distributed outside.</li>
<li><strong>With Your consent</strong>: We may disclose Your Personal Data for any other purpose with Your consent.</li>
</ul>
<h3>Retention of Your Personal Data</h3>
<p>The Company will retain Your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use Your Personal Data to the extent necessary to comply with our legal obligations (for example, if We are required to retain Your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.</p>
<p>Where possible, We apply shorter retention periods and/or reduce identifiability by deleting, aggregating, or anonymizing data. Unless otherwise stated, the retention periods below are maximum periods (&quot;up to&quot;) and We may delete or anonymize data sooner when it is no longer needed for the relevant purpose. We apply different retention periods to different categories of Personal Data based on the purpose of processing and legal obligations:</p>
<ul>
<li>
<p>Account Information</p>
<ul>
<li>User Accounts: retained for the duration of your account relationship plus up to 24 months after account closure to handle any post-termination issues or resolve disputes.</li>
</ul>
</li>
<li>
<p>Customer Support Data</p>
<ul>
<li>Support tickets and correspondence: up to 24 months from the date of ticket closure to resolve follow-up inquiries, track service quality, and defend against potential legal claims</li>
<li>Chat transcripts: up to 24 months for quality assurance and staff training purposes.</li>
</ul>
</li>
<li>
<p>Usage Data</p>
<ul>
<li>
<p>Website analytics data (cookies, IP addresses, device identifiers): up to 24 months from the date of collection, which allows us to analyze trends while respecting privacy principles.</p>
</li>
<li>
<p>Server logs (IP addresses, access times): up to 24 months for security monitoring and troubleshooting purposes.</p>
</li>
</ul>
</li>
</ul>
<p>Usage Data is retained in accordance with the retention periods described above, and may be retained longer only where necessary for security, fraud prevention, or legal compliance.</p>
<p>We may retain Personal Data beyond the periods stated above for different reasons:</p>
<ul>
<li>Legal obligation: We are required by law to retain specific data (e.g., financial records for tax authorities).</li>
<li>Legal claims: Data is necessary to establish, exercise, or defend legal claims.</li>
<li>Your explicit request: You ask Us to retain specific information.</li>
<li>Technical limitations: Data exists in backup systems that are scheduled for routine deletion.</li>
</ul>
<p>You may request information about how long We will retain Your Personal Data by contacting Us.</p>
<p>When retention periods expire, We securely delete or anonymize Personal Data according to the following procedures:</p>
<ul>
<li>Deletion: Personal Data is removed from Our systems and no longer actively processed.</li>
<li>Backup retention: Residual copies may remain in encrypted backups for a limited period consistent with our backup retention schedule and are not restored except where necessary for security, disaster recovery, or legal compliance.</li>
<li>Anonymization: In some cases, We convert Personal Data into anonymous statistical data that cannot be linked back to You. This anonymized data may be retained indefinitely for research and analytics.</li>
</ul>
<h3>Transfer of Your Personal Data</h3>
<p>Your information, including Personal Data, is processed at the Company's operating offices and in any other places where the parties involved in the processing are located. It means that this information may be transferred to — and maintained on — computers located outside of Your state, province, country or other governmental jurisdiction where the data protection laws may differ from those from Your jurisdiction.</p>
<p>Where required by applicable law, We will ensure that international transfers of Your Personal Data are subject to appropriate safeguards and supplementary measures where appropriate. The Company will take all steps reasonably necessary to ensure that Your data is treated securely and in accordance with this Privacy Policy and no transfer of Your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of Your data and other personal information.</p>
<h3>Delete Your Personal Data</h3>
<p>You have the right to delete or request that We assist in deleting the Personal Data that We have collected about You.</p>
<p>Our Service may give You the ability to delete certain information about You from within the Service.</p>
<p>You may update, amend, or delete Your information at any time by signing in to Your Account, if you have one, and visiting the account settings section that allows you to manage Your personal information. You may also contact Us to request access to, correct, or delete any Personal Data that You have provided to Us.</p>
<p>Please note, however, that We may need to retain certain information when we have a legal obligation or lawful basis to do so.</p>
<h3>Disclosure of Your Personal Data</h3>
<h4>Business Transactions</h4>
<p>If the Company is involved in a merger, acquisition or asset sale, Your Personal Data may be transferred. We will provide notice before Your Personal Data is transferred and becomes subject to a different Privacy Policy.</p>
<h4>Law enforcement</h4>
<p>Under certain circumstances, the Company may be required to disclose Your Personal Data if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency).</p>
<h4>Other legal requirements</h4>
<p>The Company may disclose Your Personal Data in the good faith belief that such action is necessary to:</p>
<ul>
<li>Comply with a legal obligation</li>
<li>Protect and defend the rights or property of the Company</li>
<li>Prevent or investigate possible wrongdoing in connection with the Service</li>
<li>Protect the personal safety of Users of the Service or the public</li>
<li>Protect against legal liability</li>
</ul>
<h3>Security of Your Personal Data</h3>
<p>The security of Your Personal Data is important to Us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While We strive to use commercially reasonable means to protect Your Personal Data, We cannot guarantee its absolute security.</p>
<h2>Links to Other Websites</h2>
<p>Our Service may contain links to other websites that are not operated by Us. If You click on a third party link, You will be directed to that third party's site. We strongly advise You to review the Privacy Policy of every site You visit.</p>
<p>We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.</p>
<h2>Changes to this Privacy Policy</h2>
<p>We may update Our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page.</p>
<p>We will let You know via email and/or a prominent notice on Our Service, prior to the change becoming effective and update the &quot;Last updated&quot; date at the top of this Privacy Policy.</p>
<p>You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.</p>
<h2>Contact Us</h2>
<p>If you have any questions about this Privacy Policy, You can contact us:</p>
<ul>
<li>By email: privacy@gleipnir.technology</li>
</ul>
</div>
{{end}}

View file

@ -0,0 +1,130 @@
{{template "base.html" .}}
{{define "title"}}Quick Report Complete{{end}}
{{define "extraheader"}}
<style>
</style>
<script>
</script>
{{end}}
{{define "content"}}
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Success Card -->
<div class="card shadow-sm border-success mb-4">
<div class="card-header bg-success text-white">
<h3 class="my-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-circle-fill me-2" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
Report Successfully Submitted
</h3>
</div>
<div class="card-body p-4">
<div class="text-center mb-4">
<p class="lead">Thank you for helping us control mosquito populations in your area!</p>
<div class="alert alert-info py-3">
<strong>Your Report ID:</strong>
<span class="fs-4 fw-bold">{{.ReportID|publicReportID}}</span>
</div>
<p class="text-muted">Please save this ID for your reference.</p>
{{ if not (eq .District nil) }}
<p>Your report has been assigned to</p>
<p><b>{{ .District.Name }}</b></p>
<img src="{{ .District.LogoURL }}" width="256"/>
{{ end }}
</div>
<hr class="my-4">
<!-- Status Check Section -->
<div class="mb-4">
<h4 class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search me-2" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
Check Your Report Status
</h4>
<p>You can check the status of your report at any time using your Report ID.</p>
<a href="/status/{{.ReportID}}" class="btn btn-outline-primary">
Check Status
</a>
</div>
<hr class="my-4">
<!-- Notifications Section -->
<div>
<h4 class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bell me-2" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
</svg>
Get Updates
</h4>
<p>Provide your contact information to receive updates about your report.</p>
<form id="notificationForm" action="/register-notifications" method="post" class="needs-validation">
<input type="hidden" name="report_id" value="{{.ReportID}}">
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<div class="input-group">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
</span>
<input type="email" class="form-control" id="email" name="email" placeholder="your@email.com">
</div>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number (for SMS updates)</label>
<div class="input-group">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
</span>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890">
</div>
</div>
<div class="form-check mb-3 form-check">
<input class="form-check-input" type="checkbox" name="consent" required>
<label class="form-check-label" for="consent">
I consent to receiving updates about this report
</label>
<div class="invalid-feedback">
You must consent to receive notifications.
</div>
</div>
<button type="submit" class="btn btn-primary">Register for Updates</button>
</form>
</div>
</div>
</div>
<!-- Navigation Links -->
<div class="text-center">
<a href="/" class="btn btn-outline-secondary me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house me-1" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
</svg>
Return to Home
</a>
<a href="/report-mosquito" class="btn btn-outline-success">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle me-1" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
Submit Another Report
</a>
</div>
</div>
</div>
</div>
{{end}}

193
rmo/template/quick.html Normal file
View file

@ -0,0 +1,193 @@
{{template "base.html" .}}
{{define "title"}}Quick Report{{end}}
{{define "extraheader"}}
{{template "photo-upload-header"}}
<style>
.district-logo {
max-height: 60px;
width: auto;
}
.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>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Elements
const form = document.getElementById('mosquitoReportForm');
const locationStatus = document.getElementById('locationStatus');
const latitudeInput = document.getElementById('latitude');
const longitudeInput = document.getElementById('longitude');
const submitButton = document.getElementById('submitButton');
const loadingOverlay = document.getElementById('loadingOverlay');
// Get current location
requestLocation();
// Handle form submission
form.addEventListener('submit', handleFormSubmission);
/**
* Request user's geolocation
*/
function requestLocation() {
if (navigator.geolocation) {
locationStatus.textContent = "Requesting your location...";
navigator.geolocation.getCurrentPosition(
// Success callback
function(position) {
locationStatus.textContent = "Location successfully added";
locationStatus.classList.add('text-success');
// Store location in hidden fields
latitudeInput.value = position.coords.latitude;
longitudeInput.value = position.coords.longitude;
},
// Error callback
function(error) {
let errorMessage = "Unable to get your location";
switch(error.code) {
case error.PERMISSION_DENIED:
errorMessage = "Location access denied. Please enable location services.";
break;
case error.POSITION_UNAVAILABLE:
errorMessage = "Location information unavailable.";
break;
case error.TIMEOUT:
errorMessage = "Location request timed out.";
break;
}
locationStatus.textContent = errorMessage;
locationStatus.classList.add('text-danger');
},
// Options
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}
);
} else {
locationStatus.textContent = "Geolocation is not supported by your browser";
locationStatus.classList.add('text-danger');
}
}
/**
* Handle form submission
*/
function handleFormSubmission(event) {
event.preventDefault();
// Show loading overlay
loadingOverlay.classList.remove('d-none');
// Disable submit button to prevent double submission
submitButton.disabled = true;
// Create FormData object
const formData = new FormData(form);
// Send AJAX request
fetch(form.action, {
method: 'POST',
body: formData,
})
.then(response => {
if (response.ok) {
// Navigate to the URL the server specified
window.location.href = response.url;
return;
}
console.error("not ok server response", response);
throw new Error("Server error " + response.status);
})
.catch(error => {
console.error('Error:', error);
alert('There was a problem submitting your report. Please try again. If this happens a few times, please let us know.');
// Re-enable submit button
submitButton.disabled = false;
// Hide loading overlay
loadingOverlay.classList.add('d-none');
});
}
});
</script>
{{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 id="mosquitoReportForm" action="/quick-submit" method="POST" enctype="multipart/form-data">
<!-- 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 id="locationStatus">Requesting your location...</span>
<!-- Hidden fields for location data -->
<input type="hidden" id="latitude" name="latitude">
<input type="hidden" id="longitude" name="longitude">
</div>
<!-- Photo Upload -->
<div class="mb-4">
{{template "photo-upload"}}
</div>
<!-- Comments -->
<div class="mb-4">
<label for="comments" class="form-label fw-bold">Comments</label>
<textarea class="form-control" id="comments" name="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" id="submitButton">
<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>
</div>
</div>
</main>
<!-- Loading Indicator Overlay (Initially hidden) -->
<div id="loadingOverlay" class="position-fixed top-0 start-0 w-100 h-100 d-none" style="background-color: rgba(0,0,0,0.5); z-index: 1050;">
<div class="position-absolute top-50 start-50 translate-middle text-white text-center">
<div class="spinner-border" role="status"></div>
<p class="mt-2">Submitting your report...</p>
</div>
</div>
{{end}}

View file

@ -0,0 +1,115 @@
{{template "base.html" .}}
{{define "title"}}Notification Request Complete{{end}}
{{define "extraheader"}}
<style>
</style>
<script>
</script>
{{end}}
{{define "content"}}
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-7">
<!-- Confirmation Card -->
<div class="card shadow-sm border-info mb-4">
<div class="card-header bg-info text-white">
<h3 class="my-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bell-fill me-2" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
</svg>
Notifications Registered
</h3>
</div>
<div class="card-body p-4 text-center">
<div class="mb-4">
<div class="display-1 text-info mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
</div>
<h4 class="mb-3">Thank You!</h4>
<p class="lead">Your contact information has been successfully registered for report updates.</p>
<div class="alert alert-secondary py-3 mt-3">
<strong>Report ID:</strong>
<span class="fs-5">{{.ReportID|publicReportID}}</span>
</div>
</div>
<hr class="my-4">
<!-- What to Expect Section -->
<div class="text-start mb-4">
<h5>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-info-circle me-2" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
What to Expect
</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-check me-2 text-success" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/>
<path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"/>
</svg>
A confirmation message has been sent to your contact information.
</li>
<li class="list-group-item bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check me-2 text-success" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
You will receive updates when:
<ul class="mt-2">
<li>Your report is assigned to a specialist</li>
<li>A site visit is scheduled</li>
<li>Treatment or remediation is completed</li>
<li>The case is resolved</li>
</ul>
</li>
<li class="list-group-item bg-transparent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search me-2 text-success" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
You can check your report status anytime using your Report ID.
</li>
</ul>
</div>
<!-- Navigation Buttons -->
<div class="mt-4">
<a href="/status/{{.ReportID}}" class="btn btn-outline-primary me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search me-1" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
Check Report Status
</a>
<a href="/" class="btn btn-outline-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house me-1" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
</svg>
Return to Home
</a>
</div>
</div>
</div>
<!-- Optional: Additional Information Section -->
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-question-circle me-2" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
</svg>
Need Help?
</h5>
<p>If you need to update your contact information or have questions about your report, please contact our Mosquito Control Unit at <strong>(123) 456-7890</strong> or <a href="mailto:mosquito@example.gov">mosquito@example.gov</a> and reference your Report ID.</p>
</div>
</div>
</div>
</div>
</div>
{{end}}

135
rmo/template/root.html Normal file
View file

@ -0,0 +1,135 @@
{{template "base.html" .}}
{{define "title"}}Main{{end}}
{{define "extraheader"}}
<style>
.service-card {
transition: transform 0.3s;
height: 100%;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.district-logo {
max-height: 80px;
width: auto;
}
.quick-report-mobile {
background-color: #ff9800;
}
.quick-report-desktop {
background-color: #ffefd5;
border-left: 4px solid #ff9800;
}
</style>
{{end}}
{{define "content"}}
<!-- Main Content -->
<main>
<!-- Introduction Section -->
<section class="py-5 bg-primary text-white">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<h2 class="text-center mb-4">Report Mosquitoes Online</h2>
<p class="lead text-center">
We are dedicated to protecting public health and improving quality of life by reducing
mosquito populations and the diseases they can carry. Our districts provide comprehensive
mosquito surveillance, control, and education services to our community.
</p>
</div>
</div>
</div>
</section>
<!-- Quick Report for Mobile - Only visible on small screens -->
<section class="py-3 quick-report-mobile d-md-none">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h4 class="mb-2">On the go?</h4>
<a href="/quick" class="btn btn-dark btn-lg">Make a Quick Report</a>
<p class="mb-0 mt-2"><small>Report mosquito issues in under 60 seconds</small></p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-5">
<div class="container">
<h3 class="text-center mb-4">How Can We Help You Today?</h3>
<div class="row g-4">
<!-- Service Option 1 -->
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
<h4 class="card-title">Follow-up or Check Status</h4>
<p class="card-text">Check on a previous request or view current mosquito activity in your area.</p>
<a href="/status" class="btn btn-primary mt-3">Get Status</a>
</div>
</div>
</div>
<!-- Service Option 2 -->
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-water" viewBox="0 0 16 16">
<path d="M.036 3.314a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.664 3.964a.5.5 0 0 1-.278-.65zm0 3a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.664 6.964a.5.5 0 0 1-.278-.65zm0 3a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.664 9.964a.5.5 0 0 1-.278-.65z"/>
</svg>
</div>
<h4 class="card-title">Report a Green Pool</h4>
<p class="card-text">Report stagnant water sources like abandoned pools that may breed mosquitoes.</p>
<a href="/pool" class="btn btn-primary mt-3">Report Source</a>
</div>
</div>
</div>
<!-- Service Option 3 -->
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-bug" viewBox="0 0 16 16">
<path d="M4.355.522a.5.5 0 0 1 .623.333l.291.956A4.979 4.979 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A4.985 4.985 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623zM4 7v4a4 4 0 0 0 3.5 3.97V7H4zm4.5 0v7.97A4 4 0 0 0 12 11V7H8.5zM12 6a3.989 3.989 0 0 0-1.334-2.982A3.983 3.983 0 0 0 8 2a3.983 3.983 0 0 0-2.667 1.018A3.989 3.989 0 0 0 4 6h8z"/>
</svg>
</div>
<h4 class="card-title">Report Mosquito Nuisance</h4>
<p class="card-text">Report areas with high adult mosquito activity causing discomfort or concern.</p>
<a href="/nuisance" class="btn btn-primary mt-3">Report Problem</a>
</div>
</div>
</div>
</div>
<!-- Quick Report for Desktop - Only visible on medium screens and up -->
<div class="row mt-4 d-none d-md-block">
<div class="col-12">
<div class="card quick-report-desktop">
<div class="card-body py-3">
<div class="row align-items-center">
<div class="col-md-8">
<h5 class="mb-1">Need to make a quick report?</h5>
<p class="mb-0">Use our streamlined form to report mosquito issues in under 60 seconds</p>
</div>
<div class="col-md-4 text-md-end mt-3 mt-md-0">
<a href="/quick" class="btn btn-warning">Quick Report</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
{{end}}

223
rmo/template/search.html Normal file
View file

@ -0,0 +1,223 @@
{{template "base.html" .}}
{{define "title"}}Status{{end}}
{{define "extraheader"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
<script src="/static/js/geocode.js"></script>
<script src="/static/js/location.js"></script>
<script src="/static/js/map-multipoint.js"></script>
<script src="/static/js/report-table.js"></script>
<style>
.map-container {
background-color: #e9ecef;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
height: 500px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
#map {
height: 500px;
width:100%;
margin-bottom: 10px;
}
#map img {
max-width: none;
min-width: 0px;
height: auto;
}
.search-box {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
}
@media (max-width: 768px) {
.map-container {
height: 300px;
}
}
</style>
<script>
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
var markers = [];
// Because features come from tiled vector data, feature geometries may be split
// or duplicated across tile boundaries. As a result, features may appear
// multiple times in query results.
function getUniqueFeatures(features, comparatorProperty) {
const uniqueIds = new Set();
const uniqueFeatures = [];
for (const feature of features) {
const id = feature.properties[comparatorProperty];
if (!uniqueIds.has(id)) {
uniqueIds.add(id);
uniqueFeatures.push(feature);
}
}
return uniqueFeatures;
}
function renderReports(features) {
console.log("render reports", features);
const report_table = document.querySelector('report-table');
let reports = [];
for (const feature of features) {
reports.push({
address: feature.properties.address,
created: feature.properties.created,
id: feature.properties.public_id,
status: feature.properties.status,
type: feature.properties.table_name
});
}
report_table.reports = reports;
}
function onLoad() {
const map = document.querySelector("map-multipoint");
map.addEventListener("load", (event) => {
map.addSource('tegola-mosquito', {
'type': 'vector',
'tiles': [
'{{.URLTegola}}maps/mosquito/{z}/{x}/{y}'
]
});
map.addLayer({
'id': 'mosquito',
'source': 'tegola-mosquito',
'source-layer': 'report_location',
'type': 'circle',
'paint': {
'circle-color': '#4264fb',
'circle-radius': 7,
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
}
});
map.on('render', () => {
const features = map.queryRenderedFeatures({target: {layerId: 'mosquito'}});
if (features) {
const uniqueFeatures = getUniqueFeatures(features, 'public_id');
// Populate features for the listing overlay.
renderReports(uniqueFeatures);
}
});
getGeolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}).then(position => {
map.jumpTo({
center: {
lng: position.coords.longitude,
lat: position.coords.latitude,
},
zoom: 14,
});
}).catch(error => {
console.log("location error", error);
})
});
}
document.addEventListener('DOMContentLoaded', onLoad);
</script>
{{end}}
{{define "content"}}
<div class="container my-4">
<!-- Search Box -->
<div class="card search-box mb-4">
<div class="card-body">
<form class="row g-3 align-items-center">
<div class="col-md-9">
<label for="addressSearch" class="visually-hidden">Search by address</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-search"></i></span>
<input type="text" class="form-control form-control-lg" id="addressSearch"
placeholder="Enter an address, neighborhood, or zip code">
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-primary btn-lg w-100">Search</button>
</div>
<div class="col-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="mosquitoNuisance" checked>
<label class="form-check-label" for="mosquitoNuisance">Mosquito Nuisance</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="greenPool" checked>
<label class="form-check-label" for="greenPool">Green Pool</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="quickReport" checked>
<label class="form-check-label" for="quickReport">Quick Report</label>
</div>
</div>
</form>
</div>
</div>
<!-- Map Section -->
<div class="card mb-4">
<div class="card-header bg-info text-white">
<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Reports Map</h5>
</div>
<div class="card-body p-0">
<map-multipoint
api-key="{{ .MapboxToken }}"
latitude="36.3"
longitude="-119.2"
tegola="{{.URLTegola}}"
zoom="9"
/></map-multipoint>
</div>
</div>
<!-- Results Section -->
<div class="card">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0"><i class="fas fa-list me-2"></i>Reports Near You</h5>
<span class="badge bg-light text-dark">15 Reports Found</span>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<report-table />
</div>
</div>
<!--
<div class="card-footer">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
-->
</div>
<!-- Create Report Button (Fixed at bottom on mobile) -->
<div class="d-md-none position-fixed bottom-0 start-0 end-0 p-3" style="z-index: 1030;">
<button class="btn btn-primary btn-lg w-100" data-bs-toggle="modal" data-bs-target="#reportModal">
<i class="fas fa-plus-circle me-2"></i>Create New Report
</button>
</div>
<!-- Desktop Create Report Button -->
<div class="d-none d-md-block text-center mt-4">
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#reportModal">
<i class="fas fa-plus-circle me-2"></i>Create New Report
</button>
</div>
</div>
{{end}}

View file

@ -0,0 +1,193 @@
{{template "base.html" .}}
{{define "title"}}Status of report {{.Report.ID|publicReportID}}{{end}}
{{define "extraheader"}}
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
<script src="/static/js/map-with-markers.js"></script>
<style>
.timeline {
border-left: 3px solid #dee2e6;
padding-left: 20px;
margin-left: 10px;
}
.timeline-item {
position: relative;
margin-bottom: 25px;
}
.timeline-item:before {
content: '';
position: absolute;
left: -29px;
top: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #0d6efd;
}
.timeline-date {
font-size: 0.85rem;
color: #6c757d;
}
.map-container {
height: 300px;
}
@media (max-width: 768px) {
.map-container {
height: 200px;
}
}
.status-badge {
font-size: 1rem;
}
</style>
<script>
const GEOJSON_LOCATION = {{.Report.Location|json}};
const GEOJSON_IMAGE_LOCATIONS = [
{{ range .Report.Images }}
{{ .Location|json }},
{{ end }}
];
function onLoad() {
const map = document.querySelector("map-with-markers");
map.addEventListener("load", (event) => {
map.jumpTo({
center: GEOJSON_LOCATION.coordinates,
zoom: 14,
});
map.addMarker(GEOJSON_LOCATION.coordinates, "#00FF00");
GEOJSON_IMAGE_LOCATIONS.forEach((image) => {
map.addMarker(image.coordinates, "#FF0000");
});
});
}
document.addEventListener("DOMContentLoaded", onLoad);
</script>
{{end}}
{{define "content"}}
<div class="container my-4">
<!-- Report ID and Status Section -->
<div class="card mb-4">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0">Report {{.Report.ID|publicReportID}}</h5>
<span class="badge bg-warning text-dark status-badge">Scheduled</span>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4 mb-3">
<strong><i class="fas fa-sync me-2"></i>Type:</strong>
<span>{{.Report.Type}}</span>
</div>
<div class="col-md-4 mb-3">
<strong><i class="fas fa-calendar-plus me-2"></i>Created:</strong>
<span>{{.Report.Created|timeSince}}</span>
</div>
<div class="col-md-4 mb-3">
<strong><i class="fas fa-hourglass-half me-2"></i>District:</strong>
<span>{{.Report.District}}</span>
</div>
</div>
</div>
</div>
<!-- Contact Information -->
<div class="row mb-4">
<div class="col-md-6 mb-3 mb-md-0">
<div class="card h-100">
<div class="card-header bg-secondary text-white">
<h5 class="mb-0"><i class="fas fa-user me-2"></i>Reporter Information</h5>
</div>
<div class="card-body">
<p><strong>Name:</strong>{{.Report.Reporter.Name}}</p>
<p><strong>Phone:</strong>{{.Report.Reporter.Phone}}</p>
<p><strong>Email:</strong>{{.Report.Reporter.Email}}</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-header bg-secondary text-white">
<h5 class="mb-0"><i class="fas fa-home me-2"></i>Reported Location</h5>
</div>
<div class="card-body">
<p><strong>Site Contact Name:</strong>{{.Report.SiteOwner.Name}}</p>
<p><strong>Site Contact Phone:</strong>{{.Report.SiteOwner.Phone}}</p>
<p><strong>Site Contact Email:</strong>{{.Report.SiteOwner.Email}}</p>
<p><strong>Address:</strong>{{.Report.Address}}</p>
</div>
</div>
</div>
</div>
<!-- Report Information -->
<div class="card mb-4">
<div class="card-header bg-success text-white">
<h5 class="mb-0"><i class="fas fa-history me-2"></i>Report Detail</h5>
</div>
<div class="card-body">
{{ if not (eq .Report.Comments "") }}
<p><strong>Comments:</strong>{{ .Report.Comments }}</p>
{{ end }}
</div>
</div>
<!-- Map Section -->
<div class="card mb-4">
<div class="card-header bg-info text-white">
<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Location Map</h5>
</div>
<div class="card-body p-0">
<map-with-markers
api-key="{{ .MapboxToken }}"
zoom="14"/>
</div>
</div>
<div class="card mb-4">
<div class="card-header bg-info text-white">
<h5 class="mb-0"><i class="fas fa-photo me-2"></i>Images</h5>
</div>
<div class="card-body p-0">
{{ if gt (len .Report.Images) 0 }}
{{ range .Report.Images }}
<img src="{{ .URL }}" width="256"/>
{{ end }}
{{ else }}
<p>None</p>
{{ end }}
</div>
</div>
<!-- History Timeline -->
<!--
<div class="card">
<div class="card-header bg-success text-white">
<h5 class="mb-0"><i class="fas fa-history me-2"></i>Request History</h5>
</div>
<div class="card-body">
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date">July 17, 2023 - 2:45 PM</div>
<h5 class="mb-1">Scheduled for Treatment</h5>
<p class="mb-0">Site visit scheduled for July 19. Technician: Michael Johnson</p>
</div>
<div class="timeline-item">
<div class="timeline-date">July 16, 2023 - 10:30 AM</div>
<h5 class="mb-1">Assessment Complete</h5>
<p class="mb-0">Initial assessment completed. Property requires treatment for mosquito larvae.</p>
</div>
<div class="timeline-item">
<div class="timeline-date">July 15, 2023 - 1:15 PM</div>
<h5 class="mb-1">In Review</h5>
<p class="mb-0">Report assigned to field supervisor for initial assessment.</p>
</div>
<div class="timeline-item">
<div class="timeline-date">July 15, 2023 - 9:30 AM</div>
<h5 class="mb-1">Report Created</h5>
<p class="mb-0">New mosquito nuisance report submitted by Jane Doe.</p>
</div>
</div>
</div>
</div>
-->
</div>
{{end}}

175
rmo/template/status.html Normal file
View file

@ -0,0 +1,175 @@
{{template "base.html" .}}
{{define "title"}}Status{{end}}
{{define "extraheader"}}
<style>
.option-card {
transition: transform 0.3s;
height: 100%;
}
.option-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.district-logo {
max-height: 80px;
width: auto;
}
.divider {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.divider-line {
border-left: 1px solid #dee2e6;
height: 80%;
}
@media (max-width: 767.98px) {
.divider-line {
border-left: none;
border-top: 1px solid #dee2e6;
width: 80%;
height: auto;
margin: 2rem 0;
}
}
</style>
<script>
function formatReportID(inputElement) {
// Save current cursor position
const cursorPos = inputElement.selectionStart;
// Get current value and remove existing hyphens
let value = inputElement.value.replace(/-/g, '');
// Calculate how many hyphens were before the cursor
const beforeCursor = inputElement.value.substring(0, cursorPos);
const hyphensBefore = (beforeCursor.match(/-/g) || []).length;
// Format the value with hyphens at positions 4 and 8
if (value.length > 8) {
value = value.substring(0, 4) + '-' + value.substring(4, 8) + '-' + value.substring(8);
} else if (value.length > 4) {
value = value.substring(0, 4) + '-' + value.substring(4);
}
// Update input field value
inputElement.value = value;
// Calculate new cursor position
const newHyphensBefore = (value.substring(0, cursorPos - hyphensBefore +
Math.min(hyphensBefore, 2)).match(/-/g) || []).length;
const newPosition = cursorPos - hyphensBefore + newHyphensBefore;
// Restore cursor position
inputElement.setSelectionRange(newPosition, newPosition);
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('report').addEventListener('input', function() {
formatReportID(this);
});
});
</script>
{{end}}
{{define "content"}}
<main>
<!-- Page Title -->
<section class="py-4 bg-primary text-white">
<div class="container">
<h2 class="text-center mb-0">Check Status or Follow-up</h2>
</div>
</section>
<!-- Lookup Options -->
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-12 mb-4">
<p class="lead text-center">
Choose one of the following options to check on mosquito activity or follow up on a previous report.
</p>
</div>
</div>
<div class="row g-4">
<!-- Report ID Lookup -->
<div class="col-md-5">
<div class="card option-card h-100">
<div class="card-body p-4">
<div class="text-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</svg>
</div>
<h4 class="card-title text-center mb-4">Look up by Report ID</h4>
<p class="card-text">
If you have a report ID from a previous request, enter it below to view the details and current status.
</p>
<form action="/status" method="GET">
<div class="mb-3">
<label for="report" class="form-label">Report ID</label>
<input type="text" class="form-control" id="report" name="report" placeholder="Enter your report ID" value="{{.ReportID}}" required>
<div class="form-text">Example: ABCD-1234-5678</div>
{{ if ne .Error "" }}
<div class="alert alert-warning" role="alert">
{{ .Error }}
</div>
{{ end }}
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-success w-100 submit-btn">View Report Details</button>
</div>
</form>
</div>
</div>
</div>
<!-- Divider for visual separation -->
<div class="col-md-2 divider">
<div class="divider-line"></div>
</div>
<!-- Location Lookup -->
<div class="col-md-5">
<div class="card option-card h-100">
<div class="card-body p-4">
<div class="text-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-geo-alt" 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>
</div>
<h4 class="card-title text-center mb-4">Look up by Location</h4>
<p class="card-text">
Don't have a report ID? You can check mosquito activity and reports in your area by providing your location information.
</p>
<p class="card-text mb-4">
This option will guide you through selecting your location to find relevant information about mosquito activity near you.
</p>
<div class="d-grid gap-2 mt-auto">
<a href="/search" class="btn btn-primary">Search by Location</a>
</div>
</div>
</div>
</div>
</div>
<!-- Back button -->
<div class="row mt-5">
<div class="col-12 text-center">
<a href="/" class="btn btn-outline-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left me-2" 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>
</section>
</main>
{{end}}

View file

@ -0,0 +1,3 @@
{{define "svg/check-report"}}
<svg height="48" viewBox="0 0 512 512" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M306.01 322.648c6.337 0 12.264-2.498 16.689-7.034l39.311-40.304c8.972-9.2 8.786-23.984-.415-32.957-9.201-8.971-23.988-8.785-32.96.414l-23.061 23.642-4.04-3.928c-9.214-8.956-24-8.751-32.961.462-8.958 9.213-8.751 23.997.463 32.956l20.726 20.152a23.2 23.2 0 0 0 16.248 6.597m-26.659-49.227c3.184-3.274 8.437-3.342 11.706-.163l9.419 9.159a7.517 7.517 0 0 0 10.62-.141l28.3-29.014c3.188-3.269 8.439-3.332 11.705-.148 3.268 3.187 3.333 8.437.148 11.704l-39.311 40.303c-3.038 3.249-8.572 3.318-11.697.156l-20.726-20.152c-3.271-3.182-3.346-8.433-.164-11.704"/><path d="M247.915 327.763a7.517 7.517 0 0 0-12 9.052 99 99 0 0 0 8.997 10.337c18.479 18.477 43.048 28.652 69.181 28.652s50.701-10.175 69.18-28.652c18.48-18.476 28.656-43.042 28.656-69.171s-10.177-50.695-28.656-69.171c-38.147-38.141-100.214-38.14-138.361 0-26.007 26.003-35.21 63.936-24.017 98.996a7.52 7.52 0 0 0 9.445 4.874 7.514 7.514 0 0 0 4.874-9.444c-9.475-29.678-1.686-61.788 20.328-83.798 32.284-32.281 84.818-32.281 117.102 0 15.64 15.638 24.254 36.429 24.254 58.544s-8.614 42.906-24.254 58.544c-15.639 15.637-36.433 24.25-58.551 24.25-22.117 0-42.912-8.612-58.552-24.25a84 84 0 0 1-7.626-8.763"/><path d="m501.66 415.271-47.415-47.409a7.52 7.52 0 0 0-10.63 0l-.29.29-18.247-18.244a132 132 0 0 0 21.012-63.562 7.516 7.516 0 0 0-7.028-7.973c-4.139-.252-7.711 2.886-7.974 7.027a117.08 117.08 0 0 1-34.102 75.462c-22.824 22.822-52.797 34.246-82.779 34.275-.038-.001-.075-.006-.114-.006h-.597c-29.82-.15-59.594-11.57-82.296-34.269-22.142-22.138-34.336-51.573-34.336-82.882s12.194-60.744 34.336-82.882c45.707-45.702 120.079-45.702 165.786 0 17.024 17.022 28.258 38.493 32.489 62.094.733 4.085 4.641 6.799 8.724 6.071a7.515 7.515 0 0 0 6.072-8.723c-4.776-26.637-17.451-50.867-36.656-70.07a131.8 131.8 0 0 0-31.449-23.271v-60.566a7.6 7.6 0 0 0-2.201-5.314l-93.13-93.118A7.62 7.62 0 0 0 275.519 0H22.547C10.115 0 0 10.113 0 22.544v63.163a7.515 7.515 0 0 0 7.516 7.515 7.515 7.515 0 0 0 7.516-7.515V22.544c0-4.144 3.371-7.515 7.516-7.515h245.458v70.575c0 12.431 10.115 22.544 22.547 22.544h70.584v46.245c-14.664-5.556-30.124-8.41-45.609-8.577-.074-.01-.146-.025-.223-.025h-167.8a7.516 7.516 0 1 0 0 15.03h105.226a131.7 131.7 0 0 0-29.979 21.525h-75.247a7.516 7.516 0 1 0 0 15.03h61.72c-12.268 15.891-20.652 34.193-24.665 53.73h-37.054a7.516 7.516 0 1 0 0 15.03h34.859a135 135 0 0 0-.529 11.846q.001 4.897.352 9.733h-34.681a7.516 7.516 0 1 0 0 15.03h36.64c3.833 20.341 12.379 39.401 25.101 55.87h-61.741a7.515 7.515 0 1 0 0 15.03h75.275a131.7 131.7 0 0 0 29.931 21.49h-105.21a7.516 7.516 0 1 0 0 15.03h166.59a132.9 132.9 0 0 0 47.042-8.596v87.891c0 4.143-3.371 7.515-7.516 7.515H22.547c-4.144 0-7.516-3.371-7.516-7.515V115.77c0-4.15-3.365-7.515-7.516-7.515s-7.516 3.364-7.516 7.515v373.69C0 501.887 10.115 512 22.547 512H353.62c12.432 0 22.547-10.113 22.547-22.544v-94.697a131 131 0 0 0 9.867-5.804l18.243 18.24c-3.157 2.756-3.326 8.008-.291 10.918l47.416 47.41c13.227 13.785 37.031 13.784 50.257 0 13.788-13.226 13.787-37.027.001-50.252M290.552 93.119c-4.144 0-7.516-3.371-7.516-7.515V25.657l67.471 67.462zm107.742 286.839a133 133 0 0 0 9.321-8.468 133 133 0 0 0 8.468-9.32l16.612 16.609-17.79 17.787zm92.737 74.937c-7.632 7.955-21.367 7.953-29 0l-42.102-42.096 29.001-28.997 42.102 42.096c7.954 7.633 7.955 21.365-.001 28.997"/><path d="M68.204 204.803h32.88c9.27 0 16.812-7.54 16.812-16.808v-32.876c0-9.269-7.541-16.809-16.812-16.809h-32.88c-9.269 0-16.811 7.54-16.811 16.809v32.876c0 9.268 7.542 16.808 16.811 16.808m-1.779-49.684c0-.981.799-1.779 1.779-1.779h32.88c.982 0 1.78.798 1.78 1.779v32.876c0 .981-.799 1.779-1.78 1.779h-32.88a1.78 1.78 0 0 1-1.779-1.779zM51.393 293.362c0 9.268 7.541 16.808 16.811 16.808h32.88c9.27 0 16.812-7.54 16.812-16.808v-32.876c0-9.268-7.541-16.808-16.812-16.808h-32.88c-9.269 0-16.811 7.54-16.811 16.808zm15.032-32.876c0-.981.799-1.779 1.779-1.779h32.88c.982 0 1.78.798 1.78 1.779v32.876c0 .981-.799 1.779-1.78 1.779h-32.88a1.78 1.78 0 0 1-1.779-1.779zM51.393 400.87c0 9.268 7.541 16.808 16.811 16.808h32.88c9.27 0 16.812-7.54 16.812-16.808v-32.876c0-9.269-7.541-16.809-16.812-16.809h-32.88c-9.269 0-16.811 7.54-16.811 16.809zm15.032-32.876c0-.981.799-1.779 1.779-1.779h32.88c.982 0 1.78.798 1.78 1.779v32.876c0 .981-.799 1.779-1.78 1.779h-32.88a1.78 1.78 0 0 1-1.779-1.779z"/></svg>
{{end}}

View file

@ -0,0 +1,3 @@
{{define "svg/mosquito"}}
<svg height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264.678 264.678" width="48" xml:space="preserve"><path d="M258.628 123.119c0-16.085-28.859-24.501-57.366-24.501-10.194 0-20.424 1.082-29.372 3.201l8.358-5.093a4.99 4.99 0 0 0 2.393-4.259l.009-24.538 26.084-26.963a4.99 4.99 0 1 0-7.173-6.939L174.074 62.44a5 5 0 0 0-1.404 3.467l-.009 23.754-23.045 14.044c-1.428-2.844-3.169-5.309-5.154-7.291 4.238-3.568 6.941-8.905 6.941-14.866 0-8.855-5.958-16.331-14.07-18.666l-.006-57.892a4.99 4.99 0 1 0-9.98 0l.007 57.702c-8.489 2.081-14.815 9.734-14.815 18.856 0 6.153 2.884 11.637 7.361 15.201-1.851 1.924-3.485 4.27-4.836 6.96l-23.05-14.048-.007-23.754a5 5 0 0 0-1.404-3.468l-27.49-28.413a4.99 4.99 0 0 0-7.173 6.939l26.087 26.962.007 24.538a4.99 4.99 0 0 0 2.393 4.259l8.357 5.093c-8.948-2.119-19.179-3.201-29.373-3.201-28.505 0-57.362 8.416-57.362 24.501 0 16.089 28.857 24.508 57.362 24.508 13.913 0 27.901-2.012 38.585-5.936l-16.672 13.933a4.99 4.99 0 0 0-1.79 3.829v23.614l-25.959 26.72a4.99 4.99 0 0 0 7.157 6.954l27.371-28.172a5 5 0 0 0 1.411-3.477v-23.306l22.015-18.399c.274.51.542 1.026.839 1.512a28 28 0 0 0 2.276 3.209l-20.22 16.884a5 5 0 0 0-1.792 3.83v44.042l-36.329 43.633a4.99 4.99 0 1 0 7.669 6.385l37.484-45.021a5 5 0 0 0 1.155-3.193v-43.513l7.711-6.439c-2.337 7.588-3.529 16.608-3.527 25.586 0 22.386 7.401 45.047 21.546 45.047 14.138 0 21.542-22.661 21.548-45.047-.001-8.976-1.196-17.993-3.536-25.58l7.705 6.433.002 43.513c0 1.167.408 2.296 1.155 3.193l37.481 45.021a4.98 4.98 0 0 0 3.838 1.797 4.989 4.989 0 0 0 3.831-8.182l-36.326-43.633-.002-44.042a4.99 4.99 0 0 0-1.792-3.83l-20.226-16.889c1.266-1.532 2.406-3.281 3.403-5.207l22.603 18.89v23.306c0 1.299.506 2.546 1.411 3.477l27.37 28.172a4.98 4.98 0 0 0 3.579 1.513 4.989 4.989 0 0 0 3.579-8.467l-25.96-26.72v-23.614a4.99 4.99 0 0 0-1.79-3.829l-16.022-13.391c10.472 3.569 23.804 5.393 37.063 5.393 28.514.002 57.373-8.416 57.373-24.505m-9.98 0c0 5.784-18.899 14.528-47.386 14.528-28.438 0-47.317-8.718-47.373-14.502v-.052c.056-5.781 18.934-14.495 47.373-14.495 28.487 0 47.386 8.74 47.386 14.521M132.35 145.25h-.013c-2.58.001-5.296-2.023-7.449-5.552-2.616-4.286-4.116-10.329-4.116-16.577.002-3.846.542-7.335 1.43-10.363.025-.069.037-.141.059-.211 2.142-7.12 6.26-11.565 10.076-11.565 3.762.003 7.821 4.301 9.99 11.224.049.201.092.401.166.597.878 3.007 1.412 6.468 1.415 10.28l-.002.036.002.035c-.014 13.023-6.097 22.096-11.558 22.096m-.377-73.156c5.211 0 9.45 4.241 9.45 9.455 0 5.212-4.239 9.453-9.45 9.453-5.213 0-9.454-4.241-9.454-9.453 0-5.214 4.241-9.455 9.454-9.455M16.031 123.119c0-5.781 18.898-14.521 47.382-14.521s47.38 8.74 47.38 14.521c0 5.784-18.897 14.528-47.38 14.528-28.484-.001-47.382-8.745-47.382-14.528m116.313 102.25c-3.925 0-11.566-12.377-11.566-35.068-.006-22.688 7.634-35.068 11.555-35.071 3.929.002 11.576 12.384 11.579 35.071-.006 22.691-7.645 35.068-11.568 35.068"/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
{{end}}

View file

@ -0,0 +1,3 @@
{{define "svg/pond"}}
<svg height="48" viewBox="0 0 64 64" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M20.297 53.908c-6.133-2.036-10.184-5.6-11.113-9.779a1 1 0 0 0-1.953.434c1.086 4.883 5.619 8.981 12.436 11.244a1 1 0 0 0 .63-1.9m35.416-14.168c-1.257.242-.67 1.633-.715 2.511a10.02 10.02 0 0 1-3.659 7.432 1 1 0 0 0 1.342 1.483A11.96 11.96 0 0 0 57 42.25c-.037-.934.087-2.664-1.286-2.511"/><path d="M40.408 50.665c-9.443 2.903-28.27-.618-27.38-9.017a1 1 0 0 0-.707-1.117c-12.33-3.97-4.72-11.596 6.661-11.466.835-.116 1.951.344 2.744-.145a19.2 19.2 0 0 1 7.488-3.213 1 1 0 0 0-.455-1.948 21.6 21.6 0 0 0-7.982 3.362c-.306-.019-.586-.019-.879-.028.101-5.037 2.57-6.454 2.7-6.524a1 1 0 0 0-.906-1.784c-.152.076-3.679 1.928-3.793 8.308q-.64.024-1.261.077v-6.213a3 3 0 0 0 2-2.817v-5.002a3 3 0 0 0-2-2.817V9.136a1 1 0 1 0-2.001 0v1.185a3 3 0 0 0-2.001 2.817v5.002a3 3 0 0 0 2 2.817v6.447q-.863.137-1.678.327c-.224-8.014-3.43-10.932-3.572-11.056a1 1 0 0 0-1.324 1.5c.029.027 2.833 2.684 2.91 10.126q-.664.225-1.28.485c-.356-5.796-3.621-7.506-3.768-7.58a1.001 1.001 0 0 0-.907 1.784c.11.059 2.7 1.51 2.71 6.804-6.39 3.881-4.08 10.159 3.252 12.411-.03 6.447 9.207 11.453 21.009 11.46a36.6 36.6 0 0 0 8.908-1.06 1 1 0 0 0-.488-1.94M14.637 13.138a1 1 0 0 1 2 0v5.002a1 1 0 0 1-2 0zm33.637 10.417c.258-4.6 2.555-5.92 2.68-5.987a1 1 0 0 0 .437-1.337c-.826-1.798-4.67 1.11-5.1 6.962a42 42 0 0 0-1.284-.188c.147-7.188 2.855-9.787 2.903-9.832a1 1 0 0 0-1.324-1.5c-.142.124-3.366 3.059-3.573 11.125q-.64-.05-1.295-.083c-.242-6.239-4.278-9.306-5.11-7.494a1.007 1.007 0 0 0 .423 1.345c.105.057 2.455 1.381 2.687 6.082-.243-.003-.481-.015-.727-.015a47 47 0 0 0-6.134.388 1 1 0 1 0 .263 1.984c9.657-1.604 24.885 1.652 24.879 6.791 0 2.128-2.936 4.306-7.663 5.683a1.007 1.007 0 0 0-.519 1.563c2.994 4.326-.014 7.874-5.554 10.341a1.006 1.006 0 0 0 .391 1.922c6.376-2.376 10.087-7.11 7.507-12.304C57.162 37.294 60 34.706 60 31.796c0-3.674-4.73-6.77-11.726-8.24"/><path d="M54.098 32.343a1 1 0 0 0 1.66-1.116c-1.281-1.907-7.331-4.593-16.767-4.593-8.345 0-13.834 2.066-16 3.835l-.923.755c-.95-.07-2.185-.168-3.086-.158-6.13 0-10.281 2.212-10.92 3.808a1.013 1.013 0 0 0 .93 1.388.98.98 0 0 0 .916-.618c.425-1 5.669-3.076 10.825-2.51l1.588.114c.574.114 1.514-.95 1.937-1.23 6.285-4.903 25.621-4.068 29.84.325m-29.113 4.806h-2.001a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2m2.002 7.003h2a1 1 0 0 0 0-2.001h-2a1 1 0 0 0 0 2m-10.005-7.002h-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2m2.001 7.003h2.001a1 1 0 0 0 0-2.001h-2a1 1 0 0 0 0 2m12.005 5.003h2a1 1 0 0 0 0-2.001h-2a1 1 0 0 0 0 2m5.002-5.001a1 1 0 0 0 0-2.001h-2.001a1 1 0 1 0 0 2zm2 5.002h2.001a1 1 0 1 0 0-2.001h-2a1 1 0 0 0 0 2"/><path d="M48.245 36.148c0-3.034-2.975-5.502-6.633-5.502a6.87 6.87 0 0 0-5.824 2.892A1.007 1.007 0 0 0 36.246 35l2.76 1.147-2.76 1.147a1.007 1.007 0 0 0-.458 1.465 6.87 6.87 0 0 0 5.824 2.89c3.658 0 6.633-2.468 6.633-5.502m-6.249.924a1.007 1.007 0 0 0 0-1.848l-3.675-1.527c2.462-2.114 7.953-.837 7.923 2.451.029 3.288-5.46 4.565-7.923 2.451z"/></svg>
{{end}}

26
rmo/template/terms.html Normal file
View file

@ -0,0 +1,26 @@
{{template "base.html" .}}
{{define "title"}}Privacy Policy{{end}}
{{define "extraheader"}}
{{end}}
{{define "content"}}
<div class="container">
<h1>Terms of Service</h1>
<p>Look, we don't like having terms of service, and we're confident you don't find them interesting to read. But we have to have them as a business.</p>
<h2>Service provider</h2>
<p>Report Mosquitoes Online is provided by Gleipnir LLC. By using the website you agree to these terms. If you don't agree, don't tell a computer to access our site.</p>
<p>Gleipnir LLC is a company organized under the laws of the state of Arizona, USA, and operates under Arizona law.</p>
<p>Gleipnir LLC is located at 2726 S Quinn Ave, Gilbert, AZ</p>
<h2>What you can expect from us</h2>
<p>We provide services free to the public. We'll occasionally make changes to these services. We won't notify members of the public, like you, of those changes. We may notify our customers, but we may not, since we may changes very frequently. In general, we have additional agreements beyond this one with entities that are our customers.</p>
<p>The data you provide to us is used for public health. That generally means passing some or all of your data on to our customers that work in mosquito abatement. Any information you give to us we may give to them. You can request at any time that we stop sharing your information and we will honor that request.</p>
<p>We will only contact you if you give us express permission to do so</p>
<p>We won't sell your information to marketers, data aggregators, or anyone who makes money off your data. We only share data with entities engaged in public health work.</p>
<p>We are so vehemently opposed to selling your data that we agree to a contractual obligation of at least $1000 USD in damages per person if your data is every sold by the Company, or by any company in the future that aquires a stake in the Company.</p>
<h2>What we expect from you</h2>
<p>Don't provide false data. This include shenanigans like using our system to send messages to other people's email address or phone.</p>
<p>Don't try to scrape/exfiltrate/steal our data. If you've got a legitimate use for our data, contact us, if you've got a worthy project we may be willing to work with you.</p>
<p>Don't try to break into our systems, infect them with malware, use us as a tool in a phishing campaign, or generally hack about. We like hackers, but we prefer to work with them intentionally.</p>
<p>Don't misrepresent who you are</p>
<p>You agree we can use any data you provide to us as we see fit. This may include doing nothing with it, but generally includes improving public health by fighting mosquitoes and mosquito-born illnesses.</p>
</div>
{{end}}