Calculate IMC

app/frontend/javascripts/controllers/application.js

@@ -2,8 +2,8 @@ import { Application } from '@hotwired/stimulus'
 
 const application = Application.start()
 
-// Configure Stimulus development experience
 application.debug = false
+
 window.Stimulus   = application
 
 export { application }

app/frontend/javascripts/controllers/imc_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['height', 'weight', 'result']
+  static values = { meter: { type: Number, default: 100 } }
+
+
+  calculate() {
+    if (!this.validHeightAndWeight()) {
+      return
+    }
+
+    this.resultTarget.value = this.formulaResult()
+  }
+
+  validHeightAndWeight () {
+    return this.heightTarget.value > 0 && this.weightTarget.value > 0
+  }
+
+  formulaResult() {
+    return (this.weightTarget.value / this.heightAtCube()).toFixed(2)
+  }
+
+  heightAtCube() {
+    const meters = this.heightTarget.value / this.meterValue
+    return (meters * meters)
+  }
+}

app/frontend/javascripts/controllers/index.js

@@ -12,3 +12,6 @@ application.register('focus-field', FocusFieldController)
 
 import SidebarController from './sidebar_controller'
 application.register('sidebar', SidebarController)
+
+import ImcController from './imc_controller'
+application.register('imc', ImcController)

app/views/appoinments/_form.html.haml

@@ -15,16 +15,16 @@
     = f.input :cabinet_results, input_html: resize_field_controller
     = f.input :histopathology, input_html: resize_field_controller
 
-  .grid.gap-2.grid-cols-1.md:grid-cols-4
+  .grid.gap-2.grid-cols-1.md:grid-cols-6{ data: { controller: :imc } }
     = f.input :blood_pressure
     = f.input :heart_rate
     = f.input :breathing_rate
     = f.input :temperature
     = f.input :glycaemia
     = f.input :sat_02
-    = f.input :height, hint: t("simple_form.hint.defaults.height")
-    = f.input :weight, hint: t("simple_form.hint.defaults.weight")
-    = f.input :imc, input_html: { readonly: true, class: "cursor-not-allowed" }
+    = f.input :height, hint: t("simple_form.hint.defaults.height"), input_html: { data: { imc_target: :height, action: "input->imc#calculate" } }
+    = f.input :weight, hint: t("simple_form.hint.defaults.weight"), input_html: { data: { imc_target: :weight, action: "input->imc#calculate" } }
+    = f.input :imc, hint: t("simple_form.hint.defaults.imc"), input_html: { data: { imc_target: :result } }
     = f.input :cost, hint: t("simple_form.hint.defaults.cost")
     = f.input :files
 

app/views/layouts/partials/_navbar.html.haml

@@ -2,7 +2,7 @@
   %div.px-3.py-3.lg:px-5.lg:pl-3
     %div.flex.justify-between.items-center
       %div.flex.items-center.justify-start
-        %button.p-2.rounded.cursor-pointer.lg:hidden.hover:text-gray-800.hover:bg-gray-300.dark:hover:bg-gray-700.focus:bg-gray-300.dark:focus:bg-gray-700.focus:ring-2.focus:ring-gray-100.dark:focus:ring-gray-700{"data-sidebar-target": :toggler, "data-action": "click->sidebar#toggle"}
+        %button.p-2.rounded.cursor-pointer.lg:hidden.hover:text-gray-800.hover:bg-gray-300.dark:hover:bg-gray-700.focus:bg-gray-300.dark:focus:bg-gray-700.focus:ring-2.focus:ring-gray-100.dark:focus:ring-gray-700{ "data-sidebar-target": :toggler, "data-action": "click->sidebar#toggle" }
           %svg.w-6.h-6{fill: "currentColor", viewbox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg"}
             %path{"clip-rule" => "evenodd", d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z", "fill-rule" => "evenodd"}
           %svg.w-6.h-6.hidden{fill: "currentColor", viewbox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg"}

app/views/layouts/partials/_sidebar.html.haml

@@ -1,4 +1,4 @@
-%aside.fixed.top-0.left-0.z-20.flex.flex-col.flex-shrink-0.bg-gray-100.dark:bg-gray-800.hidden.w-64.h-full.pt-16.font-normal.duration-75.lg:flex.transition-width{"data-sidebar-target": :aside }
+%aside.fixed.top-0.left-0.z-20.flex.flex-col.flex-shrink-0.bg-gray-100.dark:bg-gray-800.hidden.w-64.h-full.pt-16.font-normal.duration-75.lg:flex.transition-width{ "data-sidebar-target": :aside }
   %div.relative.flex.flex-col.flex-1.min-h-0.border-r.border-gray-300.dark:border-gray-700
     %div.flex.flex-col.flex-1.pt-4.overflow-y-auto
       %div.flex-1.px-2
@@ -29,4 +29,4 @@
                 %i.fa.fa-user-md
                 Doctores Referidos
 
-%div{class: "fixed inset-0 z-10 bg-gray-900/50 dark:bg-gray-900/90 hidden", "data-sidebar-target": :background, "data-action": "click->sidebar#toggle"}
+%div{ class: "fixed inset-0 z-10 bg-gray-900/50 dark:bg-gray-900/90 hidden", "data-sidebar-target": :background, "data-action": "click->sidebar#toggle" }

app/views/shared/_search.html.haml

@@ -5,7 +5,7 @@
       %svg.w-4.h-4.text-gray-500.dark:text-gray-400{"aria-hidden" => "true", fill: "none", viewbox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg"}
         %path{d: "m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z", stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
 
-    %input{ "data-focus-field-target": :field, type: :search, name: :query, value: "#{params[:query]}", id: :query, placeholder: "Buscar", autocomplete: :off, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" }
+    %input{ "data-focus-field-target": :field, type: :search, name: :query, value: params[:query], id: :query, placeholder: "Buscar", autocomplete: :off, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" }
   %button{ class: "p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800", type: :submit}
     %svg.w-4.h-4{"aria-hidden" => "true", fill: "none", viewbox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg"}
       %path{d: "m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z", stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}

config/locales/simple_form.es.yml

@@ -51,6 +51,7 @@ es-MX:
         cabinet_results: Resultados de gabinete
         cost: Costo
         created_at: Fecha de registro
+        files: Archivos
         glycaemia: Glc
         heart_rate: FC
         height: Altura
@@ -112,5 +113,6 @@ es-MX:
       defaults:
         height: Altura en Centimetros
         weight: Peso en Kilogramos
+        imc: Basado en la altura y el peso
         cost: Costo de la consulta
         phone_number: Coloque solo los digitos sin guiones, parentesis o espacios. Ejemplo. 9511234567