luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Frontend: Improve photo edit form #217

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-01-26 17:47:52 +01:00
parent 601377d537
commit a8af1f74a8
2 changed files with 66 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/dialog/p-photo-edit-dialog.vue
View file

@ -30,7 +30,7 @@
class="form" class="form"
> >
<v-tab id="tab-edit-general" ripple> <v-tab id="tab-edit-general" ripple>
<translate>General</translate> <translate>Details</translate>
</v-tab> </v-tab>
<v-tab-item> <v-tab-item>
<p-tab-photo-edit-meta :model="model" ref="meta" @cancel="cancel"></p-tab-photo-edit-meta> <p-tab-photo-edit-meta :model="model" ref="meta" @cancel="cancel"></p-tab-photo-edit-meta>

129
frontend/src/dialog/photo-edit/meta.vue
View file

@ -43,6 +43,18 @@
v-model="model.PhotoTitle" v-model="model.PhotoTitle"
></v-text-field> ></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-date-select">
<v-text-field
:value="timeLocalFormatted"
label="Local Time"
readonly
hide-details
color="secondary-dark"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-date-select"> <v-flex xs12 sm6 md3 pa-2 class="p-date-select">
<v-menu <v-menu
v-model="showTimePicker" v-model="showTimePicker"
@ -53,7 +65,7 @@
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-text-field <v-text-field
:value="timeFormatted" :value="timeFormatted"
label="Time (UTC)" label="UTC Time"
readonly readonly
hide-details hide-details
v-on="on" v-on="on"
@ -71,7 +83,6 @@
</v-flex> </v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-date-select"> <v-flex xs12 sm6 md3 pa-2 class="p-date-select">
<v-menu <v-menu
v-model="showDatePicker"
:close-on-content-click="false" :close-on-content-click="false"
full-width full-width
max-width="290" max-width="290"
@ -79,7 +90,7 @@
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-text-field <v-text-field
:value="dateFormatted" :value="dateFormatted"
label="Date" label="UTC Date"
readonly readonly
hide-details hide-details
v-on="on" v-on="on"
@ -106,18 +117,6 @@
</v-autocomplete> </v-autocomplete>
</v-flex> </v-flex>
<v-flex xs12 md3 pa-2 class="p-countries-select">
<v-select
:label="labels.country"
hide-details
color="secondary-dark"
item-value="code"
item-text="name"
v-model="model.PhotoCountry"
:items="countryOptions">
</v-select>
</v-flex>
<v-flex xs12 md6 pa-2 class="p-camera-select"> <v-flex xs12 md6 pa-2 class="p-camera-select">
<v-select <v-select
:label="labels.camera" :label="labels.camera"
@ -168,16 +167,19 @@
v-model="model.PhotoAltitude" v-model="model.PhotoAltitude"
></v-text-field> ></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field <v-flex xs12 sm6 md3 class="pa-2 p-countries-select">
disabled <v-select
:label="labels.country"
hide-details hide-details
label="Views"
placeholder=""
color="secondary-dark" color="secondary-dark"
v-model="model.PhotoViews" item-value="code"
></v-text-field> item-text="name"
v-model="model.PhotoCountry"
:items="countryOptions">
</v-select>
</v-flex> </v-flex>
<v-flex xs12 sm6 md3 class="pa-2"> <v-flex xs12 sm6 md3 class="pa-2">
<v-text-field <v-text-field
hide-details hide-details
@ -217,6 +219,18 @@
></v-text-field> ></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 class="pa-2">
<v-textarea
hide-details
auto-grow
label="Description"
placeholder=""
:rows="1"
color="secondary-dark"
v-model="model.PhotoDescription"
></v-textarea>
</v-flex>
<v-flex xs12 sm6 md3 class="pa-2"> <v-flex xs12 sm6 md3 class="pa-2">
<v-text-field <v-text-field
hide-details hide-details
@ -237,53 +251,21 @@
></v-text-field> ></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
disabled
hide-details
label="Path"
placeholder=""
color="secondary-dark"
v-model="model.PhotoPath"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
disabled
hide-details
label="Name"
placeholder=""
color="secondary-dark"
v-model="model.PhotoName"
></v-text-field>
</v-flex>
<v-flex xs12 md6 class="pa-2">
<v-textarea
hide-details
auto-grow
label="Description"
placeholder=""
:rows="2"
color="secondary-dark"
v-model="model.PhotoDescription"
></v-textarea>
</v-flex>
<v-flex xs12 md6 class="pa-2"> <v-flex xs12 md6 class="pa-2">
<v-textarea <v-textarea
hide-details hide-details
auto-grow auto-grow
label="Notes" label="Notes"
placeholder="" placeholder=""
:rows="2" :rows="1"
color="secondary-dark" color="secondary-dark"
v-model="model.PhotoNotes" v-model="model.PhotoNotes"
></v-textarea> ></v-textarea>
</v-flex> </v-flex>
<v-flex xs12 text-xs-right class="pt-3"> <v-flex xs12 text-xs-right class="pt-3">
<v-btn @click.stop="cancel" depressed color="secondary-light" class="p-photo-dialog-cancel"> <v-btn @click.stop="cancel" depressed color="secondary-light"
class="p-photo-dialog-cancel">
<translate>Close</translate> <translate>Close</translate>
</v-btn> </v-btn>
<v-btn color="secondary-dark" depressed dark @click.stop="save" <v-btn color="secondary-dark" depressed dark @click.stop="save"
@ -304,7 +286,6 @@
import options from "resources/options.json"; import options from "resources/options.json";
import {DateTime} from "luxon"; import {DateTime} from "luxon";
import moment from "moment-timezone" import moment from "moment-timezone"
import Photo from "model/photo"
export default { export default {
name: 'p-tab-photo-edit-meta', name: 'p-tab-photo-edit-meta',
@ -345,19 +326,39 @@
}, },
computed: { computed: {
dateFormatted() { dateFormatted() {
if(!this.date) { if (!this.date) {
return ""; return "";
} }
return DateTime.fromISO(this.date).toLocaleString(DateTime.DATE_FULL); return DateTime.fromISO(this.date).toLocaleString(DateTime.DATE_FULL);
}, },
timeFormatted() { timeFormatted() {
if(!this.time) { if (!this.time) {
return ""; return "";
} }
return DateTime.fromISO(this.time).toLocaleString(DateTime.TIME_24_WITH_SECONDS); return DateTime.fromISO(this.time).toLocaleString(DateTime.TIME_24_WITH_SECONDS);
}, },
timeLocalFormatted() {
if (!this.time || !this.date) {
return ""
}
const utcDate = this.date + "T" + this.time + "Z";
this.model.TakenAt = utcDate;
const localDate = DateTime.fromISO(utcDate).setZone(this.model.TimeZone);
this.model.TakenAtLocal = localDate.toISO({
suppressMilliseconds: true,
includeOffset: false,
}) + "Z";
console.log(this.model.TakenAt, this.model.TakenAtLocal);
return localDate.toLocaleString(DateTime.TIME_24_WITH_SECONDS);
},
countryOptions() { countryOptions() {
return this.all.countries.concat(this.config.countries); return this.all.countries.concat(this.config.countries);
}, },
@ -379,16 +380,16 @@
this.$viewer.show([this.model], 0) this.$viewer.show([this.model], 0)
}, },
refresh(model) { refresh(model) {
if(!model.hasId()) return; if (!model.hasId()) return;
if(model.TakenAt) { if (model.TakenAt) {
const date = DateTime.fromISO(model.TakenAt).toUTC(); const date = DateTime.fromISO(model.TakenAt).toUTC();
this.date = date.toISODate(); this.date = date.toISODate();
this.time = date.toFormat("HH:mm:ss"); this.time = date.toFormat("HH:mm:ss");
} }
}, },
save() { save() {
if(this.time && this.date) { if (this.time && this.date) {
this.model.TakenAt = this.date + "T" + this.time + "Z"; this.model.TakenAt = this.date + "T" + this.time + "Z";
} }