Add file page endpoint

sist2-vue/src/App.vue

@@ -310,4 +310,8 @@ mark {
   display: inline-block;
   width: 40%;
 }
+
+.pointer {
+  cursor: pointer;
+}
 </style>

sist2-vue/src/components/DocCard.vue

@@ -10,39 +10,7 @@
       <ContentDiv :doc="doc"></ContentDiv>
 
       <!-- Thumbnail-->
-      <div v-if="doc._props.hasThumbnail" class="img-wrapper" @mouseenter="onTnEnter()" @mouseleave="onTnLeave()">
-        <div v-if="doc._props.isAudio" class="card-img-overlay" :class="{'small-badge': smallBadge}">
-          <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
-        </div>
-
-        <div
-            v-if="doc._props.isImage && !hover && doc._props.tnW / doc._props.tnH < 5"
-            class="card-img-overlay"
-            :class="{'small-badge': smallBadge}">
-          <span class="badge badge-resolution">{{ `${doc._source.width}x${doc._source.height}` }}</span>
-        </div>
-
-        <div v-if="(doc._props.isVideo || doc._props.isGif) && doc._source.duration > 0 && !hover"
-             class="card-img-overlay"
-             :class="{'small-badge': smallBadge}">
-          <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
-        </div>
-
-        <div v-if="doc._props.isPlayableVideo" class="play">
-          <svg viewBox="0 0 494.942 494.942" xmlns="http://www.w3.org/2000/svg">
-            <path d="m35.353 0 424.236 247.471-424.236 247.471z"/>
-          </svg>
-        </div>
-
-        <img ref="tn"
-             v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
-             :src="(doc._props.isGif && hover) ? `f/${doc._id}` : `t/${doc._source.index}/${doc._id}`"
-             alt=""
-             :style="{height: (doc._props.isGif && hover) ? `${tnHeight()}px` : undefined}"
-             class="pointer fit card-img-top" @click="onThumbnailClick()">
-        <img v-else :src="`t/${doc._source.index}/${doc._id}`" alt=""
-             class="fit card-img-top">
-      </div>
+      <FullThumbnail :doc="doc" :small-badge="smallBadge" @onThumbnailClick="onThumbnailClick()"></FullThumbnail>
 
       <!-- Audio player-->
       <audio v-if="doc._props.isAudio" ref="audio" preload="none" class="audio-fit fit" controls
@@ -73,31 +41,19 @@ import TagContainer from "@/components/TagContainer.vue";
 import DocFileTitle from "@/components/DocFileTitle.vue";
 import DocInfoModal from "@/components/DocInfoModal.vue";
 import ContentDiv from "@/components/ContentDiv.vue";
+import FullThumbnail from "@/components/FullThumbnail";
 
 
 export default {
-  components: {ContentDiv, DocInfoModal, DocFileTitle, TagContainer},
+  components: {FullThumbnail, ContentDiv, DocInfoModal, DocFileTitle, TagContainer},
   props: ["doc", "width"],
   data() {
     return {
       ext: ext,
       showInfo: false,
-      hover: false
     }
   },
   computed: {
-    placeHolderStyle() {
-
-      const tokens = this.doc._source.thumbnail.split(",");
-      const w = Number(tokens[0]);
-      const h = Number(tokens[1]);
-
-      const MAX_HEIGHT = 400;
-
-      return {
-        height: `${Math.min((h / w) * this.width, MAX_HEIGHT)}px`,
-      }
-    },
     smallBadge() {
       return this.width < 150;
     }
@@ -119,31 +75,10 @@ export default {
         }
       });
     },
-    onTnEnter() {
-      this.hover = true;
-    },
-    onTnLeave() {
-      this.hover = false;
-    },
-    tnHeight() {
-      return this.$refs.tn.height;
-    }
   },
 }
 </script>
 <style>
