new layout changes; rearanged panels and made measurements table scro…

…llable
bcgov · Jan 31, 2024 · ed313de · ed313de
1 parent cb7c1e4
commit ed313de
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 151 deletions.
diff --git a/frontend/rctool/templates/rctool/base.html b/frontend/rctool/templates/rctool/base.html
@@ -39,18 +39,6 @@
       {% block content %}
       {% endblock %}
 
-
-
-
-
-
-
-
-
-
-
-
-
       {% block footer %}
       {% endblock %}
 

diff --git a/frontend/rctool/templates/rctool/components/navbar.html b/frontend/rctool/templates/rctool/components/navbar.html
@@ -3,7 +3,7 @@
 <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #003466">
     <div class="header-title-div"></div>
       <a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'images/gov_logo.JPG' %}" class="logo"></a>
-      <p class="header-title-text">HydRA - Rating Curve Development Tool</p>
+      <p class="header-title-text">HydRA - Rating Curve Tool</p>
     </div>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -18,5 +18,5 @@
         </li>
       </ul>
     </div>
-  </nav>
-  <div class='nav-bottom'></div>
+</nav>
+<div class='nav-bottom'></div>
diff --git a/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html b/frontend/rctool/templates/rctool/rctool/develop/develop_input_settings.html
@@ -1,10 +1,10 @@
 
 <form method="POST" action="." id="rcform">
     {% csrf_token %}
-    <p style="color: #003466; margin-bottom: 3px; font-size:13.5px; font-weight:500;">segment 1</p>
+    <small style="color: #003466; margin-bottom: 3px; font-size:11.5px; font-weight:500;">segment 1</small>
     <div style="display: flex; width: 100%; margin: 10px 0px 10px 0px;">
         <div style="flex: 1; margin-right: 10px;">
-            <p class="text-medium">end points:</p>
+            <small class="text-medium">end points:</small>
         </div>
         <div style="flex: 3;">
             <div style="display:flex">
@@ -17,15 +17,15 @@
     </div>
     <div style="display: flex; width: 100%; margin: 10px 0px 10px 0px;" id="offset1-panel">
         <div style="flex: 1; margin-right: 10px;">
-            <p class="text-medium">offset:</p>
+            <small class="text-medium">offset:</small>
         </div>
         <div style="flex: 3;">
             <input type="number" step="any" max="{{ max_offset }}" class="form-control form-control-sm" name="offset1" id="offset1" value="{{ offsets.0 }}" onchange="setOffset(0, this.value, '{{ max_offset }}')" style="font-size:12px;" onkeydown="return event.key != 'Enter';" data-toggle="tooltip" data-placement="top" title="segment 1 offset" required>
         </div>
     </div>
     <div style="display: flex; width: 100%; margin: 20px 0px 5px 0px;">
         <div style="flex: 1; margin-right: 10px;">
-            <p class="text-medium">equation:</p>
+            <small class="text-medium">equation:</small>
         </div>
         <div style="flex: 3;">
             <div style="display:flex; font-size:12.5px; color:#696969;">
@@ -68,17 +68,17 @@
     {% if n_seg > 1 %}
         <div id="enter-breakpoint-field" style="display:flex; width: 100%; margin-top: 0px">
             <div style="flex: 1; margin-right: 10px;">
-                <p class="text-medium">breakpoint:</p>
+                <small class="text-medium">breakpoint:</small>
             </div>
             <div style="flex: 3;">
                 <input type="number" step="any" class="form-control form-control-sm" name="breakpoint1" id="breakpoint1" value="{{ breakpoint1 }}" max="{{ breakpoint_max }}" min="{{ breakpoint_min }}" onchange="setBreakpoint1(this.value)" onkeydown="return event.key != 'Enter';" style="font-size:12px;" data-toggle="tooltip" data-placement="top" title="breakpoint">
             </div>
         </div>
         <br>
-        <p style="color: #003466; margin-bottom: 3px; font-size: 13.5px; font-weight:500;">segment 2</p>
+        <p style="color: #003466; margin-bottom: 3px; font-size: 11.5px; font-weight:500;">segment 2</p>
         <div style="display: flex; width: 100%; margin: 10px 0px 10px 0px;">
             <div style="flex: 1; margin-right: 10px;">
-                <p class="text-medium">end points:</p>
+                <small class="text-medium">end points:</small>
             </div>
             <div style="flex: 3;">
                 <div style="display:flex">
@@ -91,15 +91,15 @@
         </div>
         <div style="display: flex; width: 100%; margin: 10px 0px 10px 0px;">
             <div style="flex: 1; margin-right: 10px;">
