index.html

   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 <!DOCTYPE html>
  28 <html>
  29     <head>
  30         <title>ObsCalc</title>
  31         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  32         <link href="bootstrap.min.css" rel="stylesheet">
  33         <link href="datepicker/jquery-ui.min.css" rel="stylesheet">
  34         <link href="custom.css" rel="stylesheet">
  35         <script src="jquery.min.js"></script>
  36         <script src="bootstrap.min.js"></script>
  37         <script src="angular.js"></script>
  38         <script src="moment.js"></script>
  39         <script src="datepicker/jquery-ui.min.js"></script>
  40     </head>
  41     <body>
  42         <div class="container">
  43             <div class="text-primary">
  44                 <div class="jumbotron">
  45                     <h1>ObsCalc</h1>
  46                     <h2>Obstetric Calculator</h2>
  47                 </div>
  48             </div>
  49             <div class="row" data-ng-app="oc" data-ng-controller="oc">
  50                 <div class="col-sm-6">
  51                     <div class="panel panel-default">
  52                         <div class="panel-heading">
  53                             <p><strong>Calculate by Date</strong></p>
  54                         </div>
  55                         <div class="panel panel-body">
  56                             <ul class="nav nav-tabs">
  57                                 <li class="active"><a href="#panel-lmp" aria-controls="panel-lmp" data-toggle="tab">Enter L.M.P.</a></li>
  58                                 <li><a href="#panel-edd" aria-controls="panel-edd" data-toggle="tab">Enter E.D.D.</a></li>
  59                             </ul>
  60                             <div class="tab-content">
  61                                 <div class="panel panel-default tab-pane active" id="panel-lmp">
  62                                     <div class="panel-body">
  63                                         <form name="form_lmp">
  64                                             <div class="form-group">
  65                                                 <label>Enter L.M.P.:</label>
  66                                                 <div class="row">
  67                                                     <div class="col-sm-8">
  68                                                         <div data-ng-class="{'has-error':form_lmp.dt.$invalid}"><input class="form-control" type="date" id="lmp-dt" name="dt" data-ng-model="lmp_dt" placeholder="YYYY-MM-DD" autocomplete="off" data-ng-change="getEdd()"></div>
  69                                                     </div>
  70                                                     <div class="col-sm-4">
  71                                                         <input type="reset" class="btn">
  72                                                     </div>
  73                                                 </div>
  74                                             </div>
  75                                         </form>
  76                                     </div><!-- body -->
  77                                 </div><!-- panel -->
  78                                 <div class="panel panel-default tab-pane" id="panel-edd">
  79                                     <div class="panel-body">
  80                                         <form name="form_edd">
  81                                             <div class="form-group">
  82                                                 <label>Enter E.D.D.:</label>
  83                                                 <div class="row">
  84                                                     <div class="col-sm-8">
  85                                                         <div data-ng-class="{'has-error':form_edd.dt.$invalid}"><input class="form-control" type="date" id="edd-dt" name="dt" data-ng-model="edd_dt" placeholder="YYYY-MM-DD" autocomplete="off" data-ng-change="getLmp()"></div>
  86                                                     </div>
  87                                                     <div class="col-sm-4">
  88                                                         <input type="reset" class="btn">
  89                                                     </div>
  90                                                 </div>
  91                                             </div>
  92                                         </form>
  93                                     </div><!-- body -->
  94                                 </div><!-- panel -->
  95                             </div><!-- tab -->
  96                             <table class="table table-bordered" data-ng-hide="lmp_dt==null">
  97                                 <tr class="active"><th>L.M.P.</th><th>E.D.D.</th></tr>
  98                                 <tr><th>{{showDate(lmp_dt)}}</th><th>{{showDate(edd_dt)}}</th></tr>
  99                             </table>
 100                             <hr>
 101                             <table class="table" data-ng-show="calcDate()">
 102                                 <tr><th class="active">Maturation by Date at present</th><th>{{calcDate()}}</th></tr>
 103                             </table>
 104                         </div>
 105                     </div>
 106                 </div><!-- col -->
 107                 <div class="col-sm-6">
 108                     <div class="panel panel-default tab-pane" id="panel-usg">
 109                         <div class="panel-heading">
 110                             <p><strong>Calculate by U.S.G.</strong></p>
 111                         </div>
 112                         <div class="panel-body">
 113                             <form name="form_usg">
 114                                 <div class="form-group">
 115                                     <label>Enter U.S.G. date:</label>
 116                                     <div data-ng-class="{'has-error':form_usg.dt.$invalid}"><input class="form-control" type="date" id="usg-dt" name="dt" data-ng-model="usg_dt" placeholder="YYYY-MM-DD" autocomplete="off"></div>
 117                                 </div>
 118                                 <div class="form-group">
 119                                     <label>Enter U.S.G. Maturation:</label>
 120                                     <div class="row">
 121                                         <div class="col-md-6" data-ng-class="{'has-error':form_usg.wk.$invalid}"><input class="form-control" type="number" min="0" max="52" data-ng-model="usg_wk" name="wk" placeholder="Weeks" autocomplete="off"></div>
 122                                         <div class="col-md-6" data-ng-class="{'has-error':form_usg.dy.$invalid}"><input class="form-control" type="number" min="0" max="6" data-ng-model="usg_dy" name="dy" placeholder="Days" autocomplete="off"></div>
 123                                     </div>
 124                                 </div>
 125                                 <input type="reset" class="btn">
 126                             </form>
 127                             <br>
 128                             <table class="table" data-ng-show="calcUsg()">
 129                                 <tr><th class="active">Maturation by U.S.G. at present</th><th>{{calcUsg()}}</th></tr>
 130                             </table>
 131                         </div><!-- body -->
 132                     </div><!-- panel -->
 133                 </div>
 134             </div>
 135             <div class="alert alert-info">
 136                 <h3>Developed by Agnibho Mondal</h3>
 137                 <h4><a href="http://www.agnibho.com" style="text-decoration:none;color:inherit">www.agnibho.com</a></h4>
 138             </div>
 139         </div>
 140         <script>
 141          if(navigator.userAgent.indexOf("Chrome")==-1){
 142              $("#lmp-dt").datepicker({
 143                  dateFormat:"yy-mm-dd",
 144                  changeYear:true,
 145                  changeMonth:true
 146              });
 147              $("#edd-dt").datepicker({
 148                  dateFormat:"yy-mm-dd",
 149                  changeYear:true,
 150                  changeMonth:true
 151              });
 152              $("#usg-dt").datepicker({
 153                  dateFormat:"yy-mm-dd",
 154                  changeYear:true,
 155                  changeMonth:true
 156              });
 157          }
 158          var app=angular.module("oc",[]);
 159          app.controller("oc",function($scope){
 160              $scope.showDate=function(date){
 161                  if(date!=null){
 162                      dt=moment(date);
 163                      if(dt.isValid()){
 164                          return dt.format("DD/MM/YY");
 165                      }
 166                  }
 167              }
 168              $scope.getEdd=function(){
 169                  if($scope.lmp_dt!=null){
 170                  dt=moment($scope.lmp_dt);
 171                      if(dt.isValid()){
 172                          dt.add(9, "months");
 173                          dt.add(7, "days");
 174                          $scope.edd_dt=dt.toDate();
 175                      }
 176                      else{
 177                          $scope.edd_dt=null;
 178                      }
 179                  }
 180                  else{
 181                      $scope.edd_dt=null;
 182                  }
 183              };
 184              $scope.getLmp=function(){
 185                  if($scope.edd_dt!=null){
 186                  dt=moment($scope.edd_dt);
 187                      if(dt.isValid()){
 188                          dt.subtract(9, "months");
 189                          dt.subtract(7, "days");
 190                          $scope.lmp_dt=dt.toDate();
 191                      }
 192                      else{
 193                          $scope.lmp_dt=null;
 194                      }
 195                  }
 196                  else{
 197                      $scope.lmp_dt=null;
 198                  }
 199              };
 200              $scope.calcDate=function(){
 201                  if($scope.lmp_dt!=null){
 202                      dt=moment($scope.lmp_dt);
 203                      if(dt.isValid()){
 204                          today=moment();
 205                          days=today.diff(dt, "days");
 206                          if(days>0){
 207                              return Math.floor(days/7)+" weeks "+days%7+" days";
 208                          }
 209                      }
 210                  }
 211              };
 212              $scope.calcUsg=function(){
 213                  if($scope.usg_dt!=null){
 214                      dt=moment($scope.usg_dt);
 215                      if(dt.isValid()){
 216                          if($scope.usg_wk>=0 && $scope.usg_wk<=52 && $scope.usg_dy>=0 && $scope.usg_dy<=6){
 217                              today=moment();
 218                              diff=today.diff(dt, "days");
 219                              days=$scope.usg_wk*7+$scope.usg_dy+diff;
 220                              return Math.floor(days/7)+" weeks "+days%7+" days";
 221                          }
 222                      }
 223                  }
 224              };
 225          });
 226         </script>
 227     </body>
 228 </html>