src/DrugView.vue

   1 <!--
   2 ***********************************************************************
   3  * Title: PDosage
   4  * Description: Pediatric Dose 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 PDosage.
  12
  13    PDosage 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    PDosage 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 PDosage. If not, see <http://www.gnu.org/licenses/>.
  25 ***********************************************************************
  26 -->
  27 <template>
  28     <div class="modal fade" :id="id" tabindex="-1">
  29         <div class="modal-dialog">
  30             <div class="modal-content">
  31                 <div class="modal-header">
  32                     <div @click="toggleFav" class="clickable pull-left lead" title="Toggle Favorite" style="color:gold">
  33                         <span v-if="isFav" class="glyphicon glyphicon-star"></span>
  34                         <span v-else class="glyphicon glyphicon-star-empty"></span>
  35                     </div>
  36                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
  37                     <h3 class="modal-title">{{drug.name}}</h3>
  38                 </div>
  39                 <div class="modal-body">
  40                     <div class="panel panel-default">
  41                         <div class="panel-body">
  42                             <div class="row">
  43                                 <div class="col-sm-6">
  44                                     <p>
  45                                         <strong>Body Weight:</strong>
  46                                         <span v-if="patient.wt!==null">{{patient.wt}} kg</span>
  47                                         <span v-else>Not provided</span>
  48                                     </p>
  49                                 </div>
  50                                 <div class="col-sm-6">
  51                                     <p>
  52                                         <strong>Age:</strong>
  53                                         <span v-if="patient.age.y!==null">{{patient.age.y}} years</span> <span v-if="patient.age.m!==null">{{patient.age.m}} months</span> <span v-if="patient.age.d!==null">{{patient.age.d}} days</span>
  54                                         <span v-if="patient.age.y===null && patient.age.m===null && patient.age.d===null">Not provided</span>
  55                                     </p>
  56                                 </div>
  57                             </div>
  58                         </div>
  59                     </div>
  60                     <template v-for="item in drug.form">
  61                         <div class="panel" :class="{'panel-info': item.gen, 'panel-default': !item.gen}">
  62                             <div class="panel-heading">
  63                                 <div class="panel-title">
  64                                     {{item.mode}} {{drug.name}} <span v-if="item.content">({{item.content}})</span>
  65                                 </div>
  66                             </div>
  67                             <div class="panel-body">
  68                                 <div class="table-responsive">
  69                                     <table class="table">
  70                                         <tbody>
  71                                             <template v-for="i in item.dose">
  72                                                 <template v-if="i.val[0]">
  73                                                     <tr>
  74                                                         <td class="active" rowspan="2">Dose:</td>
  75                                                         <td>{{i.val[0]}}<span v-if="i.val[1]"> - {{i.val[1]}}</span> {{i.unit}}</td>
  76                                                         <td><span v-if="i.txt">{{i.txt}}</span><span v-else>per dose</span></td>
  77                                                     </tr>
  78                                                     <tr>
  79                                                         <td><template v-if="i.perKg && (!i.limit || i.limit[0]!=i.val[0] || i.limit[1]!=i.val[1])">
  80                                                             <template v-if="i.perKg">
  81                                                                 <span v-if="i.perKg[0]">( {{i.perKg[0]}}<span v-if="i.perKg[1]">-{{i.perKg[1]}}</span> {{i.unit}}/kg</span>
  82                                                                 <template v-if="i.adult">
  83                                                                     ; Adult: {{i.adult[0]}}<span v-if="i.adult[1] && i.adult[1]!=i.adult[0]">-{{i.adult[1]}}</span> {{i.unit}}
  84                                                                 </template>
  85                                                                 <template v-if="i.limit">
  86                                                                     ; Limit: {{i.limit[0]}}<span v-if="i.limit[1] && i.limit[1]!=i.limit[0]">-{{i.limit[1]}}</span> {{i.unit}}
  87                                                                 </template>
  88                                                                 )
  89                                                             </template>
  90                                                         </td>
  91                                                         <td><span v-if="i.comment">{{i.comment}}</span></td>
  92                                                     </tr>
  93                                                 </template>
  94                                             </template>
  95                                         </tbody>
  96                                     </table>
  97                                 </div>
  98                                 <div class="well" v-if="item.comment">
  99                                     {{item.comment}}
 100                                 </div>
 101                             </div>
 102                         </div>
 103                     </template>
 104                     <div class="well" v-if="drug.comment">
 105                         {{drug.comment}}
 106                     </div>
 107                 </div>
 108                 <div class="modal-footer">
 109                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 110                 </div>
 111             </div>
 112         </div>
 113     </div>
 114 </template>
 115
 116 <script>
 117  export default {
 118      name: "DrugView",
 119      props: ["drug", "patient", "favs", "id"],
 120      data:function(){
 121          return{
 122              isFav: false
 123          }
 124      },
 125      computed: {
 126          isFav:function(){
 127              return this.favs.indexOf(this.drug.name) != -1;
 128          }
 129      },
 130      methods: {
 131          toggleFav:function(){
 132              if(this.isFav){
 133                  this.favs.splice(this.favs.indexOf(this.drug.name), 1);
 134              }
 135              else{
 136                  this.favs.push(this.drug.name);
 137              }
 138              localStorage.setItem("pdosage_favs", JSON.stringify(this.favs));
 139          }
 140      }
 141  }
 142
 143 </script>