-                <p class="text-medium">offset:</p>
+                <small class="text-medium">offset:</small>
             </div>
             <div style="flex: 3;">
                 <input type="number" step="any" max="{{ max_offset }}" class="form-control form-control-sm" name="offset2" id="offset2" value="{{ offsets.1 }}" onchange="setOffset(1, this.value, '{{ max_offset }}')" onkeydown="return event.key != 'Enter';" href="#" style="font-size:12px;" data-toggle="tooltip" data-placement="top" title="segment 2 offset" required>
             </div>
         </div>
         <div style="display: flex; width: 100%; margin: 20px 0px 0px 0px;">
             <div style="flex: 1; margin-right: 10px;">
-                <p class="text-medium">equation:</p>
+                <small class="text-medium">equation:</small>
             </div>
             <div style = " flex: 3;">
                 <div style="display:flex; font-size:12.5px; color:#696969;">
@@ -121,16 +121,16 @@
         {% if n_seg > 1 %}
             <div id='autofit-breakpoint-checkbox' style="display:flex; margin:0px; padding:0px;">
                 <input type="checkbox" id="toggle_breakpoint" name="toggle_breakpoint" onchange="" style="margin:0px; padding:0px;">
-                <label><p class="text-small margin-left:3px; padding-left:3px"> autofit new breakpoint</p></label>
+                <label><small class="text-small margin-left:3px; padding-left:3px"> autofit new breakpoint</small></label>
             </div>
         {% endif %}
         <div style="display: flex; margin:0px; padding:0px;">
             <input type="checkbox" id="toggle_weighted_fit" name="toggle_weighted_fit" onchange="" style="margin:0px; padding:0px;">
-            <label><p class="text-small margin-left:3px; padding-left:3px;"> autofit with weighted uncertainty</p></label>
+            <label><small class="text-small margin-left:3px; padding-left:3px;"> autofit with weighted uncertainty</small></label>
         </div>
     </div>
     <div class="d-grid gap-2">
-        <button class="btn btn-secondary btn-block" type="submit" href="{% url 'rctool_develop_autofit' %}" onkeydown="return event.key != 'Enter';">autofit new rating curve</button>
+        <button class="btn btn-secondary btn-block" type="submit" href="{% url 'rctool_develop_autofit' %}" onkeydown="return event.key != 'Enter';"><small>autofit new rating curve</small></button>
     </div>
 
 </form>
diff --git a/frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html b/frontend/rctool/templates/rctool/rctool/develop/develop_table_measurents.html
@@ -0,0 +1,58 @@
+{% load static %}
+{% load custom_tags %}
+
+<!-- <div id="field" class="tabcontent">
+    <div class="card-body px-4 py-2" style="display: flex;">
+        <table class="table" id="fieldtable">
+            <tr class="table-header">
+              {% for header in table_dict.headings %}
+                {% if forloop.counter0 != 5 %}
+                    <th class="table-cell">{{ header }}</th>
+                {% endif %}
+              {% endfor %}
+              <th class="table-cell">use point</th>
+            </tr>
+            {% for row in table_dict.data %}
+            <tr class="table-row">
+              {% for cell in row %}
+                {% if forloop.counter0 != 5 %}
+                    <td class="table-cell">{{ cell }} </td>
+                {% endif %}
+              {% endfor %}
+              <td><input type="checkbox" id="toggle_data_point" name="toggle_data_point" checked="checked" onchange="togglePoint('{{ forloop.counter0 }}', this.checked)"></td>
+            </tr>
+            {% endfor %}
+        </table>
+    </div>
+</div> -->
+
+<div id="field" class="tabcontent">
+  <div class="card-body px-4 py-2" style="display: flex;">
+      <div class="table-container">
+          <table class="table" id="fieldtable">
+              <thead>
+                  <tr class="table-header">
+                      {% for header in table_dict.headings %}
+                          {% if forloop.counter0 != 5 %}
+                              <th class="table-cell">{{ header }}</th>
+                          {% endif %}
+                      {% endfor %}
+                      <th class="table-cell">use point</th>
+                  </tr>
+              </thead>
+              <tbody>
+                  {% for row in table_dict.data %}
+                      <tr class="table-row">
+                          {% for cell in row %}
+                              {% if forloop.counter0 != 5 %}
+                                  <td class="table-cell">{{ cell }} </td>
+                              {% endif %}
+                          {% endfor %}
+                          <td><input type="checkbox" id="toggle_data_point" name="toggle_data_point" checked="checked" onchange="togglePoint('{{ forloop.counter0 }}', this.checked)"></td>
+                      </tr>
+                  {% endfor %}
+              </tbody>
+          </table>
+      </div>
+  </div>
+</div>
diff --git a/.../rctool/rctool/develop/develop_table.html → .../rctool/develop/develop_table_rating.html b/.../rctool/rctool/develop/develop_table.html → .../rctool/develop/develop_table_rating.html
@@ -1,41 +1,8 @@
 {% load static %}
 {% load custom_tags %}
