Merge pull request #3 from dranc/fix/ihm

Change a little bit the html code
dranc · Jan 5, 2024 · 9900fc7 · 9900fc7
2 parents 9ac6968 + fe1e315
commit 9900fc7
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 131 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,32 @@
-DO NOT USE
-this is a test repo in order to train me !
+# DO NOT USE !
 
-## todo
+This is a test repository i'm using to train me with Typescript. In fact it is working but I'm pretty sure this is not the best code you will ever see !
 
-As a user I want to be able to upload a file and add a filigrane to it.
+## What Filigrane does ?
 
-As a user I want to see all the files that are imported in differents input for the current tab.
+Filigrane is a small service that will help you add _watermark_ on your file in order to avoid anyone else to reuse it for another purpose. In fact there is other service that does it. For example, french gouvernment offer [FiligraneFacile](https://filigrane.beta.gouv.fr/) and to be honest right now this is the service that we use. But my goal is to create a browser extension in order to automatically apply the watermark when you submit a file to a form.
 
-As a user I want to be able to add a filigrane to the file that are imported in the tab.
+If it work as expexted, the user will have nothing to do, just fill a form online and the extension add a watermark and replace your file by the "protected" one.
 
-As a user I want to see a preview of the file that is edited.
+## User stories
 
-As a user I want to download the file that is updated.
+- As a user of the website I want to
+  - [x] upload a file and add a filigrane to it.
+  - [x] preview the file with the filigrane
+  - [x] download the protected file
+  - [ ] revert the protection and retrieve the original file
+- As a user of the extension I want to
+  - [ ] see all the files uploaded in the current tab
+  - [ ] add watermark to the files in the current tab
+  - [ ] automatically do the process for me
+  - [ ] revert the changes on a specific file
 
-As a user I want to revert the change and return to the original version of the file.
+## Technical backlog
+
+This is a list of technical tasks I want to adress if I have time.
+
+- [ ] Create a chrome extension that is using the same code as the service
+- [ ] Add some tests
+- [ ] Remove the dependency with FiligraneFacile, do all the process in local
+- [ ] Keep the file format as the original one
+- [ ] Remove webpack
diff --git a/src/asset/html/index.html b/src/asset/html/index.html
@@ -3,35 +3,55 @@
     <link rel="stylesheet" href="style/index.min.css" />
   </head>
   <body>
-    <nav class="demo imponent">
+    <nav class="imponent">
       <a href="" class="brand">
         <img class="logo" src="icons/icon_128.png" />
         <span>Filigrane</span>
       </a>
     </nav>
-    <div class="content">
-      <div class="main">
-        <p>Click here to add filigrane to any file.</p>
+    <div class="content flex center four">
+      <article class="card full half-600 third-1200">
+        <header>
+          <p>Click here to add filigrane to any file.</p>
 
-        <input id="input-file" type="file" multiple="true" />
+          <input id="input-file" type="file" multiple="true" />
+        </header>
 
         <div id="files" class="files">
-          <div class="file" style="display: none">
-            <label class="name"></label>
-            <div class="actions"></div>
+          <div class="file stack" style="display: none">
+            <div class="flex six">
+              <span class="fourth">
+                <embed
+                  id="preview"
+                  class="fourth center"
+                  style="padding: 10px; margin: auto; display: block; width: 100%; overflow: hidden"
+                  alt="Click to see preview"
+                ></embed>
+              </span>
+              <span class="three-fourth">
+                <label id="name">This is a name</label>
+                <br />
+                <small id="size">6ko</small>
+                <div class="processing"></div>
+                <div class="actions">
+                  <!-- <button id="revert">Revert</button> -->
+                  <button id="download">Download</button>
+                </div>
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="bottom flex three grow">
-        <div class="two-third">
-          <input id="input-text" type="text" placeholder="Enter any text" />
-        </div>
-        <div>
-          <button id="submit">Add</button>
-        </div>
-      </div>
-    </div>
 
+        <footer>
+          <div class="flex three">
+            <input class="two-third" id="input-text" type="text" placeholder="Enter any text" />
+            <span>
+              <button id="submit" type="submit" style="margin: 0 auto">Add</button>
+            </span>
+          </div>
+        </footer>
+      </article>
+    </div>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/src/asset/html/options.html b/src/asset/html/options.html
diff --git a/src/asset/style/index.scss b/src/asset/style/index.scss
@@ -1,42 +1,63 @@
 @import '~picnic/src/picnic';
 
-$height: 500px;
-$width: 350px;
-
-body {
-  display: flex;
-  justify-content: center;
+.content {
+  padding-top: 3em;
   align-items: center;
-}
+  height: 100%;
 
-.content {
-  background-color: lightgrey;
-  position: relative;
-  margin: auto;
-  height: $height;
-  width: $width;
-  padding: 5px;
-
-  .main {
-    padding: 10px;
-    margin: auto;
-  }
+  .files {
+    overflow-y: scroll;
+    height: 50%;
 
-  .bottom {
-    position: absolute;
-    bottom: 0;
-    margin: auto;
-    left: 0;
-    right: 0;
+    .file {
+      &:not(.loading) .processing {
+        display: none;
+      }
 
-    div {
-      margin: auto;
+      &.loading .actions {
+        display: none;
+      }
     }
   }
 }
 
-// .files {
-//   .file {
-//     display: none;
+// $height: 500px;
+// $width: 350px;
+
+// body {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
+
+// .content {
+//   background-color: lightgrey;
+//   // position: relative;
+//   // margin: auto;
+//   height: $height;
+//   // width: $width;
+//   // padding: 5px;
+
+//   // .main {
+//   //   padding: 10px;
+//   //   margin: auto;
+//   // }
+
+//   .bottom {
+//     position: absolute;
+//     bottom: 0;
+//     margin: auto;
+//     left: 0;
+//     right: 0;
+
+//     div {
+//       margin: auto;
+//     }
 //   }
 // }
+
+// // .files {
+// //   .file {
+// //     display: none;
+// //   }
+// // }
diff --git a/src/index.ts b/src/index.ts
@@ -3,7 +3,7 @@ import { saveAs } from 'file-saver';
 import { FiligraneServices } from './services/filigrane.services';
 
 (() => {
-  const filesMap = new Map<string, File>();
+  const filigraneServices = new FiligraneServices();
 
   document.addEventListener('DOMContentLoaded', () => {
     const inputFile = document.getElementById('input-file') as HTMLInputElement;
@@ -15,54 +15,61 @@ import { FiligraneServices } from './services/filigrane.services';
 
     inputFile.addEventListener('change', (ev) => {
       for (const file of inputFile.files!) {
-        const id = crypto.randomUUID();
-
-        console.log(fileExample);
+        const id = filigraneServices.prepareFile(file);
 
         const newFileElement = fileExample.cloneNode(true) as HTMLElement;
         newFileElement.id = id;
-
-        (newFileElement.getElementsByClassName('name')[0] as HTMLElement).innerText = file.name;
+        console.log(URL.createObjectURL(filigraneServices.getBlobFor(id)));
+        const preview = newFileElement.querySelector('#preview') as HTMLEmbedElement;
+        const blob = filigraneServices.getBlobFor(id);
+        preview.type = blob.type;
+        preview.src = URL.createObjectURL(blob);
+
+        (newFileElement.querySelector('#name') as HTMLElement).innerText = file.name;
+        (newFileElement.querySelector('#size') as HTMLElement).innerText = file.size.toString();
+
+        newFileElement.querySelector('#preview')!.addEventListener('click', () => {
+          const url = URL.createObjectURL(filigraneServices.getBlobFor(id));
+          console.log(id);
+          console.log(url);
+          window.open(url);
+        });
+
+        newFileElement.querySelector('#download')!.addEventListener('click', () => {
+          saveAs(filigraneServices.getBlobFor(id), `${file.name}.pdf`);
+        });
 
         files.appendChild(newFileElement);
-        filesMap.set(id, file);
 
         newFileElement.style.display = '';
       }
     });
 
     submit!.onclick = async (ev) => {
-      const filigrane = inputText.value || `Added from Filigrane.app on ${new Date().toDateString()}.`;
       for (const fileElt of files.children) {
         if (fileElt.id) {
-          console.log(`sending ${fileElt.id}`);
-          const file = filesMap.get(fileElt.id);
-          if (!file) {
-            throw Error(`File ${fileElt.id} lost ?`);
-          }
-
-          const actions = fileElt.getElementsByClassName('actions')[0] as HTMLElement;
-
-          actions.innerText = 'Adding Filigrane';
-
-          const newFile = await FiligraneServices.addFiligraneToFile(file, filigrane);
-          const newFileBlob = new Blob([newFile], { type: 'application/pdf' });
-
-          const preview = document.createElement('button');
-          preview.innerText = 'Preview';
-          preview.onclick = () => {
-            window.open(URL.createObjectURL(newFileBlob));
-          };
-
-          const download = document.createElement('button');
-          download.innerText = 'Download';
-          download.onclick = () => {
-            saveAs(newFileBlob, `${file.name}.pdf`);
-          };
-
-          actions.innerHTML = '';
-          actions.appendChild(preview);
-          actions.appendChild(download);
+          fileElt.classList.add('loading');
+
+          const process = fileElt.getElementsByClassName('processing')[0] as HTMLElement;
+
+          await filigraneServices.addFiligraneToFile(
+            fileElt.id,
+            inputText.value,
+            (step) => (process.innerText = step),
+            () => {
+              const url = URL.createObjectURL(filigraneServices.getBlobFor(fileElt.id));
+
+              const preview = fileElt.querySelector('#preview') as HTMLEmbedElement;
+              const blob = filigraneServices.getBlobFor(fileElt.id);
+              preview.type = blob.type;
+              preview.src = URL.createObjectURL(blob);
+
+              fileElt.classList.remove('loading');
+            },
+            (message: string) => {
+              fileElt.classList.remove('loading');
+            },
+          );
         }
       }
     };

diff --git a/src/popup.ts b/src/popup.ts
@@ -1,5 +1,4 @@
-import { FiligraneServices } from "./services/filigrane.services";
-
+import { FiligraneServices } from './services/filigrane.services';
 
 (() => {
   let filesWithFiligrane: File[];
@@ -19,8 +18,8 @@ import { FiligraneServices } from "./services/filigrane.services";
       const files = (document.getElementById('input-file')! as HTMLInputElement).files!;
       if (files.length) {
         for (const filefromInput of files) {
-          const file = await FiligraneServices.addFiligraneToFile(filefromInput);
-          filesWithFiligrane.push(file);
+          // const file = await FiligraneServices.addFiligraneToFile(filefromInput, undefined, () => {});
+          // filesWithFiligrane.push(file);
         }
       }