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">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                                                         <td v-if="i.comment">{{i.comment}}</td>
  78                                                     </tr>
  79                                                 </template>
  80                                             </template>
  81                                         </tbody>
  82                                     </table>
  83                                 </div>
  84                                 <div class="well" v-if="item.comment">
  85                                     {{item.comment}}
  86                                 </div>
  87                             </div>
  88                         </div>
  89                     </template>
  90                     <div class="well" v-if="drug.comment">
  91                         {{drug.comment}}
  92                     </div>
  93                 </div>
  94                 <div class="modal-footer">
  95                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  96                 </div>
  97             </div>
  98         </div>
  99     </div>
 100 </template>
 101
 102 <script>
 103  export default {
 104      name: "DrugView",
 105      props: ["drug", "patient", "favs", "id"],
 106      data:function(){
 107          return{
 108              isFav: false
 109          }
 110      },
 111      computed: {
 112          isFav:function(){
 113              return this.favs.indexOf(this.drug.name) != -1;
 114          }
 115      },
 116      methods: {
 117          toggleFav:function(){
 118              if(this.isFav){
 119                  this.favs.splice(this.favs.indexOf(this.drug.name), 1);
 120              }
 121              else{
 122                  this.favs.push(this.drug.name);
 123              }
 124              localStorage.setItem("pdosage_favs", JSON.stringify(this.favs));
 125          }
 126      }
 127  }
 128
 129 </script>