diff --git a/webapp/src/App.vue b/webapp/src/App.vue index 788a909..488dcc3 100644 --- a/webapp/src/App.vue +++ b/webapp/src/App.vue @@ -14,6 +14,7 @@ const items = [ { title: 'Map', icon: 'mdi-map', to: '/' }, { title: 'What is an ALPR?', icon: 'mdi-cctv', to: '/what-is-an-alpr' }, { title: 'Report an ALPR', icon: 'mdi-map-marker-plus', to: '/report' }, + { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' }, { title: 'About', icon: 'mdi-information', to: '/about' }, { title: 'Contact', icon: 'mdi-email', to: '/contact' }, { title: 'Feature Roadmap', icon: 'mdi-road-variant', to: '/roadmap' }, diff --git a/webapp/src/components/NewVisitor.vue b/webapp/src/components/NewVisitor.vue index 85d3701..44bcfbc 100644 --- a/webapp/src/components/NewVisitor.vue +++ b/webapp/src/components/NewVisitor.vue @@ -18,7 +18,7 @@

- Each Circle represents an Automated License Plate Reader (ALPR). + Each Circle represents an Automated License Plate Reader.

@@ -48,7 +48,7 @@

- Click on an ALPR to view more information about it. + Please check our list of Known Operators and report missing ALPRs near you.

diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts index 3764dab..b897eea 100644 --- a/webapp/src/router/index.ts +++ b/webapp/src/router/index.ts @@ -36,6 +36,11 @@ const router = createRouter({ name: 'report', component: () => import('../views/ReportView.vue') }, + { + path: '/operators', + name: 'operators', + component: () => import('../views/OperatorsView.vue') + }, { path: '/contact', name: 'contact', diff --git a/webapp/src/services/apiService.ts b/webapp/src/services/apiService.ts index 35d6bd1..1a6c00e 100644 --- a/webapp/src/services/apiService.ts +++ b/webapp/src/services/apiService.ts @@ -71,6 +71,12 @@ export const getClusters = async () => { return response.data; } +export const getCities = async () => { + const s3Url = "https://deflock-clusters.s3.us-east-1.amazonaws.com/flock_cameras.json"; + const response = await apiService.get(s3Url); + return response.data; +} + export const geocodeQuery = async (query: string, currentLocation: any) => { const encodedQuery = encodeURIComponent(query); const results = (await apiService.get(`/geocode?query=${encodedQuery}`)).data; diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue index 3c6f608..46120de 100644 --- a/webapp/src/views/HomeView.vue +++ b/webapp/src/views/HomeView.vue @@ -59,17 +59,20 @@ - - mdi-crosshairs-gps - + - + + + + mdi-crosshairs-gps + + @@ -266,7 +269,7 @@ onMounted(() => { }; } } else { - center.value = { lat: 37.855068, lng: -122.357998 }; + center.value = { lat: 37.875190, lng: -122.279819 }; } }); diff --git a/webapp/src/views/OperatorsView.vue b/webapp/src/views/OperatorsView.vue new file mode 100644 index 0000000..f4c9422 --- /dev/null +++ b/webapp/src/views/OperatorsView.vue @@ -0,0 +1,115 @@ + + + + +