improvements in ready-made tf service & markup/style

istefanis · Feb 3, 2024 · fddfbf3 · fddfbf3
1 parent 4443730
commit fddfbf3
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -409,7 +409,7 @@ <h5>User Guide</h5>
     </main>
     <section class="element-analysis-window hidden">
       <div class="element-analysis-window-header">
-        <p>Transfer function</p>
+        <h2>Transfer function</h2>
         <div>
           <button
             class="element-analysis-window-header-button hidden"
@@ -646,7 +646,7 @@ <h5>User Guide</h5>
     </section>
     <section class="popup-window hidden">
       <div class="popup-window-header">
-        <p>Popup window</p>
+        <h2>Popup window</h2>
         <button class="popup-window-close-button">&times;</button>
       </div>
       <div class="popup-window-contents-container">

diff --git a/view/popupWindowView.js b/view/popupWindowView.js
@@ -32,7 +32,7 @@ export const openPopupWindow = function (
   //fill popup window
   popupWindowContents.innerHTML = "";
   popupWindowContents.insertAdjacentHTML("beforeend", contentsMarkup);
-  popupWindowHeader.querySelector("p").innerText = headerText;
+  popupWindowHeader.querySelector("h2").innerText = headerText;
 
   //display popup window
   pageOverlay.classList.remove("hidden");

diff --git a/view/services/feature/readyMadeTfCreationService.js b/view/services/feature/readyMadeTfCreationService.js
@@ -15,35 +15,52 @@ import {
 import { openPopupWindow } from "../../popupWindowView.js";
 import { closeElementAnalysisWindow } from "../../elementAnalysisWindowView.js";
 
-const readyMadeTfsArray = [];
+const readyMadeTfsSubsections = [];
 
 export const openNewReadyMadeTfPopupWindow = async function (
   invokedByTouchEvent
 ) {
   closeElementAnalysisWindow();
 
+  //count tfs across subsections
+  let tfsCounter = -1;
+
   //create the popup window contents markup
-  const contentsMarkup = readyMadeTfsArray
-    .map((x, i) => {
-      //compute numerator & denominator markup
-      const numMarkup = polynomialTermsArrayToMarkup(x[1]);
-      const denMarkup = polynomialTermsArrayToMarkup(x[2]);
+  const contentsMarkup = readyMadeTfsSubsections
+    .map((subsection) => {
+      const subsectionMarkup = subsection[1]
+        .map((x) => {
+          //compute numerator & denominator markup
+          const numMarkup = polynomialTermsArrayToMarkup(x[1]);
+          const denMarkup = polynomialTermsArrayToMarkup(x[2]);
+
+          //compute horizontal line of proper length
+          const [, h2] = computePaddedTfStrings(
+            removeSupTagsFromMarkup(numMarkup),
+            removeSupTagsFromMarkup(denMarkup)
+          );
+
+          tfsCounter++;
 
-      //compute horizontal line of proper length
-      const [, h2] = computePaddedTfStrings(
-        removeSupTagsFromMarkup(numMarkup),
-        removeSupTagsFromMarkup(denMarkup)
-      );
+          return `
+            <a class="popup-window-selectable-content popup-window-tf-content" data-content-id='${tfsCounter}'>
+              <div class="element tf popup-window-tf measured"> 
+                <p>${numMarkup}</p>
+                <p>${h2}</p>
+                <p>${denMarkup}</p>
+              </div>
+              <p class="popup-window-tf-description">${x[0]}</p>
+            </a>`;
+        })
+        .join("");
 
       return `
-     <a class="popup-window-selectable-content popup-window-tf-content" data-content-id='${i}'>
-       <div class="element tf popup-window-tf measured"> 
-         <p>${numMarkup}</p>
-         <p>${h2}</p>
-         <p>${denMarkup}</p>
-       </div>
-       <p class="popup-window-tf-description">${x[0]}</p>
-     </a>`;
+        <section class="popup-window-contents-subsection">
+          <h3 class="popup-window-contents-subsection-header">${subsection[0]}</h3>
+          <div>
+            ${subsectionMarkup}
+          </div>
+        </section>`;
     })
     .join("");
 
@@ -52,8 +69,8 @@ export const openNewReadyMadeTfPopupWindow = async function (
   if (result !== null) {
     const [selectedContentId, clientX, clientY, domElementBoundRect] = result;
     createNewReadyMadeTf(
-      readyMadeTfsArray[selectedContentId][1],
-      readyMadeTfsArray[selectedContentId][2],
+      readyMadeTfsSubsections.flatMap((s) => s[1])[selectedContentId][1],
+      readyMadeTfsSubsections.flatMap((s) => s[1])[selectedContentId][2],
       clientX,
       clientY,
       domElementBoundRect.width,
@@ -66,13 +83,23 @@ export const openNewReadyMadeTfPopupWindow = async function (
 // Init
 //
 const init = function () {
-  readyMadeTfsArray.push(["Integrator / step", [1], [1, 0]]);
-  readyMadeTfsArray.push(["Exponential decay", [1], [1, 0.2]]);
-  readyMadeTfsArray.push(["Sine", [1], [1, 0, 1]]);
-  readyMadeTfsArray.push(["Phase delay", [5, 1], [8, 1]]);
-  readyMadeTfsArray.push(["PI controller", ["kp", "ki"], [1, 0]]);
-  readyMadeTfsArray.push(["PD controller", ["kd", "kp"], [1]]);
-  readyMadeTfsArray.push(["PID controller", ["kd", "kp", "ki"], [1, 0]]);
+  readyMadeTfsSubsections.push([
+    "Simple components",
+    [
+      ["Integrator / step", [1], [1, 0]],
+      ["Exponential decay", [1], [1, 0.2]],
+      ["Sine", [1], [1, 0, 1]],
+      ["Phase delay", [5, 1], [8, 1]],
+    ],
+  ]);
+  readyMadeTfsSubsections.push([
+    "Controllers",
+    [
+      ["PI controller", ["kp", "ki"], [1, 0]],
+      ["PD controller", ["kd", "kp"], [1]],
+      ["PID controller", ["kd", "kp", "ki"], [1, 0]],
+    ],
+  ]);
 };
 
 init();
diff --git a/view/style/elementAnalysisWindow.css b/view/style/elementAnalysisWindow.css
@@ -40,7 +40,7 @@
   background-color: var(--color-grey-240);
 }
 
-.element-analysis-window-header p {
+.element-analysis-window-header h2 {
   margin: 0 0 0 10px;
   user-select: none;
   -webkit-user-select: none;

diff --git a/view/style/main.css b/view/style/main.css
@@ -68,6 +68,15 @@ body,
   overflow: hidden;
 }
 
+h1,
+h2,
+h3 {
+  font-size: 12px;
+  font-weight: 500;
+  margin: 0;
+  padding: 0;
+}
+
 .grid {
   height: 100%;
   width: 100%;
@@ -140,6 +149,11 @@ body,
   margin: 15px;
 }
 
+.tab-content h3 {
+  font-size: 14px;
+  font-weight: bold;
+}
+
 /* Util */
 
 .hidden {

diff --git a/view/style/navbar.css b/view/style/navbar.css
@@ -112,14 +112,6 @@
 Buttons & UI elements 
 */
 
-h1,
-h2 {
-  font-size: 12px;
-  font-weight: 500;
-  margin: 0;
-  padding: 0;
-}
-
 .navbar-button {
   box-sizing: border-box;
   min-width: 42px;

diff --git a/view/style/popupWindow.css b/view/style/popupWindow.css
@@ -48,7 +48,7 @@
   background-color: var(--color-grey-240);
 }
 
-.popup-window-header p {
+.popup-window-header h2 {
   margin: 0 0 0 5px;
   user-select: none;
   -webkit-user-select: none;
@@ -84,6 +84,18 @@
   z-index: 200;
 }
 
+.popup-window-contents-subsection {
+  width: 100%;
+}
+
+.popup-window-contents-subsection-header {
+  padding: 8px 5px;
+  background-color: var(--color-grey-248);
+  cursor: default;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
 .popup-window-selectable-content {
   width: 100%;
   height: 40px;