diff --git a/app/frontend/javascripts/controllers/application.js b/app/frontend/javascripts/controllers/application.js index 28412f17..3f0700d9 100644 --- a/app/frontend/javascripts/controllers/application.js +++ b/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 } diff --git a/app/frontend/javascripts/controllers/imc_controller.js b/app/frontend/javascripts/controllers/imc_controller.js new file mode 100644 index 00000000..c289f5ad --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/app/frontend/javascripts/controllers/index.js b/app/frontend/javascripts/controllers/index.js index e1f1102d..df093748 100644 --- a/app/frontend/javascripts/controllers/index.js +++ b/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) \ No newline at end of file diff --git a/app/views/appoinments/_form.html.haml b/app/views/appoinments/_form.html.haml index 7f4417a9..d3ebe50b 100644 --- a/app/views/appoinments/_form.html.haml +++ b/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 diff --git a/app/views/layouts/partials/_navbar.html.haml b/app/views/layouts/partials/_navbar.html.haml index fe041425..b5871a45 100644 --- a/app/views/layouts/partials/_navbar.html.haml +++ b/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"} diff --git a/app/views/layouts/partials/_sidebar.html.haml b/app/views/layouts/partials/_sidebar.html.haml index 384ebf45..466b9bb3 100644 --- a/app/views/layouts/partials/_sidebar.html.haml +++ b/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" } diff --git a/app/views/shared/_search.html.haml b/app/views/shared/_search.html.haml index 315eceaa..4a95e31b 100644 --- a/app/views/shared/_search.html.haml +++ b/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"} diff --git a/config/locales/simple_form.es.yml b/config/locales/simple_form.es.yml index 12d80efc..e90f92d2 100644 --- a/config/locales/simple_form.es.yml +++ b/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