add community datasets, clean up nav bar

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>

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>

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('');