CalvinBackup/deflock
1
0
Fork 0
mirror of https://github.com/FoggedLens/deflock.git synced 2026-09-01 15:11:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

improvements on upload page... might be dropping auth0

Browse Source
This commit is contained in:
Will Freeman
2024-12-04 17:44:00 -07:00
parent dc3affa8fb
commit c489d7dbae
4 changed files with 86 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/App.vue
+13 -6
View File
@@ -2,6 +2,7 @@
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import { useTheme } from 'vuetify'; import { useTheme } from 'vuetify';
import { useRouter } from 'vue-router';
import { useAuth0 } from '@auth0/auth0-vue'; import { useAuth0 } from '@auth0/auth0-vue';
const { isAuthenticated, user, isLoading, loginWithRedirect, logout } = useAuth0(); const { isAuthenticated, user, isLoading, loginWithRedirect, logout } = useAuth0();
@@ -10,6 +11,7 @@ const logoutParams = {
}; };
const theme = useTheme(); const theme = useTheme();
const router = useRouter();
function toggleTheme() { function toggleTheme() {
const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark'; const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
@@ -55,7 +57,7 @@ watch(() => theme.global.name.value, (newTheme) => {
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title> <v-toolbar-title>
<v-img height="36" width="130" src="/deflock-logo.svg" /> <v-img style="cursor: pointer" height="36" width="130" src="/deflock-logo.svg" @click="router.push('/')" />
</v-toolbar-title> </v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
@@ -65,12 +67,17 @@ watch(() => theme.global.name.value, (newTheme) => {
</v-btn> </v-btn>
<v-menu activator="#menu-activator"> <v-menu activator="#menu-activator">
<v-list> <v-list v-if="isAuthenticated">
<v-list-item v-if="isAuthenticated" @click="logout({logoutParams})"> <v-list-item to="/upload">
<v-list-item-title>Log Out</v-list-item-title> <v-list-item-title><v-icon start>mdi-map-marker-plus</v-icon>Report</v-list-item-title>
</v-list-item> </v-list-item>
<v-list-item v-else @click="loginWithRedirect"> <v-list-item @click="logout({logoutParams})">
<v-list-item-title>Log In</v-list-item-title> <v-list-item-title><v-icon start>mdi-logout</v-icon>Log Out</v-list-item-title>
</v-list-item>
</v-list>
<v-list v-else>
<v-list-item @click="loginWithRedirect">
<v-list-item-title><v-icon start>mdi-login</v-icon>Log In</v-list-item-title>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
webapp/src/router/index.ts
+1 -1
View File
@@ -63,7 +63,7 @@ const router = createRouter({
path: '/upload', path: '/upload',
name: 'upload', name: 'upload',
component: () => import('../views/ReportPhoto.vue'), component: () => import('../views/ReportPhoto.vue'),
beforeEnter: routeGuard // beforeEnter: routeGuard
}, },
{ {
path: '/dashboard', path: '/dashboard',
webapp/src/views/Dashboard.vue
+2 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<v-container> <v-container>
<h1>Review Submissions</h1> <h2 class="text-center mb-4">Community Submissions</h2>
<v-data-table <v-data-table
:loading="isLoading" :loading="isLoading"
@@ -8,6 +8,7 @@
:items="submissions" :items="submissions"
:items-per-page="10" :items-per-page="10"
class="elevation-1" class="elevation-1"
no-data-text="Yay! No submissions to review."
> >
<template #item.review="{ item }: { item: Submission }"> <template #item.review="{ item }: { item: Submission }">
<v-btn @click="reviewSubmission(item)" color="primary" variant="text">Review</v-btn> <v-btn @click="reviewSubmission(item)" color="primary" variant="text">Review</v-btn>
webapp/src/views/ReportPhoto.vue
+70 -77
View File
@@ -1,77 +1,79 @@
<template> <template>
<v-container> <v-container>
<v-dialog
v-model="showLoginDialog" <h2 class="text-center mb-4">Report an ALPR</h2>
persistent
>
<v-card>
<v-card-title class="text-center">Account Required</v-card-title>
<v-card-text>
<p>
To report an ALPR, you must be logged in. Please log in to continue.
</p>
</v-card-text>
<v-card-actions>
<v-btn color="primary" @click="loginWithPopup">Log In/Sign Up</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<div> <div>
<v-card> <div style="position: relative">
<v-card-title> <v-overlay :model-value="!isAuthenticated" persistent contained class="d-flex flex-column align-center justify-center">
Report with a Geotagged Photo <div>
</v-card-title> <v-card class="text-center" style="max-width: 90%; margin: auto;">
<v-card-text> <v-card-title>
<p> Login Required
If you snapped a picture of an ALPR your phone, you can upload it here where it will be reviewed and added to the map. </v-card-title>
</p> <v-card-text>
<div class="mt-8"> Use the Log In button above to report an ALPR using a photo.
<v-file-input </v-card-text>
v-model="files" </v-card>
accept="image/*,.heif,.heic" </div>
label="Upload Photos" </v-overlay>
prepend-icon="mdi-camera" <v-card>
multiple <v-card-title>
show-size <v-icon>mdi-camera-marker</v-icon>
counter Report with a Geotagged Photo
@update:model-value="checkGeotagging" </v-card-title>
></v-file-input> <v-card-text>
<p>
<v-alert If you snapped a picture of an ALPR your phone, you can upload it here where it will be reviewed and added to the map.
v-if="errorMessage" </p>
type="error" <div class="mt-8">
dismissible <v-file-input
> v-model="files"
<span>{{ errorMessage }}</span> accept="image/*,.heif,.heic"
<p>If you continue to experience issues, try <router-link to="/report">manually reporting</router-link>.</p> label="Upload Photos"
</v-alert> prepend-icon="mdi-camera"
multiple
<v-alert show-size
v-else-if="areAllImagesGeotagged" counter
type="success" @update:model-value="checkGeotagging"
dismissible hint="Up to 5 photos at once, 1 photo per ALPR"
> persistent-hint
Found Geotags! ></v-file-input>
</v-alert>
<v-alert
<v-checkbox v-if="errorMessage"
v-model="agree" type="error"
label="I agree this information is accurate" dismissible
></v-checkbox> class="mt-2"
</div> >
</v-card-text> <span>{{ errorMessage }}</span>
<v-card-actions> <p>If you continue to experience issues, try <router-link style="color: white" to="/report">manually reporting</router-link>.</p>
<span class="pl-4 text-grey-darken-1">Submitting as {{ user?.name }}</span> </v-alert>
<v-spacer/>
<v-btn :loading="isSubmitting" color="primary" @click="upload" :disabled="!canSubmit">Submit</v-btn> <v-alert
</v-card-actions> v-else-if="areAllImagesGeotagged"
</v-card> type="success"
dismissible
>
Found Geotags!
</v-alert>
</div>
</v-card-text>
<v-card-actions>
<span class="pl-4 text-grey-darken-1">Submitting as {{ user?.name }}</span>
<v-spacer/>
<v-btn :loading="isSubmitting" color="primary" @click="upload" :disabled="!canSubmit">Submit</v-btn>
</v-card-actions>
</v-card>
</div>
<v-divider class="my-8">OR</v-divider> <v-divider class="my-8">OR</v-divider>
<v-card> <v-card>
<v-card-title>Report Manually</v-card-title> <v-card-title>
<v-icon>mdi-typewriter</v-icon>
Report Manually
</v-card-title>
<v-card-text> <v-card-text>
<p class=mb-4> <p class=mb-4>
If you don't have a geotagged photo, you can report manually by providing the location and a description of the ALPR. If you don't have a geotagged photo, you can report manually by providing the location and a description of the ALPR.
@@ -91,7 +93,6 @@ import { getPresignedUrls } from '@/services/apiService';
const { loginWithPopup, user, isAuthenticated } = useAuth0(); const { loginWithPopup, user, isAuthenticated } = useAuth0();
const agree = ref(false);
const files = ref<File[]>([]); const files = ref<File[]>([]);
const errorMessage = ref(''); const errorMessage = ref('');
const areAllImagesGeotagged = ref(false); const areAllImagesGeotagged = ref(false);
@@ -99,18 +100,10 @@ const showLoginDialog = ref(false); // TODO: changeme
const presignedUrls = ref<string[]>([]); const presignedUrls = ref<string[]>([]);
const isSubmitting = ref(false); const isSubmitting = ref(false);
// watch(isAuthenticated, async (isAuthenticated) => {
// if (isAuthenticated) {
// showLoginDialog.value = false;
// } else {
// showLoginDialog.value = true;
// }
// });
const MAX_FILE_SIZE = 8 * 1024 * 1024; // 8 MB const MAX_FILE_SIZE = 8 * 1024 * 1024; // 8 MB
const canSubmit = computed(() => { const canSubmit = computed(() => {
return agree.value && files.value.length > 0 && areAllImagesGeotagged.value && !isSubmitting.value; return files.value.length > 0 && areAllImagesGeotagged.value && !isSubmitting.value;
}); });
const checkGeotagging = async () => { const checkGeotagging = async () => {
@@ -138,7 +131,7 @@ const checkGeotagging = async () => {
return; return;
} }
// fetch presigned urls ahead of time to save time // Fetch presigned urls ahead of time
getPresignedUrls(files.value.length, files.value[0].type, 'willfreeman').then((urls) => { getPresignedUrls(files.value.length, files.value[0].type, 'willfreeman').then((urls) => {
presignedUrls.value = urls; presignedUrls.value = urls;
}); });