feat(interface) #2: interface fixes

Author: sergiomrebelo

src/public/index.html

@@ -52,30 +52,33 @@ <h1 class="mb-3">Emotional analysis Results</h1>
                         <label for="formControlLang">Language</label>
                         <input class="form-control form-control-lg" id="formControlLang" type="text" value="en" required>
                     </div>
-                    <div class="form-check form-check-inline mb-2">
+                    <div class="my-5"></div>
+                    <div class="form-check form-check-inline mb-2" id="lineDivisionField">
                         <input class="form-check-input" type="checkbox" value="1" id="lineDivisionCheck" checked>
                         <label class="form-check-label" for="lineDivisionCheck"> Automatic line division</label>
                     </div>
-                    <!-- TODO: ONLY OPEN SELECTED -->
-                    <div class="form-group row mb-2">
+                    <div class="form-group row mb-2 d-none" id="textDelimiterField">
                         <label for="formControlTextDelimiter">Text Line delimiter</label>
                         <input class="form-control form-control-lg" id="formControlTextDelimiter" type="text" value="¶">
                     </div>
+                    <div class="my-5"></div>
                     <div class="form-group row mb-2">
-                        <label for="formControlImages">Example file input</label>
+                        <label for="formControlImages">Images</label>
                         <input type="file" class="form-control-file" id="formControlImages"
                                name="files[]" accept="image/jpeg, image/png, image/jpg" multiple>
                     </div>
 
-                    <div class="form-check form-check-inline mb-2">
-                        <input class="form-check-input" type="checkbox" value="1" id="imagePlacementCheck">
-                        <label class="form-check-label" for="imagePlacementCheck"> Image Placement Division</label>
+                    <div class="form-check form-check-inline mb-2 d-none" id="imagePlacementField">
+                        <input class="form-check-input" type="checkbox" value="1" id="imagePlacementCheck" checked>
+                        <label class="form-check-label" for="imagePlacementCheck">Image Random Placement</label>
                     </div>
 
-                    <div class="form-group row mb-2">
-                        <label for="formControlImagePlaceholderDelimiter">Image Placeholder Delimiter</label>
+                    <div class="form-group row mb-2 d-none" id="imageAnchorField">
+                        <label for="formControlImagePlaceholderDelimiter">Image Placement Anchor</label>
                         <input class="form-control form-control-lg" id="formControlImagePlaceholderDelimiter" type="text">
                     </div>
+
+                    <div class="my-5"></div>
                     <div class="col-auto">
                         <button type="submit" class="btn btn-primary mb-2">Submit</button>
                     </div>

src/public/main.js

@@ -18,6 +18,22 @@ window.onload = () => {
     const inputImages = document.getElementById('formControlImages');
     form.addEventListener('submit', get);
     inputImages.addEventListener('change', _uploadImages);
+
+    document.getElementById('lineDivisionCheck').addEventListener('change', (e) => {
+        if (e.target.checked) {
+            document.getElementById('textDelimiterField').classList.add('d-none');
+        } else {
+            document.getElementById('textDelimiterField').classList.remove('d-none');
+        }
+    });
+
+    document.getElementById('imagePlacementCheck').addEventListener('change', (e) => {
+        if (e.target.checked) {
+            document.getElementById('imageAnchorField').classList.add('d-none');
+        } else {
+            document.getElementById('imageAnchorField').classList.remove('d-none');
+        }
+    });
 }
 
 const get = async (e) => {
@@ -62,6 +78,10 @@ const handleErr = (res = {success: false}) => {
 }
 
 const _uploadImages = async (e) => {
+    // display fields
+    document.getElementById('imagePlacementField').classList.replace('d-none', 'd-block');
+    console.log(document.getElementById('imagePlacementField'));
+
     app.images.blobs = [];
     app.images.hasImages = true;
     app.images.loading = true;
@@ -119,7 +139,6 @@ const _readImages = async (files) => {
 const displayResults = (res) => {
     if (!res.success)  { return handleErr(res);}
 
-    // document.getElementById('error-handle').classList.replace('d-block', 'd-none');
     document.getElementById('temp-res-text').textContent = `${res.text} (${res.lang})`;
     document.getElementById('temp-res-sentences').textContent = `${res.sentences.flat()} (${res.sentences.flat().length})`;
     document.getElementById('temp-res-classification').textContent = `${res.classification.emotions.data.predominant.emotion} (${res.classification.emotions.data.predominant.weight})`;