From 1b06392a3e3f0454f3e0b16f10a99af1d53a5d22 Mon Sep 17 00:00:00 2001
From: Stephen Farry <stephen.farry@gmail.com>
Date: Mon, 13 Apr 2020 13:21:41 +0100
Subject: [PATCH] minor improvements, wrapper so number pad respects locked
form
---
raspberry-backend/static/css/style_v3.css | 11 +++--
raspberry-backend/templates/base.html | 15 ++++--
raspberry-backend/templates/index.html | 57 +++++++++++------------
3 files changed, 46 insertions(+), 37 deletions(-)
diff --git a/raspberry-backend/static/css/style_v3.css b/raspberry-backend/static/css/style_v3.css
index cf4e6726..f30f7dca 100644
--- a/raspberry-backend/static/css/style_v3.css
+++ b/raspberry-backend/static/css/style_v3.css
@@ -1998,12 +1998,11 @@ pre code {
border: 0;
}
-.form-control {
- height: calc(1.5em + 0.75rem + 2px);
- padding: 0.375rem 0.75rem;
+.form-control, .form-button {
+ padding: 0.2rem 0.2rem;
font-size: 0.5rem;
font-weight: 400;
- line-height: 1.5;
+ line-height: 1.0;
color: #495057;
background-color: #fff;
background-clip: padding-box;
@@ -2011,6 +2010,10 @@ pre code {
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
+.form-button{
+ height: calc(1.3em + 0.75rem + 2px);
+ padding: 0.375rem 0.75rem;
+}
@media (prefers-reduced-motion: reduce) {
.form-control {
transition: none;
diff --git a/raspberry-backend/templates/base.html b/raspberry-backend/templates/base.html
index cbd0cf01..6041f7c7 100644
--- a/raspberry-backend/templates/base.html
+++ b/raspberry-backend/templates/base.html
@@ -24,7 +24,7 @@
<!-- Alarm -->
<ul class="navbar-nav ml-auto mr-0 mr-md-3 my-2 my-md-0 alarm-ok px-2 py-0" id = "alarm_ul">
- <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-circle" class="svg-inline--fa fa-exclamation-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path id = "path-alarm" class="path-icon path-alarm" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg> <div id='alarms' class = "w-100">ALARMS</div>
+ <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-circle" class="svg-inline--fa fa-exclamation-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path id = "path-alarm" class="path-icon path-alarm" d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg> <div id='alarms' class = "w-100"></div>
</ul>
<!-- User-->
@@ -101,8 +101,8 @@
document.getElementById("temperature").innerHTML = data.temperature;
document.getElementById("pressure_buffer").innerHTML = data.pressure_buffer;
document.getElementById("pressure_inhale").innerHTML = data.pressure_inhale;
- document.getElementById("variable5").innerHTML = data.variable5;
- document.getElementById("variable6").innerHTML = data.variable6;
+ document.getElementById("temperature_buffer").innerHTML = data.temperature_buffer;
+ document.getElementById("pressure_o2_regulated").innerHTML = data.pressure_o2_regulated;
}
);
}
@@ -135,7 +135,16 @@
}
setInterval('update_alarms()', 1000);
</script>
+
+
+ <script type = text/javascript>
+ function show_easy_numpad_wrapper(thisElement){
+ if (thisElement.disabled == false && thisElement.readOnly == false){
+ show_easy_numpad(thisElement);
+ }
+ }
+ </script>
</body>
</html>
diff --git a/raspberry-backend/templates/index.html b/raspberry-backend/templates/index.html
index 7097dcdf..bd514600 100644
--- a/raspberry-backend/templates/index.html
+++ b/raspberry-backend/templates/index.html
@@ -17,7 +17,7 @@
<option value='pressure_buffer' selected>pressure_buffer</option>
<option value='pressure_inhale' selected>pressure_inhale</option>
<option value='variable5' selected>variable5</option>
- <input class="form-control py-0" type="button" value="Submit" onclick="updateChartType()" style="background-color: #1f4793 ; color: white">
+ <input class="form-button py-0" type="button" value="Submit" onclick="updateChartType()" style="background-color: #1f4793 ; color: white">
</select>
<div class="row">
@@ -75,7 +75,7 @@
<div class="card-header d-flex align-items-center justify-content-between py-1">
<a class="small text-dark stretched-link" href="#">variable5</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id = "variable5">000.00</span> ℃</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "temperature_buffer">000.00</span> ℃</div>
</div>
</div>
<div class="col-xl-4 px-1 py-0 col-md-8">
@@ -83,7 +83,7 @@
<div class="card-header d-flex align-items-center justify-content-between py-1">
<a class="small text-dark stretched-link" href="#">variable6</a>
</div>
- <div class="card-body px-1 py-3"><span class = "reading-main" id = "variable6">000.00</span> Pa</div>
+ <div class="card-body px-1 py-3"><span class = "reading-main" id = "pressure_o2_regulated">000.00</span> Pa</div>
</div>
</div>
@@ -102,23 +102,23 @@
</div>
</div>
<div class="card-body px-1 py-1">
- <table class="text-align-right">
- <tr>
- <td><span class=""><label class="small" for="inputThres1">Inhale Time (ms):</label><input class="form-control px-0" id="inputThres1" type="number" value=1 max=100 min=0 name="" readOnly onclick="show_easy_numpad(this);"/></span></td>
- <td><span class="form-group"><label class="small" for="inputVar1">Fill Time (ms):</label><input class="form-control px-0 py-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max = 100 onclick="show_easy_numpad(this);"/></span></td>
- <td><span class="form-group"><label class="small" for="inputVar1">Pause (ms):</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 onclick="show_easy_numpad(this);"/></span></td>
+ <table class="text-align-right py-0 my-0 small">
+ <tr class="py-0">
+ <td><span class=""><label class="small" for="inputInhale">Inhale Time (ms): </label><input class="form-control" id="inputThres1" type="number" value=1 max=100 min=0 name="" readOnly onclick="show_easy_numpad_wrapper(this);"/></span></td>
+ <td><span class="form-group"><label class="small" for="inputFill">Fill Time (ms): </label><input class="form-control" id="inputFill" type="number" value=1 name="variable1" readOnly min=0 max = 100 onclick="show_easy_numpad_wrapper(this);"/></span></td>
+ <td><span class="form-group"><label class="small" for="inputPause">Pause (ms): </label><input class="form-control" id="inputPause" type="number" value=1 name="variable1" readOnly min=0 max=100 onclick="show_easy_numpad_wrapper(this);"/></span></td>
<td></td>
</tr>
- <tr>
- <td><span class=""> <br> <label class="small" for="inputThres1">Exhale/Inhale: </label><input class="form-control px-0 lh-1" id="inputThres1" type="number" value=1 max=100 min=0 name="" readOnly onclick="show_easy_numpad(this);/></span></td>
- <td><span class="form-group"> <br> <label class="small" for="inputVar1">PEEP (cmH2O):</label><input class="form-control px-0 py-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max = 100 /></span></td>
- <td><span class="form-group"> <br> <label class="small" for="inputVar1">Exhale Time (ms):</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span></td>
- <td><span class="form-group"> <br> <label class="small" for="inputVar1">RPM:</label><input class="form-control px-0" id="inputThres1" type="number" value=1 name="variable1" readOnly min=0 max=100 onclick="show_easy_numpad(this);" /></span></td>
+ <tr class="py-0">
+ <td><span class="form-group"> <br> <label class="small" for="inputExhale">Exhale/Inhale: </label><input class="form-control lh-1" id="inputExInhale" type="number" value=1 max=100 min=0 name="" readOnly onclick="show_easy_numpad_wrapper(this);"/></span></td>
+ <td><span class="form-group"> <br> <label class="small" for="inputVar1">PEEP (cmH2O): </label><input class="form-control" id="inputPEEP" type="number" value=1 name="inputPEEP" readOnly min=0 max = 100 /></span></td>
+ <td><span class="form-group"> <br> <label class="small" for="inputVar1">Exhale Time (ms): </label><input class="form-control" id="inputExhaleTime" type="number" value=1 name="variable1" readOnly min=0 max=100 /></span></td>
+ <td><span class="form-group"> <br> <label class="small" for="inputVar1">RPM: </label><input class="form-control" id="inputRPM" type="number" value=1 name="variable1" readOnly min=0 max=100 onclick="show_easy_numpad_wrapper(this);" /></span></td>
</tr>
</table>
</div>
<div class="card-footer px-0 py-0 align-items-center">
- <span class="form-group ml-auto mr-auto"><input class="form-control py-0" id="inputPassword" type="submit" value="Submit Changes" style="background-color: #1f4793 ; color: white" /></span>
+ <span class="form-group ml-auto mr-auto"><input class="form-button py-0" id="form_submit" type="submit" value="Update Setting" style="background-color: #1f4793 ; color: white" disabled /></span>
</div>
</div>
</form>
@@ -142,7 +142,12 @@
var x = document.getElementsByClassName("form-control");
var i;
if ( x.length > 0 && x[0].readOnly == true ){
- for (i = 0; i < x.length; i++) { x[i].readOnly = false; }
+ for (i = 0; i < x.length; i++) {
+ if (x[i].id != "form_submit"){x[i].readOnly = false;}
+ else{ x[i].disabled=false; }
+ var submit = document.getElementById("form_submit");
+ submit.disabled=false;
+ }
var el = document.getElementById("path-locked");
el.classList.add("transparent");
var el2 = document.getElementById("path-unlocked");
@@ -151,8 +156,12 @@
}
else{
for (i = 0; i < x.length; i++ ) {
- x[i].readOnly = true;
- }
+ if (x[i].id != "form_submit"){x[i].readOnly = true;}
+ else {x[i].disabled=true;}
+ }
+
+ var submit = document.getElementById("form_submit");
+ submit.disabled=true;
var el = document.getElementById("path-unlocked");
el.classList.add("transparent");
var el2 = document.getElementById("path-locked");
@@ -161,20 +170,8 @@
}
- if ( document.getElementById("inputName").readOnly == true){
- document.getElementById("inputName").readOnly = false;
- document.getElementById("inputAge").readOnly = false;
- document.getElementById("inputWeight").readOnly = false;
- document.getElementById("inputHeight").readOnly = false;
- }
- else {
- document.getElementById("inputName").readOnly = true;
- document.getElementById("inputAge").readOnly = true;
- document.getElementById("inputWeight").readOnly = true;
- document.getElementById("inputHeight").readOnly = true;
- }
}
- ,1000)}
+ ,500)}
</script>
--
GitLab