src/Settings.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>
  30     <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>
  31     <div class="modal fade" id="settings-modal" tabindex="-1">
  32       <div class="modal-dialog">
  33         <div class="modal-content">
  34           <div class="modal-header">
  35             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
  36           </div>
  37           <div class="modal-body">
  38             <div class="panel panel-default">
  39               <div class="panel-heading">
  40                 <h4>Settings</h4>
  41               </div>
  42               <div class="panel-body">
  43                 <form>
  44                   <div class="">
  45                     <div class="row">
  46                       <div class="col-sm-4 col-sm-offset-2">
  47                         <label>Date input style:</label>
  48                       </div>
  49                       <div class="col-sm-6">
  50                         <div class="radio"><label><input type="radio" name="date-style" value="cal" v-model="settings.dstyle"><strong>Calendar</strong></label></div>
  51                         <div class="radio"><label><input type="radio" name="date-style" value="txt" v-model="settings.dstyle"><strong>Textbox</strong></label></div>
  52                       </div>
  53                     </div>
  54                   </div>
  55                 </form>
  56               </div>
  57             </div>
  58             <div class="panel panel-default">
  59               <div class="panel-heading">
  60                 <h4><a data-toggle="collapse" href="#about-text" style="text-decoration:none;color:inherit">About</a></h4>
  61               </div>
  62               <div id="about-text" class="panel-collapse collapse">
  63                 <div class="panel-body">
  64                   <p><strong>ObsCalc <span class="version"></span></strong></p>
  65                   <p>ObsCalc is a free and open source software published under GPL v3. It has been developed by Agnibho Mondal &lt;mail@agnibho.com&gt;.</p>
  66                   <p><a href="https://code.agnibho.com/obscalc/">https://code.agnibho.com/obscalc/</a></p>
  67                   <p>Copyright &copy; <span class="copyright" data-start="2016">2016</span> Agnibho Mondal</p>
  68                 </div>
  69               </div>
  70             </div>
  71           </div>
  72           <div class="modal-footer">
  73             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  74           </div>
  75         </div>
  76       </div>
  77     </div>
  78   </div>
  79 </template>
  80
  81 <script>
  82 export default {
  83   name:'Settings',
  84   props:['settings'],
  85   watch:{
  86     'settings':{
  87       handler:function(){
  88         localStorage.setItem("obscalc_settings", JSON.stringify(this.settings));
  89       },
  90       deep:true
  91     }
  92   }
  93 }
  94 </script>
  95
  96 <style>
  97 .btn-fab{
  98   position:fixed;
  99   top:10px;
 100   left:10px;
 101   background-color:#5bc0de;
 102   width:40px;
 103   height:40px;
 104   border-radius:100%;
 105   background:#5bc0de;
 106   border:none;
 107   outline:none;
 108   color:white;
 109   font-size:30px;
 110   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 111   -webkit-tap-highlight-color:rgba(0,0,0,0);
 112 }
 113  .glyphicon-center{
 114    margin-top:5px;
 115  }
 116 </style>