added display message to develop page recommending to first set offse…

…t before calibrating other parameters or autofitting. Message triggered at startup of page or when offset for either segment is 0.0. Changed remove compare curve functionality - when remove compare curve button is selected the inputs are no longer cleared.
bcgov · Feb 27, 2024 · b695da9 · b695da9
1 parent 16b838c
commit b695da9
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 13 deletions.
diff --git a/frontend/rctool/templates/rctool/home.html b/frontend/rctool/templates/rctool/home.html
@@ -39,5 +39,7 @@ <h3 style="color:#003466; font-family:sans-serif; font-weight:bold; margin: 5px
 <script>
 // Store tour status in session storage
 sessionStorage.setItem("tourStatus", false);
+// Initialize display message recommending to set offset before autofitting upon initialization of develop page
+sessionStorage.setItem("developStartupMessage", true);
 </script>
 {% endblock %}
diff --git a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop.html
@@ -28,8 +28,26 @@
 
     <div style="background-color: #FFFFFF; padding-left:10px; padding-right:10px;">
 
+        <div id="info-message-div" style="display:none;">
+            <div class="row" id="info-panel-row" style="padding: 10px 0px 0px 0px;">
+                <div class="col-12">
+                    <div class="card" style="background-color:#8c96a0;" id="info-panel" display="block">
+                        <div class="card-body pl-3 pr-3 pt-2 pb-2">
+                            <div class="info-header">
+                                <div class="info-text">
+                                    <strong style="color:#F5F5F5; font-size:11.5px; margin:0px; padding:0px;">Tip:</strong>
+                                    <p id='info-text' style="color:#F5F5F5; font-size:11.5px; margin:0px 0px 0px 5px; padding:0px;">Start by setting the offset as the gauge height at zero flow. Accurately calibrating and autofitting other parameters depends on this initial step.</p>
+                                </div>
+                                <button class="info-panel-close-button" onclick="closeInfoPanel()">x</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div id="warning-message-div" style="display:none;">
-            <div class="row" style="padding: 10px 0px 0px 0px;">
+            <div class="row" id="error-panel-row" style="padding: 10px 0px 0px 0px;">
                 <div class="col-12">
                     <div class="card" style="background-color:#ae2029;" id="error-panel" display="block">
                         <div class="card-body pl-3 pr-3 pt-2 pb-0">

diff --git a/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html b/frontend/rctool/templates/rctool/rctool/develop/rctool_develop_js.html
@@ -41,6 +41,20 @@
         // continue...
     }
 
+    // Initialize display message recommending to set offset before autofitting upon initialization of develop page
+    if (sessionStorage.getItem("developStartupMessage") == null) {
+            sessionStorage.setItem("developStartupMessage", true);
+    };
+    if ( (sessionStorage.getItem("developStartupMessage")) || (document.getElementById("offset1") == 0.0) ) {
+        document.getElementById("info-message-div").style.display = "block";
+    } else {
+        document.getElementById("info-message-div").style.display = "none";
+    };
+    if (nSegData == 2) {
+        if ( (sessionStorage.getItem("developStartupMessage")) || (document.getElementById("offset2") == 0.0) ) {
+            sessionStorage.setItem("developStartupMessage", true);
+        };
+    };
 
     // A.1 ADD AUTOFITTED BREAKPOINT VALUE TO INPUT SETTNGS FIELD
     if (nSegData == 2) {
@@ -237,10 +251,7 @@
 
         };
 
-
         rcDict = {'data':rcData, 'parameters':rcParam}
-        console.log('updating rcdata...')
-        console.log(rcData)
 
         // update form variables
         updateFormVariables()
@@ -848,12 +859,12 @@
         removeRcPlot(compLabel)
         removeResPlot(compLabel)
         // 3. reset user inputsand rmse value
