vitals table bp manage

resources/views/app/patient/vitals-settings/bp-management-form.blade.php

@@ -6,90 +6,77 @@
 
         <div id="bpManagementComponent" class="row mx-0" v-cloak>
             <div class="col-6 border-right">
-                <div class="text-secondary font-weight-bold mb-3">Blood Pressure & Pulse:</div>
-                <div class="pl-3">
-                    <h6 class="text-secondary mb-3"><b>Usual:</b></h6>
-                    <div class="d-flex pl-3">
-                        <div class="d-flex flex-column">
-                            <div v-if="form.doesUsualBpHaveAmPmVariation" class="text-secondary font-weight-bold mb-2">
-                                <i class="fa fa-sun mr-2"></i>AM
-                            </div>
-                            <div class="d-flex align-items-center mb-3">
-                                <h6 v-if="form.doesUsualBpHaveRange" class="mb-0 mr-3">LOWEST:</h6>
-                                <h6 class="mb-0 mr-3">BP:</h6>
-                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMin" v-model="form.usualAmRestingSbpMin" />
-                                <span>/</span>
-                                <input type="text" class="inline-input-underlined width-50 mr-3" name="usualAmRestingDbpMin" v-model="form.usualAmRestingDbpMin" />
-                                <span>Pulse:</span>
-                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMin" v-model="form.usualAmRestingPulseMin" />
-                                <span>BPM</span>
-                            </div>
-
-                            <div v-if="form.doesUsualBpHaveRange" class="d-flex align-items-center mb-3">
-                                <h6 class="mb-0 mr-3">HIGHEST:</h6>
-                                <h6 class="mb-0 mr-3">BP:</h6>
-                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMax" value="{{ $patient->usual_am_resting_sbp_max }}" />
-                                <span>/</span>
-                                <input type="text" class="inline-input-underlined width-50 mr-3" name="usualAmRestingDbpMax" value="{{ $patient->usual_am_resting_dbp_max }}" />
-                                <span>Pulse:</span>
-                                <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMax" value="{{ $patient->usual_am_resting_pulse_max }}" />
-                                <span>BPM</span>
-                            </div>
-
-                            <div v-if="form.doesUsualBpHaveAmPmVariation">
-                                <!-- Moon -->
-                                <div class="text-secondary font-weight-bold mb-2">
-                                    <i class="fa fa-moon mr-2"></i>PM
-                                </div>
-                                <div class="d-flex align-items-center mb-3">
-                                    <h6 v-if="form.doesUsualBpHaveRange" class="mb-0 mr-3">LOWEST:</h6>
-                                    <h6 class="mb-0 mr-3">BP:</h6>
-                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMin" value="{{ $patient->usual_pm_resting_sbp_min }}" />
-                                    <span>/</span>
-                                    <input type="text" class="inline-input-underlined width-50 mr-3" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
-                                    <span>Pulse:</span>
-                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" />
-                                    <span>BPM</span>
-                                </div>
-                                <div v-if="form.doesUsualBpHaveRange" class="d-flex align-items-center mb-3">
-                                    <h6 class="mb-0 mr-3">HIGHEST:</h6>
-                                    <h6 class="mb-0 mr-3">BP:</h6>
-                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMax" value="{{ $patient->usual_pm_resting_sbp_max }}" />
-                                    <span>/</span>
-                                    <input type="text" class="inline-input-underlined width-50 mr-3" name="usualPmRestingDbpMax" value="{{ $patient->usual_pm_resting_dbp_max }}" />
-                                    <span>Pulse:</span>
-                                    <input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMax" value="{{ $patient->usual_pm_resting_pulse_max }}" />
-                                    <span>BPM</span>
-                                </div>
-
-                            </div>
-
-                            <div class="d-flex align-items-start">
-                                <div class="form-check mr-2">
-                                    <input type="checkbox" class="form-check-input" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
-                                    <label class="form-check-label" for="amPmVariation">AM/PM Variation</label>
-                                </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input" id="bpRange" name="doesUsualBpHaveRange" v-model="form.doesUsualBpHaveRange">
-                                    <label class="form-check-label" for="bpRange">Range</label>
-                                </div>
-                            </div>
-
-                        </div>
+              <div class="d-flex align-items-center mb-2">
+                <h6 class="text-secondary mr-3 mb-0"><b>Usual BP & Pulse</b></h6>
+                <div class="d-flex align-items-start">
+                    <div class="form-check mr-3">
+                        <input type="checkbox" class="form-check-input" id="amPmVariation" name="doesUsualBpHaveAmPmVariation" v-model="form.doesUsualBpHaveAmPmVariation">
+                        <label class="form-check-label" for="amPmVariation">AM/PM</label>
                     </div>
