Police-Data-Accessibility-Project · josh-chamberlain · Jan 23, 2025 · Jan 13, 2025 · Jan 13, 2025 · Jan 13, 2025
@@ -1,3 +1,2 @@
 * @josh-chamberlain
-* @joshuagraber
-
+* @joshuagraber
@@ -5,7 +5,7 @@ on:
 
 jobs:
   setup:
-    name: Setup client
+    name: Setup
     runs-on: ubuntu-latest
     steps:
       - name: Cancel previous
@@ -28,7 +28,7 @@ jobs:
           key: node-modules-${{ hashFiles('package-lock.json') }}
 
   lint:
-    name: Lint client
+    name: Lint
     needs: setup
     runs-on: ubuntu-latest
     steps:
@@ -48,7 +48,7 @@ jobs:
         run: npm run lint
 
   test:
-    name: Test client
+    name: Test
     needs: setup
     runs-on: ubuntu-latest
     steps:
@@ -69,7 +69,7 @@ jobs:
         run: npm run test:ci
 
   build:
-    name: Build client
+    name: Build
     needs: setup
     runs-on: ubuntu-latest
     steps:

@@ -1,31 +1,114 @@
-<!doctype html>
-<html lang="">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" href="/assets/favicon.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Public+Sans:[email protected]&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <title>Police Data Accessibility Project</title>
-  </head>
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but this website doesn't work properly without JavaScript
-        enabled. Please enable it to continue.</strong
-      >
-    </noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>PDAP</title>
+		<link rel="icon" type="image/x-icon" href="./node_modules/pdap-design-system/public/images/favicon.png">
+		<meta
+			name="description"
+			content="Explore our database to see what kind of data is published about any police system in the United States. Find misconduct, budgets, and more."
+		/>
+		<meta
+			name="keywords"
+			content="police data, public records, open data, police transparency, police oversight"
+		/>
+		<meta content="width=device-width, initial-scale=1" name="viewport" />
+		<!-- schema.org -->
+		<script type="application/ld+json">
+			{
+				"@context": "http://schema.org",
+				"@type": "NGO",
+				"name": "Police Data Access Point",
+				"alternateName": "PDAP",
+				"description": "A web app for helping people find and use public data about police systems.",
+				"url": "https://pdap.io",
+				"sameAs": [
+					"https://www.guidestar.org/profile/85-4207132",
+					"https://www.linkedin.com/company/pdap/",
+					"https://github.com/Police-Data-Accessibility-Project"
+				],
+				"foundingDate": "2021",
+				"areaServed": "United States",
+				"purpose": "Access to public records and promoting transparency in policing.",
+				"contactPoint": [
+					{
+						"@type": "ContactPoint",
+						"email": "[email protected]",
+						"contactType": "General Contact"
+					}
+				],
+				"knowsAbout": [
+					"public records",
+					"transparency",
+					"police",
+					"court",
+					"jail",
+					"legal system",
+					"scraping",
+					"FOIA"
+				]
+			}
+		</script>
+		<!-- plausible.io -->
+		<script defer data-domain="pdap.io" src="https://plausible.io/js/script.tagged-events.js"></script>
+		<link
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"
+			rel="stylesheet"
+			type="text/css"
+		/>
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Public+Sans:[email protected]&display=swap" rel="stylesheet">
+		<link
+			href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,900;1,400;1,600;1,900&display=swap"
+			rel="stylesheet"
+		/>
+		<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
+		<!-- Global site tag (gtag.js) - Google Analytics -->
+		<script async src="https://www.googletagmanager.com/gtag/js?id=G-REKS6B95BL"></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag('js', new Date());
+			gtag('config', 'G-REKS6B95BL');
+		</script>
+		<!-- Google ads tag (gtag.js) -->
+		<script async src="https://www.googletagmanager.com/gtag/js?id=AW-11016541790"></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag('js', new Date());
+			gtag('config', 'AW-11016541790');
+		</script>
+		<!-- Event snippet for newsletter signup conversion page
+  In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
+		<script>
+			function gtag_report_conversion(url) {
+				var callback = function () {
+					if (typeof url != 'undefined') {
+						window.location = url;
+					}
+				};
+				gtag('event', 'conversion', {
+					send_to: 'AW-11016541790/BTkiCN2cyoEYEN6sjIUp',
+					event_callback: callback,
+				});
+				return false;
+			}
+		</script>
+		<link
+			href="node_modules/pdap-design-system/system/images/favicon.png"
+			rel="shortcut icon"
+			type="image/x-icon"
+		/>
+		<link href="node_modules/pdap-design-system/system/images/webclip.gif" rel="apple-touch-icon" />
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
 </html>
@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "NODE_ENV=production vite build",
     "serve": "vite preview --port 8888",
-    "lint": "eslint src --ext .js .",
+    "lint": "eslint src --ext .vue .",
     "lint:fix": "npm run lint -- --fix",
     "test": "vitest --dom --run",
     "test:ci": "npm run test -- --silent",

