Frontend: Add advaned tab to photo edit dialog
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
parent
ef876e0754
commit
f0c51abc21
|
@ -41,6 +41,10 @@
|
||||||
<translate key="Files">Files</translate>
|
<translate key="Files">Files</translate>
|
||||||
</v-tab>
|
</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-tabs-items touchless>
|
||||||
<v-tab-item>
|
<v-tab-item>
|
||||||
<p-tab-photo-edit :model="model" ref="edit"
|
<p-tab-photo-edit :model="model" ref="edit"
|
||||||
|
@ -54,6 +58,10 @@
|
||||||
<v-tab-item lazy>
|
<v-tab-item lazy>
|
||||||
<p-tab-photo-files :model="model" @close="close"></p-tab-photo-files>
|
<p-tab-photo-files :model="model" @close="close"></p-tab-photo-files>
|
||||||
</v-tab-item>
|
</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-items>
|
||||||
</v-tabs>
|
</v-tabs>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
@ -64,6 +72,7 @@
|
||||||
import PhotoEdit from "./photo/edit.vue";
|
import PhotoEdit from "./photo/edit.vue";
|
||||||
import PhotoLabels from "./photo/labels.vue";
|
import PhotoLabels from "./photo/labels.vue";
|
||||||
import PhotoFiles from "./photo/files.vue";
|
import PhotoFiles from "./photo/files.vue";
|
||||||
|
import PhotoAdvanced from "./photo/advanced.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'p-photo-edit-dialog',
|
name: 'p-photo-edit-dialog',
|
||||||
|
@ -77,6 +86,7 @@
|
||||||
'p-tab-photo-edit': PhotoEdit,
|
'p-tab-photo-edit': PhotoEdit,
|
||||||
'p-tab-photo-labels': PhotoLabels,
|
'p-tab-photo-labels': PhotoLabels,
|
||||||
'p-tab-photo-files': PhotoFiles,
|
'p-tab-photo-files': PhotoFiles,
|
||||||
|
'p-tab-photo-advanced': PhotoAdvanced,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
title: function () {
|
title: function () {
|
||||||
|
|
101
frontend/src/dialog/photo/advanced.vue
Normal file
101
frontend/src/dialog/photo/advanced.vue
Normal 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>
|
|
@ -28,6 +28,7 @@ export class Photo extends RestModel {
|
||||||
Path: "",
|
Path: "",
|
||||||
Color: "",
|
Color: "",
|
||||||
Name: "",
|
Name: "",
|
||||||
|
OriginalName: "",
|
||||||
Title: "",
|
Title: "",
|
||||||
TitleSrc: "",
|
TitleSrc: "",
|
||||||
Description: "",
|
Description: "",
|
||||||
|
@ -316,6 +317,18 @@ export class Photo extends RestModel {
|
||||||
return this.Lat !== 0 || this.Lng !== 0;
|
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() {
|
locationInfo() {
|
||||||
if (this.PlaceID === "zz" && this.Country !== "zz") {
|
if (this.PlaceID === "zz" && this.Country !== "zz") {
|
||||||
const country = countries.find(c => c.Code === this.Country);
|
const country = countries.find(c => c.Code === this.Country);
|
||||||
|
|
|
@ -45,6 +45,9 @@ type Photo struct {
|
||||||
CameraID uint `json:"CameraID"`
|
CameraID uint `json:"CameraID"`
|
||||||
CameraSrc string `json:"CameraSrc"`
|
CameraSrc string `json:"CameraSrc"`
|
||||||
LensID uint `json:"LensID"`
|
LensID uint `json:"LensID"`
|
||||||
|
PhotoYear int `json:"Year"`
|
||||||
|
PhotoMonth int `json:"Month"`
|
||||||
|
OriginalName string `json:"OriginalName"`
|
||||||
}
|
}
|
||||||
|
|
||||||
func NewPhoto(m interface{}) (f Photo, err error) {
|
func NewPhoto(m interface{}) (f Photo, err error) {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user