photoprism/frontend/src/dialog/photo/info.vue

<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 v-if="model.DocumentID">
          <td>Document ID</td>
          <td>{{ model.DocumentID | uppercase }}</td>
        </tr>
        <tr>
          <td :title="model.TypeSrc">
            <translate>Type</translate> <v-icon v-if="model.TypeSrc === 'manual'" class="src">check</v-icon>
          </td>
          <td>
            <v-select
                    @change="save"
                    flat solo
                    browser-autocomplete="off"
                    hide-details
                    color="secondary-dark"
                    v-model="model.Type"
                    :items="options.PhotoTypes()"
                    class="input-type">
            </v-select>
          </td>
        </tr>
        <tr v-if="model.Path">
          <td>
            <translate>Folder</translate>
          </td>
          <td>{{ model.Path }}</td>
        </tr>
        <tr>
          <td>
            <translate>Name</translate>
          </td>
          <td>{{ model.Name }}</td>
        </tr>
        <tr v-if="model.OriginalName">
          <td>
            <translate>Original Name</translate>
          </td>
          <td>
            <v-text-field
                    @change="save"
                    flat solo dense hide-details v-model="model.OriginalName"
                    color="secondary-dark"
            ></v-text-field>
          </td>
        </tr>
        <tr>
          <td :title="model.TitleSrc">
            <translate>Title</translate> <v-icon v-if="model.TitleSrc === 'manual'" class="src">check</v-icon>
          </td>
          <td>{{ model.Title }}</td>
        </tr>
        <tr>
          <td :title="model.TakenSrc">
            <translate>Taken</translate> <v-icon v-if="model.TakenSrc === 'manual'" class="src">check</v-icon>
          </td>
          <td>{{ model.getDateString() }}</td>
        </tr>
        <tr>
          <td>
            <translate>Quality Score</translate>
          </td>
          <td>
            <v-rating v-model="model.Quality" :length="7" readonly small></v-rating>
          </td>
        </tr>
        <tr>
          <td>
            <translate>Resolution</translate>
          </td>
          <td>{{ model.Resolution }} MP</td>
        </tr>
        <tr v-if="model.CameraSerial">
          <td>
            <translate>Camera Serial</translate>
          </td>
          <td>{{ model.CameraSerial }}
          </td>
        </tr>
        <tr>
          <td>
            <translate>Favorite</translate>
          </td>
          <td>
            <v-switch
                    @change="save"
                    hide-details
                    v-model="model.Favorite"
                    :label="model.Favorite ? $gettext('Yes') : $gettext('No')"
            ></v-switch>
          </td>
        </tr>
        <tr>
          <td>
            <translate>Private</translate>
          </td>
          <td>
            <v-switch
                    @change="save"
                    hide-details
                    v-model="model.Private"
                    :label="model.Private ? $gettext('Yes') : $gettext('No')"
            ></v-switch>
          </td>
        </tr>
        <tr>
          <td>
            <translate>Scan</translate>
          </td>
          <td>
            <v-switch
                    @change="save"
                    hide-details
                    v-model="model.Scan"
                    :label="model.Scan ? $gettext('Yes') : $gettext('No')"
            ></v-switch>
          </td>
        </tr>
        <tr>
          <td>
            <translate>360°</translate>
          </td>
          <td>
            <v-switch
                    @change="save"
                    hide-details
                    v-model="model.P360"
                    :label="model.P360 ? $gettext('Yes') : $gettext('No')"
            ></v-switch>
          </td>
        </tr>
        <tr>
          <td :title="model.PlaceSrc">
            <translate>Place</translate>  <v-icon v-if="model.PlaceSrc === 'manual'" class="src">check</v-icon>
          </td>
          <td>
            {{ model.locationInfo() }}
          </td>
        </tr>
        <tr v-if="model.Lat">
          <td>
            <translate>Latitude</translate>
          </td>
          <td>
            {{ model.Lat }}
          </td>
        </tr>
        <tr v-if="model.Lng">
          <td>
            <translate>Longitude</translate>
          </td>
          <td>
            {{ model.Lng }}
          </td>
        </tr>
        <tr v-if="model.Altitude">
          <td>
            <translate>Altitude</translate>
          </td>
          <td>
            {{ model.Altitude }} m
          </td>
        </tr>
        <tr v-if="model.Lat">
          <td>
            <translate>Accuracy</translate>
          </td>
          <td>
            <v-text-field
                    @change="save"
                    flat solo dense hide-details v-model="model.CellAccuracy"
                    color="secondary-dark"
                    type="number"
                    suffix="m"
                    style="width: 100px;"
            ></v-text-field>
          </td>
        </tr>
        <tr>
          <td>
            <translate>Created</translate>
          </td>
          <td>
            {{ formatTime(model.CreatedAt) }}
          </td>
        </tr>
        <tr>
          <td>
            <translate>Updated</translate>
          </td>
          <td>
            {{ formatTime(model.UpdatedAt) }}
          </td>
        </tr>
        <tr v-if="model.EditedAt">
          <td>
            <translate>Edited</translate>
          </td>
          <td>
            {{ formatTime(model.EditedAt) }}
          </td>
        </tr>
        <tr v-if="model.CheckedAt">
          <td>
            <translate>Checked</translate>
          </td>
          <td>
            {{ formatTime(model.CheckedAt) }}
          </td>
        </tr>
        <tr v-if="model.DeletedAt">
          <td>
            <translate>Archived</translate>
          </td>
          <td>
            {{ formatTime(model.DeletedAt) }}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
    import Thumb from "model/thumb";
    import {DateTime, Info} from "luxon";
    import * as options from "options/options";

    export default {
        name: 'p-tab-photo-advanced',
        props: {
            model: Object,
            uid: String,
        },
        data() {
            return {
                options: options,
                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: {
            formatTime(s) {
                return DateTime.fromISO(s).toLocaleString(DateTime.DATETIME_MED);
            },
            save() {
                this.model.update();
            },
            close() {
                this.$emit('close');
            },
            openPhoto() {
                this.$viewer.show(Thumb.fromFiles([this.model]), 0)
            },
        },
    };
</script>