src/ByDate.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
  28 <template>
  29     <div class="panel panel-default">
  30         <div class="panel-heading">
  31             <p><strong>Calculate by Date</strong></p>
  32         </div>
  33         <div class="panel panel-body">
  34             <ul class="nav nav-tabs">
  35                 <li class="active"><a href="#panel-lmp" aria-controls="panel-lmp" data-toggle="tab">Enter L.M.P.</a></li>
  36                 <li><a href="#panel-edd" aria-controls="panel-edd" data-toggle="tab">Enter E.D.D.</a></li>
  37             </ul>
  38             <div class="tab-content">
  39                 <div class="panel panel-default tab-pane active" id="panel-lmp">
  40                     <div class="panel-body">
  41                         <form data-toggle="validator">
  42                             <div class="form-group">
  43                                 <label>Enter L.M.P.:</label>
  44                                 <div class="row">
  45                                     <div class="col-sm-8">
  46                                         <div v-show="settings.dstyle=='cal'">
  47                                             <div class="form-group"><input class="form-control datepicker" type="date" v-model="lmpDt" placeholder="YYYY-MM-DD" autocomplete="off" v-on:input="eddUpdt"><div class="help-block with-errors"></div></div>
  48                                         </div>
  49                                         <div v-show="settings.dstyle=='txt'">
  50                                             <div class="row">
  51                                                 <div class="col-md-4 form-group"><input class="form-control jump-focus" type="number" min="1" max="31" maxlength="2" v-model.number="lmpDD" placeholder="DD" required autocomplete="off" v-on:input="eddUpdt"><div class="help-block with-errors"></div></div>
  52                                                 <div class="col-md-4 form-group"><input class="form-control jump-focus" type="number" min="1" max="12" maxlength="2" v-model.number="lmpMM" placeholder="MM" required autocomplete="off" v-on:input="eddUpdt"><div class="help-block with-errors"></div></div>
  53                                                 <div class="col-md-4 form-group"><input class="form-control stop-focus" type="number" min="0" max="99" maxlength="2" v-model.number="lmpYY" placeholder="YY" required autocomplete="off" v-on:input="eddUpdt" data-ref="#datemat"><div class="help-block with-errors"></div></div>
  54                                             </div>
  55                                             <div><p class="text-danger text-center">{{lmpErr}}</p></div>
  56                                         </div>
  57                                     </div>
  58                                     <div class="col-sm-4">
  59                                         <input type="reset" class="btn btn-default">
  60                                     </div>
  61                                 </div>
  62                             </div>
  63                         </form>
  64                     </div><!-- body -->
  65                 </div><!-- panel -->
  66                 <div class="panel panel-default tab-pane" id="panel-edd">
  67                     <div class="panel-body">
  68                         <form data-toggle="validator">
  69                             <div class="form-group">
  70                                 <label>Enter E.D.D.:</label>
  71                                 <div class="row">
  72                                     <div class="col-sm-8">
  73                                         <div v-show="settings.dstyle=='cal'">
  74                                             <div class="form-group"><input class="form-control datepicker" type="date" v-model="eddDt" placeholder="YYYY-MM-DD" autocomplete="off" v-on:input="lmpUpdt"><div class="help-block with-errors"></div></div>
  75                                         </div>
  76                                         <div v-show="settings.dstyle=='txt'">
  77                                             <div class="row">
  78                                                 <div class="col-md-4 form-group"><input class="form-control jump-focus" type="number" min="1" max="31" maxlength="2" v-model.number="eddDD" placeholder="DD" required autocomplete="off" v-on:input="lmpUpdt"><div class="help-block with-errors"></div></div>
  79                                                 <div class="col-md-4 form-group"><input class="form-control jump-focus" type="number" min="1" max="12" maxlength="2" v-model.number="eddMM" placeholder="MM" required autocomplete="off" v-on:input="lmpUpdt"><div class="help-block with-errors"></div></div>
  80                                                 <div class="col-md-4 form-group"><input class="form-control stop-focus" type="number" min="0" max="99" maxlength="2" v-model.number="eddYY" placeholder="YY" required autocomplete="off" v-on:input="lmpUpdt" data-ref="#datemat"><div class="help-block with-errors"></div></div>
  81                                             </div>
  82                                             <div><p class="text-danger text-center">{{eddErr}}</p></div>
  83                                         </div>
  84                                     </div>
  85                                     <div class="col-sm-4">
  86                                         <input type="reset" class="btn">
  87                                     </div>
  88                                 </div>
  89                             </div>
  90                         </form>
  91                     </div><!-- body -->
  92                 </div><!-- panel -->
  93             </div><!-- tab -->
  94             <div id="datemat">
  95                 <table class="table table-bordered" v-if="lmpVal">
  96                     <tbody>
  97                         <tr class="active"><th>L.M.P.</th><th>E.D.D.</th></tr>
  98                         <tr><th vbind="lmpDt">{{lmpVal}}</th><th>{{eddVal}}</th></tr>
  99                     </tbody>
 100                 </table>
 101                 <hr>
 102                 <table class="table" v-if="dateMat">
 103                     <tbody>
 104                         <tr><th class="active">Maturation by Date at present</th><th>{{dateMat}}</th></tr>
 105                     </tbody>
 106                 </table>
 107             </div>
 108         </div>
 109     </div>
 110 </template>
 111
 112 <script>
 113  import moment from "moment";
 114  export default {
 115      name: 'ByDate',
 116      data:function(){
 117          return{
 118              lmpDt:"",eddDt:"",lmpVal:"",eddVal:"",lmpUpdt:"",eddUpdt:"",usgDt:"",usgWk:"",usgDy:"",lmpErr:"",eddErr:"",usgErr:""
 119          }
 120      },
 121      props:['settings'],
 122      computed:{
 123          lmpVal:function(){
 124              var dt=moment(this.lmpDt, "YYYY-MM-DD", true);
 125              if(dt.isValid()){
 126                  return dt.format("DD/MM/YYYY");
 127              }
 128          },
 129          eddVal:function(){
 130              var dt=moment(this.eddDt, "YYYY-MM-DD", true);
 131              if(dt.isValid()){
 132                  return dt.format("DD/MM/YYYY");
 133              }
 134          },
 135          dateMat:function(){
 136              var dt=moment(this.lmpDt, "YYYY-MM-DD", true);
 137              if(dt.isValid()){
 138                  var today=moment();
 139                  var days=today.diff(dt, "days");
 140                  if(days>0 && days<364){
 141                      return Math.floor(days/7)+" weeks "+days%7+" days";
 142                  }
 143              }
 144          }
 145      },
 146      methods:{
 147          lmpUpdt:function(){
 148              this.eddErr="";
 149              if(this.settings.dstyle=="txt"){
 150                  if(this.eddYY>9){
 151                      var strYY=""+this.eddYY;
 152                  }
 153                  else{
 154                      var strYY="0"+this.eddYY;
 155                  }
 156                  var dt=moment(this.eddDD+"-"+this.eddMM+"-"+strYY, "D-M-YY", true);
 157              }
 158              else{
 159                  var dt=moment(this.eddDt, "YYYY-MM-DD", true);
 160              }
 161              if(dt.isValid()){
 162                  if(this.settings.dstyle=="txt"){
 163                      this.eddDt=dt.format("YYYY-MM-DD");
 164                  }
 165                  else{
 166                      this.eddDD=dt.format("DD");
 167                      this.eddMM=dt.format("MM");
 168                      this.eddYY=dt.format("YY");
 169                  }
 170                  dt.subtract(9, "months");
 171                  dt.subtract(7, "days");
 172                  this.lmpDt=dt.format("YYYY-MM-DD");
 173                  this.lmpDD=dt.format("DD");
 174                  this.lmpMM=dt.format("MM");
 175                  this.lmpYY=dt.format("YY");
 176              }
 177              else{
 178                  this.lmpDt=null;
 179                  this.lmpDD=null;
 180                  this.lmpMM=null;
 181                  this.lmpYY=null;
 182                  if(this.settings.dstyle=="txt" && this.eddDD && this.eddMM && this.eddYY){
 183                      this.eddDt=null;
 184                      this.eddErr="The date you have entered is invalid.";
 185                  }
 186              }
 187          },
 188          eddUpdt:function(){
 189              this.lmpErr="";
 190              if(this.settings.dstyle=="txt"){
 191                  if(this.lmpYY>9){
 192                      var strYY=""+this.lmpYY;
 193                  }
 194                  else{
 195                      var strYY="0"+this.lmpYY;
 196                  }
 197                  var dt=moment(this.lmpDD+"-"+this.lmpMM+"-"+strYY, "D-M-YY", true);
 198              }
 199              else{
 200                  var dt=moment(this.lmpDt, "YYYY-MM-DD", true);
 201              }
 202              if(dt.isValid()){
 203                  if(this.settings.dstyle=="txt"){
 204                      this.lmpDt=dt.format("YYYY-MM-DD");
 205                  }
 206                  else{
 207                      this.lmpDD=dt.format("DD");
 208                      this.lmpMM=dt.format("MM");
 209                      this.lmpYY=dt.format("YY");
 210                  }
 211                  dt.add(9, "months");
 212                  dt.add(7, "days");
 213                  this.eddDt=dt.format("YYYY-MM-DD");
 214                  this.eddDD=dt.format("DD");
 215                  this.eddMM=dt.format("MM");
 216                  this.eddYY=dt.format("YY");
 217              }
 218              else{
 219                  this.eddDt=null;
 220                  this.eddDD=null;
 221                  this.eddMM=null;
 222                  this.eddYY=null;
 223                  if(this.settings.dstyle=="txt" && this.lmpDD && this.lmpMM && this.lmpYY){
 224                      this.lmpDt=null;
 225                      this.lmpErr="The date you have entered is invalid.";
 226                  }
 227              }
 228          }
 229      }
 230  }
 231 </script>