maj balise div et vue

package-lock.json

@@ -13,6 +13,7 @@
         "@nextcloud/files": "^3.10.0",
         "@nextcloud/initial-state": "^2.2.0",
         "@nextcloud/vue": "^8.20.0",
+        "jszip": "^3.10.1",
         "vue": "^2.7.16",
         "vue-material-design-icons": "^5.3.1"
       },
@@ -4548,9 +4549,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "dev": true,
+      "license": "MIT"
-      "license": "MIT",
-      "peer": true
     },
     "node_modules/cosmiconfig": {
       "version": "8.3.6",
@@ -7905,6 +7904,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.2.tgz",
@@ -8079,9 +8084,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true,
+      "license": "ISC"
-      "license": "ISC",
-      "peer": true
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -8868,6 +8871,54 @@
         "node": ">=6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -8931,6 +8982,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -10848,9 +10908,7 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true,
+      "license": "(MIT AND Zlib)"
-      "license": "(MIT AND Zlib)",
-      "peer": true
     },
     "node_modules/parent-module": {
       "version": "1.0.1",
@@ -11578,9 +11636,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true,
+      "license": "MIT"
-      "license": "MIT",
-      "peer": true
     },
     "node_modules/property-information": {
       "version": "6.5.0",
@@ -12854,9 +12910,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
       "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "dev": true,
+      "license": "MIT"
-      "license": "MIT",
-      "peer": true
     },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
@@ -14804,7 +14858,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/utils-merge": {

package.json

@@ -21,6 +21,7 @@
     "@nextcloud/files": "^3.10.0",
     "@nextcloud/initial-state": "^2.2.0",
     "@nextcloud/vue": "^8.20.0",
+    "jszip": "^3.10.1",
     "vue": "^2.7.16",
     "vue-material-design-icons": "^5.3.1"
   },

src/App.vue

@@ -5,6 +5,7 @@
 			<!-- Première section -->
 			<div 
 				class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 rounded-xl bg-NcBlack/40">
+				<WebContentViewer zipUrl="http://localhost:8000/dummyZip.zip"/>
 			</div>
 			<!-- Deuxième section -->
 			<div 
@@ -17,12 +18,14 @@
 
 <script>
 import FileTable from './components/FileTable.vue';
+import WebContentViewer from './components/WebContentViewer.vue';
 import './output.css';
 
 export default {
 	name: 'App',
 	components: {
 		FileTable,
+		WebContentViewer  
 	}
 }
 </script>

