debug de l'application vue

This commit is contained in:
2025-10-26 18:30:50 +01:00
parent 79271514b4
commit bbecd8efb5
4 changed files with 88 additions and 15 deletions

View File

@@ -71,7 +71,7 @@
<div class="image-wrapper">
<img
:src="getImageUrl(image.pk, 256)"
:alt="image.source_url"
:alt="resolveOrigin(image) || image.pk"
loading="lazy"
@error="handleImageError"
/>
@@ -81,8 +81,8 @@
</div>
<div class="image-info">
<div class="pk">{{ image.pk }}</div>
<div class="url" :title="image.source_url">
{{ truncateUrl(image.source_url) }}
<div class="url" :title="resolveOrigin(image) || 'Unknown source'">
{{ truncateUrl(resolveOrigin(image)) }}
</div>
<div class="meta">
<span v-if="image.last_used" class="last-used">
@@ -108,13 +108,17 @@
<button class="modal-close" @click="selectedImage = null">✕</button>
<img
:src="getImageUrl(selectedImage.pk)"
:alt="selectedImage.source_url"
:alt="resolveOrigin(selectedImage) || selectedImage.pk"
class="modal-image"
/>
<div class="modal-info">
<h3>Image Details</h3>
<p><strong>PK:</strong> {{ selectedImage.pk }}</p>
<p><strong>Source URL:</strong> <a :href="selectedImage.source_url" target="_blank">{{ selectedImage.source_url }}</a></p>
<p v-if="resolveOrigin(selectedImage)">
<strong>Source URL:</strong>
<a :href="resolveOrigin(selectedImage)" target="_blank">{{ resolveOrigin(selectedImage) }}</a>
</p>
<p v-else><strong>Source URL:</strong> Unknown</p>
<p><strong>Hits:</strong> {{ selectedImage.hits }}</p>
<p v-if="selectedImage.last_used"><strong>Last Used:</strong> {{ formatDate(selectedImage.last_used) }}</p>
<div class="modal-actions">
@@ -141,6 +145,7 @@ import {
purgeCache,
consolidateCache,
getImageUrl,
getOriginUrl,
waitForDownload,
} from "../services/coverCache";
@@ -229,7 +234,14 @@ function copyImageUrl(pk:string){
alert("✅ URL copied!");
}
function truncateUrl(url:string,maxLength=40){ return url.length<=maxLength?url:url.slice(0,maxLength-3)+"..."; }
function resolveOrigin(entry: CacheEntry | null): string | undefined {
return entry ? getOriginUrl(entry) : undefined;
}
function truncateUrl(url?:string,maxLength=40){
if(!url) return "Unknown source";
return url.length<=maxLength?url:url.slice(0,maxLength-3)+"...";
}
function formatDate(dateString:string){
const d=new Date(dateString), diff=Date.now()-d.getTime(), days=Math.floor(diff/(1000*60*60*24));
if(days===0)return"Today"; if(days===1)return"Yesterday"; if(days<7)return`${days} days ago`; return d.toLocaleDateString();