src/DataInput.vue

   1 <!--
   2 ***********************************************************************
   3  * Title: PDosage
   4  * Description: Pediatric Dose Calculator
   5  * Author: Agnibho Mondal
   6  * Website: http://code.agnibho.com
   7  **********************************************************************
   8    Copyright (c) 2016 Agnibho Mondal
   9    All rights reserved
  10  **********************************************************************
  11    This file is part of PDosage.
  12
  13    PDosage is free software: you can redistribute it and/or modify
  14    it under the terms of the GNU General Public License as published by
  15    the Free Software Foundation, either version 3 of the License, or
  16    (at your option) any later version.
  17
  18    PDosage is distributed in the hope that it will be useful,
  19    but WITHOUT ANY WARRANTY; without even the implied warranty of
  20    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  21    GNU General Public License for more details.
  22
  23    You should have received a copy of the GNU General Public License
  24    along with PDosage. If not, see <http://www.gnu.org/licenses/>.
  25 ***********************************************************************
  26 -->
  27 <template>
  28     <div class="panel panel-default">
  29         <div class="panel-heading">
  30             <h4>Patient Data</h4>
  31         </div>
  32         <div class="panel-body">
  33             <form data-toggle="validator">
  34                 <div class="row">
  35                     <div class="col-md-1 col-md-offset-2">
  36                         <label>Age:</label>
  37                     </div>
  38                     <div class="col-md-6">
  39                         <div class="form-group">
  40                             <div class="input-group">
  41                                 <input class="form-control" type="number" min="0" max="150" v-model.number="inAgeY" placeholder="Years" required autocomplete="off">
  42                                 <span class="input-group-addon">Y</span>
  43                                 <input class="form-control" type="number" min="0" max="11" v-model.number="inAgeM" placeholder="Months" autocomplete="off" data-error="Months must be between 0 to 11">
  44                                 <span class="input-group-addon">M</span>
  45                                 <input class="form-control" type="number" min="0" max="30" v-model.number="inAgeD" placeholder="Days" autocomplete="off"  data-error="Days must be between 0 to 30">
  46                                 <span class="input-group-addon">D</span>
  47                             </div>
  48                             <div class="help-block with-errors"></div>
  49                         </div>
  50                     </div>
  51                 </div>
  52                 <div class="row">
  53                     <div class="col-md-1 col-md-offset-2">
  54                         <label>Weight:</label>
  55                     </div>
  56                     <div class="col-md-5">
  57                         <div class="form-group">
  58                             <div class="input-group">
  59                                 <input class="form-control" type="number" min="0.25" max="200" step=".01" v-model.number="inWt" placeholder="Body weight in kg" required autocomplete="off">
  60                                 <span class="input-group-addon">kg</span>
  61                             </div>
  62                             <div class="help-block with-errors"></div>
  63                         </div>
  64                     </div>
  65                     <div class="col-md-1"><input type="reset" class="btn btn-default pull-right"></div>
  66                 </div>
  67             </form>
  68         </div>
  69     </div>
  70 </template>
  71
  72 <script>
  73  export default {
  74      name:"DataInput",
  75      props:["patient"],
  76      data:function(){
  77          return{
  78              inWt: this.patient.wt,
  79              inAgeY: this.patient.age.y,
  80              inAgeM: this.patient.age.m,
  81              inAgeD: this.patient.age.d
  82          }
  83      },
  84      watch: {
  85          inWt:function(){
  86              var val=parseFloat(this.inWt);
  87              if(val>=0.25 && val<=200){
  88                  this.patient.wt=val;
  89              }
  90              else{
  91                  this.patient.wt=null;
  92              }
  93          },
  94          inAgeY:function(){
  95              var val=parseFloat(this.inAgeY);
  96              if(val>=0 && val<=150){
  97                  this.patient.age.y=val;
  98              }
  99              else{
 100                  this.patient.age.y=null;
 101              }
 102          },
 103          inAgeM:function(){
 104              var val=parseFloat(this.inAgeM);
 105              if(val>=0 && val<=11){
 106                  this.patient.age.m=val;
 107              }
 108              else{
 109                  this.patient.age.m=null;
 110              }
 111          },
 112          inAgeD:function(){
 113              var val=parseFloat(this.inAgeD);
 114              if(val>=0 && val<=30){
 115                  this.patient.age.d=val;
 116              }
 117              else{
 118                  this.patient.age.d=null;
 119              }
 120          }
 121      }
 122  }
 123 </script>