-        document.getElementById('compareLabel').value = ''
-        document.getElementById('compareConst').value = ''
-        document.getElementById('compareExp').value = ''
-        document.getElementById('compareOffset').value = ''
-        document.getElementById('compareStartBounds').value = ''
-        document.getElementById('compareEndBounds').value = ''
+        // document.getElementById('compareLabel').value = ''
+        // document.getElementById('compareConst').value = ''
+        // document.getElementById('compareExp').value = ''
+        // document.getElementById('compareOffset').value = ''
+        // document.getElementById('compareStartBounds').value = ''
+        // document.getElementById('compareEndBounds').value = ''
         document.getElementById('compare-curve-rmse').innerHTML = '';
         // 4. hide 'remove curve' button and display 'add curve button'
         document.getElementById('remove-curve').style.display = 'none';
@@ -1427,6 +1438,14 @@
     // function for closing error panel when user selects the x in the upper right
     function closeErrorPanel() {
         document.getElementById('error-panel').style.display = 'none';
+        document.getElementById('error-panel-row').style.padding = '0';
+    };
+
+    // function for closing error panel when user selects the x in the upper right
+    function closeInfoPanel() {
+        document.getElementById('info-panel').style.display = 'none';
+        document.getElementById('info-panel-row').style.padding = '0';
+        sessionStorage.setItem("developStartupMessage", false)
     };
 
 

diff --git a/frontend/rctool/templates/rctool/rctool/export/rctool_export.html b/frontend/rctool/templates/rctool/rctool/export/rctool_export.html
@@ -83,7 +83,6 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
 <script>
     // SHOW USER INPUTS IF EXPORT PDF SELECTED
     function toggleExportForm(toggleFormVal) {
-        console.log(toggleFormVal);
         var toggleDiv = document.getElementById("toggle-export-div");
 
         toggleDiv.style.display = 'block';

diff --git a/frontend/rctool/templates/rctool/rctool/import/rctool_import.html b/frontend/rctool/templates/rctool/rctool/import/rctool_import.html
@@ -107,6 +107,7 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
 {% block scripts %}
 <script>
 
+// IMPORT FUNCTIONS
 function toggleInputForm(toggleFormVal) {
     var toggleDiv = document.getElementById("toggle-div");
         if (toggleFormVal === "new-session") {
@@ -121,8 +122,14 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
     };
 };
 
-// APP WALKTHROUGH
+// INITIALIZATION MESSAGE
+// Initialize display message recommending to set offset before autofitting upon initialization of develop page
+if (sessionStorage.getItem("developStartupMessage") == null) {
+        sessionStorage.setItem("developStartupMessage", true);
+};
 
+
+// APP WALKTHROUGH
 // Check if tour status has been previously set
 if (sessionStorage.getItem("tourStatus") == null) {
     // Check if user selected tour

diff --git a/frontend/static/css/header.css b/frontend/static/css/header.css
@@ -4,7 +4,7 @@
 
 .logo-hydra {
     height: 65px;
-    opacity: 0.8;
+    opacity: 0.95;
     padding: -10px;
     margin: -10px;
 }

diff --git a/frontend/static/css/rctool_develop.css b/frontend/static/css/rctool_develop.css
@@ -17,6 +17,17 @@ body {
   align-items: center;
 }
 
+.info-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-text {
+  display: flex;
+  align-items: center;
+}
+
 .error-panel-close-button {
   background-color: #ae2029;
   color: #F5F5F5;
@@ -26,16 +37,35 @@ body {
   border: none;
 }
 
+.info-panel-close-button {
+  background-color: #8c96a0;
+  color: #F5F5F5;
+  margin: 0px;
+  padding: 0px;
+  outline: none;
+  border: none;
+}
+
 .error-panel-close-button:focus {
   outline: none;
   border: none;
 }
 
+.info-panel-close-button:focus {
+  outline: none;
+  border: none;
+}
+
 .error-panel-close-button:hover {
   color: #e2e2e2;
   cursor: pointer;
 }
 
+.info-panel-close-button:hover {
+  color: #e2e2e2;
+  cursor: pointer;
+}
+
 #error-link {
   color: #F5F5F5;
   font-size: 11.5px;