Unidades de Medida

Contamos con un proyecto en desarrollo.
Usamos laravel ver. 5.4 para el back-end y VueJs 2. Para el front-end. Sin embargo, esta función puede realizar con JavaScript o jquery.


El proyecto tiene múltiples CRUD destinados al manejo de módulos. Algunos de estos campos en los formularios son de tipo numérico representando unidades de medida de volumen, distancia o peso.

Necesitamos poder incluir en los input numéricos, una lista adicional al lado que indique en que unidad de medida esta representado y que al cambiar de unidad haga la respectiva conversión en el input numérico.

Se requiere un convertidor de unidades de medida de: Longitud, Volumen, Masa y Area. Este debe poder incluirse en los input que creamos convenientes por medio de una "clase". Al incluir esta clase se espera que aparezca ligado al campo del numero,  una lista con el tipo de unidades(Longitud, Volumen, Masa y Área) según requiera la ocasión; el campo numérico quedara ligado a conversiones según la selección de la unidad de medida.


Ejemplos:
Longitud: Si seleccionamos metros y escribimos en el campo 1000, al seleccionar Kilómetros, el numero automáticamente pasara a ser 1 .
ÁRea:  Si seleccionamos Metro cuadrado y escribimos en el campo 100, al seleccionar pulgada cuadrada, el numero automáticamente pasara a ser 155000.
Para una mayor orientación pueden ver el funcionamiento del convertidor de unidades de google (Escribir en el buscador "convertidor de unidades").

Ejemplo del procedimiento(vea imagen: "ejm_unidadesmedida.jpg")
1) Decidimos conveniente que un campo de x formulario  requiera manejo de unidades de medida, en este caso se manejara el tipo Areas.
2) Colocamos la clase en el input para llamar la función del convertidor. Este input donde se colocará el valor numerico tendrá al lado una lista(select) que gracias a la clase llamará a las unidades de medida del tipo área (recordar que área es un ejemplo, en otro formulario se necesitara llamar la lista de longitud ó de volumen ó de masa).
3) El usuario tendrá deshabilitado el input donde se escribirá el valor numerico hasta que seleccione una unidad de medida. Como el ejemplo se trata de areas, voy a seleccionar metros cuadrados.
4) A partir de este momento quedará habilitado el input para que el usuario pueda escribir la cifra. En este ejemplo escribiré 100; indicando que voy a enviar 100 metros cuadrados.
5) Si el usuario decide abrir la lista de unidades y cambiar metros cuadros por pulgada cuadrada, el numero 100 automáticamente se convierte a 155000; indicando que voy a enviar 155000 pulgada cuadrada.


IMPORTANTE!
-En cualquier momento se agregaran mas formularios, el objetivo es que cada vez que necesitemos incluir el convertidor en un input, podamos llamarlo.
-El usuario no tendrá que seleccionar que tipo de unidad de medida necesita, nosotros internamente por medio de una clase diremos si se necesita areas, longitudes, volumenes o masas.
-El select o lista sera uno: Evaluará seleccion actual(metros) vs seleccion nueva (kilometros).