-
+                    <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="bpRange" name="doesUsualBpHaveRange" v-model="form.doesUsualBpHaveRange">
+                        <label class="form-check-label" for="bpRange">Range</label>
+                    </div>
+                </div>
+              </div>
+                <div>
+                  <div class="table-responsive">
+                    <table class="table-bordered table-condensed table-sm">
+                      <tbody>
+                        <tr>
+                          <td v-if="form.doesUsualBpHaveAmPmVariation">AM</td>
+                          <td v-if="form.doesUsualBpHaveRange"><h6 class="mb-0">LOWEST</h6></td>
+                          <td>
+                            <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMin" v-model="form.usualAmRestingSbpMin" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-2" name="usualAmRestingDbpMin" v-model="form.usualAmRestingDbpMin" />
+                          </td>
+                          <td>
+                            <input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMin" v-model="form.usualAmRestingPulseMin" />
+                            <span>BPM</span>
+                          </td>
+                        </tr>
+                        <tr v-if="form.doesUsualBpHaveRange">
+                          <td v-if="form.doesUsualBpHaveAmPmVariation"></td>
+                          <td><h6 class="mb-0">HIGHEST</h6></td>
+                          <td>
+                            <input type="text" class="inline-input-underlined width-50" name="usualAmRestingSbpMax" value="{{ $patient->usual_am_resting_sbp_max }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-2" name="usualAmRestingDbpMax" value="{{ $patient->usual_am_resting_dbp_max }}" />
+                          </td>
+                          <td><input type="text" class="inline-input-underlined width-50" name="usualAmRestingPulseMax" value="{{ $patient->usual_am_resting_pulse_max }}" /> <span>BPM</span></td>
+                        </tr>
+                        <tr v-if="form.doesUsualBpHaveAmPmVariation">
+                          <td>PM</td>
+                          <td v-if="form.doesUsualBpHaveRange"><h6 class="mb-0">LOWEST</h6></td>
+                          <td>
+                            <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMin" value="{{ $patient->usual_pm_resting_sbp_min }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-2" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
+                          </td>
+                          <td><input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" /> <span>BPM</span></td>
+                        </tr>
+                        <tr v-if="form.doesUsualBpHaveAmPmVariation && form.doesUsualBpHaveRange">
+                          <td></td>
+                          <td v-if="form.doesUsualBpHaveRange"><h6 class="mb-0">HIGHEST</h6></td>
+                          <td>
+                            <input type="text" class="inline-input-underlined width-50" name="usualPmRestingSbpMin" value="{{ $patient->usual_pm_resting_sbp_min }}" />
+                            <span>/</span>
+                            <input type="text" class="inline-input-underlined width-50 mr-2" name="usualPmRestingDbpMin" value="{{ $patient->usual_pm_resting_dbp_min }}" />
+                          </td>
+                          <td><input type="text" class="inline-input-underlined width-50" name="usualPmRestingPulseMin" value="{{ $patient->usual_pm_resting_pulse_min }}" /> <span>BPM</span></td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
                     <hr class="my-3">
-                    <div class="text-secondary font-weight-bold mb-3">Ideal BP:</div>
-                    <div class="pl-3 mb-3">
-                        <div class="d-flex align-items-center mb-3">
-                            <h6 class="mb-0 mr-3">Target:</h6>
-                            <h6 class="mb-0 mr-3">BP:</h6>
+                    <div class="mb-3 d-flex align-items-start">
+                      <div class="text-secondary font-weight-bold">Ideal BP:</div>
+                        <div class="d-flex align-items-center">
                             <input type="text" class="inline-input-underlined width-50" name="idealAmRestingSbpMin" value="{{ $patient->ideal_am_resting_sbp_min }}" />
                             <span>/</span>
                             <input type="text" class="inline-input-underlined width-50 mr-3" name="idealAmRestingDbpMin" value="{{ $patient->ideal_am_resting_dbp_min }}" />
-                            <span>Pulse:</span>
-                            <input type="text" class="inline-input-underlined width-50" name="idealAmRestingPulse" value="{{ $patient->ideal_am_resting_pulse }}" />
-                            <span>BPM</span>
+                            <input type="text" class="inline-input-underlined width-50" name="idealAmRestingPulse" value="{{ $patient->ideal_am_resting_pulse }}" /> <span>BPM</span>
                         </div>
                     </div>
                     <hr class="my-3">
@@ -103,7 +90,6 @@
                               <input type="text" class="inline-input-underlined width-50" name="redAlertWhenSbpAbove" value="{{ $patient->red_alert_when_sbp_above }}" />
                               <span>/</span>
                               <input type="text" class="inline-input-underlined width-50 mr-3" name="redAlertWhenDbpAbove" value="{{ $patient->red_alert_when_dbp_above }}" />
-                              <span>Pulse:</span>
                               <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseAbove" value="{{ $patient->red_alert_when_pulse_above }}" />
                               <span>BPM</span>
                           </div>
@@ -113,7 +99,6 @@
                               <input type="text" class="inline-input-underlined width-50" name="redAlertWhenSbpBelow" value="{{ $patient->red_alert_when_sbp_below }}" />
                               <span>/</span>
                               <input type="text" class="inline-input-underlined width-50 mr-3" name="redAlertWhenDbpBelow" value="{{ $patient->red_alert_when_dbp_below }}" />
-                              <span>Pulse:</span>
                               <input type="text" class="inline-input-underlined width-50" name="redAlertWhenPulseBelow" value="{{ $patient->red_alert_when_pulse_below }}" />
                               <span>BPM</span>
                           </div>
@@ -128,7 +113,6 @@
                               <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpAbove" value="{{ $patient->yellow_alert_when_sbp_above }}" />
                               <span>/</span>
                               <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpAbove" value="{{ $patient->yellow_alert_when_dbp_above }}" />
-                              <span>Pulse:</span>
                               <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseAbove" value="{{ $patient->yellow_alert_when_pulse_above }}" />
                               <span>BPM</span>
                           </div>
@@ -138,7 +122,6 @@
                               <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenSbpBelow" value="{{ $patient->yellow_alert_when_sbp_below }}" />
                               <span>/</span>
                               <input type="text" class="inline-input-underlined width-50 mr-3" name="yellowAlertWhenDbpBelow" value="{{ $patient->yellow_alert_when_dbp_below }}" />
-                              <span>Pulse:</span>
                               <input type="text" class="inline-input-underlined width-50" name="yellowAlertWhenPulseBelow" value="{{ $patient->yellow_alert_when_pulse_below }}" />
                               <span>BPM</span>
                           </div>