@@ -26,7 +26,6 @@
 import { ErrorBoundary, Footer, Header, Spinner } from 'pdap-design-system';
 import AuthWrapper from './components/AuthWrapper.vue';
 import acronym from 'pdap-design-system/images/acronym.svg';
-import lockup from 'pdap-design-system/images/lockup.svg';
 
 import { NAV_LINKS, FOOTER_LINKS } from '@/util/constants';
 import { provide, ref } from 'vue';
@@ -36,7 +35,11 @@ const routeKey = ref(null);
 
 onBeforeRouteUpdate((to, from) => {
   // preserves static key for data source by ID route so that component transition overrides top-level route
-  if ([to.path, from.path].every((path) => path.includes('data-source') && !path.includes('create'))) {
+  if (
+    [to.path, from.path].every(
+      (path) => path.includes('data-source') && !path.includes('create')
+    )
+  ) {
     routeKey.value = 'data-source-by-id';
   } else {
     routeKey.value = to.path;

@@ -49,5 +49,8 @@ export const ENDPOINTS = {
     ID: {
       UPDATE_PASSWORD: 'update-password'
     }
+  },
+  METRICS: {
+    METRICS: 'metrics'
   }
 };
@@ -62,7 +62,7 @@ export async function getDataRequest(id) {
     cached &&
     isCachedResponseValid({
       cacheTime: cached.timestamp,
-      // Cache for 5 minutes
+      // Cache for 3 minutes
       intervalBeforeInvalidation: 1000 * 60 * 3
     })
   ) {
@@ -92,3 +92,48 @@ export async function createRequest(data) {
   requestsStore.clearCache();
   return response.data;
 }
+
+export async function getRecentRequests() {
+  const requestsStore = useDataRequestsStore();
+
+  const cached = requestsStore.getDataRequestFromCache('recent-requests');
+
+  if (
+    cached &&
+    isCachedResponseValid({
+      cacheTime: cached.timestamp,
+      // Cache for 3 minutes
+      intervalBeforeInvalidation: 1000 * 60 * 3,
+    })
+  ) {
+    return cached.data;
+  }
+
+  const params = {
+    sort_by: 'date_created',
+    sort_order: 'DESC',
+    // requested_columns: 'id,title', // Was not working, see data-sources-app/issues/581
+    // request_statuses: 'Intake', // Used for testing, should be 'Ready to start'
+    // limit: 3, // Not supported, see data-sources-app/issues/579
+  };
+
+  const response = await axios.get(REQUESTS_BASE, {
+    headers: HEADERS_BASIC,
+    params,
+  });
+
+  const recentRequests = response.data.data
+    .slice(0, 3)
+    .map((item) => ({
+      id: item.id,
+      title: item.title,
+      status: item.request_status,
+      locationDisplayName:
+        item.locations?.[0]?.display_name || 'Unknown location',
+      route: `/data-request/${item.id}`,
+    }));
+
+  requestsStore.setDataRequestToCache('recent-requests', recentRequests);
+
+  return recentRequests;
+}
@@ -54,3 +54,50 @@ export async function getDataSource(id) {
 
   return response;
 }
+
+export async function getRecentSources() {
+  const dataSourceStore = useDataSourceStore();
+  const cached = dataSourceStore.getDataSourceFromCache('recent-sources');
+
+  if (
+    cached &&
+    isCachedResponseValid({
+      cacheTime: cached.timestamp,
+      // Cache for 3 minutes
+      intervalBeforeInvalidation: 1000 * 60 * 3,
+    })
+  ) {
+    return cached.data;
+  }
+
+  const params = {
+    sort_by: 'created_at',
+    sort_order: 'DESC',
+    // requested_columns: 'id,name,created_at,source_url',  // Was not working, see data-sources-app/issues/581
+    approval_status: 'approved',
+  };
+
+  try {
+    const response = await axios.get(DATA_SOURCES_BASE, {
+      headers: HEADERS_BASIC,
+      params,
+    });
+
+    const recentSources = response.data.data
+      .slice(0, 3)
+      .map((item) => ({
+      id: item.id,
+      name: item.name,
+      createdAt: item.created_at,
+      sourceUrl: item.source_url,
+      route: `/data-source/${item.id}`,
+    }));
+
+    dataSourceStore.setDataSourceToCache('recent-sources', recentSources);
+
+    return recentSources;
+  } catch (error) {
+    console.error('Error fetching recent sources:', error.response?.data || error.message);
+    throw error;
+  }
+}
@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const METRICS_BASE = `${import.meta.env.VITE_API_URL}/metrics`;
+const HEADERS = {
+  'Content-Type': 'application/json'
+};
+const HEADERS_BASIC = {
+  ...HEADERS,
+  authorization: `Basic ${import.meta.env.VITE_API_KEY}`
+};
+
+export async function getMetrics() {
+  const response = await axios.get(`${METRICS_BASE}`, {
+    headers: HEADERS_BASIC
+  });
+  return response.data;
+}