-
-
-
-<div class="tab">
-    <a class="tablinks" onclick="openTable(event, 'field')" id="defaultOpen">field</a>
-    <a class="tablinks" onclick="openTable(event, 'rating')">rating</a>
-    <a class="tablinks" onclick="openTable(event, 'compare')">compare</a>
-</div>
-
-<div id="field" class="tabcontent">
-    <div class="card-body py-4" style="display: flex;">
-        <table class="table" id="fieldtable">
-            <tr class="table-header">
-              {% for header in table_dict.headings %}
-                {% if forloop.counter0 != 5 %}
-                    <th class="table-cell">{{ header }}</th>
-                {% endif %}
-              {% endfor %}
-              <th class="table-cell">use point</th>
-            </tr>
-            {% for row in table_dict.data %}
-            <tr class="table-row">
-              {% for cell in row %}
-                {% if forloop.counter0 != 5 %}
-                    <td class="table-cell">{{ cell }} </td>
-                {% endif %}
-              {% endfor %}
-              <td><input type="checkbox" id="toggle_data_point" name="toggle_data_point" checked="checked" onchange="togglePoint('{{ forloop.counter0 }}', this.checked)"></td>
-            </tr>
-            {% endfor %}
-        </table>
-    </div>
-</div>
 
-<div id="rating" class="tabcontent">
-    <div class="card-body py-4" style="display: flex;">
+<!-- <div id="rating" class="tabcontent">
+    <div class="card-body px-4 py-2" style="display: flex;">
         {% if rc.parameters %}
             <table class="table">
                 <tr class="table-header">
@@ -64,10 +31,10 @@
         <p>Please set offset and select generate curve</p>
         {% endif %}
     </div>
-</div>
+</div> -->
 
 <div id="compare" class="tabcontent">
-    <div class="card-body py-4">
+    <div class="card-body px-4 py-2">
         <table class="table">
             <tr class="table-header">
                 <th class="table-cell">segment</th>
@@ -76,6 +43,7 @@
                 <th class="table-cell">offset</th>
                 <th class="table-cell">start point</th>
                 <th class="table-cell">end point</th>
+                <th class="table-cell">RMSE</th>
                 <th class="table-cell"><p style="color:#9ec1a3">add curve</p></th>
                 <!-- <th class="table-cell">edit rating</th> -->
             </tr>
@@ -87,6 +55,7 @@
                     <td class="table-cell"><p id="table2-segment1-offset">{{rc.parameters.0.offset}}</p></td>
                     <td class="table-cell"><p id="table2-endpoint-Seg1H0">{{rc.parameters.0.seg_bounds.0.0}}</p></td>
                     <td class="table-cell"><p id="table2-endpoint-Seg1H1">{{rc.parameters.0.seg_bounds.1.0}}</p></td>
+                    <td class="table-cell"><p id="table1-segment1-rmse">{{rc.parameters.0.rmse}}</p></td>
                     <td class="table-cell"><p></p></td>
                 </tr>
             {% endif %}
@@ -98,6 +67,7 @@
                     <td class="table-cell"><p id="table2-segment2-offset"> {{rc.parameters.1.offset}}</p></td>
                     <td class="table-cell"><p id="table2-endpoint-Seg2H0">{{rc.parameters.1.seg_bounds.0.0}}</p></td>
                     <td class="table-cell"><p id="table2-endpoint-Seg2H1">{{rc.parameters.1.seg_bounds.1.0}}</p></td>
+                    <td class="table-cell"><p id="table1-segment2-rmse">{{rc.parameters.1.rmse}}</p></td>
                     <td class="table-cell"><p></p></td>
                 </tr>
             {% endif %}
@@ -132,18 +102,15 @@
                         <input type="number" step="0.01" class="form-control form-control-sm" name="compareEndBounds" id="compareEndBounds" style="font-size: 12px" placeholder="" onchange="" onkeydown="return event.key != 'Enter';">
                     </div>
                 </td>
+                <td class="table-cell">
+                    <div style="width: 40px;">
+                        <p></p>
+                    </div>
+                </td>
                 <td class="table-cell">
                     <button class="btn btn-success btn-sm" type="submit" href="#" onclick="addCompareCurve()" style="background-color: #9ec1a3 !important; border-color: #FFFFFF; width: 40px;" onkeydown="return event.key != 'Enter';"> + </button>
                 </td>
             </tr>
         </table>
     </div>
 </div>
-
-
-<!--
-<script>
-    // Get the element with id="defaultOpen" and click on it
-    document.getElementById("defaultOpen").click();
-</script>
--->