merge from d3bootstrap_delsec

tla · Apr 16, 2024 · ce0ba84 · ce0ba84
2 parents a457927 + a81e6ab
commit ce0ba84
Show file tree

Hide file tree

Showing 10 changed files with 501 additions and 135 deletions.
diff --git a/frontend/www/index.html b/frontend/www/index.html
@@ -150,6 +150,7 @@
           <property-table-view id="property-table-view"></property-table-view>
           <section-properties-view></section-properties-view>
           <stemweb-job-status></stemweb-job-status>
+          <message-console></message-console>
         </div>
       </div>
     </div>
@@ -349,5 +350,9 @@
       src="./src/js/modules/dashboard/tradition/stemma/editStemma.js"
       type="application/javascript"
     ></script>
+    <script
+      src="./src/js/modules/dashboard/tradition/messageConsole.js"
+      type="application/javascript"
+    ></script>
   </body>
 </html>
diff --git a/frontend/www/src/css/dashboard-stemmaweb.css b/frontend/www/src/css/dashboard-stemmaweb.css
@@ -23,28 +23,29 @@
 }
 
 edit-stemma-buttons {
-  float: right;
   display: flex;
+  width: 100%;
+  justify-content: right;
 }
 
-#add-stemma-button-link, #delete-stemma-button-link {
-  margin-left: 0.5em;
+
+edit-stemma-buttons a.greyed-out div {
+  color: #ccc;
 }
 
 .delete-stemma-danger {
   color: #dc3545;
 }
 
+#add-stemma-button-link, #delete-stemma-button-link {
+  margin-left: 0.5em;
+}
 
 #stemma-editor-graph-container {
   display: flex;
 }
 
 #stemma-editor-container {
-  border: 1px solid #6c757d;
-  margin-top: 3pt;
-  padding: 3pt;
-  padding-right: 0pt;
   opacity: 0;
   width: 0%;
   transition: width 0.2s ease-in-out, opacity 0.1s ease-in-out;
@@ -56,19 +57,89 @@ edit-stemma-buttons {
   transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out;
 }
 
+#stemma-dot-editor-container {
+  border: 1px solid #bfc4c8;
+  margin-top: 3pt;
+  padding: 3pt;
+  padding-right: 0pt;
+  height: 95%;
+}
+
+#stemma-editor-buttons-container {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+}
+
+#stemma-editor-help-button-container {
+ padding-left: 0.2em;
+}
+
+#stemma-editor-save-cancel-buttons-container {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+}
+
 #stemma-dot-editor:focus-visible {
   height: 100%;
   width: 100%;
   border: none;
   resize: none;
 }
+
 #stemma-dot-editor {
   height: 100%;
   width: 100%;
   border: none;
   resize: none;
   outline: none;
   font-family: 'Sono', monospace;
+  font-size: 90%;
+}
+
+#stemma-editor-help-text {
+  position: absolute;
+  top: 1.5em;
+  left: 50%;
+  margin-left: 2pt;
+  width: 45%;
+  height: 0em;
+  opacity: 0.9;
+  border: 1px solid #fff;
+  background: #f8f9fa;
+  transition: height 0.4s ease-out, border 1.4s ease-out;
+  overflow: auto;
+}
+
+#stemma-editor-help-text.show {
+  height: 30em;
+  opacity: 0.9;
+  border: 1px solid #bfc4c8;
+  background: #f8f9fa;
+  transition: height 0.4s ease-out, border 0.4s ease-out;
+}
+
+#dot-help {
+  padding: 1em;
+}
+
+#dot-help h4 {
+  margin-bottom: 0.6em;
+  font-size: 125%;
+}
+
+#dot-help p {
+  font-size: 95%;
+  margin-bottom: 0.5rem;
+}
+
+#dot-help .code {
+  font-family: 'Sono', monospace;
+  font-size: 90%;
+  color: #56799b;
+  margin-bottom: 0.5rem;
+  padding-left: 1.8em;
 }
 
 #graph_container {
@@ -204,6 +275,10 @@ ul#traditions-list a {
   padding: unset;
 }
 
+ul#traditions-list .folder-icon.selected svg {
+  fill: #cfdcee;
+}
+
 section-list ul {
   margin-top: 0.5em;
 }
@@ -232,3 +307,20 @@ delete-section-button .btn-outline-danger {
   color: var(--bs-btn-color);
   padding-right: 0.5em;
 }
