feat: minor fixes on interface #15

sergiomrebelo · Jun 19, 2023 · 9cde7b9 · 9cde7b9
1 parent 39c5deb
commit 9cde7b9
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 27 deletions.
diff --git a/src/public/main.js b/src/public/main.js
@@ -24,6 +24,8 @@ const app = {
 window.onload = () => {
     const form = document.getElementById('input-form');
     const inputImages = document.getElementById('formControlImages');
+
+
     form.addEventListener('submit', get);
     inputImages.addEventListener('change', _uploadImages);
 

diff --git a/src/rollup-project/build/bundle.cjs b/src/rollup-project/build/bundle.cjs
@@ -6404,7 +6404,7 @@ const resultsContainer = () => {
     const resultingSentences = paragraphContainer("","Sentences:", ["d-inline"], "temp-res-sentences");
     mainSection.appendChild(resultingSentences);
 
-    const classificationResults = paragraphContainer("","Classification results::", ["d-inline"], "temp-res-classification");
+    const classificationResults = paragraphContainer("","Classification results:", ["d-inline"], "temp-res-classification");
     mainSection.appendChild(classificationResults);
 
     const lexiconResultsContainer = container("div", ["mt-4"]);
@@ -6429,7 +6429,11 @@ const resultsContainer = () => {
 const inputForm = () => {
     const containerOuter = container("aside", ["container-fluid"]);
     const containerInner = container("div", ["row"]);
-    const mainSection = container("section", ["input-form-outer", "col-10","offset-1", "mt-5"]);
+    const section = container("section", ["input-form-outer", "col-10","offset-1", "mt-5"]);
+    const form = document.createElement("form");
+    form.id = "input-form";
+    form.classList.add("input-form-inner");
+    const mainSection = document.createElement("fieldset");
 
     const inputTextAreaContainer = container("div", ["form-group", "row", "mb-2"]);
     const inputTextArea = document.createElement("textarea");
@@ -6444,7 +6448,6 @@ const inputForm = () => {
     inputTextAreaContainer.appendChild(inputTextArea);
     mainSection.appendChild(inputTextAreaContainer);
 
-
     const inputSelectContainer = container("div", ["form-group", "row", "mb-2"]);
     const inputSelect = document.createElement("select");
     inputSelect.id = `formControlLang`;
@@ -6461,7 +6464,6 @@ const inputForm = () => {
 
     inputSelectContainer.appendChild(inputSelectLabel);
     inputSelectContainer.appendChild(inputSelect);
-
     mainSection.appendChild(inputSelectContainer);
 
     mainSection.appendChild(divider());
@@ -6521,12 +6523,59 @@ const inputForm = () => {
 
     mainSection.appendChild(submitContainer);
 
-    containerOuter.appendChild(mainSection);
+    form.appendChild(mainSection);
+    section.appendChild(form);
+
+    containerOuter.appendChild(section);
     containerOuter.appendChild(containerInner);
+
+    containerOuter.addEventListener("submit", get);
+
     return containerOuter;
 };
 
 
+const get = async (e) => {
+    e.preventDefault();
+    console.log(e, "inside");
+    /*let textArea = encodeURIComponent(document.getElementById('formControlTextarea').value);
+    const shouldDivide = document.getElementById('lineDivisionCheck').checked;
+    const lang = encodeURIComponent(document.getElementById('formControlLang').value);
+    app.images.randomPlacement = document.getElementById('imagePlacementCheck').checked;
+
+    let handler = `text`;
+    let delimiter;
+    if (!shouldDivide) {
+        delimiter = encodeURIComponent(document.getElementById('formControlTextDelimiter').value);
+        handler = `lines/${delimiter}`;
+    }
+
+    if (app.images.hasImages && !app.images.randomPlacement && !shouldDivide) {
+        let imageDelimiter = encodeURIComponent(document.getElementById('formControlImagePlaceholderDelimiter').value);
+        app.images.nAnchorPoints = [...textArea.matchAll(new RegExp(imageDelimiter,'g'))].length;
+        textArea = textArea.replaceAll(imageDelimiter, `${delimiter}${imageDelimiter}${delimiter}`);
+        if (app.images.nAnchorPoints !== app.images.amount) {
+            const relation = app.images.nAnchorPoints > app.images.amount ? 'higher' : 'smaller';
+            handleErr({ message: `the amount of image anchor points is ${relation} than the amount of upload images. (anchors:${app.images.nAnchorPoints} / images:${app.images.amount})`});
+        }
+    }
+
+    const url = `/${handler}/${lang}/${textArea}`;
+
+    fetch(url).then((response) => response.json()).then((result) => {
+        displayResults(result);
+    }).catch((error) => {
+        console.error('Error:', error);
+        handleErr({ message: `error on fetch. ${error}`});
+    });*/
+};
+
+
+
+
+
+
+
 const createLabel = (id, textContent, classes = []) => {
     const label = document.createElement("label");
     label.setAttribute("for", id);
@@ -6560,6 +6609,7 @@ class App {
     init = () => {
         const resultsScreen = resultsContainer();
         const formInput = inputForm();
+
         // screen.style(style);
         document.body.appendChild(resultsScreen);
         document.body.appendChild(formInput);

diff --git a/src/rollup-project/build/bundle.css b/src/rollup-project/build/bundle.css
diff --git a/src/rollup-project/build/bundle.min.css b/src/rollup-project/build/bundle.min.css
diff --git a/src/rollup-project/build/bundle.min.js b/src/rollup-project/build/bundle.min.js
diff --git a/src/rollup-project/input.js b/src/rollup-project/input.js
@@ -1,5 +1,3 @@
-
-
 import {container, input, headline, paragraphContainer, button} from './components/textContainer.js'
 
 const availableLanguages = [
@@ -25,7 +23,7 @@ export const resultsContainer = () => {
     const resultingSentences = paragraphContainer("","Sentences:", ["d-inline"], "temp-res-sentences");
     mainSection.appendChild(resultingSentences);
 
-    const classificationResults = paragraphContainer("","Classification results::", ["d-inline"], "temp-res-classification");
+    const classificationResults = paragraphContainer("","Classification results:", ["d-inline"], "temp-res-classification");
     mainSection.appendChild(classificationResults);
 
     const lexiconResultsContainer = container("div", ["mt-4"]);
@@ -50,7 +48,11 @@ export const resultsContainer = () => {
 export const inputForm = () => {
     const containerOuter = container("aside", ["container-fluid"]);
     const containerInner = container("div", ["row"]);
-    const mainSection = container("section", ["input-form-outer", "col-10","offset-1", "mt-5"]);
+    const section = container("section", ["input-form-outer", "col-10","offset-1", "mt-5"]);
+    const form = document.createElement("form");
+    form.id = "input-form";
+    form.classList.add("input-form-inner");
+    const mainSection = document.createElement("fieldset");
 
     const inputTextAreaContainer = container("div", ["form-group", "row", "mb-2"]);
     const inputTextArea = document.createElement("textarea");
@@ -65,7 +67,6 @@ export const inputForm = () => {
     inputTextAreaContainer.appendChild(inputTextArea);
     mainSection.appendChild(inputTextAreaContainer);
 
-
     const inputSelectContainer = container("div", ["form-group", "row", "mb-2"]);
     const inputSelect = document.createElement("select");
     inputSelect.id = `formControlLang`;
@@ -82,7 +83,6 @@ export const inputForm = () => {
 
     inputSelectContainer.appendChild(inputSelectLabel);
     inputSelectContainer.appendChild(inputSelect);
-
     mainSection.appendChild(inputSelectContainer);
 
     mainSection.appendChild(divider());
@@ -142,12 +142,59 @@ export const inputForm = () => {
 
     mainSection.appendChild(submitContainer);
 
-    containerOuter.appendChild(mainSection);
+    form.appendChild(mainSection);
+    section.appendChild(form);
+
+    containerOuter.appendChild(section);
     containerOuter.appendChild(containerInner);
+
+    containerOuter.addEventListener("submit", get);
+
     return containerOuter;
 }
 
 
+const get = async (e) => {
+    e.preventDefault();
+    console.log(e, "inside");
+    /*let textArea = encodeURIComponent(document.getElementById('formControlTextarea').value);
+    const shouldDivide = document.getElementById('lineDivisionCheck').checked;
+    const lang = encodeURIComponent(document.getElementById('formControlLang').value);
+    app.images.randomPlacement = document.getElementById('imagePlacementCheck').checked;
+
+    let handler = `text`;
+    let delimiter;
+    if (!shouldDivide) {
+        delimiter = encodeURIComponent(document.getElementById('formControlTextDelimiter').value);
+        handler = `lines/${delimiter}`;
+    }
+
+    if (app.images.hasImages && !app.images.randomPlacement && !shouldDivide) {
+        let imageDelimiter = encodeURIComponent(document.getElementById('formControlImagePlaceholderDelimiter').value);
+        app.images.nAnchorPoints = [...textArea.matchAll(new RegExp(imageDelimiter,'g'))].length;
+        textArea = textArea.replaceAll(imageDelimiter, `${delimiter}${imageDelimiter}${delimiter}`);
+        if (app.images.nAnchorPoints !== app.images.amount) {
+            const relation = app.images.nAnchorPoints > app.images.amount ? 'higher' : 'smaller';
+            handleErr({ message: `the amount of image anchor points is ${relation} than the amount of upload images. (anchors:${app.images.nAnchorPoints} / images:${app.images.amount})`});
+        }
+    }
+
+    const url = `/${handler}/${lang}/${textArea}`;
+
+    fetch(url).then((response) => response.json()).then((result) => {
+        displayResults(result);
+    }).catch((error) => {
+        console.error('Error:', error);
+        handleErr({ message: `error on fetch. ${error}`});
+    });*/
+}
+
+
+
+
+
+
+
 export const createLabel = (id, textContent, classes = []) => {
     const label = document.createElement("label");
     label.setAttribute("for", id);

diff --git a/src/rollup-project/main.js b/src/rollup-project/main.js
@@ -25,6 +25,7 @@ export default class App {
     init = () => {
         const resultsScreen = resultsContainer();
         const formInput = inputForm();
+
         // screen.style(style);
         document.body.appendChild(resultsScreen);
         document.body.appendChild(formInput);