2018-07-05 22:40:24 +02:00
|
|
|
<template>
|
|
|
|
<v-flex xs12 v-if="report" class="reportCard">
|
|
|
|
<div></div>
|
|
|
|
<v-container grid-list-md fluid>
|
|
|
|
<v-layout row align-center>
|
|
|
|
<v-flex xs3 md2>
|
|
|
|
<img :src="report.icon" :alt="report.label" class="icon">
|
|
|
|
</v-flex>
|
2018-08-26 20:34:04 +02:00
|
|
|
<v-flex xs4 md6>
|
2018-07-05 22:40:24 +02:00
|
|
|
<v-layout row wrap>
|
|
|
|
<v-flex xs12 class="firstLine subheading font-weight-medium">
|
|
|
|
{{ report.label }}
|
|
|
|
</v-flex>
|
|
|
|
<v-flex xs12 class="secondLine">
|
2018-07-31 17:04:06 +02:00
|
|
|
{{ $t('reportCard.Reported', { fromNow: report.fromNow }) }}
|
2018-07-05 22:40:24 +02:00
|
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
|
|
</v-flex>
|
|
|
|
<v-flex xs2 class="text-xs-center">
|
2018-11-25 17:43:54 +01:00
|
|
|
<v-btn
|
|
|
|
role="button"
|
|
|
|
:aria-label="$t('buttons.upvote')"
|
|
|
|
color="green"
|
|
|
|
dark
|
|
|
|
small
|
|
|
|
icon
|
|
|
|
class="smallButton"
|
|
|
|
@click.stop="upvote"
|
|
|
|
>
|
2018-11-29 20:26:34 +01:00
|
|
|
<v-icon>mdi-thumb-up</v-icon>
|
2018-07-05 22:40:24 +02:00
|
|
|
</v-btn>
|
|
|
|
</v-flex>
|
|
|
|
|
2018-08-26 20:34:04 +02:00
|
|
|
<v-flex xs3 class="text-xs-center">
|
2018-11-25 17:43:54 +01:00
|
|
|
<v-btn
|
|
|
|
role="button"
|
|
|
|
:aria-label="$t('buttons.downvote')"
|
|
|
|
color="red"
|
|
|
|
dark
|
|
|
|
medium
|
|
|
|
icon
|
|
|
|
class="mediumButton"
|
|
|
|
@click.stop="downvote"
|
|
|
|
>
|
2018-11-29 20:26:34 +01:00
|
|
|
<v-icon>mdi-thumb-down</v-icon>
|
2018-07-05 22:40:24 +02:00
|
|
|
</v-btn>
|
|
|
|
</v-flex>
|
|
|
|
|
|
|
|
<v-btn
|
|
|
|
color="grey"
|
|
|
|
class="lighten-1"
|
|
|
|
dark
|
|
|
|
small
|
|
|
|
absolute
|
|
|
|
bottom
|
|
|
|
left
|
|
|
|
fab
|
|
|
|
@click.stop="closeReportCard"
|
2018-07-11 01:14:54 +02:00
|
|
|
role="button"
|
|
|
|
:aria-label="$t('buttons.close')"
|
2018-07-05 22:40:24 +02:00
|
|
|
>
|
2018-11-29 20:26:34 +01:00
|
|
|
<v-icon>mdi-close</v-icon>
|
2018-07-05 22:40:24 +02:00
|
|
|
</v-btn>
|
|
|
|
</v-layout>
|
|
|
|
</v-container>
|
|
|
|
</v-flex>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-10-25 16:50:38 +02:00
|
|
|
import { REPORT_ALARM_VIBRATION_SEQUENCE } from '@/constants';
|
|
|
|
import REPORT_TYPES from '@/report-types';
|
2018-08-28 20:36:36 +02:00
|
|
|
import { distanceInWordsToNow } from '@/tools/date';
|
2018-07-30 23:08:10 +02:00
|
|
|
import beepSound from '@/assets/beep.mp3';
|
2018-07-05 22:40:24 +02:00
|
|
|
|
|
|
|
export default {
|
|
|
|
computed: {
|
|
|
|
report() {
|
2018-07-12 17:48:26 +02:00
|
|
|
const reportID = this.$store.state.reportDetails.id;
|
2018-07-05 22:40:24 +02:00
|
|
|
if (reportID != null) {
|
|
|
|
const report = this.$store.state.reports.find(item => item.id === reportID);
|
|
|
|
return {
|
2018-08-28 20:36:36 +02:00
|
|
|
fromNow: distanceInWordsToNow(Date.parse(report.attributes.datetime)),
|
2018-07-05 22:40:24 +02:00
|
|
|
icon: this.icons[report.attributes.type],
|
|
|
|
id: report.id,
|
|
|
|
label: this.$t(`reportLabels.${report.attributes.type}`),
|
|
|
|
type: report.attributes.type,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
const icons = {};
|
|
|
|
Object.keys(REPORT_TYPES).forEach((type) => {
|
|
|
|
icons[type] = REPORT_TYPES[type].image;
|
|
|
|
});
|
|
|
|
return {
|
2018-09-04 15:27:50 +02:00
|
|
|
beepAudio: new Audio(beepSound),
|
2018-07-05 22:40:24 +02:00
|
|
|
icons,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
closeReportCard() {
|
2018-07-12 17:48:26 +02:00
|
|
|
return this.$store.dispatch('hideReportDetails');
|
2018-07-05 22:40:24 +02:00
|
|
|
},
|
|
|
|
downvote() {
|
|
|
|
const reportID = this.report.id;
|
2018-08-05 15:47:28 +02:00
|
|
|
this.closeReportCard(); // Resets this.report
|
2018-07-12 17:48:26 +02:00
|
|
|
return this.$store.dispatch('downvote', { id: reportID });
|
2018-07-05 22:40:24 +02:00
|
|
|
},
|
2018-07-30 23:08:10 +02:00
|
|
|
notifyUser() {
|
|
|
|
// Eventually play sound
|
|
|
|
if (this.$store.state.settings.hasPlaySoundPermission) {
|
|
|
|
this.playBeepSound();
|
|
|
|
}
|
|
|
|
// Eventually vibrate
|
|
|
|
if (this.$store.state.settings.hasVibratePermission && navigator.vibrate) {
|
|
|
|
navigator.vibrate(REPORT_ALARM_VIBRATION_SEQUENCE);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
playBeepSound() {
|
|
|
|
// Force play it
|
|
|
|
this.beepAudio.play();
|
|
|
|
},
|
2018-07-05 22:40:24 +02:00
|
|
|
upvote() {
|
|
|
|
const reportID = this.report.id;
|
2018-08-05 15:47:28 +02:00
|
|
|
this.closeReportCard(); // Resets this.report
|
2018-07-12 17:48:26 +02:00
|
|
|
return this.$store.dispatch('upvote', { id: reportID });
|
2018-07-05 22:40:24 +02:00
|
|
|
},
|
|
|
|
},
|
2018-08-01 19:29:39 +02:00
|
|
|
watch: {
|
|
|
|
report(newReport, oldReport) {
|
|
|
|
if (newReport) {
|
|
|
|
const isDifferentReport = (oldReport === null) || (newReport.id !== oldReport.id);
|
|
|
|
// If the report is automatically opened due to proximity
|
|
|
|
if (!this.$store.state.reportDetails.userAsked && isDifferentReport) {
|
|
|
|
this.notifyUser();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
2018-07-05 22:40:24 +02:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.reportCard {
|
|
|
|
position: absolute;
|
|
|
|
z-index: 1001;
|
|
|
|
width: 100%;
|
|
|
|
background-color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
max-height: 52px;
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mediumButton {
|
|
|
|
height: 56px;
|
|
|
|
width: 56px;
|
2018-08-26 20:34:04 +02:00
|
|
|
margin: 0;
|
2018-07-05 22:40:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.smallButton {
|
|
|
|
height: 40px;
|
|
|
|
width: 40px;
|
2018-08-26 20:34:04 +02:00
|
|
|
margin: 0;
|
2018-07-05 22:40:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.secondLine {
|
|
|
|
padding-top: 1px;
|
|
|
|
padding-bottom: 1em !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.firstLine {
|
|
|
|
padding: 2px !important;
|
|
|
|
}
|
|
|
|
</style>
|