+
+#message-console-text-panel {
+  height: 10em;
+  overflow-y: scroll;
+  background-color: #fcfcfc;
+  font-size: 80%;
+  padding: 0.1rem 0.25rem;
+  border: 1px solid #c5c6c8;
+}
+
+#message-console-text-panel .console-message {
+  color: #198754;
+}
+
+#message-console-text-panel .console-message.danger {
+  color: #d5465a;
+}
diff --git a/frontend/www/src/js/modules/common/components/alert.js b/frontend/www/src/js/modules/common/components/alert.js
@@ -20,6 +20,7 @@ class StemmawebAlert extends HTMLElement {
     alert.body = body;
     alert.type = type;
     document.body.appendChild(alert);
+    MessageConsole.addMessage( body, type );
     if (autoHideMs !== null) {
       // Emulate a click on the close button to get the nice fade-out animation
       // and keep the UX consistent.

diff --git a/frontend/www/src/js/modules/common/components/formControls.js b/frontend/www/src/js/modules/common/components/formControls.js
@@ -34,17 +34,17 @@ class FormControlFactory {
         `;
         return `
             <label 
-                for="${item.label.toLowerCase()}_input"
-                id="edit_property_${item.label.toLowerCase()}_field"
+                for="${FormControlFactory.#toHtmlId( item.label )}_input"
+                id="edit_property_${FormControlFactory.#toHtmlId( item.label )}_field"
                 class="form-label"
             >
                 ${FormControlFactory.#createLabel(item)}
             </label>
             <div class="form-textfield">
                 <input
-                    id="${item.label.toLowerCase()}_input"
+                    id="${FormControlFactory.#toHtmlId( item.label )}_input"
                     type="text"
-                    name="${item.label.toLowerCase()}_input"
+                    name="${FormControlFactory.#toHtmlId( item.label )}_input"
                     value="${item.value}"
                     class="form-control ${item.inputOptions.required ? 'has-validation' : ''}"
                     ${
@@ -67,6 +67,14 @@ class FormControlFactory {
         return item.inputOptions.label ? item.inputOptions.label : item.label;
     }
 
+    /**
+     * @param {string} label
+     * @returns {string}
+     */
+    static #toHtmlId(label) {
+        return label.toLowerCase().replaceAll(' ','-');
+    }
+
     static #createSelectOption(option, selectedValue) {
         const selected = option.value == selectedValue ? ' selected' : '';
         return `
@@ -85,15 +93,15 @@ class FormControlFactory {
     static #createDropdownControl(item) {
         return `
             <label
-                for="${item.label.toLowerCase()}_input"
-                id="edit_property_${item.label.toLowerCase().replaceAll(' ','-')}_field"
+                for="${FormControlFactory.#toHtmlId( item.label )}_input"
+                id="edit_property_${FormControlFactory.#toHtmlId( item.label )}_field"
                 class="form-label"
             >
             ${FormControlFactory.#createLabel(item)}
             </label>
             <select
-                id="${item.label.toLowerCase().replaceAll(' ','-')}_input"
-                name="${item.label.toLowerCase().replaceAll(' ','-')}_input"
+                id="${FormControlFactory.#toHtmlId( item.label )}_input"
+                name="${FormControlFactory.#toHtmlId( item.label )}_input"
                 class="form-select"
             >
             ${ item.inputOptions.selectOptions.map( function (option) {
@@ -114,10 +122,10 @@ class FormControlFactory {
             <div class="form-check">
                 <input class="form-check-input" type="checkbox" ${
                   item.inputOptions.checked ? 'checked ' : ''
-                }value="${item.label.toLowerCase()}" id="${item.label.toLowerCase()}_input" name="${item.label.toLowerCase()}_input">
+                }value="${item.label.toLowerCase()}" id="${FormControlFactory.#toHtmlId( item.label )}_input" name="${FormControlFactory.#toHtmlId( item.label )}_input">
                 <label
-                    for="${item.label.toLowerCase()}_input"
-                    id="edit_property_${item.label.toLowerCase()}_field"
+                    for="${FormControlFactory.#toHtmlId( item.label )}_input"
+                    id="edit_property_${FormControlFactory.#toHtmlId( item.label )}_field"
                     class="form-label"
                 >
                 ${FormControlFactory.#createLabel(item)}

diff --git a/frontend/www/src/js/modules/common/utils.js b/frontend/www/src/js/modules/common/utils.js
@@ -93,4 +93,48 @@ function compareAlphabetic( a, b ) {
   }
   // names must be equal
   return 0;
-}
+}
+
+
+/**
+ * Returns a function that will execute exactly one time only.
+ *
+ * @param {function} fn - The function to be executed.
+ * @param {any} context - The context of the function.
+ * @returns {boolean} - An integer indicating whether a comes before (-1), is equal to (0), or should follow (1) b. 
+ */
+function once(fn, context) { 
+  var result;
+  return function() { 
+      if (fn) {
+          result = fn.apply(context || this, arguments);
+          fn = null;
+      }
+      return result;
+  };
+}
+
+
+function leftPadTwoZeroes( n ) {
+  return ('00'+n).slice(-2);
+}
+
+/**
+ * Returns a string formatted timestamp.
+ * 
+ * @returns {string} - A string represented the timestamp of 'now'.
+ */
+function timestamp() {
+  const date = new Date( Date.now() );
+  const datevalues = [
+    date.getFullYear(),
+    leftPadTwoZeroes( date.getMonth()+1 ),
+    leftPadTwoZeroes( date.getDate() )
+  ];
+  const timeValues = [
+    leftPadTwoZeroes( date.getHours() ),
+    leftPadTwoZeroes( date.getMinutes() ),
+    leftPadTwoZeroes( date.getSeconds() )
+  ];
+  return `${datevalues.join('')}_${timeValues.join('')}`;
+}
diff --git a/frontend/www/src/js/modules/dashboard/tradition/messageConsole.js b/frontend/www/src/js/modules/dashboard/tradition/messageConsole.js
@@ -0,0 +1,38 @@
+
+class MessageConsole extends HTMLElement {
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  static addMessage( message, type ){
+    const messageConsoleTextPanel = document.querySelector( '#message-console-text-panel' );
+    var consoleInnerHTML = messageConsoleTextPanel.innerHTML;
+    consoleInnerHTML = `<span class="console-message ${type}">${timestamp()}: ${message}</span><br/>` + consoleInnerHTML;
+    messageConsoleTextPanel.innerHTML = consoleInnerHTML;
+  }
+
+  render() {
+    this.innerHTML = `
+      <div class="position-sticky pt-3">
+      <h6
+        class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"
+      >
+        <span>Message console</span>
+        <!--maybe-goes-here-a-button/-->
+      </h6>
+      <div class="px-3 py-3">
+        <div id="message-console-text-panel">
+        </div>
+      </div>
+
+      </div>
+    `;
+  }
+}
+
+customElements.define( 'message-console', MessageConsole );