Changeset 354cf14


Ignore:
Timestamp:
Nov 19, 2016, 12:11:25 AM (3 years ago)
Author:
Agnibho Mondal <mail@…>
Branches:
master
Children:
a005447
Parents:
c4cf417
Message:

Reorganized into components

Files:
9 added
91 deleted
2 edited
1 moved

Legend:

Unmodified
Added
Removed
  • README.txt

    rc4cf417 r354cf14  
    66
    77ObsCalc is a web application for making some calculations important in
    8 the practice of Obstetrics. It calculates L.M.P. and E.D.D. based
    9 Naegle's rule and also calculates maturation of fetus by date and by U.S.G.
     8the practice of Obstetrics. It calculates L.M.P. and E.D.D. based on
     9Naegle's rule and also calculates maturation of fetus by date and by
     10U.S.G.
    1011
    1112ObsCalc is written in Javascript.
     
    1415-----------
    1516
    16 Latest release of ObsCalc can be downloaded from https://code.agnibho.com/obscalc/
     17Latest release of ObsCalc can be downloaded from
     18https://code.agnibho.com/obscalc/
    1719
    1820The source code is available at https://github.com/agnibho/obscalc/
    19 
    2021
    2122Usage
    2223-----
    2324
    24 ObsCalc can be used directly after downloading the package and
    25 decompressing it to a folder.
     25ObsCalc needs to be compiled before in can be used. You need Node.js
     26and npm installed in your system to compile ObsCalc.
    2627
    27 The index.html file can be opened with a modern browser and the
    28 application can be used right away.
     28After downloading and decompressing the package, enter the package
     29directory and issue the following commands:
    2930
    30 The interface of the application is self-explanatory.
     31npm install
     32npm run build
     33
     34Now you can use the app by opening the index.html file in any modern
     35web browser.
     36
     37Alternatively you can run a development version of the app by issuing-
     38
     39npm run dev
     40
     41The interface of the application is designed to be self-explanatory.
    3142
    3243A hosted version of Obscalc is available at
     
    4152This file is part of ObsCalc.
    4253
    43 ObsCalc is free software: you can redistribute it and/or modify
    44 it under the terms of the GNU General Public License as published by
    45 the Free Software Foundation, either version 3 of the License, or
    46 (at your option) any later version.
     54ObsCalc is free software: you can redistribute it and/or modify it
     55under the terms of the GNU General Public License as published by the
     56Free Software Foundation, either version 3 of the License, or (at your
     57option) any later version.
    4758
    48 ObsCalc is distributed in the hope that it will be useful,
    49 but WITHOUT ANY WARRANTY; without even the implied warranty of
    50 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    51 GNU General Public License for more details.
     59ObsCalc is distributed in the hope that it will be useful, but WITHOUT
     60ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
     61FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
     62for more details.
    5263
    5364You should have received a copy of the GNU General Public License
    5465along with ObsCalc.  If not, see <http://www.gnu.org/licenses/>.
    55 
    56 ObsCalc uses the following libraries which are included with ObsCalc
    57 for convenience. Usage of these libraries are subject to their
    58 respective licenses.
    59 
    60 * Vue.js v2.0.5
    61   (c) 2014-2016 Evan You
    62   Released under the MIT License.
    63 
    64 * jQuery v2.1.1
    65   (c) 2005, 2014 jQuery Foundation, Inc.
    66   jquery.org/license
    67 
    68 * Bootstrap v3.3.7 (http://getbootstrap.com)
    69   Copyright 2011-2016 Twitter, Inc.
    70   Licensed under the MIT license
    71 
    72 * jQuery UI - v1.12.1 - 2016-10-09
    73   http://jqueryui.com
    74   Copyright jQuery Foundation and other contributors; Licensed MIT
    75  
    76 * moment.js
    77   version : 2.15.1
    78   authors : Tim Wood, Iskren Chernev, Moment.js contributors
    79   license : MIT
    80   momentjs.com
    8166
    8267Contacts
  • index.html

    rc4cf417 r354cf14  
    2929    <head>
    3030        <title>ObsCalc</title>
     31        <link rel="icon" href="dist/logo.png">
    3132        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    32         <link href="bootstrap.min.css" rel="stylesheet">
    33         <link href="datepicker/css/bootstrap-datepicker3.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="validator.min.js"></script>
    38         <script src="vue.js"></script>
    39         <script src="moment.js"></script>
    40         <script src="datepicker/js/bootstrap-datepicker.min.js"></script>
     33        <style>
     34         .loader {
     35             position: absolute;
     36             left: 50%;
     37             top: 50%;
     38             border: 16px solid lavender;
     39             border-top: 16px solid #428bca;
     40             border-bottom: 16px solid #428bca;
     41             border-radius: 50%;
     42             width: 150px;
     43             height: 150px;
     44             margin: -75px 0 0 -75px;
     45             animation: spin 2s linear infinite;
     46         }
     47         
     48         @keyframes spin {
     49             0% { transform: rotate(0deg); }
     50             100% { transform: rotate(360deg); }
     51         }
     52        </style>
     53       
    4154    </head>
    4255    <body>
    43         <div class="container">
     56        <div class="loader"></div>
     57        <div class="container" style="display:none">
    4458            <div class="text-primary">
    4559                <div class="jumbotron">
     
    5064            <div class="row" id="app">
    5165                <div class="col-sm-6">
    52                     <div class="panel panel-default">
    53                         <div class="panel-heading">
    54                             <p><strong>Calculate by Date</strong></p>
    55                         </div>
    56                         <div class="panel panel-body">
    57                             <ul class="nav nav-tabs">
    58                                 <li class="active"><a href="#panel-lmp" aria-controls="panel-lmp" data-toggle="tab">Enter L.M.P.</a></li>
    59                                 <li><a href="#panel-edd" aria-controls="panel-edd" data-toggle="tab">Enter E.D.D.</a></li>
    60                             </ul>
    61                             <div class="tab-content">
    62                                 <div class="panel panel-default tab-pane active" id="panel-lmp">
    63                                     <div class="panel-body">
    64                                         <form data-toggle="validator">
    65                                             <div class="form-group">
    66                                                 <label>Enter L.M.P.:</label>
    67                                                 <div class="row">
    68                                                     <div class="col-sm-8">
    69                                                         <div class="form-group"><input class="form-control datepicker" type="date" v-model="lmpDt" placeholder="YYYY-MM-DD" autocomplete="off" require v-on:input="eddUpdt"><div class="help-block with-errors"></div></div>
    70                                                     </div>
    71                                                     <div class="col-sm-4">
    72                                                         <input type="reset" class="btn">
    73                                                     </div>
    74                                                 </div>
    75                                             </div>
    76                                         </form>
    77                                     </div><!-- body -->
    78                                 </div><!-- panel -->
    79                                 <div class="panel panel-default tab-pane" id="panel-edd">
    80                                     <div class="panel-body">
    81                                         <form data-toggle="validator">
    82                                             <div class="form-group">
    83                                                 <label>Enter E.D.D.:</label>
    84                                                 <div class="row">
    85                                                     <div class="col-sm-8">
    86                                                         <div class="form-group"><input class="form-control datepicker" type="date" v-model="eddDt" placeholder="YYYY-MM-DD" autocomplete="off" require  v-on:input="lmpUpdt"><div class="help-block with-errors"></div></div>
    87                                                     </div>
    88                                                     <div class="col-sm-4">
    89                                                         <input type="reset" class="btn">
    90                                                     </div>
    91                                                 </div>
    92                                             </div>
    93                                         </form>
    94                                     </div><!-- body -->
    95                                 </div><!-- panel -->
    96                             </div><!-- tab -->
    97                             <table class="table table-bordered" v-if="lmpVal">
    98                                 <tr class="active"><th>L.M.P.</th><th>E.D.D.</th></tr>
    99                                 <tr><th vbind="lmpDt">{{lmpVal}}</th><th>{{eddVal}}</th></tr>
    100                             </table>
    101                             <hr>
    102                             <table class="table" v-if="dateMat">
    103                                 <tr><th class="active">Maturation by Date at present</th><th>{{dateMat}}</th></tr>
    104                             </table>
    105                         </div>
    106                     </div>
    107                 </div><!-- col -->
     66                    <by-date></by-date>
     67                </div>
    10868                <div class="col-sm-6">
    109                     <div class="panel panel-default tab-pane" id="panel-usg">
    110                         <div class="panel-heading">
    111                             <p><strong>Calculate by U.S.G.</strong></p>
    112                         </div>
    113                         <div class="panel-body">
    114                             <form data-toggle="validator">
    115                                 <div class="form-group">
    116                                     <label>Enter U.S.G. date:</label>
    117                                     <div class="form-group"><input class="form-control datepicker" type="date" v-model="usgDt" placeholder="YYYY-MM-DD" require autocomplete="off"><div class="help-block with-errors"></div></div>
    118                                 </div>
    119                                 <div class="form-group">
    120                                     <label>Enter U.S.G. Maturation:</label>
    121                                     <div class="row">
    122                                         <div class="col-md-6 form-group"><input class="form-control" type="number" min="0" max="52" v-model.number="usgWk" placeholder="Weeks" required autocomplete="off"><div class="help-block with-errors"></div></div>
    123                                         <div class="col-md-6 form-group"><input class="form-control" type="number" min="0" max="6" v-model.number="usgDy" placeholder="Days" required autocomplete="off"><div class="help-block with-errors"></div></div>
    124                                     </div>
    125                                 </div>
    126                                 <input type="reset" class="btn">
    127                             </form>
    128                             <br>
    129                             <table class="table" v-if="usgMat">
    130                                 <tr><th class="active">Maturation by U.S.G. at present</th><th>{{usgMat}}</th></tr>
    131                             </table>
    132                         </div><!-- body -->
    133                     </div><!-- panel -->
     69                    <by-usg></by-usg>
    13470                </div>
    13571            </div>
     
    13874                <h4><a href="http://www.agnibho.com" style="text-decoration:none;color:inherit">www.agnibho.com</a></h4>
    13975            </div>
    140             <script>
    141              $(document).ready(function(){
    142                  if(new Date().getFullYear()>2016){
    143                      $("#copyright").text("-"+new Date().getFullYear());
    144                  }
    145              });
    146             </script>
    14776        </div>
    148         <script>
    149          $(document).ready(function(){
    150              if(navigator.userAgent.indexOf("Firefox")!=-1){
    151                  $(".datepicker").datepicker({
    152                      format:"yyyy-mm-dd",
    153                      autoclose:true
    154                  }).on("changeDate", function(){
    155                      this.dispatchEvent(new Event("input"));
    156                  });
    157              }
    158              $("input[type='reset']").on("click", function(e){
    159                  this.form.reset();
    160                  $(this.form).find("input, select, textarea").each(function(){
    161                      this.dispatchEvent(new Event("input"));
    162                  });
    163              });
    164          });
    165         </script>
    166         <script src="app.js"></script>
     77        <script src="dist/bundle.js"></script>
    16778    </body>
    16879</html>
  • src/custom.css

    rc4cf417 r354cf14  
    2727    text-align:center;
    2828}
    29 #watch{
    30     position:fixed;
    31     top:0;
    32     left:0;
    33     cursor:pointer;
    34 }
    35 #limit{
    36     position:fixed;
    37     bottom:0;
    38     right:0;
    39 }
    40 #alert{
    41     position:fixed;
    42     top:0;
    43     left:0;
    44 }
Note: See TracChangeset for help on using the changeset viewer.