KAZ/webtransfer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reparation drag and drop zip

Browse Source
This commit is contained in:
Alexandre_BRAVO 2024-11-21 15:09:02 +01:00
commit d0598f1022
4 changed files with 32 additions and 42964 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42957
js/main.js
View File

File diff suppressed because one or more lines are too long

1
js/main.js.map
View File

File diff suppressed because one or more lines are too long

16
src/components/WebContentViewer.vue
View File

@ -4,7 +4,7 @@
<div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div> <div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
<div class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div> <div class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
</div> </div>
<div class="overflow-y-auto"> <div v-if="!isLoading && zipContent.length !== 0" class="overflow-y-auto">
<div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col"> <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
<div <div
@ -66,6 +66,12 @@
</div> </div>
</div> </div>
<div v-if="isLoading" class="flex h-full items-center justify-center">
<component :is="Loading" class="text-white w-24 h-24 animate-spin" size="48" />
</div>
<div v-if="!isLoading && zipContent.length === 0" class="flex h-full items-center justify-center">
<span class="text-gray-500">Aucun contenu à afficher</span>
</div>
</div> </div>
</template> </template>
@ -73,6 +79,8 @@
import JSZip from 'jszip'; import JSZip from 'jszip';
import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'; import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue'; import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
import Loading from 'vue-material-design-icons/Loading.vue';
import { ref } from 'vue';
export default { export default {
name: 'WebContentViewer', name: 'WebContentViewer',
@ -83,7 +91,9 @@ export default {
archiveUrl: '', archiveUrl: '',
token: '', token: '',
ChevronRightIcon, ChevronRightIcon,
ChevronDownIcon ChevronDownIcon,
isLoading: ref(false),
Loading,
}; };
}, },
props: { props: {
@ -120,6 +130,7 @@ export default {
}, },
}, },
async mounted() { async mounted() {
this.isLoading = true;
await this.loadZipContent(); await this.loadZipContent();
const webTransferDiv = document.getElementById('archiveInfos'); const webTransferDiv = document.getElementById('archiveInfos');
if (webTransferDiv) { if (webTransferDiv) {
@ -128,6 +139,7 @@ export default {
} else { } else {
console.error('Pas d\'informations pour recuperer l\'archive'); console.error('Pas d\'informations pour recuperer l\'archive');
} }
this.isLoading = false;
}, },
methods: { methods: {
async loadZipContent() { async loadZipContent() {

22
src/output.css
View File

@ -639,6 +639,10 @@ video {
height: 100%; height: 100%;
} }
.h-24 {
height: 6rem;
}
.max-h-8 { .max-h-8 {
max-height: 2rem; max-height: 2rem;
} }
@ -675,12 +679,12 @@ video {
width: 100%; width: 100%;
} }
.max-w-32 { .w-16 {
max-width: 8rem; width: 4rem;
} }
.max-w-48 { .w-24 {
max-width: 12rem; width: 6rem;
} }
.max-w-64 { .max-w-64 {
@ -691,6 +695,16 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }