mirror of
https://github.com/FoggedLens/deflock.git
synced 2026-05-14 20:48:07 +02:00
major cleanup
This commit is contained in:
Will Freeman
+6
-6
@@ -45,13 +45,10 @@ const items = [
|
||||
{ title: 'Home', icon: 'mdi-home', to: '/' },
|
||||
{ title: 'Map', icon: 'mdi-map', to: '/map' },
|
||||
{ title: 'Learn', icon: 'mdi-school', to: '/what-is-an-alpr' },
|
||||
// { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
|
||||
// { title: 'About', icon: 'mdi-information', to: '/about' },
|
||||
// { title: 'Feature Roadmap', icon: 'mdi-road-variant', to: '/roadmap' },
|
||||
]
|
||||
|
||||
const contributeItems = [
|
||||
{ title: 'Submit Cameras', icon: 'mdi-map-marker-plus', to: '/report/id' },
|
||||
{ title: 'Submit Cameras', icon: 'mdi-map-marker-plus', to: '/report' },
|
||||
{ title: 'Public Records', icon: 'mdi-file-document', to: '/foia' },
|
||||
{ title: 'City Council', icon: 'mdi-account-voice', to: '/council' },
|
||||
]
|
||||
@@ -85,8 +82,11 @@ watch(() => theme.global.name.value, (newTheme) => {
|
||||
>
|
||||
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
|
||||
<v-toolbar-title>
|
||||
<v-img style="cursor: pointer" height="36" width="130" src="/deflock-logo.svg" @click="router.push('/')" />
|
||||
<v-toolbar-title style="flex: unset;">
|
||||
<div style="display: flex; align-items: center; cursor: pointer;" @click="router.push('/')">
|
||||
<v-img height="36" width="36" src="/favicons/apple-icon-144x144.png" />
|
||||
<v-img style="margin-left: 8px;" height="36" width="130" src="/deflock-logo.svg" />
|
||||
</div>
|
||||
</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="counter">
|
||||
<span :class="{ mobile: isMobile }" ref="counterEl" class="font-weight-bold">0</span>
|
||||
<span class="caption"> ALPRs Reported Worldwide</span>
|
||||
<span class="caption"> ALPRs Mapped Worldwide</span>
|
||||
<div :class="{ 'fade-in': showFinalAnimation }" class="subheading fade-text">and rapidly growing!</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -34,9 +34,6 @@ const router = createRouter({
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/AboutView.vue'),
|
||||
meta: {
|
||||
title: 'About | DeFlock'
|
||||
@@ -60,7 +57,7 @@ const router = createRouter({
|
||||
name: 'report',
|
||||
component: () => import('../views/ReportChoose.vue'),
|
||||
meta: {
|
||||
title: 'Report an ALPR | DeFlock'
|
||||
title: 'Submit Cameras | DeFlock'
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -71,24 +68,8 @@ const router = createRouter({
|
||||
title: 'Submit Cameras | DeFlock'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/report/every-door',
|
||||
name: 'reportEveryDoor',
|
||||
component: () => import('../views/ReportEveryDoor.vue'),
|
||||
meta: {
|
||||
title: 'Report using Every Door | DeFlock'
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/operators',
|
||||
name: 'operators',
|
||||
component: () => import('../views/OperatorsView.vue'),
|
||||
meta: {
|
||||
title: 'Operators | DeFlock'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/council',
|
||||
name: 'council',
|
||||
@@ -113,14 +94,6 @@ const router = createRouter({
|
||||
title: 'Contact | DeFlock'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/roadmap',
|
||||
name: 'roadmap',
|
||||
component: () => import('../views/RoadmapView.vue'),
|
||||
meta: {
|
||||
title: 'Roadmap | DeFlock'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/terms',
|
||||
name: 'terms',
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="hero-image">
|
||||
<div class="phone-mockup">
|
||||
<img src="/app-screenshots/3_tagnew-left.webp" alt="DeFlock App Screenshot" class="phone-image" />
|
||||
<img src="/app-screenshots/app_showcase.webp" alt="DeFlock App Screenshot" class="phone-image" />
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -110,7 +110,7 @@
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="screenshots-toggle" style="text-align:center; margin-top:32px;">
|
||||
<!-- <div class="screenshots-toggle" style="text-align:center; margin-top:32px;">
|
||||
<v-btn
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
@@ -120,7 +120,7 @@
|
||||
>
|
||||
{{ showAllScreenshots ? 'Show Less' : 'Show More Screenshots' }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</v-container>
|
||||
</section>
|
||||
@@ -167,22 +167,6 @@
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
<v-alert
|
||||
type="info"
|
||||
variant="tonal"
|
||||
class="privacy-summary-alert"
|
||||
prominent
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon icon="mdi-shield-check" />
|
||||
</template>
|
||||
<div class="text-body-1">
|
||||
<strong>In summary:</strong> DeFlock is designed to protect your privacy while empowering you
|
||||
to understand surveillance in your community. We collect no data, track no behavior,
|
||||
and store no personal information. Your privacy is not a product to be sold.
|
||||
</div>
|
||||
</v-alert>
|
||||
</div>
|
||||
</div>
|
||||
</v-container>
|
||||
@@ -303,75 +287,38 @@ const screenshots: Screenshot[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Interactive Map',
|
||||
description: 'Explore ALPR locations in your area',
|
||||
description: 'Explore ALPR cameras near you',
|
||||
image: '/1_home.webp'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Camera Details',
|
||||
description: 'Get detailed information about each camera',
|
||||
image: '/2_layers.webp'
|
||||
title: 'Report New Cameras',
|
||||
description: 'Add new ALPR locations easily',
|
||||
image: '/13_add_and_place.webp'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Report Interface',
|
||||
description: 'Easily report new cameras you discover',
|
||||
image: '/3_tagnew.webp'
|
||||
title: 'Works Offline',
|
||||
description: 'Log cameras without internet',
|
||||
image: '/26_select_zoom.webp'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Privacy Center',
|
||||
description: 'Access privacy tools and resources',
|
||||
image: '/4_camtags.webp'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Privacy Center',
|
||||
description: 'Access privacy tools and resources',
|
||||
image: '/5_edit.webp'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Privacy Center',
|
||||
description: 'Access privacy tools and resources',
|
||||
image: '/6_edited.webp'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Privacy Center',
|
||||
description: 'Access privacy tools and resources',
|
||||
image: '/7_download.webp'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Privacy Center',
|
||||
description: 'Access privacy tools and resources',
|
||||
image: '/8_settings1.webp'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Privacy Center',
|
||||
description: 'Access privacy tools and resources',
|
||||
image: '/9_settings2.webp'
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
// Statistics
|
||||
const statistics: Statistic[] = [
|
||||
{
|
||||
id: 1,
|
||||
number: '35K+',
|
||||
label: 'ALPRs Mapped'
|
||||
number: '40K+',
|
||||
label: 'Cameras Mapped'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
number: '500+',
|
||||
label: 'Cities Covered'
|
||||
label: 'Communities Covered'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
number: '25K+',
|
||||
number: '1K+',
|
||||
label: 'Contributors'
|
||||
},
|
||||
];
|
||||
@@ -743,7 +690,7 @@ const visibleScreenshots = computed(() =>
|
||||
|
||||
/* Privacy Policy Section */
|
||||
.privacy-policy-section {
|
||||
padding: 100px 0;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.privacy-policy-content {
|
||||
|
||||
@@ -106,10 +106,11 @@
|
||||
|
||||
<style>
|
||||
.hero-section {
|
||||
background: url('/flock-camera.jpeg') no-repeat center center;
|
||||
background: url('/hero.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
padding: 60px 0 50px 0 !important;
|
||||
background-position: right center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -120,7 +121,7 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<v-container class="info-section" max-width="1000">
|
||||
<h2 id="community-datasets">Community Datasets</h2>
|
||||
<p>
|
||||
Here are some datasets that have been shared with us by the community through various collection methods (FOIA requests, scraping, 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-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>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed, watch } from 'vue';
|
||||
import { getCities } from '@/services/apiService';
|
||||
import CommunityDatasets from '@/components/CommunityDatasets.vue';
|
||||
import Footer from '@/components/layout/Footer.vue';
|
||||
|
||||
const page = ref(1);
|
||||
const selectedState = ref('');
|
||||
const cities = ref([]);
|
||||
const filteredCities = computed(() => {
|
||||
if (!selectedState.value) {
|
||||
return cities.value;
|
||||
}
|
||||
|
||||
return cities.value.filter((city: any) => city.state === selectedState.value);
|
||||
});
|
||||
const headers = [
|
||||
{ title: 'State', value: 'state', sortable: true },
|
||||
{ title: 'City', value: 'city', sortable: true },
|
||||
{ title: 'Cameras', value: 'numCameras', sortable: true },
|
||||
{ title: 'Transparency Report', value: 'transparencyReportUrl', sortable: false },
|
||||
];
|
||||
|
||||
const isLoading = computed(() => cities.value.length === 0);
|
||||
const distinctStates = computed(() => Array.from(new Set(cities.value.map((city: any) => city.state))).sort());
|
||||
|
||||
onMounted(() => {
|
||||
getCities().then((data: any) => {
|
||||
cities.value = data;
|
||||
});
|
||||
});
|
||||
|
||||
watch(selectedState, () => {
|
||||
page.value = 1;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* TODO: put this all in one place, also in what-is view */
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.flex-image {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f4f4f4;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: #0081ac;
|
||||
padding: 0.15rem;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,5 @@
|
||||
<template>
|
||||
<Hero
|
||||
:opacity="0.53"
|
||||
imageUrl="/pole-map.webp"
|
||||
title="Add to Our Map"
|
||||
description="We need your help to complete our map!"
|
||||
/>
|
||||
|
||||
<v-container class="mb-16">
|
||||
<v-container class="my-16">
|
||||
<v-row justify="center" class="mb-8">
|
||||
<v-col cols="12" md="8">
|
||||
<h2 class="text-center text-h4 font-weight-bold">Choose Your Reporting Method</h2>
|
||||
@@ -25,28 +18,57 @@
|
||||
class="mx-auto h-100 d-flex flex-column"
|
||||
elevation="4"
|
||||
hover
|
||||
to="/report/id"
|
||||
>
|
||||
<v-card-item class="bg-blue-lighten-5">
|
||||
<v-card-title class="text-h5 font-weight-bold">
|
||||
<v-icon icon="mdi-layers" class="me-2" color="blue-darken-1"></v-icon>
|
||||
Advanced Reporting
|
||||
to="/app"
|
||||
>
|
||||
<v-card-item class="bg-green-darken-3">
|
||||
<v-card-title class="text-h5 font-weight-bold text-white">
|
||||
DeFlock App
|
||||
</v-card-title>
|
||||
<v-card-subtitle class="pt-2">
|
||||
Using the <b>iD OSM editor</b>
|
||||
for iOS and Android
|
||||
</v-card-subtitle>
|
||||
</v-card-item>
|
||||
|
||||
<v-img cover :aspect-ratio="1.5" class="mx-auto mt-5" src="/app-screenshots/df-app.webp" style="width: 90%; border-radius: 8px;" />
|
||||
|
||||
<v-card-text class="text-body-1">
|
||||
<p class="mb-4 sans-serif">The <b>DeFlock App</b> provides a simple mobile interface that's easy to use while walking around.</p>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="pa-4">
|
||||
<v-btn
|
||||
block
|
||||
color="green-darken-2"
|
||||
variant="elevated"
|
||||
size="large"
|
||||
>
|
||||
Download App
|
||||
<v-icon icon="mdi-arrow-right" end></v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="5" class="pa-4">
|
||||
<v-card
|
||||
class="mx-auto h-100 d-flex flex-column"
|
||||
elevation="4"
|
||||
hover
|
||||
to="/report/id"
|
||||
>
|
||||
<v-card-item class="bg-blue-darken-3">
|
||||
<v-card-title class="text-h5 font-weight-bold text-white">
|
||||
Legacy Editor
|
||||
</v-card-title>
|
||||
<v-card-subtitle class="pt-2">
|
||||
Using the <b>OSM Web Editor</b>
|
||||
</v-card-subtitle>
|
||||
</v-card-item>
|
||||
|
||||
<v-img class="mx-auto mt-5" src="/id.webp" style="width: 90%; border-radius: 8px;" />
|
||||
<v-img cover :aspect-ratio="1.5" class="mx-auto mt-5" src="/id.webp" style="width: 90%; border-radius: 8px;" />
|
||||
|
||||
<v-card-text class="text-body-1">
|
||||
<p class="mb-4 sans-serif">For users who want more control. The iD editor provides a comprehensive interface for detailed reporting.</p>
|
||||
<p class="sans-serif">Features:</p>
|
||||
<ul class="ml-4">
|
||||
<li class="my-2">Full-featured editing capabilities</li>
|
||||
<li class="my-2">More detailed attribute settings</li>
|
||||
<li class="mt-2">Advanced mapping interface</li>
|
||||
</ul>
|
||||
<p class="mb-4 sans-serif">The <b>OSM Web Editor</b> provides a more advanced interface for detailed reporting in your web browser.</p>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="pa-4">
|
||||
@@ -57,67 +79,7 @@
|
||||
to="/report/id"
|
||||
size="large"
|
||||
>
|
||||
Choose Advanced
|
||||
<v-icon icon="mdi-arrow-right" end></v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="5" class="pa-4">
|
||||
<v-card
|
||||
class="mx-auto h-100 d-flex flex-column position-relative"
|
||||
elevation="4"
|
||||
:hover="false"
|
||||
>
|
||||
<div class="position-absolute w-100" style="top: 30%; left: 0; right: 0; z-index: 1; transform: rotate(0deg);">
|
||||
<div class="d-flex align-center justify-center py-3"
|
||||
style="background-color: rgba(255, 193, 7, 0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
|
||||
<v-icon icon="mdi-clock-outline" class="me-2" size="large"></v-icon>
|
||||
<span class="text-h5 font-weight-bold">COMING SOON</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="position-absolute"
|
||||
style="top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.25); z-index: 0; border-radius: inherit;">
|
||||
</div>
|
||||
|
||||
<v-card-item class="bg-green-lighten-5">
|
||||
<v-card-title class="text-h5 font-weight-bold">
|
||||
<v-icon icon="mdi-leaf" class="me-2" color="green-darken-1"></v-icon>
|
||||
Easy Reporting
|
||||
</v-card-title>
|
||||
<v-card-subtitle class="pt-2">
|
||||
Using <b>MapComplete</b>
|
||||
</v-card-subtitle>
|
||||
</v-card-item>
|
||||
|
||||
<div>
|
||||
<v-img class="mx-auto mt-5" src="/everydoor.webp" style="width: 90%; border-radius: 8px;" />
|
||||
<div class="position-absolute"
|
||||
style="top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); border-radius: inherit;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-card-text class="text-body-1">
|
||||
<p class="mb-4 sans-serif">Recommended for beginners. MapComplete provides a simple mobile interface that's easy to use while walking around.</p>
|
||||
<p class="sans-serif">Features:</p>
|
||||
<ul class="ml-4">
|
||||
<li class="my-2">Simple, intuitive interface</li>
|
||||
<li class="my-2">Works well on mobile devices</li>
|
||||
<li class="mt-2">Minimal learning curve</li>
|
||||
</ul>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="pa-4">
|
||||
<v-btn
|
||||
block
|
||||
color="grey-darken-4"
|
||||
variant="elevated"
|
||||
size="large"
|
||||
disabled
|
||||
>
|
||||
Choose Easy
|
||||
How to Edit
|
||||
<v-icon icon="mdi-arrow-right" end></v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
@@ -126,10 +88,3 @@
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Hero from '@/components/layout/Hero.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<Hero
|
||||
imageUrl="/everydoor.webp"
|
||||
title="Report using Every Door"
|
||||
description="Add ALPRs to our map using the Every Door app."
|
||||
/>
|
||||
|
||||
<v-container class="mb-16">
|
||||
<h1 class="text-center">Adding to the Map</h1>
|
||||
|
||||
<v-alert
|
||||
type="warning"
|
||||
color="#1297c3"
|
||||
class="my-6"
|
||||
title="Are You Sure it's an ALPR?"
|
||||
>
|
||||
<p>
|
||||
Please ensure that the device you're reporting <a style="color: white; text-decoration: underline;" href="/what-is-an-alpr#photos">is actually an ALPR</a> and not a commonly mistaken traffic detection camera or other device. Adding incorrect data can lead to confusion and inaccuracies on the map.
|
||||
</p>
|
||||
</v-alert>
|
||||
|
||||
<v-stepper-vertical color="rgb(18, 151, 195)" v-model="step" flat non-linear class="my-8" edit-icon="mdi-home">
|
||||
<template v-slot:default="{ step }: { step: any }">
|
||||
<v-stepper-vertical-item
|
||||
class="transparent"
|
||||
:complete="step > 1"
|
||||
title="Create an OpenStreetMap Account"
|
||||
value="1"
|
||||
editable
|
||||
>
|
||||
<p>
|
||||
<a href="https://www.openstreetmap.org/user/new" target="_blank">Sign up for an OpenStreetMap account</a> in order to submit changes.
|
||||
</p>
|
||||
</v-stepper-vertical-item>
|
||||
|
||||
<v-stepper-vertical-item
|
||||
class="transparent"
|
||||
:complete="step > 2"
|
||||
title="Download the Every Door App"
|
||||
value="2"
|
||||
editable
|
||||
>
|
||||
<p>
|
||||
<a target="_blank" href="https://every-door.app/">Download the Every Door app</a> for your device.
|
||||
</p>
|
||||
</v-stepper-vertical-item>
|
||||
|
||||
<v-stepper-vertical-item
|
||||
class="transparent"
|
||||
:complete="step > 3"
|
||||
title="Add the ALPR"
|
||||
value="3"
|
||||
editable
|
||||
>
|
||||
<p>
|
||||
Make sure you're using this mode in order to add an ALPR.
|
||||
</p>
|
||||
<v-img max-width="450" src="/everydoor/1-view-mode.jpg" class="my-8" />
|
||||
|
||||
<p class="mb-8">
|
||||
Find the location of the ALPR on the map. Once found, hit the <b>➕</b> button, verify the placement, and hit the <b>✔️</b>.
|
||||
</p>
|
||||
|
||||
<p class="mb-8">
|
||||
After placing the pin, search for <b>Surveillance Camera</b>:
|
||||
</p>
|
||||
|
||||
<v-img max-width="450" src="/everydoor/3-search.png" class="my-8"></v-img>
|
||||
|
||||
<p class="mb-8">
|
||||
Set the fields to the following values. Use <b>Direction</b> to set the direction the ALPR faces. If you happen to know the manufacturer of the ALPR, include it as shown in the screenshot below. For help identifying the manufacturer, <a href="/what-is-an-alpr#photos">see our vendor photos</a>.
|
||||
</p>
|
||||
|
||||
<v-img max-width="450" src="/everydoor/6-all-fields.png" class="my-8"></v-img>
|
||||
|
||||
<p class="mb-8">
|
||||
When finished, save your changes. You can add multiple cameras before uploading them to OSM as a single changeset.
|
||||
</p>
|
||||
</v-stepper-vertical-item>
|
||||
|
||||
<v-stepper-vertical-item
|
||||
class="transparent"
|
||||
:complete="step > 5"
|
||||
title="Submit Your Changes"
|
||||
value="5"
|
||||
editable
|
||||
>
|
||||
<p>
|
||||
Once you've added the ALPRs to the map, click the <strong>Upload</strong> button at the bottom-left corner of the app.
|
||||
</p>
|
||||
|
||||
<v-img max-width="450" src="/everydoor/7-upload.jpg" class="my-8"></v-img>
|
||||
|
||||
<v-alert
|
||||
variant="tonal"
|
||||
type="info"
|
||||
class="my-6"
|
||||
title="How Long Will It Take?"
|
||||
>
|
||||
<p>
|
||||
We pull data from OpenStreetMap <i>hourly</i>, so it may take up to an hour for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
|
||||
</p>
|
||||
</v-alert>
|
||||
</v-stepper-vertical-item>
|
||||
</template>
|
||||
</v-stepper-vertical>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { VStepperVerticalItem, VStepperVertical } from 'vuetify/labs/components';
|
||||
import Hero from '@/components/layout/Hero.vue';
|
||||
|
||||
const step = ref(parseInt(localStorage.getItem('currentStepED') || '1'));
|
||||
|
||||
onMounted(() => {
|
||||
step.value = parseInt(localStorage.getItem('currentStepED') || '1');
|
||||
});
|
||||
|
||||
watch(step, (newStep) => {
|
||||
localStorage.setItem('currentStepED', newStep.toString());
|
||||
});
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<v-container max-width="1000">
|
||||
<h1>Feature Roadmap</h1>
|
||||
|
||||
<h2>Current Features</h2>
|
||||
<div class="ml-4">
|
||||
<h3><v-icon start>mdi-map</v-icon>Map</h3>
|
||||
<p>
|
||||
View an interactive map showing where ALPRs are deployed.
|
||||
</p>
|
||||
|
||||
<h3><v-icon start>mdi-map-marker-plus</v-icon>Report an ALPR (third party)</h3>
|
||||
<p>
|
||||
Report locations where you spot ALPRs on OpenStreetMap with links and instructions on how to do so.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>Upcoming Features</h2>
|
||||
<div class="ml-4">
|
||||
<h3><v-icon start>mdi-map-marker-plus</v-icon>Report an ALPR on this Site</h3>
|
||||
<p>
|
||||
Report ALPRs directly from this site, without having to use the OSM Editor or copy and paste object tags.
|
||||
</p>
|
||||
|
||||
<h3><v-icon start>mdi-navigation</v-icon>Navigation Around ALPRs</h3>
|
||||
<p>
|
||||
We're working on a feature that will help you navigate around ALPRs, so you can avoid them if you choose.
|
||||
</p>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user