Frontend: Improve photo edit form #217
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer
parent
601377d537
commit
a8af1f74a8
2 changed files with 66 additions and 65 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
|
|
@ -358,6 +339,26 @@
|
||||||
|
|
||||||
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);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue