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                         </div>
 101                     </div>
 102                 </div><!-- col -->
 103                 <div class="col-sm-6">
 104                     <div class="panel panel-default tab-pane" id="panel-usg">
 105                         <div class="panel-heading">
 106                             <p><strong>Calculate by U.S.G.</strong></p>
 107                         </div>
 108                         <div class="panel-body">
 109                             <form name="form_usg">
 110                                 <div class="form-group">
 111                                     <label>Enter U.S.G. date:</label>
 112                                     <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>
 113                                 </div>
 114                                 <div class="form-group">
 115                                     <label>Enter U.S.G. Maturation:</label>
 116                                     <div class="row">
 117                                         <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>
 118                                         <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>
 119                                     </div>
 120                                 </div>
 121                                 <input type="reset" class="btn">
 122                             </form>
 123                             <br>
 124                             <table class="table" data-ng-show="calcUsg()">
 125                                 <tr><th class="active">Maturation by U.S.G. at present</th><th>{{calcUsg()}}</th></tr>
 126                             </table>
 127                         </div><!-- body -->
 128                     </div><!-- panel -->
 129                 </div>
 130             </div>
 131             <div class="alert alert-info">
 132                 <h3>Developed by Agnibho Mondal</h3>
 133                 <h4><a href="http://www.agnibho.com" style="text-decoration:none;color:inherit">www.agnibho.com</a></h4>
 134             </div>
 135         </div>
 136         <script>
 137          if(navigator.userAgent.indexOf("Chrome")==-1){
 138              $("#lmp-dt").datepicker({
 139                  dateFormat:"yy-mm-dd",
 140                  changeYear:true,
 141                  changeMonth:true
 142              });
 143              $("#edd-dt").datepicker({
 144                  dateFormat:"yy-mm-dd",
 145                  changeYear:true,
 146                  changeMonth:true
 147              });
 148              $("#usg-dt").datepicker({
 149                  dateFormat:"yy-mm-dd",
 150                  changeYear:true,
 151                  changeMonth:true
 152              });
 153          }
 154          var app=angular.module("oc",[]);
 155          app.controller("oc",function($scope){
 156              $scope.showDate=function(date){
 157                  if(date!=null){
 158                      dt=moment(date);
 159                      if(dt.isValid()){
 160                          return dt.format("DD/MM/YY");
 161                      }
 162                  }
 163              }
 164              $scope.getEdd=function(){
 165                  if($scope.lmp_dt!=null){
 166                  dt=moment($scope.lmp_dt);
 167                      if(dt.isValid()){
 168                          dt.add(9, "months");
 169                          dt.add(7, "days");
 170                          $scope.edd_dt=dt.toDate();
 171                      }
 172                      else{
 173                          $scope.edd_dt=null;
 174                      }
 175                  }
 176                  else{
 177                      $scope.edd_dt=null;
 178                  }
 179              };
 180              $scope.getLmp=function(){
 181                  if($scope.edd_dt!=null){
 182                  dt=moment($scope.edd_dt);
 183                      if(dt.isValid()){
 184                          dt.subtract(9, "months");
 185                          dt.subtract(7, "days");
 186                          $scope.lmp_dt=dt.toDate();
 187                      }
 188                      else{
 189                          $scope.lmp_dt=null;
 190                      }
 191                  }
 192                  else{
 193                      $scope.lmp_dt=null;
 194                  }
 195              };
 196              $scope.calcUsg=function(){
 197                  if($scope.usg_dt!=null){
 198                  dt=moment($scope.usg_dt);
 199                      if(dt.isValid()){
 200                          if($scope.usg_wk>=0 && $scope.usg_wk<=52 && $scope.usg_dy>=0 && $scope.usg_dy<=6){
 201                              today=moment();
 202                              diff=today.diff(dt, "days");
 203                              console.log(diff);
 204                              days=$scope.usg_wk*7+$scope.usg_dy+diff;
 205                              return Math.floor(days/7)+" weeks "+days%7+" days";
 206                          }
 207                      }
 208                  }
 209              };
 210          });
 211         </script>
 212     </body>
 213 </html>