fix: text display for local import page
This commit is contained in:
parent
04bf294d8f
commit
f390b787a5
@ -1,12 +1,13 @@
|
|||||||
<script>
|
<script>
|
||||||
import FileList from '../../../components/import/fileList.svelte';
|
import FileList from '../../../components/import/fileList.svelte';
|
||||||
import FileSelector from '../../../components/import/fileSelector.svelte';
|
import FileSelector from '../../../components/import/fileSelector.svelte';
|
||||||
import { fileListState } from '$lib/state/fileList.state';
|
import { fileListState, finalFileListState } from '$lib/state/fileList.state';
|
||||||
import { localImportFailed, localImportSuccess } from '$lib/state/localImportStatus.state';
|
import { localImportFailed, localImportSuccess } from '$lib/state/localImportStatus.state';
|
||||||
import { useAtom } from 'jotai-svelte';
|
import { useAtom } from 'jotai-svelte';
|
||||||
import localforage from '$lib/storage';
|
import localforage from '$lib/storage';
|
||||||
import { v1 as uuidv1 } from 'uuid';
|
import { v1 as uuidv1 } from 'uuid';
|
||||||
const fileList = useAtom(fileListState);
|
const fileList = useAtom(fileListState);
|
||||||
|
const finalFiles = useAtom(finalFileListState);
|
||||||
const failed = useAtom(localImportFailed);
|
const failed = useAtom(localImportFailed);
|
||||||
const success = useAtom(localImportSuccess);
|
const success = useAtom(localImportSuccess);
|
||||||
</script>
|
</script>
|
||||||
@ -25,7 +26,13 @@
|
|||||||
<FileList />
|
<FileList />
|
||||||
|
|
||||||
<p class="mt-4">
|
<p class="mt-4">
|
||||||
<span>{ $failed.length }个文件导入失败</span> <span class="ml-2">{ $success.length }个文件导入成功</span>
|
<span>待处理 {$fileList.length} 个文件</span>
|
||||||
|
{#if $success.length > 0}
|
||||||
|
<span class="mt-4">{$success.length} 个文件导入成功</span>
|
||||||
|
{/if}
|
||||||
|
{#if $failed.length > 0}
|
||||||
|
<span class="mt-4">{$failed.length} 个文件导入失败</span>
|
||||||
|
{/if}
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
class="mt-1 bg-blue-500 hover:bg-blue-600 duration-200 text-white font-bold py-2 px-5 rounded"
|
class="mt-1 bg-blue-500 hover:bg-blue-600 duration-200 text-white font-bold py-2 px-5 rounded"
|
||||||
@ -35,20 +42,31 @@
|
|||||||
localforage.setItem(audioId + '-file', file, function (err) {
|
localforage.setItem(audioId + '-file', file, function (err) {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
failed.update(prev => [...prev, file]);
|
failed.update((prev) => [...prev, file]);
|
||||||
} else {
|
} else {
|
||||||
if (file.cover==="N/A") {
|
if (file.cover === 'N/A') {
|
||||||
success.update(prev => [...prev, file]);
|
success.update((prev) => [...prev, file]);
|
||||||
|
finalFiles.update((prev) => {
|
||||||
|
return prev.filter((item) => item !== file);
|
||||||
|
});
|
||||||
|
fileList.update((prev) => {
|
||||||
|
return prev.filter((item) => item !== file);
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log(file);
|
|
||||||
let blob = fetch(file.pic).then((r) => {
|
let blob = fetch(file.pic).then((r) => {
|
||||||
localforage.setItem(audioId + '-cover', r.blob(), function (err) {
|
localforage.setItem(audioId + '-cover', r.blob(), function (err) {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
failed.update(prev => [...prev, file]);
|
failed.update((prev) => [...prev, file]);
|
||||||
} else {
|
} else {
|
||||||
success.update(prev => [...prev, file]);
|
success.update((prev) => [...prev, file]);
|
||||||
|
finalFiles.update((prev) => {
|
||||||
|
return prev.filter((item) => item !== file);
|
||||||
|
});
|
||||||
|
fileList.update((prev) => {
|
||||||
|
return prev.filter((item) => item !== file);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -58,4 +76,4 @@
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
导入
|
导入
|
||||||
</button>
|
</button>
|
||||||
|
Loading…
Reference in New Issue
Block a user