Show empty aggregation map without service area

This commit is contained in:
Eli Ribble 2026-03-31 23:29:37 +00:00
parent 7f8491a1c2
commit 05a7bbb4e3
No known key found for this signature in database
2 changed files with 53 additions and 50 deletions

View file

@ -9,6 +9,21 @@ export function formatAddress(address?: Address): string {
}
return `${address.number} ${address.street}, ${address.locality}`;
}
export function formatBigNumber(n: number): string {
// Convert the number to a string
const numStr = n.toString();
// Add commas every three digits from the right
let result = "";
for (let i = 0; i < numStr.length; i++) {
if (i > 0 && (numStr.length - i) % 3 === 0) {
result += ",";
}
result += numStr[i];
}
return result;
}
export function formatDistance(meters: number | undefined) {
if (meters === undefined || meters === null) {
return "unknown";
@ -39,7 +54,38 @@ export function formatRelativeTime(dateString: string): string {
if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
}
export function formatTimeRelative(t: Date): string {
const now = new Date();
const diffMs = now.getTime() - t.getTime();
const hours = diffMs / (1000 * 60 * 60);
if (hours > 0) {
if (hours < 1) {
const minutes = diffMs / (1000 * 60);
return `${Math.floor(minutes)} minutes ago`;
} else if (hours < 24) {
return `${Math.floor(hours)} hours ago`;
} else {
const days = hours / 24;
return `${Math.floor(days)} days ago`;
}
} else {
if (hours < -24) {
const days = hours / 24;
return `in ${Math.floor(-1 * days)} days`;
} else if (hours < -1) {
return `in ${Math.floor(-1 * hours)} hours`;
} else {
const minutes = diffMs / (1000 * 60);
if (minutes > -1) {
const seconds = diffMs / 1000;
return `in ${Math.floor(-1 * seconds)} seconds`;
}
return `in ${Math.floor(-1 * minutes)} minutes`;
}
}
}
export function shortAddress(a: Address | undefined): string {
if (!a) return "unknown";
return `${a.number} ${a.street}, ${a.locality}`;

View file

@ -120,12 +120,8 @@
<h3 class="section-title">Mosquito Activity Heatmap</h3>
<div class="row">
<div class="col-12">
<p v-if="session.user && dashboard.serviceArea.min.x === 0.0">
No service area for this organization yet
</p>
<MapAggregate
v-else
:bounds="session.user?.organization.service_area"
:bounds="mapBounds()"
:markers="[]"
:organizationId="dashboard.organization.id"
:tegola="session.urls?.tegola ?? ''"
@ -161,7 +157,9 @@
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import MapAggregate from "@/components/MapAggregate.vue";
import { formatBigNumber, formatTimeRelative } from "@/format";
import { useSessionStore } from "@/store/session";
import type { Bounds } from "@/types";
const dashboard = reactive({
counts: {
@ -184,52 +182,11 @@ const dashboard = reactive({
});
const session = useSessionStore();
onMounted(async () => {});
function formatBigNumber(n: number): string {
// Convert the number to a string
const numStr = n.toString();
// Add commas every three digits from the right
let result = "";
for (let i = 0; i < numStr.length; i++) {
if (i > 0 && (numStr.length - i) % 3 === 0) {
result += ",";
}
result += numStr[i];
}
return result;
}
function formatTimeRelative(t: Date): string {
const now = new Date();
const diffMs = now.getTime() - t.getTime();
const hours = diffMs / (1000 * 60 * 60);
if (hours > 0) {
if (hours < 1) {
const minutes = diffMs / (1000 * 60);
return `${Math.floor(minutes)} minutes ago`;
} else if (hours < 24) {
return `${Math.floor(hours)} hours ago`;
} else {
const days = hours / 24;
return `${Math.floor(days)} days ago`;
}
} else {
if (hours < -24) {
const days = hours / 24;
return `in ${Math.floor(-1 * days)} days`;
} else if (hours < -1) {
return `in ${Math.floor(-1 * hours)} hours`;
} else {
const minutes = diffMs / (1000 * 60);
if (minutes > -1) {
const seconds = diffMs / 1000;
return `in ${Math.floor(-1 * seconds)} seconds`;
}
return `in ${Math.floor(-1 * minutes)} minutes`;
}
function mapBounds(): Bounds | undefined {
if (session.user?.organization.service_area) {
return session.user?.organization.service_area;
}
return undefined;
}
function refreshData() {
console.log("fake refresh");