From 903cc6e0ae0a02796053d21d37c56fefddb198c9 Mon Sep 17 00:00:00 2001
From: Younes Barrad <younesbarraddev@gmail.com>
Date: Sun, 19 Jun 2022 13:46:39 +0100
Subject: [PATCH] added same URL original structure option top multiple urls
 option

---
 pages/index.vue                   | 39 +++++++++++++++++++++++++++++--
 server-middleware/website-shot.js | 16 +++++++++----
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index ae4b899..7c992dc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -60,6 +60,28 @@
             class="border !border-red-500"
           ></b-button>
         </div>
+        <b-field>
+          <b-checkbox type="is-info" v-model="params.keepUrlStructure">
+            Use Same URL Original Structure
+            <b-tooltip type="is-success is-dark" position="is-bottom">
+              <template v-slot:content>
+                <div class="text-base">
+                  <b>Unchecked:</b> Saves screenshots of all pages in the same
+                  parent folder.
+                  <br />
+                  <b>Checked:</b> Saves screenshots of all pages in their own
+                  folders.
+                </div>
+              </template>
+              <b-icon
+                type="is-success"
+                icon="information-outline"
+                size="is-small"
+              >
+              </b-icon>
+            </b-tooltip>
+          </b-checkbox>
+        </b-field>
       </div>
 
       <div class="s-grid">
@@ -463,7 +485,6 @@
           @click="generateScreenshot"
           type="is-info"
           class="border !border-primary-100"
-          :disabled="loading || !params.url"
           >Capture Screenshot</b-button
         >
       </div>
@@ -544,6 +565,7 @@ export default {
             url: null,
           },
         ],
+        keepUrlStructure: false,
       },
       imageFormats: ["png", "jpeg", "webp"],
       pdfFile: null,
@@ -659,12 +681,17 @@ export default {
         "Letter",
         "Legal",
       ],
+      disableBtn: true,
     };
   },
   mounted() {},
   methods: {
     async generateScreenshot() {
-      if (!this.loading && this.params.url !== null) {
+      if (
+        this.selectedType == "multiple-imgs" ||
+        !this.loading ||
+        this.params.url !== null
+      ) {
         this.loading = true;
         this.result = {
           url: null,
@@ -755,6 +782,14 @@ export default {
     "params.height"() {
       this.params.size = `${this.params.width}x${this.params.height}`;
     },
+    selectedType() {
+      this.params.url = null;
+      this.params.urls = [
+        {
+          url: null,
+        },
+      ];
+    },
   },
 };
 </script>
diff --git a/server-middleware/website-shot.js b/server-middleware/website-shot.js
index c246c09..36b9028 100644
--- a/server-middleware/website-shot.js
+++ b/server-middleware/website-shot.js
@@ -80,7 +80,11 @@ CustomBufferBuilder.prototype.getBuffer = function () {
 app.post("/screenshot", async (req, res) => {
   const params = req.body;
 
-  if (params.url) {
+  if (
+    params &&
+    ((params.type == "multiple-imgs" && params.urls[0].url != null) ||
+      params.url != null)
+  ) {
     const styles = [];
     const scripts = [];
 
@@ -153,15 +157,19 @@ app.post("/screenshot", async (req, res) => {
         // const { requestUrl } = await got.head(site);
         // return requestUrl;
 
-        console.log(filename);
-
         await captureWebsite
           .buffer(site.url, options)
           .then(async (buffer) => {
             var customBufferBuilder = new CustomBufferBuilder();
             customBufferBuilder.append(buffer);
             var bufferContent = customBufferBuilder.getBuffer();
-            await zip.file(filename, bufferContent, { binary: true });
+            var newFilename = !params.keepUrlStructure
+              ? filename
+              : filename.replaceAll("!", "/");
+            await zip.file(newFilename, bufferContent, {
+              binary: true,
+              createFolders: true,
+            });
           })
           .catch((error) => {
             console.log(error);