From ea226cdf5e3f2e83e4b3c4084ced83b830282f17 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Mon, 11 Nov 2024 14:46:04 -0700
Subject: [PATCH] add community datasets, clean up nav bar

---
 webapp/src/App.vue                          | 23 +++++++++++---
 webapp/src/components/CommunityDatasets.vue | 33 +++++++++++++++++++++
 webapp/src/views/OperatorsView.vue          | 13 +++++---
 3 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 webapp/src/components/CommunityDatasets.vue

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 3b82297..0fe6006 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -15,12 +15,16 @@ const items = [
   { 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: 'About', icon: 'mdi-information', to: '/about' },
   // { title: 'Feature Roadmap', icon: 'mdi-road-variant', to: '/roadmap' },
-  { title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
-  { title: 'Donate', icon: 'mdi-heart', href: 'https://github.com/sponsors/frillweeman'}
 ]
+
+const metaItems = [
+  { title: 'Discord', icon: 'mdi-chat-processing-outline', href: 'https://discord.gg/aV7v4R3sKT'},
+  { title: 'Contact', icon: 'mdi-email-outline', to: '/contact' },
+  { title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
+  { title: 'Donate', icon: 'mdi-heart', href: 'https://github.com/sponsors/frillweeman'},
+];
 const drawer = ref(false)
 
 watch(() => theme.global.name.value, (newTheme) => {
@@ -59,11 +63,22 @@ watch(() => theme.global.name.value, (newTheme) => {
       temporary
     >
       <v-list nav>
+        <v-list-subheader>DeFlock</v-list-subheader>
         <v-list-item
           v-for="item in items"
           :key="item.title"
           link
           :to="item.to"
+        ><v-icon start>{{ item.icon }}</v-icon>{{ item.title }}</v-list-item>
+        
+        <v-divider />
+        
+        <v-list-subheader>Get Involved</v-list-subheader>
+        <v-list-item
+          v-for="item in metaItems"
+          :key="item.title"
+          link
+          :to="item.to"
           :href="item.href"
           :target="{ '_blank': item.href }"
         ><v-icon start>{{ item.icon }}</v-icon>{{ item.title }}</v-list-item>
diff --git a/webapp/src/components/CommunityDatasets.vue b/webapp/src/components/CommunityDatasets.vue
new file mode 100644
index 0000000..df26e8c
--- /dev/null
+++ b/webapp/src/components/CommunityDatasets.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="datasets"
+    hide-default-footer
+    :sort-by="[ { key: 'state', order: 'asc' } ]"
+  >
+    <template v-slot:item.url="i: any">
+      <v-btn variant="text" color="primary" :href="i.item.url" target="_blank" :disabled="!i.item.url">
+        <v-icon start>mdi-download</v-icon>
+        <span>Download</span>
+      </v-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup lang="ts">
+const datasets = [
+  {
+    title: 'Atlanta ALPR Cameras',
+    author: 'veroniquedra',
+    url: 'https://deflock-clusters.s3.us-east-1.amazonaws.com/maximum_dots.csv',
+    description: 'Over 2,000 cameras in the Atlanta area',
+  }
+];
+
+const headers = [
+  { title: 'Title', value: 'title', sortable: false },
+  { title: 'Author', value: 'author', sortable: false },
+  { title: 'Description', value: 'description', sortable: false },
+  { title: '', value: 'url', sortable: false },
+];
+</script>
diff --git a/webapp/src/views/OperatorsView.vue b/webapp/src/views/OperatorsView.vue
index 20f0288..4f4cc63 100644
--- a/webapp/src/views/OperatorsView.vue
+++ b/webapp/src/views/OperatorsView.vue
@@ -39,12 +39,16 @@
       </v-card-text>
     </v-card>
 
-    <h2>Want to Help?</h2>
+    <h2 id="community-datasets">Community Datasets</h2>
     <p>
-      If you live in one of these cities/counties, or if you're bored and want to browse Google Maps Street View, you can help us by reporting the locations of these Flock cameras. Their locations are pretty easy to predict, as they're usually installed at major intersections and the edges of city limits.
+      Here are some datasets that have been shared with us by the community through various collection methods (FOIA requests, scraping, wardriving, etc.). If you have a dataset you'd like to share, please reach out to us <router-link to="/contact">here</router-link>.
     </p>
-    <p class="mb-16">
-      You can report a camera by following <a href="/report">these instructions</a>.
+    <p class="mb-4">
+      If you'd like to report some of the ALPRs in these data sets so that they can be seen on the map, download the file and follow <router-link to="/report">these instructions</router-link>. Be sure to check that the cameras you're reporting are not already on the map. Please note that these datasets contain only approximate locations of cameras. You will need to verify the locations yourself.
+    </p>
+    <community-datasets />
+    <p class="my-8">
+      We are getting a lot of new datasets and trying to decide how to import them at a large scale, since they need to be verified and deduplicated. If you have any ideas or want to help, please reach out to us <router-link to="/contact">here</router-link> or join our <a href="https://discord.gg/aV7v4R3sKT" target="_blank">Discord</a>.
     </p>
   </v-container>
 </template>
@@ -52,6 +56,7 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, watch } from 'vue';
 import { getCities } from '@/services/apiService';
+import CommunityDatasets from '@/components/CommunityDatasets.vue';
 
 const page = ref(1);
 const selectedState = ref('');