mirror of
https://github.com/FoggedLens/deflock.git
synced 2026-07-16 16:57:20 +02:00
store current location in pinia
This commit is contained in:
Will Freeman
+113
-142
@@ -1,76 +1,76 @@
|
||||
<template>
|
||||
<!-- Hero Section -->
|
||||
<v-container fluid class="hero-section">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="8" class="text-center">
|
||||
<h1 class="display-1 px-8">You're Being Tracked by ALPRs!</h1>
|
||||
<ALPRCounter class="mt-4" />
|
||||
<p class="subtitle-1 px-8 mt-6 mb-12">
|
||||
Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
|
||||
</p>
|
||||
<v-btn color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
|
||||
Find Nearby ALPRs
|
||||
<v-icon end>mdi-map</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Information Section -->
|
||||
<v-container class="info-section py-10">
|
||||
<v-row class="align-center">
|
||||
<v-col cols="12" md="4" class="text-center">
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
<v-icon x-large class="mr-2">mdi-shield-alert</v-icon>
|
||||
Privacy Violations
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history. They surveil mostly innocent people while claiming to target criminals.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" class="text-center">
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
<v-icon x-large class="mr-2">mdi-alert-circle</v-icon>
|
||||
Risk of Misuse
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
Data from ALPRs has led to <a target="_blank" href="https://www.newsobserver.com/news/state/north-carolina/article287381160.html">wrongful arrests</a>, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" class="text-center">
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
<v-icon x-large class="mr-2">mdi-handcuffs</v-icon>
|
||||
Limited Benefits
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
There's no substantial evidence that ALPRs effectively prevent crime, despite <a target="_blank" href="https://www.404media.co/researcher-who-oversaw-flock-surveillance-study-now-has-concerns-about-it/">Flock's unethical attempts</a> to prove otherwise.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Map Section -->
|
||||
<v-container class="map-section py-10 text-center">
|
||||
<h2 class="display-2 mb-4">Explore ALPR Locations Near You</h2>
|
||||
<v-btn color="white" large @click="goToMap">
|
||||
View the Map
|
||||
<v-icon end>mdi-map</v-icon>
|
||||
</v-btn>
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="8" class="text-center">
|
||||
<h1 class="display-1 px-8">You're Being Tracked by ALPRs!</h1>
|
||||
<ALPRCounter class="mt-4" />
|
||||
<p class="subtitle-1 px-8 mt-6 mb-12">
|
||||
Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
|
||||
</p>
|
||||
<v-btn color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
|
||||
Find Nearby ALPRs
|
||||
<v-icon end>mdi-map</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Information Section -->
|
||||
<v-container class="info-section py-10">
|
||||
<v-row class="align-center">
|
||||
<v-col cols="12" md="4" class="text-center">
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
<v-icon x-large class="mr-2">mdi-shield-alert</v-icon>
|
||||
Privacy Violations
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history. They surveil mostly innocent people while claiming to target criminals.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" class="text-center">
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
<v-icon x-large class="mr-2">mdi-alert-circle</v-icon>
|
||||
Risk of Misuse
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
Data from ALPRs has led to <a target="_blank" href="https://www.newsobserver.com/news/state/north-carolina/article287381160.html">wrongful arrests</a>, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" class="text-center">
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
<v-icon x-large class="mr-2">mdi-handcuffs</v-icon>
|
||||
Limited Benefits
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
There's no substantial evidence that ALPRs effectively prevent crime, despite <a target="_blank" href="https://www.404media.co/researcher-who-oversaw-flock-surveillance-study-now-has-concerns-about-it/">Flock's unethical attempts</a> to prove otherwise.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Map Section -->
|
||||
<v-container class="map-section py-10 text-center">
|
||||
<h2 class="display-2 mb-4">Explore ALPR Locations Near You</h2>
|
||||
<v-btn color="white" large @click="goToMap">
|
||||
View the Map
|
||||
<v-icon end>mdi-map</v-icon>
|
||||
</v-btn>
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-footer class="text-center">
|
||||
<span class="attribution">
|
||||
Maps © <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.
|
||||
</span>
|
||||
</v-footer>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@@ -80,22 +80,22 @@
|
||||
color: white;
|
||||
padding: 100px 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-section > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.hero-section > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
@@ -103,83 +103,54 @@
|
||||
}
|
||||
|
||||
.map-section {
|
||||
background: url('/deflock-screenshot.webp') no-repeat center center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
padding: 100px 0;
|
||||
position: relative;
|
||||
}
|
||||
.map-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 1;
|
||||
}
|
||||
background: url('/deflock-screenshot.webp') no-repeat center center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
padding: 100px 0;
|
||||
position: relative;
|
||||
}
|
||||
.map-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.map-section > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.map-section > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import ALPRCounter from '@/components/ALPRCounter.vue';
|
||||
import { useGlobalStore } from '@/stores/global';
|
||||
|
||||
const router = useRouter();
|
||||
const userLocation = ref<[number, number] | null>(null);
|
||||
|
||||
async function fetchUserLocation(): Promise<[number, number]> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
resolve([position.coords.latitude, position.coords.longitude]);
|
||||
},
|
||||
(error) => {
|
||||
reject(error);
|
||||
},
|
||||
{
|
||||
timeout: 10000,
|
||||
enableHighAccuracy: true,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
reject(new Error('Geolocation is not supported by this browser.'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function getUserLocation() {
|
||||
try {
|
||||
const [lat, lon] = await fetchUserLocation();
|
||||
userLocation.value = [lat, lon];
|
||||
} catch (error) {
|
||||
console.debug('Error fetching user location:', error);
|
||||
}
|
||||
}
|
||||
const { setCurrentLocation } = useGlobalStore();
|
||||
|
||||
interface GoToMapOptions {
|
||||
withCurrentLocation?: boolean;
|
||||
withCurrentLocation?: boolean;
|
||||
}
|
||||
|
||||
async function goToMap(options: GoToMapOptions = {}) {
|
||||
if (options.withCurrentLocation) {
|
||||
await getUserLocation();
|
||||
if (userLocation.value) {
|
||||
const [lat, lon] = userLocation.value;
|
||||
router.push({ path: '/map', hash: `#map=14/${lat.toFixed(6)}/${lon.toFixed(6)}` });
|
||||
} else {
|
||||
router.push({ path: '/map', hash: '#map=14/40.0150/-105.2705' });
|
||||
}
|
||||
} else {
|
||||
router.push({ path: '/map' });
|
||||
}
|
||||
if (options.withCurrentLocation) {
|
||||
setCurrentLocation()
|
||||
.then((currentLocation) => {
|
||||
const [lat, lon] = currentLocation;
|
||||
router.push({ path: '/map', hash: `#map=12/${lat.toFixed(6)}/${lon.toFixed(6)}` });
|
||||
})
|
||||
.catch(() => {
|
||||
router.push({ path: '/map' });
|
||||
});
|
||||
} else {
|
||||
router.push({ path: '/map' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+11
-28
@@ -58,6 +58,7 @@ import { BoundingBox } from '@/services/apiService';
|
||||
import type { Cluster } from '@/services/apiService';
|
||||
import { getALPRs, geocodeQuery, getClusters } from '@/services/apiService';
|
||||
import { useDisplay, useTheme } from 'vuetify';
|
||||
import { useGlobalStore } from '@/stores/global';
|
||||
import type { ALPR } from '@/types';
|
||||
import L from 'leaflet';
|
||||
globalThis.L = L;
|
||||
@@ -74,7 +75,6 @@ const center: Ref<any|null> = ref(null);
|
||||
const bounds: Ref<BoundingBox|null> = ref(null);
|
||||
const searchField: Ref<any|null> = ref(null);
|
||||
const searchQuery: Ref<string> = ref('');
|
||||
const currentLocation: Ref<any|null> = ref(null);
|
||||
|
||||
const router = useRouter();
|
||||
const { xs } = useDisplay();
|
||||
@@ -92,6 +92,11 @@ const bboxForLastRequest: Ref<BoundingBox|null> = ref(null);
|
||||
const showClusters = computed(() => zoom.value <= CLUSTER_ZOOM_THRESHOLD);
|
||||
const isLoadingALPRs = ref(false);
|
||||
|
||||
const globalStore = useGlobalStore();
|
||||
|
||||
const setCurrentLocation = globalStore.setCurrentLocation;
|
||||
const currentLocation = computed(() => globalStore.currentLocation);
|
||||
|
||||
const visibleALPRs = computed(() => {
|
||||
return alprs.value.filter(alpr => bounds.value?.containsPoint(alpr.lat, alpr.lon));
|
||||
});
|
||||
@@ -122,38 +127,16 @@ function onSearch() {
|
||||
}
|
||||
|
||||
function goToUserLocation() {
|
||||
getUserLocation()
|
||||
.then(location => {
|
||||
console.log('User location:', location);
|
||||
center.value = { lat: location[0], lng: location[1] };
|
||||
setCurrentLocation()
|
||||
.then((cl) => {
|
||||
center.value = cl;
|
||||
zoom.value = DEFAULT_ZOOM;
|
||||
}).catch(error => {
|
||||
})
|
||||
.catch(error => {
|
||||
console.debug('Error getting user location.', error);
|
||||
});
|
||||
}
|
||||
|
||||
function getUserLocation(): Promise<[number, number]> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
currentLocation.value = { lat: position.coords.latitude, lng: position.coords.longitude };
|
||||
resolve([position.coords.latitude, position.coords.longitude]);
|
||||
},
|
||||
(error) => {
|
||||
reject(error);
|
||||
},
|
||||
{
|
||||
timeout: 10000,
|
||||
enableHighAccuracy: true,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
reject(new Error('Geolocation is not supported by this browser.'));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function updateBounds(newBounds: any) {
|
||||
updateURL();
|
||||
|
||||
|
||||
@@ -128,42 +128,12 @@
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import ALPRCounter from '@/components/ALPRCounter.vue';
|
||||
import { useGlobalStore } from '@/stores/global';
|
||||
|
||||
const router = useRouter();
|
||||
const userLocation = ref<[number, number] | null>(null);
|
||||
|
||||
async function fetchUserLocation(): Promise<[number, number]> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
resolve([position.coords.latitude, position.coords.longitude]);
|
||||
},
|
||||
(error) => {
|
||||
reject(error);
|
||||
},
|
||||
{
|
||||
timeout: 10000,
|
||||
enableHighAccuracy: true,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
reject(new Error('Geolocation is not supported by this browser.'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function getUserLocation() {
|
||||
try {
|
||||
const [lat, lon] = await fetchUserLocation();
|
||||
userLocation.value = [lat, lon];
|
||||
} catch (error) {
|
||||
console.debug('Error fetching user location:', error);
|
||||
}
|
||||
}
|
||||
const { setCurrentLocation } = useGlobalStore();
|
||||
|
||||
interface GoToMapOptions {
|
||||
withCurrentLocation?: boolean;
|
||||
@@ -171,13 +141,14 @@ interface GoToMapOptions {
|
||||
|
||||
async function goToMap(options: GoToMapOptions = {}) {
|
||||
if (options.withCurrentLocation) {
|
||||
await getUserLocation();
|
||||
if (userLocation.value) {
|
||||
const [lat, lon] = userLocation.value;
|
||||
setCurrentLocation()
|
||||
.then((currentLocation) => {
|
||||
const [lat, lon] = currentLocation;
|
||||
router.push({ path: '/map', hash: `#map=16/${lat.toFixed(6)}/${lon.toFixed(6)}` });
|
||||
} else {
|
||||
router.push({ path: '/map', hash: '#map=16/40.0150/-105.2705' });
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
router.push({ path: '/map' });
|
||||
});
|
||||
} else {
|
||||
router.push({ path: '/map' });
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user