Add image lookup on status page
This commit is contained in:
parent
c2c4d52026
commit
bea7c28af2
6 changed files with 216 additions and 8 deletions
118
htmlpage/static/js/map-single-point.js
Normal file
118
htmlpage/static/js/map-single-point.js
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
var map = null;
|
||||
// A map that just shows a single point location, and can't be moved
|
||||
class MapSinglePoint extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Create a shadow DOM
|
||||
this.attachShadow({mode: "open" });
|
||||
|
||||
// Initial render
|
||||
this.render();
|
||||
|
||||
// markers shown on the map. Should be none or 1, generally.
|
||||
this._markers = null;
|
||||
}
|
||||
|
||||
// Lifecycle: when element is added to the DOM
|
||||
connectedCallback() {
|
||||
// Initialize the map when the element is added to the DOM
|
||||
setTimeout(() => this._initializeMap(), 0);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this._map) {
|
||||
this._map.remove();
|
||||
}
|
||||
}
|
||||
|
||||
_initializeMap() {
|
||||
console.log("Setting up the map...");
|
||||
const apiKey = this.getAttribute("api-key");
|
||||
const lat = Number(this.getAttribute('latitude') || 36.2);
|
||||
const lng = Number(this.getAttribute('longitude') || -119.2);
|
||||
const zoom = Number(this.getAttribute('zoom') || 15);
|
||||
|
||||
mapboxgl.accessToken = apiKey;
|
||||
const mapElement = this.shadowRoot.querySelector("#map");
|
||||
map = new mapboxgl.Map({
|
||||
container: mapElement,
|
||||
center: {
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
},
|
||||
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
||||
zoom: zoom,
|
||||
});
|
||||
map.on("load", function() {
|
||||
this.dispatchEvent(new CustomEvent('load'), {
|
||||
bubbles: true,
|
||||
composed: true, // Allows event to cross shadow DOM boundary
|
||||
detail: {
|
||||
map: this
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initial render of component
|
||||
render() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<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>
|
||||
|
||||
<div id="map-container" class="map-container">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
jumpTo(args) {
|
||||
this._map.jumpTo(args);
|
||||
}
|
||||
|
||||
setMarker(coords) {
|
||||
console.log("Setting map marker", coords);
|
||||
this._map.jumpTo({
|
||||
center: coords,
|
||||
zoom: 14,
|
||||
});
|
||||
this._markers.forEach((marker) => marker.remove());
|
||||
|
||||
const marker = new mapboxgl.Marker({
|
||||
color: "#FF0000",
|
||||
draggable: true
|
||||
}).setLngLat(coords).addTo(map);
|
||||
marker.on('dragend', function(e) {
|
||||
const markerDraggedEvent = new CustomEvent("markerdragend", {
|
||||
detail: {
|
||||
marker: marker
|
||||
}
|
||||
});
|
||||
mapContainer.dispatchEvent(markerDraggedEvent);
|
||||
});
|
||||
this._markers = [marker];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('map-single-point', MapSinglePoint);
|
||||
18
public-report/image.go
Normal file
18
public-report/image.go
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
package publicreport
|
||||
|
||||
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)
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@ func Router() chi.Router {
|
|||
r.Get("/privacy", getPrivacy)
|
||||
r.Get("/robots.txt", getRobots)
|
||||
r.Get("/email/report/{report_id}/subscription-confirmation", getEmailReportSubscriptionConfirmation)
|
||||
r.Get("/image/{uuid}", getImageByUUID)
|
||||
r.Get("/nuisance", getNuisance)
|
||||
r.Post("/nuisance-submit", postNuisance)
|
||||
r.Get("/nuisance-submit-complete", getNuisanceSubmitComplete)
|
||||
|
|
|
|||
|
|
@ -32,14 +32,19 @@ type Contact struct {
|
|||
Name string
|
||||
Phone string
|
||||
}
|
||||
type Image struct {
|
||||
URL string
|
||||
}
|
||||
type Report struct {
|
||||
Address string
|
||||
Comments string
|
||||
Created time.Time
|
||||
ID string
|
||||
Images []Image
|
||||
Location string // GeoJSON
|
||||
Reporter Contact
|
||||
SiteOwner Contact
|
||||
Updated time.Time
|
||||
Type string
|
||||
}
|
||||
|
||||
type ContentStatus struct {
|
||||
|
|
@ -131,7 +136,6 @@ func contentFromNuisance(ctx context.Context, report_id string) (result ContentS
|
|||
result.Report.ID = report_id
|
||||
result.Report.Address = nuisance.Address
|
||||
result.Report.Created = nuisance.Created
|
||||
result.Report.Updated = nuisance.Created
|
||||
result.Report.Reporter.Email = nuisance.ReporterEmail
|
||||
result.Report.Reporter.Name = nuisance.ReporterName
|
||||
result.Report.Reporter.Phone = nuisance.ReporterPhone
|
||||
|
|
@ -162,14 +166,26 @@ func contentFromQuick(ctx context.Context, report_id string) (result ContentStat
|
|||
if err != nil {
|
||||
return result, fmt.Errorf("Failed to query nuisance %s: %w", report_id, err)
|
||||
}
|
||||
|
||||
images, err := quick.Images().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.Updated = quick.Created
|
||||
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{
|
||||
URL: fmt.Sprintf("https://%s/image/%s", config.RMODomain, image.StorageUUID),
|
||||
})
|
||||
}
|
||||
type LocationGeoJSON struct {
|
||||
Location string
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,12 +51,12 @@
|
|||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<strong><i class="fas fa-calendar-plus me-2"></i>Created:</strong>
|
||||
<span>{{.Report.Created|timeSince}}</span>
|
||||
<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-sync me-2"></i>Last Updated:</strong>
|
||||
<span>July 17, 2023 - 2:45 PM</span>
|
||||
<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>Next Step:</strong>
|
||||
|
|
@ -94,8 +94,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Information -->
|
||||
<div class="row mb-4">
|
||||
<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>
|
||||
|
|
@ -103,6 +104,7 @@
|
|||
<p><strong>Foo:</strong>Bar</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
|
|
@ -116,6 +118,21 @@
|
|||
</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">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ package userfile
|
|||
import (
|
||||
"fmt"
|
||||
"io"
|
||||
"net/http"
|
||||
"os"
|
||||
|
||||
"github.com/Gleipnir-Technology/nidus-sync/config"
|
||||
|
|
@ -78,6 +79,43 @@ func PublicImageFileContentWrite(uid uuid.UUID, body io.Reader) error {
|
|||
log.Info().Str("filepath", filepath).Msg("Saved public report image file content")
|
||||
return nil
|
||||
}
|
||||
|
||||
func PublicImageFileContentPathRaw(uid string) string {
|
||||
return fmt.Sprintf("%s/%s.raw", config.FilesDirectoryPublic, uid)
|
||||
}
|
||||
|
||||
func PublicImageFileToResponse(w http.ResponseWriter, uid string) {
|
||||
image_path := PublicImageFileContentPathRaw(uid)
|
||||
|
||||
// Open the file
|
||||
file, err := os.Open(image_path)
|
||||
if err != nil {
|
||||
if os.IsNotExist(err) {
|
||||
http.Error(w, "Image not found", http.StatusNotFound)
|
||||
} else {
|
||||
http.Error(w, "Failed to retrieve image", http.StatusInternalServerError)
|
||||
}
|
||||
return
|
||||
}
|
||||
defer file.Close()
|
||||
|
||||
// Get file info for Content-Length header
|
||||
fileInfo, err := file.Stat()
|
||||
if err != nil {
|
||||
http.Error(w, "Failed to get image information", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
// Set appropriate headers
|
||||
w.Header().Set("Content-Type", "image/png")
|
||||
w.Header().Set("Content-Length", fmt.Sprintf("%d", fileInfo.Size()))
|
||||
|
||||
// Copy file contents to response writer
|
||||
_, err = io.Copy(w, file)
|
||||
if err != nil {
|
||||
// Note: At this point, we've already started writing the response,
|
||||
// so we can't change the status code anymore. The best we can do
|
||||
// is log the error and abandon the connection.
|
||||
return
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue