<head>
<title>ObsCalc</title>
<link rel="icon" href="dist/logo.png">
+ <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.loader {
</div>
<div class="row" id="app">
<div class="col-sm-6">
- <by-date></by-date>
+ <by-date :settings="settings"></by-date>
</div>
<div class="col-sm-6">
- <by-usg></by-usg>
+ <by-usg :settings="settings"></by-usg>
</div>
+ <settings-btn :settings="settings"></settings-btn>
</div>
<div class="alert alert-info">
- <h3>Copyright © 2016<span id="copyright"></span> Agnibho Mondal</h3>
+ <h3>Copyright © <span class="copyright" data-start="2016">2016</span> Agnibho Mondal</h3>
<h4><a href="http://www.agnibho.com" style="text-decoration:none;color:inherit">www.agnibho.com</a></h4>
</div>
</div>
along with Obscalc. If not, see <http://www.gnu.org/licenses/>.
***********************************************************************
-->
+
<template>
<div class="panel panel-default">
<div class="panel-heading">
<label>Enter L.M.P.:</label>
<div class="row">
<div class="col-sm-8">
- <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>
+ <div v-show="settings.dstyle=='cal'">
+ <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>
+ </div>
+ <div v-show="settings.dstyle=='txt'">
+ <div class="row">
+ <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>
+ <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>
+ <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>
+ </div>
+ <div><p class="text-danger text-center">{{lmpErr}}</p></div>
+ </div>
</div>
<div class="col-sm-4">
<input type="reset" class="btn">
<label>Enter E.D.D.:</label>
<div class="row">
<div class="col-sm-8">
- <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>
+ <div v-show="settings.dstyle=='cal'">
+ <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>
+ </div>
+ <div v-show="settings.dstyle=='txt'">
+ <div class="row">
+ <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>
+ <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>
+ <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>
+ </div>
+ <div><p class="text-danger text-center">{{eddErr}}</p></div>
+ </div>
</div>
<div class="col-sm-4">
<input type="reset" class="btn">
</div><!-- body -->
</div><!-- panel -->
</div><!-- tab -->
- <table class="table table-bordered" v-if="lmpVal">
- <tbody>
- <tr class="active"><th>L.M.P.</th><th>E.D.D.</th></tr>
- <tr><th vbind="lmpDt">{{lmpVal}}</th><th>{{eddVal}}</th></tr>
- </tbody>
- </table>
- <hr>
- <table class="table" v-if="dateMat">
- <tbody>
- <tr><th class="active">Maturation by Date at present</th><th>{{dateMat}}</th></tr>
- </tbody>
- </table>
+ <div id="datemat">
+ <table class="table table-bordered" v-if="lmpVal">
+ <tbody>
+ <tr class="active"><th>L.M.P.</th><th>E.D.D.</th></tr>
+ <tr><th vbind="lmpDt">{{lmpVal}}</th><th>{{eddVal}}</th></tr>
+ </tbody>
+ </table>
+ <hr>
+ <table class="table" v-if="dateMat">
+ <tbody>
+ <tr><th class="active">Maturation by Date at present</th><th>{{dateMat}}</th></tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</template>
import moment from "moment";
export default {
name: 'ByDate',
- data(){
+ data:function(){
return{
- lmpDt:"",eddDt:"",lmpVal:"",eddVal:"",lmpUpdt:"",eddUpdt:"",usgDt:"",usgWk:"",usgDy:""
+ lmpDt:"",eddDt:"",lmpVal:"",eddVal:"",lmpUpdt:"",eddUpdt:"",usgDt:"",usgWk:"",usgDy:"",lmpErr:"",eddErr:"",usgErr:""
}
},
+ props:['settings'],
computed:{
lmpVal:function(){
var dt=moment(this.lmpDt, "YYYY-MM-DD", true);
if(dt.isValid()){
var today=moment();
var days=today.diff(dt, "days");
- if(days>0){
+ if(days>0 && days<364){
return Math.floor(days/7)+" weeks "+days%7+" days";
}
}
},
methods:{
lmpUpdt:function(){
- var dt=moment(this.eddDt, "YYYY-MM-DD", true);
+ this.eddErr="";
+ if(this.settings.dstyle=="txt"){
+ if(this.eddYY>9){
+ var strYY=""+this.eddYY;
+ }
+ else{
+ var strYY="0"+this.eddYY;
+ }
+ var dt=moment(this.eddDD+"-"+this.eddMM+"-"+strYY, "D-M-YY", true);
+ }
+ else{
+ var dt=moment(this.eddDt, "YYYY-MM-DD", true);
+ }
if(dt.isValid()){
+ if(this.settings.dstyle=="txt"){
+ this.eddDt=dt.format("YYYY-MM-DD");
+ }
+ else{
+ this.eddDD=dt.format("DD");
+ this.eddMM=dt.format("MM");
+ this.eddYY=dt.format("YY");
+ }
dt.subtract(9, "months");
dt.subtract(7, "days");
this.lmpDt=dt.format("YYYY-MM-DD");
+ this.lmpDD=dt.format("DD");
+ this.lmpMM=dt.format("MM");
+ this.lmpYY=dt.format("YY");
}
else{
this.lmpDt=null;
+ this.lmpDD=null;
+ this.lmpMM=null;
+ this.lmpYY=null;
+ if(this.settings.dstyle=="txt" && this.eddDD && this.eddMM && this.eddYY){
+ this.eddDt=null;
+ this.eddErr="The date you have entered is invalid.";
+ }
}
},
eddUpdt:function(){
- var dt=moment(this.lmpDt, "YYYY-MM-DD", true);
+ this.lmpErr="";
+ if(this.settings.dstyle=="txt"){
+ if(this.lmpYY>9){
+ var strYY=""+this.lmpYY;
+ }
+ else{
+ var strYY="0"+this.lmpYY;
+ }
+ var dt=moment(this.lmpDD+"-"+this.lmpMM+"-"+strYY, "D-M-YY", true);
+ }
+ else{
+ var dt=moment(this.lmpDt, "YYYY-MM-DD", true);
+ }
if(dt.isValid()){
+ if(this.settings.dstyle=="txt"){
+ this.lmpDt=dt.format("YYYY-MM-DD");
+ }
+ else{
+ this.lmpDD=dt.format("DD");
+ this.lmpMM=dt.format("MM");
+ this.lmpYY=dt.format("YY");
+ }
dt.add(9, "months");
dt.add(7, "days");
this.eddDt=dt.format("YYYY-MM-DD");
+ this.eddDD=dt.format("DD");
+ this.eddMM=dt.format("MM");
+ this.eddYY=dt.format("YY");
}
else{
this.eddDt=null;
+ this.eddDD=null;
+ this.eddMM=null;
+ this.eddYY=null;
+ if(this.settings.dstyle=="txt" && this.lmpDD && this.lmpMM && this.lmpYY){
+ this.lmpDt=null;
+ this.lmpErr="The date you have entered is invalid.";
+ }
}
}
}
<form data-toggle="validator">
<div class="form-group">
<label>Enter U.S.G. date:</label>
- <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>
+ <div v-show="settings.dstyle=='cal'">
+ <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>
+ </div>
+ <div v-show="settings.dstyle=='txt'">
+ <div class="row">
+ <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>
+ <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>
+ <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>
+ </div>
+ <div><p class="text-danger text-center">{{err}}</p></div>
+ </div>
</div>
<div class="form-group">
<label>Enter U.S.G. Maturation:</label>
<div class="row">
- <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>
- <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>
+ <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>
+ <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>
</div>
</div>
<input type="reset" class="btn">
</form>
<br>
- <table class="table" v-if="usgMat">
- <tbody>
- <tr><th class="active">Maturation by U.S.G. at present</th><th>{{usgMat}}</th></tr>
- </tbody>
- </table>
+ <div id="usgmat">
+ <table class="table" v-if="usgMat">
+ <tbody>
+ <tr><th class="active">Maturation by U.S.G. at present</th><th>{{usgMat}}</th></tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</template>
<script>
import moment from "moment";
export default {
- name: 'ByDate',
- data(){
+ name:'ByUsg',
+ props:['settings'],
+ data:function(){
return{
- eddUpdt:"",usgDt:"",usgWk:"",usgDy:""
+ usgDt:"",usgWk:"",usgDy:""
}
},
computed:{
}
}
}
+ },
+ methods:{
+ updt:function(){
+ this.err="";
+ if(this.settings.dstyle=="txt"){
+ if(this.usgYY>9){
+ var strYY=""+this.usgYY;
+ }
+ else{
+ var strYY="0"+this.usgYY;
+ }
+ var dt=moment(this.usgDD+"-"+this.usgMM+"-"+strYY, "D-M-YY", true);
+ }
+ else{
+ var dt=moment(this.usgDt, "YYYY-MM-DD", true);
+ }
+ if(dt.isValid()){
+ if(this.settings.dstyle=="txt"){
+ this.usgDt=dt.format("YYYY-MM-DD");
+ }
+ else{
+ this.usgDD=dt.format("DD");
+ this.usgMM=dt.format("MM");
+ this.usgYY=dt.format("YY");
+ }
+ }
+ else{
+ if(this.settings.dstyle=="txt" && this.usgDD && this.usgMM && this.usgYY){
+ this.usgDt=null;
+ this.err="The date you have entered is invalid.";
+ }
+ }
+ }
}
}
</script>
--- /dev/null
+<!--
+***********************************************************************
+ * Title: ObsCalc
+ * Description: An Obstetric Calculator
+ * Author: Agnibho Mondal
+ * Website: http://code.agnibho.com
+ **********************************************************************
+ Copyright (c) 2016 Agnibho Mondal
+ All rights reserved
+ **********************************************************************
+ This file is part of ObsCalc.
+
+ ObsCalc is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ ObsCalc is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with Obscalc. If not, see <http://www.gnu.org/licenses/>.
+***********************************************************************
+-->
+
+<template>
+ <div>
+ <button class="btn-fab" title="Settings" data-toggle="modal" data-target="#settings-modal"><span class="glyphicon glyphicon-cog glyphicon-center" aria-hidden="true"></span></button>
+ <div class="modal fade" id="settings-modal" tabindex="-1">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
+ </div>
+ <div class="modal-body">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h4>Settings</h4>
+ </div>
+ <div class="panel-body">
+ <form>
+ <div class="">
+ <div class="row">
+ <div class="col-sm-4 col-sm-offset-2">
+ <label>Date input style:</label>
+ </div>
+ <div class="col-sm-6">
+ <div class="radio"><label><input type="radio" name="date-style" value="cal" v-model="settings.dstyle"><strong>Calendar</strong></label></div>
+ <div class="radio"><label><input type="radio" name="date-style" value="txt" v-model="settings.dstyle"><strong>Textbox</strong></label></div>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h4><a data-toggle="collapse" href="#about-text" style="text-decoration:none;color:inherit">About</a></h4>
+ </div>
+ <div id="about-text" class="panel-collapse collapse">
+ <div class="panel-body">
+ <p><strong>ObsCalc 2.0</strong></p>
+ <p>ObsCalc is a free and open source software published under GPL v3. It has been developed by Agnibho Mondal <mail@agnibho.com>.</p>
+ <p><a href="https://code.agnibho.com/obscalc/">https://code.agnibho.com/obscalc/</a></p>
+ <p>Copyright © <span class="copyright" data-start="2016">2016</span> Agnibho Mondal</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+ name:'Settings',
+ props:['settings'],
+ watch:{
+ 'settings':{
+ handler:function(){
+ localStorage.setItem("settings", JSON.stringify(this.settings));
+ },
+ deep:true
+ }
+ }
+ }
+</script>
+
+<style>
+ .btn-fab{
+ position:fixed;
+ top:10px;
+ left:10px;
+ background-color:#5bc0de;
+ width:40px;
+ height:40px;
+ border-radius:100%;
+ background:#5bc0de;
+ border:none;
+ outline:none;
+ color:white;
+ font-size:30px;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+ -webkit-tap-highlight-color:rgba(0,0,0,0);
+ }
+ .glyphicon-center{
+ margin-top:5px;
+ }
+</style>
import Vue from "vue";
import ByDate from "./ByDate.vue";
import ByUsg from "./ByUsg.vue";
+import Settings from "./Settings.vue";
//Start app
new Vue({
el: "#app",
components: {
"by-date": ByDate,
- "by-usg": ByUsg
+ "by-usg": ByUsg,
+ "settings-btn": Settings
+ },
+ data: {settings: ""},
+ mounted:function(){
+ try{
+ this.settings=JSON.parse(localStorage.getItem("settings"));
+ }
+ finally{
+ if(this.settings==null){
+ this.settings={dstyle:"cal"};
+ }
+ else if(this.settings.dstyle!="cal" && this.settings.dstyle!="txt"){
+ this.settings={dstyle:"cal"};
+ }
+ }
}
});
$(".container").fadeIn();
//Update copyright
- if(new Date().getFullYear()>2016){
- $("#copyright").text("-"+new Date().getFullYear());
- }
+ $(".copyright").each(function(){
+ if(new Date().getFullYear()>$(this).data("start")){
+ $(this).text($(this).data("start")+"-"+new Date().getFullYear());
+ }
+ else{
+ $(this).text(new Date().getFullYear());
+ }
+ });
//Emit input on form reset
$("input[type='reset']").on("click", function(e){
});
}
+ //Change focus after number input
+ $(".jump-focus").on("input", function(){
+ if($(this).val().length == $(this).prop("maxlength")){
+ var all=$("input").toArray();
+ var i=all.indexOf(this)+1;
+ $(all[i]).focus().select();
+ }
+ });
+
+ //Defocus after input finished
+ $(".stop-focus").on("input", function(){
+ if($(this).val().length == $(this).prop("maxlength")){
+ $(this).blur();
+ var target=$($(this).data("ref"));
+ console.log($(target).offset());
+ $("html, body").animate({
+ scrollTop: $(target).offset().top
+ }, 1000);
+ }
+ });
});
module.exports = {
entry: './src/main.js',
output: {
- path: path.resolve(__dirname, './dist'),
- publicPath: '/dist/',
+ path: path.resolve(__dirname, 'dist'),
+ publicPath: 'dist/',
filename: 'bundle.js'
},
module: {