First steps of license store system

backend/routes/files.routes.ts

@@ -24,7 +24,9 @@ files.get("/folders", async (req: Request, res: Response) => {
 
 
 /**
- * Get all uploaded file names by file name
+ * Get all uploaded file names by folder name
+ * 
+ * @param folder Name of folder on server
  */
 files.get("/:folder", async (req: Request, res: Response) => {
   let result = []
@@ -34,11 +36,13 @@ files.get("/:folder", async (req: Request, res: Response) => {
   fileNames.forEach(file => {
     let resData = fs.readFileSync("./backend/images/" + req.params.folder + "/" + file, "utf8")
 
+    // todo License, Author, URL
     result.push({
       name: file,
       size: fs.statSync("./backend/images/" + req.params.folder + "/" + file).size,
       content: resData,
-      url: "http://localhost:3000/static/" + req.params.folder + "/" + file
+      url: "http://localhost:3000/static/" + req.params.folder + "/" + file,
+      
     })
   })
 

package-lock.json

@@ -14,6 +14,8 @@
         "axios": "^1.7.7",
         "body-parser": "^1.20.2",
         "cors": "^2.8.5",
+        "exif-js": "^2.3.0",
+        "exifreader": "^4.25.0",
         "express": "^4.21.1",
         "jsonwebtoken": "^9.0.2",
         "jspdf": "^2.5.2",
@@ -5023,6 +5025,32 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/exif-js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz",
+      "integrity": "sha512-1Og9pAzG2FZRVlaavH8bB8BTeHcjMdJhKmeQITkX+uLRCD0xPtKAdZ2clZmQdJ56p9adXtJ8+jwrGp/4505lYg==",
+      "license": "MIT"
+    },
+    "node_modules/exifreader": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/exifreader/-/exifreader-4.25.0.tgz",
+      "integrity": "sha512-lPyPXWTUuYgoKdKf3rw2EDoE9Zl7xHoy/ehPNeQ4gFVNLzfLyNMP4oEI+sP0/Czp5r/2i7cFhqg5MHsl4FYtyw==",
+      "hasInstallScript": true,
+      "license": "MPL-2.0",
+      "optionalDependencies": {
+        "@xmldom/xmldom": "^0.9.4"
+      }
+    },
+    "node_modules/exifreader/node_modules/@xmldom/xmldom": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.9.5.tgz",
+      "integrity": "sha512-6g1EwSs8cr8JhP1iBxzyVAWM6BIDvx9Y3FZRIQiMDzgG43Pxi8YkWOZ0nQj2NHgNzgXDZbJewFx/n+YAvMZrfg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14.6"
+      }
+    },
     "node_modules/expand-template": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",

package.json

@@ -38,6 +38,8 @@
     "axios": "^1.7.7",
     "body-parser": "^1.20.2",
     "cors": "^2.8.5",
+    "exif-js": "^2.3.0",
+    "exifreader": "^4.25.0",
     "express": "^4.21.1",
     "jsonwebtoken": "^9.0.2",
     "jspdf": "^2.5.2",

src/components/basics/cardViewTopImage.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-defineProps({
+import { loadLicense } from '@/scripts/imageScripts';
+import { ref, watch } from 'vue';
+
+const props = defineProps({
   image: String,
   errorImage: {
     type: String,
@@ -16,61 +19,78 @@ defineProps({
   },
   loading: Boolean
 })
+
+const license = ref("")
+
+loadLicense(props.image)
+  .then(result => {
+    console.log(result)
+    license.value = result
+  })
 </script>
 
 <template>
-  <v-card
-    variant="tonal"
-    :link="link"
+  <v-tooltip
+    :text="license"
+    location="top"
+    open-delay="200"
   >
-    <v-skeleton-loader
-      :loading="loading"
-      type="image"
-      height="150"
-    >
-      <v-img
-        :src="image"
-        aspect-ratio="1"
-        max-height="200"
-        cover
+    <template #activator="{ props }">
+      <v-card
+        variant="tonal"
+        :link="link"
+        v-bind="props"
       >
-        <template #error>
+        <v-skeleton-loader
+          :loading="loading"
+          type="image"
+          height="150"
+        >
           <v-img
-            :src="'http://localhost:3000/static/' + errorImage"
+            :src="image"
             aspect-ratio="1"
-            style="background-color: aliceblue;"
-          />
-        </template>
-      </v-img>
-    </v-skeleton-loader>
+            max-height="200"
+            cover
+          >
+            <template #error>
+              <v-img
+                :src="'http://localhost:3000/static/' + errorImage"
+                aspect-ratio="1"
+                style="background-color: aliceblue;"
+              />
+            </template>
+          </v-img>
+        </v-skeleton-loader>
 
-    <v-skeleton-loader
-      :loading="loading"
-      type="heading"
-    >
-      <div v-if="title">
-        <v-card-title v-if="!smallerTitle">
-          {{ title }}
-        </v-card-title>
+        <v-skeleton-loader
+          :loading="loading"
+          type="heading"
+        >
+          <div v-if="title">
+            <v-card-title v-if="!smallerTitle">
+              {{ title }}
+            </v-card-title>
 
-        <v-card-title v-else style="font-size: medium">
-          {{ title }}
-        </v-card-title>
-      </div>
-    </v-skeleton-loader>
+            <v-card-title v-else style="font-size: medium">
+              {{ title }}
+            </v-card-title>
+          </div>
+        </v-skeleton-loader>
 
-    <v-skeleton-loader
-      type="sentences"
-      :loading="loading"
-    >
-      <div class="px-4 pb-4 text-disabled" v-if="$slots.default">
-        <slot></slot>
-      </div>
-    </v-skeleton-loader>
+        <v-skeleton-loader
+          type="sentences"
+          :loading="loading"
+        >
+          <div class="px-4 pb-4 text-disabled" v-if="$slots.default">
+            <slot></slot>
+          </div>
+        </v-skeleton-loader>
 
-    <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
-      <v-spacer />
-      <slot name="actions"></slot>
-    </v-card-actions>
-  </v-card>
+        <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
+          <v-spacer />
+          <slot name="actions"></slot>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-tooltip>
 </template>

src/pages/admin/filesAdminPage/index.vue

@@ -50,7 +50,7 @@ filesStore.getStaticFolders()
 
       <v-col class="border">
         <v-row>
-          <v-col>
+          <v-col v-if="filesStore.selectedFile != undefined">
             {{ filesStore.selectedFile.url }}
           </v-col>
         </v-row>

src/pages/misc/imageLicensePage/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useFilesStore } from '@/stores/files.store';
+
+
+const filesStore = useFilesStore()
+
+filesStore.getStaticFiles()
+</script>
+
+<template>
+  <v-img v-for="image of filesStore.staticFiles" :src="image.url"/>
+</template>

src/router/routes.ts

@@ -15,6 +15,7 @@ import LoginPage from "@/pages/account/loginPage/index.vue"
 import PreferencesPage from "@/pages/misc/preferencesPage/index.vue";
 import HelpPage from "@/pages/misc/helpPage/index.vue"
 import ErrorPage from "@/pages/misc/errorPage/index.vue"
+import ImageLicensePage from "@/pages/misc/imageLicensePage/index.vue"
 
 const routes = [
   // Main page
@@ -52,6 +53,7 @@ const routes = [
   { path: '/basket', component: BasketPage },
   { path: '/preferences', component: PreferencesPage },
   { path: '/help', component: HelpPage },
+  { path: '/license', component: ImageLicensePage },
 
   // Error Page
   { path: "/404", component: ErrorPage }

src/scripts/imageScripts.ts

@@ -0,0 +1,13 @@
+import { load } from "exifreader"
+
+export async function loadLicense(url: string){
+  let result = ""
+
+  await load(url)
+    .then(tags => {
+      result = tags["Copyright"]["description"] + " by " + tags["Artist"]["description"]
+    })
+    .catch(e => {})
+
+  return result
+}

src/stores/files.store.ts

@@ -35,7 +35,7 @@ export const useFilesStore = defineStore('filesStore', {
     },
 
     /**
-     * Request all available static files on server
+     * Request static files on server by selected folder
      */
     async getStaticFiles() {
       this.fetchInProgress = true

src/stores/location.store.ts

@@ -6,6 +6,7 @@ import { CityModel } from "../data/models/locations/cityModel";
 import { fetchAllCities } from "../data/api/cityApi";
 import { LocationDetailsApiModel } from "@/data/models/locations/locationDetailsApiModel";
 import { useFeedbackStore } from "./feedback.store";
+import { getData, getTag } from "exif-js";
 
 export const useLocationStore = defineStore("locationStore", {
   state: () => ({