src/components/WebContentViewer.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="flex flex-col h-full w-full border">
+        <div class="flex h-12 items-center border-b border-gray-300">
+            <div class="w-5/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
+            <div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
+        </div>
+        <div class="overflow-y-auto">
+            <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
+                <div
+                    class="flex items-center pl-4 cursor-pointer"
+                    @click="toggleFolder(file)"
+                    v-if="file.isDirectory"
+                >
+                    <div class="w-5/6 flex items-center px-4 py-2 truncate">
+                        <span class="mr-2">{{ folderMap[file.fullPath] ? '-' : '+' }}</span>
+                        {{ file.fullPath }}
+                    </div>
+                    <div class="w-1/6 px-4 py-2">-</div>
+                </div>
+                <div
+                    class="flex items-center pl-4"
+                    v-else
+                >
+                    <div class="w-5/6 flex items-center px-4 py-2 truncate">
+                        {{ file.fullPath }}
+                    </div>
+                    <div class="w-1/6 px-4 py-2">
+                        {{ formatFileSize(file.size) }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import JSZip from 'jszip';
+
+export default {
+    name: 'WebContentViewer',
+    data() {
+        return {
+            zipContent: [],
+            folderMap: {}, // Map to track folder open/close state
+        };
+    },
+    props: {
+        zipUrl: {
+            type: String,
+            required: true,
+        },
+    },
+    computed: {
+        sortedFiles() {
+            const flattenAndSort = (files, parentPath = '') => {
+                const flatList = [];
+                files.forEach(file => {
+                    const fullPath = parentPath ? `${parentPath}/${file.name}` : file.name;
+
+                    // Toujours ajouter le dossier parent
+                    flatList.push({
+                        ...file,
+                        fullPath,
+                        parentPath,
+                    });
+
+                    // Ajouter les enfants uniquement si le dossier est ouvert
+                    if (file.isDirectory && this.folderMap[fullPath] && file.children) {
+                        flatList.push(...flattenAndSort(file.children, fullPath));
+                    }
+                });
+
+                return flatList.sort((a, b) => a.fullPath.localeCompare(b.fullPath));
+            };
+
+
+            return flattenAndSort(this.zipContent);
+        },
+    },
+    async mounted() {
+        await this.loadZipContent();
+    },
+    methods: {
+        async loadZipContent() {
+            try {
+                const response = await fetch(this.zipUrl);
+                const zipData = await response.blob();
+                const zip = await JSZip.loadAsync(zipData);
+
+                const files = [];
+                zip.forEach((relativePath, file) => {
+                    const pathParts = relativePath.split('/').filter(Boolean);
+
+                    let currentLevel = files;
+                    for (let i = 0; i < pathParts.length; i++) {
+                        const partName = pathParts[i];
+                        const isDirectory = i < pathParts.length - 1 || file.dir;
+                        let existing = currentLevel.find(f => f.name === partName && f.isDirectory === isDirectory);
+
+                        if (!existing) {
+                            existing = {
+                                name: partName,
+                                isDirectory,
+                                size: isDirectory ? 0 : file._data.uncompressedSize,
+                                children: isDirectory ? [] : null,
+                            };
+                            currentLevel.push(existing);
+                        }
+
+                        if (isDirectory) {
+                            currentLevel = existing.children;
+                        }
+                    }
+                });
+
+                this.zipContent = files;
+
+                // Initialize folderMap
+                const initializeFolderMap = (files, parentPath = '') => {
+                    files.forEach(file => {
+                        const fullPath = parentPath ? `${parentPath}/${file.name}` : file.name;
+                        this.$set(this.folderMap, fullPath, false);
+                        if (file.isDirectory && file.children) {
+                            initializeFolderMap(file.children, fullPath);
+                        }
+                    });
+                };
+
+                initializeFolderMap(this.zipContent);
+            } catch (error) {
+                console.error('Erreur lors du chargement du contenu du ZIP :', error);
+            }
+        },
+        formatFileSize(size) {
+            if (size < 1024) return `${size} B`;
+            if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
+            if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`;
+            return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
+        },
+        toggleFolder(file) {
+            if (!file.isDirectory) return;
+            const currentState = this.folderMap[file.fullPath];
+            this.$set(this.folderMap, file.fullPath, !currentState);
+        },
+    },
+};
+</script>
+
+<style scoped>
+/* Ajoutez ici des styles si nécessaire */
+</style>

src/output.css

@@ -579,6 +579,10 @@ video {
   }
 }
 
+.visible {
+  visibility: visible;
+}
+
 .fixed {
   position: fixed;
 }
@@ -591,62 +595,46 @@ video {
   z-index: 50;
 }
 
-.m-6 {
+.mb-4 {
-  margin: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .ml-2 {
   margin-left: 0.5rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
-.mr-4 {
-  margin-right: 1rem;
-}
-
 .ml-3 {
   margin-left: 0.75rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
 
-.ml-auto {
-  margin-left: auto;
-}
-
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
 
-.ml-6 {
+.mr-2 {
-  margin-left: 1.5rem;
+  margin-right: 0.5rem;
-}
-
-.mr-6 {
-  margin-right: 1.5rem;
-}
-
-.inline {
-  display: inline;
 }
 
 .flex {
   display: flex;
 }
 
+.hidden {
+  display: none;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -659,58 +647,55 @@ video {
   height: 100%;
 }
 
-.h-10 {
+.h-5 {
-  height: 2.5rem;
+  height: 1.25rem;
-}
-
-.h-1\/3 {
-  height: 33.333333%;
-}
-
-.h-2\/3 {
-  height: 66.666667%;
 }
 
 .max-h-8 {
   max-height: 2rem;
 }
 
-.w-1\/3 {
-  width: 33.333333%;
-}
-
 .w-1\/6 {
   width: 16.666667%;
 }
 
-.w-12 {
-  width: 3rem;
-}
-
-.w-2\/3 {
-  width: 66.666667%;
-}
-
-.w-4\/6 {
-  width: 66.666667%;
-}
-
-.w-full {
-  width: 100%;
-}
-
 .w-10 {
   width: 2.5rem;
 }
 
-.w-16 {
+.w-12 {
-  width: 4rem;
+  width: 3rem;
+}
+
+.w-4\/6 {
+  width: 66.666667%;
 }
 
 .w-96 {
   width: 24rem;
 }
 
+.w-full {
+  width: 100%;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-5\/6 {
+  width: 83.333333%;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.rotate-90 {
+  --tw-rotate: 90deg;
+  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 {
   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));
 }
@@ -735,10 +720,6 @@ video {
   align-items: center;
 }
 
-.justify-start {
-  justify-content: flex-start;
-}
-
 .justify-end {
   justify-content: flex-end;
 }
@@ -767,14 +748,14 @@ video {
   border-radius: 0.5rem;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -787,6 +768,10 @@ video {
   border-right-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
@@ -797,6 +782,10 @@ video {
   background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
 }
 
+.bg-NcBlack\/40 {
+  background-color: rgb(23 23 23 / 0.4);
+}
+
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
@@ -806,10 +795,6 @@ video {
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
 }
 
-.bg-NcBlue\/20 {
-  background-color: rgb(0 114 195 / 0.2);
-}
-
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
@@ -825,17 +810,14 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
 
-.bg-white {
+.bg-gray-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
 
-.bg-NcBlack\/20 {
+.bg-NcGray {
-  background-color: rgb(23 23 23 / 0.2);
+  --tw-bg-opacity: 1;
-}
+  background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
-
-.bg-NcBlack\/40 {
-  background-color: rgb(23 23 23 / 0.4);
 }
 
 .bg-opacity-50 {
@@ -860,34 +842,47 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .font-medium {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .text-NcBlue {
   --tw-text-opacity: 1;
   color: rgb(0 114 195 / var(--tw-text-opacity, 1));
 }
 
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
-}
-
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
@@ -898,6 +893,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -916,6 +916,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }
@@ -940,6 +946,11 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -957,14 +968,6 @@ video {
 }
 
 @media not all and (min-width: 640px) {
-  .max-sm\:h-1\/3 {
-    height: 33.333333%;
-  }
-
-  .max-sm\:h-2\/3 {
-    height: 66.666667%;
-  }
-
   .max-sm\:h-2\/5 {
     height: 40%;
   }
@@ -973,14 +976,6 @@ video {
     height: 60%;
   }
 
-  .max-sm\:w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .max-sm\:w-2\/3 {
-    width: 66.666667%;
-  }
-
   .max-sm\:max-w-32 {
     max-width: 8rem;
   }
@@ -991,18 +986,6 @@ video {
     margin: 1.5rem;
   }
 
-  .sm\:ml-2 {
-    margin-left: 0.5rem;
-  }
-
-  .sm\:mr-2 {
-    margin-right: 0.5rem;
-  }
-
-  .sm\:h-full {
-    height: 100%;
-  }
-
   .sm\:w-1\/3 {
     width: 33.333333%;
   }
@@ -1014,14 +997,4 @@ video {
   .sm\:flex-row {
     flex-direction: row;
   }
-
-  @media not all and (min-width: 640px) {
-    .sm\:max-sm\:w-1\/3 {
-      width: 33.333333%;
-    }
-
-    .sm\:max-sm\:w-2\/3 {
-      width: 66.666667%;
-    }
-  }
 }