-.img-wrapper {
-  position: relative;
-}
-
-.img-wrapper:hover svg {
-  fill: rgba(0, 0, 0, 1);
-}
-
-.pointer {
-  cursor: pointer;
-}
-
 .fit {
   display: block;
   min-width: 64px;
@@ -153,15 +88,17 @@ export default {
   width: auto;
   height: auto;
 }
+
+.audio-fit {
+  height: 39px;
+  vertical-align: bottom;
+  display: inline;
+  width: 100%;
+}
 </style>
 
 <style scoped>
 
-.card-img-top {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .padding-03 {
   padding: 0.3rem;
 }
@@ -179,55 +116,11 @@ export default {
   padding: 0.3rem;
 }
 
-.thumbnail-placeholder {
-
-}
-
-.card-img-overlay {
-  pointer-events: none;
-  padding: 0.75rem;
-  bottom: unset;
-  top: 0;
-  left: unset;
-  right: unset;
-}
-
-.badge-resolution {
-  color: #212529;
-  background-color: #FFC107;
-}
-
-.play {
-  position: absolute;
-  width: 25px;
-  height: 25px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.play svg {
-  fill: rgba(0, 0, 0, 0.7);
-}
-
 .doc-card {
   padding-left: 3px;
   padding-right: 3px;
 }
 
-.small-badge {
-  padding: 1px 3px;
-  font-size: 70%;
-}
-
-.audio-fit {
-  height: 39px;
-  vertical-align: bottom;
-  display: inline;
-  width: 100%;
-}
-
 .sub-document .card {
   background: #AB47BC1F !important;
 }

sist2-vue/src/components/DocInfoModal.vue

@@ -2,7 +2,10 @@
   <b-modal :visible="show" size="lg" :hide-footer="true" static lazy @close="$emit('close')" @hide="$emit('close')"
   >
     <template #modal-title>
-      <h5 class="modal-title" :title="doc._source.name + ext(doc)">{{ doc._source.name + ext(doc) }}</h5>
+      <h5 class="modal-title" :title="doc._source.name + ext(doc)">
+        {{ doc._source.name + ext(doc) }}
+        <router-link :to="`/file?byId=${doc._id}`">#</router-link>
+      </h5>
     </template>
 
     <img v-if="doc._props.hasThumbnail" :src="`t/${doc._source.index}/${doc._id}`" alt="" class="fit card-img-top">

sist2-vue/src/components/DocListItem.vue

@@ -6,6 +6,8 @@
     <DocInfoModal :show="showInfo" :doc="doc" @close="showInfo = false"></DocInfoModal>
 
     <div class="media ml-2">
+
+      <!-- Thumbnail-->
       <div v-if="doc._props.hasThumbnail" class="align-self-start mr-2 wrapper-sm">
         <div class="img-wrapper">
           <div v-if="doc._props.isPlayableVideo" class="play">
@@ -26,6 +28,7 @@
         <FileIcon></FileIcon>
       </div>
 
+      <!-- Doc line-->
       <div class="doc-line ml-3">
         <div style="display: flex">
           <span class="info-icon" @click="showInfo = true"></span>
@@ -154,6 +157,7 @@ export default {
 .list-group-item .img-wrapper {
   width: 88px;
   height: 88px;
+  position: relative;
 }
 
 .fit-sm {

sist2-vue/src/components/FullThumbnail.vue

@@ -0,0 +1,113 @@
+<template>
+  <div v-if="doc._props.hasThumbnail" class="img-wrapper" @mouseenter="onTnEnter()" @mouseleave="onTnLeave()">
+    <div v-if="doc._props.isAudio" class="card-img-overlay" :class="{'small-badge': smallBadge}">
+      <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
+    </div>
+
+    <div
+        v-if="doc._props.isImage && !hover && doc._props.tnW / doc._props.tnH < 5"
+        class="card-img-overlay"
+        :class="{'small-badge': smallBadge}">
+      <span class="badge badge-resolution">{{ `${doc._source.width}x${doc._source.height}` }}</span>
+    </div>
+
+    <div v-if="(doc._props.isVideo || doc._props.isGif) && doc._source.duration > 0 && !hover"
+         class="card-img-overlay"
+         :class="{'small-badge': smallBadge}">
+      <span class="badge badge-resolution">{{ humanTime(doc._source.duration) }}</span>
+    </div>
+
+    <div v-if="doc._props.isPlayableVideo" class="play">
+      <svg viewBox="0 0 494.942 494.942" xmlns="http://www.w3.org/2000/svg">
+        <path d="m35.353 0 424.236 247.471-424.236 247.471z"/>
+      </svg>
+    </div>
+
+    <img ref="tn"
+         v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
+         :src="(doc._props.isGif && hover) ? `f/${doc._id}` : `t/${doc._source.index}/${doc._id}`"
+         alt=""
+         :style="{height: (doc._props.isGif && hover) ? `${tnHeight()}px` : undefined}"
+         class="pointer fit card-img-top" @click="onThumbnailClick()">
+    <img v-else :src="`t/${doc._source.index}/${doc._id}`" alt=""
+         class="fit card-img-top">
+  </div>
+</template>
+
+<script>
+import {humanTime} from "@/util";
+
+export default {
+  name: "FullThumbnail",
+  props: ["doc", "smallBadge"],
+  data() {
+    return {
+      hover: false
+    }
+  },
+  methods: {
+    humanTime: humanTime,
+    onThumbnailClick() {
+      this.$emit("onThumbnailClick");
+    },
+    tnHeight() {
+      return this.$refs.tn.height;
+    },
+    onTnEnter() {
+      this.hover = true;
+    },
+    onTnLeave() {
+      this.hover = false;
+    },
+  }
+}
+</script>
+
+<style scoped>
+.img-wrapper {
+  position: relative;
+}
+
+.img-wrapper:hover svg {
+  fill: rgba(0, 0, 0, 1);
+}
+
+.card-img-top {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.play {
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.play svg {
+  fill: rgba(0, 0, 0, 0.7);
+}
+
+.badge-resolution {
+  color: #212529;
+  background-color: #FFC107;
+}
+
+.card-img-overlay {
+  pointer-events: none;
+  padding: 0.75rem;
+  bottom: unset;
+  top: 0;
+  left: unset;
+  right: unset;
+}
+
+.small-badge {
+  padding: 1px 3px;
+  font-size: 70%;
+}
+
+</style>

sist2-vue/src/components/InfoTable.vue

@@ -1,6 +1,5 @@
 <template>
   <b-table :items="tableItems" small borderless responsive="md" thead-class="hidden" class="mb-0 mt-4">
-
     <template #cell(value)="data">
       <span v-if="'html' in data.item" v-html="data.item.html"></span>
       <span v-else>{{ data.value }}</span>
@@ -33,12 +32,18 @@ function dmsToDecimal(dms, ref) {
 export default {
   name: "InfoTable",
   props: ["doc"],
+  data() {
+    return {
+      indexName: "loading..."
+    }
+  },
   computed: {
     tableItems() {
+      this.indexName;
       const src = this.doc._source;
 
       const items = [
-        {key: "index", value: `[${this.$store.getters.indexMap[src.index].name}]`},
+        {key: "index", value: `[${this.indexName}]`},
         {key: "mtime", value: humanDate(src.mtime)},
         {key: "mime", value: src.mime},
         {key: "size", value: humanFileSize(src.size)},
@@ -85,7 +90,16 @@ export default {
 
       return items;
     }
+  },
+  mounted() {
+    if (this.$store.getters.indexMap[this.doc.index]) {
+      this.indexName = this.$store.getters.indexMap[this.doc._source.index].name
     }
+
+    window.setTimeout(() => {
+      this.indexName = this.$store.getters.indexMap[this.doc._source.index].name
+    }, 500)
+  },
 }
 </script>
 

sist2-vue/src/i18n/messages.ts

@@ -1,5 +1,8 @@
 export default {
     en: {
+        filePage: {
+          notFound: "Not found"
+        },
         searchBar: {
             simple: "Search",
             advanced: "Advanced search",
@@ -162,6 +165,9 @@ export default {
         },
     },
     fr: {
+        filePage: {
+            notFound: "Ficher introuvable"
+        },
         searchBar: {
             simple: "Recherche",
             advanced: "Recherche avancée",
@@ -326,6 +332,9 @@ export default {
         },
     },
     "zh-CN": {
+        filePage: {
+            notFound: "未找到"
+        },
         searchBar: {
             simple: "搜索",
             advanced: "高级搜索",

sist2-vue/src/router/index.ts

@@ -3,6 +3,7 @@ import VueRouter, {RouteConfig} from "vue-router"
 import StatsPage from "../views/StatsPage.vue"
 import Configuration from "../views/Configuration.vue"
 import SearchPage from "@/views/SearchPage.vue";
+import FilePage from "@/views/FilePage.vue";
 
 Vue.use(VueRouter)
 
@@ -21,6 +22,11 @@ const routes: Array<RouteConfig> = [
         path: "/config",
         name: "Configuration",
         component: Configuration
+    },
+    {
+        path: "/file",
+        name: "File",
+        component: FilePage
     }
 ]
 

sist2-vue/src/util.ts

@@ -1,8 +1,12 @@
 import {EsHit} from "@/Sist2Api";
 
 export function ext(hit: EsHit) {
-    return Object.prototype.hasOwnProperty.call(hit._source, "extension")
-    && hit["_source"]["extension"] !== "" ? "." + hit["_source"]["extension"] : "";
+    return srcExt(hit._source)
+}
+
+export function srcExt(src) {
+    return Object.prototype.hasOwnProperty.call(src, "extension")
+        && src["extension"] !== "" ? "." + src["extension"] : "";
 }
 
 export function strUnescape(str: string): string {

sist2-vue/src/views/FilePage.vue

@@ -0,0 +1,131 @@
+<template>
+  <div style="margin-left: auto; margin-right: auto;" class="container">
+    <Preloader v-if="loading"></Preloader>
+    <b-card v-else-if="!loading && found">
+      <b-card-title :title="doc._source.name + ext(doc)">
+        {{ doc._source.name + ext(doc) }}
+      </b-card-title>
+
+      <!-- Thumbnail-->
+      <div style="position: relative; margin-left: auto; margin-right: auto; text-align: center">
+        <FullThumbnail :doc="doc" :small-badge="false" @onThumbnailClick="onThumbnailClick()"></FullThumbnail>
+      </div>
+
+      <!-- Audio player-->
+      <audio v-if="doc._props.isAudio" ref="audio" preload="none" class="audio-fit fit" controls
+             :type="doc._source.mime"
+             :src="`f/${doc._id}`"></audio>
+
+      <InfoTable :doc="doc" v-if="doc"></InfoTable>
+
+      <div v-if="doc._source.content" class="content-div">{{ doc._source.content }}</div>
+    </b-card>
+    <div v-else>
+      <b-card>
+        <b-card-title>{{ $t("filePage.notFound") }}</b-card-title>
+      </b-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import Preloader from "@/components/Preloader.vue";
+import InfoTable from "@/components/InfoTable.vue";
+import Sist2Api from "@/Sist2Api";
+import {ext} from "@/util";
+import Vue from "vue";
+import sist2 from "@/Sist2Api";
+import FullThumbnail from "@/components/FullThumbnail";
+
+export default Vue.extend({
+  name: "FilePage",
+  components: {
+    FullThumbnail,
+    Preloader,
+    InfoTable
+  },
+  data() {
+    return {
+      loading: true,
+      found: false,
+      doc: null
+    }
+  },
+  methods: {
+    ext: ext,
+    onThumbnailClick() {
+      window.open(`/f/${this.doc._id}`, "_blank");
+    },
+    findById(id) {
+      return {
+        query: {
+          bool: {
+            must: [
+              {
+                match: {
+                  "_id": id
+                }
+              }
+            ]
+          }
+        },
+        size: 1
+      }
+    },
+    findByName(name) {
+      return {
+        query: {
+          bool: {
+            must: [
+              {
+                match: {
+                  "name": name
+                }
+              }
+            ]
+          }
+        },
+        size: 1
+      }
+    }
+
+  },
+  mounted() {
+    if (this.$store.state.sist2Info === null) {
+      sist2.getSist2Info().then(data => {
+        this.$store.dispatch("setSist2Info", data);
+        this.$store.commit("setIndices", data.indices);
+      });
+    }
+
+    let query = null;
+    if (this.$route.query.byId) {
+      query = this.findById(this.$route.query.byId);
+    } else if (this.$route.query.byName) {
+      query = this.findByName(this.$route.query.byName);
+    }
+
+    if (query) {
+      Sist2Api.esQuery(query).then(result => {
+        if (result.hits.hits.length === 0) {
+          this.found = false;
+        } else {
+          this.doc = result.hits.hits[0];
+          this.found = true;
+        }
+
+        this.loading = false;
+      });
+    } else {
+      this.loading = false;
+      this.found = false;
+    }
+  }
+});
+</script>
+
+<style scoped>
+.img-wrapper {
+  display: inline-block;
+}
+</style>