Skip to content

Instantly share code, notes, and snippets.

@dosstx
Created July 5, 2020 14:02
Show Gist options
  • Save dosstx/d420c5843a5dfed6b32c6eb7727eba6f to your computer and use it in GitHub Desktop.
Save dosstx/d420c5843a5dfed6b32c6eb7727eba6f to your computer and use it in GitHub Desktop.
<template>
<div>
<template v-if="photo">
<img :src="photo.url" :id="photo.filename" class="img-fluid thumbnail rounded" :alt="photo.title" />
<h1 class="h3">{{ photo.title }}</h1>
<Tags :photo="photo" />
<p>Share edit close delete flag</p>
<p>Viewed 23 times</p>
<b-button variant="link" class="text-success mb-2" v-if="photo.status == 'Solved'"> <b-icon icon="check-circle" aria-hidden="true"></b-icon> Solved! </b-button>
<b-button
variant="link"
v-b-popover.hover.top="'Accept this answer if your question has been solved or you are satisfied with the responses'"
class="text-secondary mb-2"
v-if="photo.status == 'Unsolved'"
>
<b-icon icon="check-circle" aria-hidden="true"></b-icon> Mark as Solved
</b-button>
<section id="description" class="pb-3">
<SpinButton @spinButton="spinButton" :vertical="vertical" class="d-sm-none w-50" />
<div class="row">
<div class="col-sm-1">
<SpinButton @spinButton="spinButton" class="d-none d-sm-block" />
</div>
<p class="col-sm-11">{{ photo.description }}</p>
</div>
</section>
<AnnotationsCard :clientAnnos="clientAnnos" class="pb-3" />
<p>Asked by {{ photo.username }} on {{ photo.createdAt ? photo.createdAt.toDate().toDateString() : '' }}</p>
<CommentsCard class="pb-3" />
<Contributors />
<p>Know someone who can answer? Share a link</p>
</template>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { Annotorious } from '@recogito/annotorious'
import { db, photosCollection } from '@/firebase'
import SpinButton from '@/components/SpinButton.vue'
import Tags from '@/components/Tags.vue'
import Contributors from '@/components/Contributors.vue'
import CommentsCard from '@/components/CommentsCard.vue'
import AnnotationsCard from '@/components/AnnotationsCard.vue'
export default {
name: 'photoDetail',
components: {
SpinButton,
Tags,
Contributors,
CommentsCard,
AnnotationsCard
},
data() {
return {
photo: null,
// set variable during component creation to use when mounting
anno: {},
clientAnnos: [],
vertical: false
}
},
async mounted() {
// get photo properties
await this.getPhotoDoc()
// initialize Annotorious and assign to 'anno' variable for use throughtout component
this.anno = await new Annotorious({ image: this.photo.filename })
// set annotations if available
await this.setAnnotations()
// listen to annotation events
this.onAnnotate()
this.onUpdateAnnotate()
this.onDeleteAnnotate()
this.setAuthInfo()
},
methods: {
spinButton(value) {
console.log(value)
},
// Helper to find a Firebase doc by annotation ID
findById(id) {
var query = db.collection('annotations').where('id', '==', id)
return query.get().then(function(querySnapshot) {
return querySnapshot.docs[0]
})
},
async setAnnotations() {
try {
const querySnapshot = await db
.collection('annotations')
.where('target.source', '==', this.photo.url)
.get()
// create new array with the annotations comments and tags to use on client
const annotations = await querySnapshot.docs.map(doc => doc.data())
// const data = annotations.map(x => x)
// const test = bodies.forEach(x => x)
// console.log(bodies)
if (annotations.some(({ body }) => body.some(({ creator }) => creator.id === this.userProfile.userId))) {
console.log('yep it exists')
this.anno.addAnnotation()
} else {
console.log('nope no exist')
}
} catch (error) {
console.log(error)
}
},
setAuthInfo() {
const arg = {
id: this.userProfile.userId,
displayName: this.userProfile.username
}
this.anno.setAuthInfo(arg)
},
onAnnotate() {
try {
this.anno.on('createAnnotation', annotation => {
const anno = annotation
anno.photoDocId = this.photo.id
db.collection('annotations')
.add(anno)
.then(docRef => {
console.log('stored anno!', docRef)
})
.catch(error => {
console.log('error when trying to annotate!', error)
})
})
} catch (error) {
console.log('onAnnotate error: ', error)
}
},
onUpdateAnnotate() {
try {
this.anno.on('updateAnnotation', (annotation, previous) => {
this.findById(previous.id).then(doc => doc.ref.update(annotation))
console.log('updated anno!')
})
} catch (error) {
console.log('error updating anno', error)
}
},
onDeleteAnnotate() {
try {
this.anno.on('deleteAnnotation', annotation => {
this.findById(annotation.id)
.then(doc => {
doc.ref.delete()
})
.then(() => {
console.log('doc deleted')
})
})
} catch (error) {
console.log('error deleting annotation', error)
}
},
async getPhotoDoc() {
try {
const docRef = await photosCollection
.doc(this.$route.params.id) // to be dynamic
.get()
if (docRef.exists) {
// data() returns all data about the doc
let photo = await docRef.data()
this.photo = photo
} else {
console.log('no docs exist for this photo')
}
} catch (error) {
console.log('Error getting document:', error)
}
}
},
computed: {
...mapState(['userProfile', 'currentUser'])
}
}
</script>
@rsimon
Copy link

rsimon commented Jul 5, 2020

This won't work. You're checking whether there's any annotation that's by the current user. (And then you're calling addAnnotation with no argument, which won't have any effect.

You need to loop through your annotations. Perform the check for each single annotation, and then use addAnnotation(annotation, !isByCurrentUser).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment