Frontend: Add advaned tab to photo edit dialog

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-06-10 14:13:57 +02:00
parent ef876e0754
commit f0c51abc21
4 changed files with 127 additions and 0 deletions

View file

@ -41,6 +41,10 @@
<translate key="Files">Files</translate>
</v-tab>
<v-tab id="tab-info" ripple v-if="$config.feature('edit')">
<translate key="Advanced">Advanced</translate>
</v-tab>
<v-tabs-items touchless>
<v-tab-item>
<p-tab-photo-edit :model="model" ref="edit"
@ -54,6 +58,10 @@
<v-tab-item lazy>
<p-tab-photo-files :model="model" @close="close"></p-tab-photo-files>
</v-tab-item>
<v-tab-item lazy v-if="$config.feature('edit')">
<p-tab-photo-advanced :model="model" @close="close"></p-tab-photo-advanced>
</v-tab-item>
</v-tabs-items>
</v-tabs>
</v-card>
@ -64,6 +72,7 @@
import PhotoEdit from "./photo/edit.vue";
import PhotoLabels from "./photo/labels.vue";
import PhotoFiles from "./photo/files.vue";
import PhotoAdvanced from "./photo/advanced.vue";
export default {
name: 'p-photo-edit-dialog',
@ -77,6 +86,7 @@
'p-tab-photo-edit': PhotoEdit,
'p-tab-photo-labels': PhotoLabels,
'p-tab-photo-files': PhotoFiles,
'p-tab-photo-advanced': PhotoAdvanced,
},
computed: {
title: function () {

View file

@ -0,0 +1,101 @@
<template>
<div class="p-tab p-tab-photo-advanced">
<div class="v-table__overflow">
<table class="v-datatable v-table theme--light">
<tbody>
<tr>
<td>UID</td>
<td>{{ model.UID | uppercase }}</td>
</tr>
<tr>
<td>Path</td>
<td>{{ model.Path }}</td>
</tr>
<tr>
<td>Name</td>
<td>{{ model.Name }}</td>
</tr>
<tr>
<td>Original</td>
<td><v-text-field
@change="save"
flat solo dense hide-details v-model="model.OriginalName"
color="secondary-dark"
style="font-weight: 400; font-size: 13px;"
></v-text-field></td>
</tr>
<tr>
<td>Country</td>
<td>{{ model.countryName() }}</td>
</tr>
<tr>
<td>Year</td>
<td><v-text-field
@change="save"
flat solo dense hide-details v-model="model.Year"
color="secondary-dark"
style="font-weight: 400; font-size: 13px;"
></v-text-field></td>
</tr>
<tr>
<td>Month</td>
<td><v-select @change="save"
label="Month"
flat solo dense hide-details
color="secondary-dark"
style="font-weight: 400; font-size: 13px;"
item-value="Month"
item-text="Name"
v-model="model.Month"
:items="monthOptions">
</v-select></td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import Thumb from "model/thumb";
import {DateTime, Info} from "luxon";
export default {
name: 'p-tab-photo-advanced',
props: {
model: Object,
},
data() {
return {
config: this.$config.values,
readonly: this.$config.get("readonly"),
};
},
computed: {
monthOptions() {
let result = [
{"Month": -1, "Name": this.$gettext("Unknown")},
];
const months = Info.months("long");
for (let i = 0; i < months.length; i++) {
result.push({"Month": i + 1, "Name": months[i]});
}
return result;
},
},
methods: {
save() {
this.model.update();
},
close() {
this.$emit('close');
},
openPhoto() {
this.$viewer.show(Thumb.fromFiles([this.model]), 0)
},
},
};
</script>

View file

@ -28,6 +28,7 @@ export class Photo extends RestModel {
Path: "",
Color: "",
Name: "",
OriginalName: "",
Title: "",
TitleSrc: "",
Description: "",
@ -316,6 +317,18 @@ export class Photo extends RestModel {
return this.Lat !== 0 || this.Lng !== 0;
}
countryName() {
if (this.Country !== "zz") {
const country = countries.find(c => c.Code === this.Country);
if (country) {
return country.Name;
}
}
return "Unknown";
}
locationInfo() {
if (this.PlaceID === "zz" && this.Country !== "zz") {
const country = countries.find(c => c.Code === this.Country);

View file

@ -45,6 +45,9 @@ type Photo struct {
CameraID uint `json:"CameraID"`
CameraSrc string `json:"CameraSrc"`
LensID uint `json:"LensID"`
PhotoYear int `json:"Year"`
PhotoMonth int `json:"Month"`
OriginalName string `json:"OriginalName"`
}
func NewPhoto(m interface{}) (f Photo, err error) {