major cleanup

webapp/src/components/Dangers.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-expansion-panels multiple>
+  <v-expansion-panels multiple :model-value :readonly="showAll">
     <v-expansion-panel>
       <v-expansion-panel-title class="font-weight-bold">
         ALPRs Do Not Reduce Crime
@@ -19,7 +19,7 @@
           What research does exist regarding the ability of ALPRs to reduce crime is inconclusive at best:
         </p>
 
-        <quoted-source source-url="https://example.com/study" attribution-text="Journal of Experimental Criminology">
+        <quoted-source source-url="https://link.springer.com/article/10.1007/s11292-011-9133-9" attribution-text="Journal of Experimental Criminology">
           Our findings indicate that, when small numbers of LPR patrols are used in crime hot spots in the way we have tested them here, they do not seem to generate either a general or offense-specific deterrent effect.
         </quoted-source>
 
@@ -156,6 +156,16 @@
 
 <script setup lang="ts">
 import QuotedSource from '@/components/QuotedSource.vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  showAll: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+const modelValue = computed(() => props.showAll ? [0,1,2,3,4,5] : []);
 </script>
 
 <style scoped>

webapp/src/components/LeafletMap.vue

@@ -60,7 +60,7 @@ function initializeMap() {
   registerWatchers();
 
   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
   }).addTo(map);
 
   emit('update:bounds', map.getBounds()); // XXX: this event populates the map
@@ -69,8 +69,6 @@ function initializeMap() {
 function renderCurrentLocation() {
   if (!props.currentLocation)
     return;
-  else
-    console.log('Current location:', props.currentLocation);
 
   if (currentLocationLayer) {
     map.removeLayer(currentLocationLayer);

webapp/src/components/layout/Footer.vue

@@ -0,0 +1,95 @@
+<template>
+  <v-footer>
+    <v-container>
+      <v-row align-items="center" justify="center">
+
+        <v-col cols="12" class="mt-4">
+          <v-img height="30" contain src="/deflock-logo-grey.svg" />
+        </v-col>
+        
+        <!-- Internal Links -->
+        <v-col cols="7" sm="3">
+          <v-list density="compact">
+            <v-list-subheader>Info</v-list-subheader>
+            <v-list-item
+              v-for="link in internalLinks"
+              :key="link.title"
+              link
+              :to="link.to"
+              slim
+            >
+                <v-list-item-title class="d-flex align-center">
+                <v-icon class="custom-icon" start :icon="link.icon" />
+                {{ link.title }}
+                </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-col>
+
+        <!-- External Links -->
+        <v-col cols="5" sm="3">
+          <v-list density="compact">
+            <v-list-subheader>Get Involved</v-list-subheader>
+            <v-list-item
+              v-for="link in externalLinks"
+              :key="link.title"
+              link
+              slim
+              :href="link.href"
+              :to="link.to"
+              :target="link.href ? '_blank' : undefined"
+            >
+              <v-list-item-title class="d-flex align-center justify-start">
+                <v-icon start v-if="link.icon" class="custom-icon" :icon="link.icon"></v-icon>
+                <img v-else-if="link.customIcon" class="mr-2 custom-icon" width="24" height="24" :src="isDark ? link.customIconDark : link.customIcon" />
+                {{ link.title }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-col>
+
+        <!-- Copyright -->
+        <v-col
+          class="text-center serif copyright d-flex align-center justify-center text-grey-darken-1"
+          cols="12"
+          sm="6"
+        >
+        <div>
+          <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
+          <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
+        </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-footer>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+const theme = useTheme();
+const isDark = computed(() => theme.name.value === 'dark');
+const currentYear = new Date().getFullYear();
+
+const internalLinks = [
+  { title: 'About', to: '/about', icon: 'mdi-information' },
+  { title: 'Privacy Policy', to: '/privacy', icon: 'mdi-shield' },
+  { title: 'Terms of Service', to: '/terms', icon: 'mdi-file-document' },
+  { title: 'Contact', to: '/contact', icon: 'mdi-email' },
+];
+
+const externalLinks = [
+  { title: 'Discord', href: 'https://discord.gg/aV7v4R3sKT', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg' },
+  { title: 'Donate', to: '/donate', icon: 'mdi-heart' },
+  { title: 'GitHub', href: 'https://github.com/FoggedLens/deflock', icon: 'mdi-github' },
+]
+</script>
+
+<style scoped>
+.custom-icon {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.copyright {
+  font-size: 0.85rem;
+}
+</style>