First steps of license store system

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: () => ({