src/ByUsg.vue

   1 <!--
   2 ***********************************************************************
   3  * Title: ObsCalc
   4  * Description: An Obstetric 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 ObsCalc.
  12
  13    ObsCalc 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    ObsCalc 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 Obscalc. If not, see <http://www.gnu.org/licenses/>.
  25 ***********************************************************************
  26 -->
  27 <template>
  28     <div class="panel panel-default tab-pane" id="panel-usg">
  29         <div class="panel-heading">
  30             <p><strong>Calculate by U.S.G.</strong></p>
  31         </div>
  32         <div class="panel-body">
  33             <form data-toggle="validator">
  34                 <div class="form-group">
  35                     <label>Enter U.S.G. date:</label>
  36                     <div v-show="settings.dstyle=='cal'">
  37                         <div class="form-group"><input class="form-control datepicker" type="date" v-model="usgDt" placeholder="YYYY-MM-DD" autocomplete="off" v-on:input="updt"><div class="help-block with-errors"></div></div>
  38                     </div>
  39                     <div v-show="settings.dstyle=='txt'">
  40                         <div class="row">
  41                             <div class="col-md-4 form-group"><input class="form-control jump-focus" type="number" min="1" max="31" maxlength="2" v-model.number="usgDD" placeholder="DD" required autocomplete="off" v-on:input="updt"><div class="help-block with-errors"></div></div>
  42                             <div class="col-md-4 form-group"><input class="form-control jump-focus" type="number" min="1" max="12" maxlength="2" v-model.number="usgMM" placeholder="MM" required autocomplete="off" v-on:input="updt"><div class="help-block with-errors"></div></div>
  43                             <div class="col-md-4 form-group"><input class="form-control jump-focus" type="number" min="0" max="99" maxlength="2" v-model.number="usgYY" placeholder="YY" required autocomplete="off" v-on:input="updt"><div class="help-block with-errors"></div></div>
  44                         </div>
  45                         <div><p class="text-danger text-center">{{err}}</p></div>
  46                     </div>
  47                 </div>
  48                 <div class="form-group">
  49                     <label>Enter U.S.G. Maturation:</label>
  50                     <div class="row">
  51                         <div class="col-md-6 form-group"><input class="form-control jump-focus" type="number" min="0" max="52" maxlength="2" v-model.number="usgWk" placeholder="Weeks" required autocomplete="off"><div class="help-block with-errors"></div></div>
  52                         <div class="col-md-6 form-group"><input class="form-control stop-focus" type="number" min="0" max="6" maxlength="1" v-model.number="usgDy" placeholder="Days" required autocomplete="off" data-ref="#usgmat"><div class="help-block with-errors"></div></div>
  53                     </div>
  54                 </div>
  55                 <input type="reset" class="btn btn-default">
  56             </form>
  57             <br>
  58             <div id="usgmat">
  59                 <table class="table" v-if="usgMat">
  60                     <tbody>
  61                         <tr><th class="active">Maturation by U.S.G. at present</th><th>{{usgMat}}</th></tr>
  62                     </tbody>
  63                 </table>
  64             </div>
  65         </div>
  66     </div>
  67 </template>
  68
  69 <script>
  70  import moment from "moment";
  71  export default {
  72      name:'ByUsg',
  73      props:['settings'],
  74      data:function(){
  75          return{
  76              usgDt:"",usgWk:"",usgDy:""
  77          }
  78      },
  79      computed:{
  80          usgMat:function(){
  81              var dt=moment(this.usgDt, "YYYY-MM-DD", true);
  82              if(dt.isValid()){
  83                  if(this.usgWk !=="" && this.usgWk>=0 && this.usgWk<=52 && this.usgDy!=="" && this.usgDy>=0 && this.usgDy<=6){
  84                      var today=moment();
  85                      var diff=today.diff(dt, "days");
  86                      var days=this.usgWk*7+this.usgDy+diff;
  87                      return Math.floor(days/7)+" weeks "+days%7+" days";
  88                  }
  89              }
  90          }
  91      },
  92      methods:{
  93          updt:function(){
  94              this.err="";
  95              if(this.settings.dstyle=="txt"){
  96                  if(this.usgYY>9){
  97                      var strYY=""+this.usgYY;
  98                  }
  99                  else{
 100                      var strYY="0"+this.usgYY;
 101                  }
 102                  var dt=moment(this.usgDD+"-"+this.usgMM+"-"+strYY, "D-M-YY", true);
 103              }
 104              else{
 105                  var dt=moment(this.usgDt, "YYYY-MM-DD", true);
 106              }
 107              if(dt.isValid()){
 108                  if(this.settings.dstyle=="txt"){
 109                      this.usgDt=dt.format("YYYY-MM-DD");
 110                  }
 111                  else{
 112                      this.usgDD=dt.format("DD");
 113                      this.usgMM=dt.format("MM");
 114                      this.usgYY=dt.format("YY");
 115                  }
 116              }
 117              else{
 118                  if(this.settings.dstyle=="txt" && this.usgDD && this.usgMM && this.usgYY){
 119                      this.usgDt=null;
 120                      this.err="The date you have entered is invalid.";
 121                  }
 122              }
 123          }
 124      }
 125  }
 126 </script>