src/member.vue

   1 <!--
   2   **********************************************************************
   3   * Title: DietSurvey
   4   * Description: Nutritional Assessment App
   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 DietSurvey.
  12
  13   DietSurvey 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   DietSurvey 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 DietSurvey. If not, see <http://www.gnu.org/licenses/>.
  25   **********************************************************************
  26 -->
  27 <template>
  28   <div class="panel panel-default">
  29     <div class="panel-body">
  30       <div class="row"><button v-on:click="remove" type="button" class="close pull-left" style="margin-left:10px" title="Remove member"><span aria-hidden="true">&times;</span></button></div>
  31       <form class="form-horizontal" data-toggle="validator">
  32         <div class="form-group">
  33           <label class="col-sm-4 control-label">Name:</label>
  34           <div class="col-sm-8">
  35             <input v-model="dataMember.name" class="form-control" type="text" placeholder="Enter full name"><div class="help-block with-errors"></div>
  36           </div>
  37         </div>
  38         <div class="form-group">
  39           <label  class="col-sm-4 control-label">Age:</label>
  40           <div class="col-sm-8">
  41             <input v-model.number="dataMember.age" class="form-control" type="number" min=0 max=99 placeholder="Enter age in years"><div class="help-block with-errors"></div>
  42           </div>
  43         </div>
  44         <div v-show="dataMember.age===0" class="form-group">
  45           <label  class="col-sm-4 control-label">Age in Months:</label>
  46           <div class="col-sm-8">
  47             <input v-model.number="dataMember.month" class="form-control" type="number" min=0 max=11 placeholder="Enter age in months"><div class="help-block with-errors"></div>
  48           </div>
  49         </div>
  50         <div class="form-group">
  51           <label class="control-label col-sm-4">Sex:</label>
  52           <div class="col-sm-8">
  53             <label>
  54               <input v-model="dataMember.sex" type="radio" name="sex" value="m">
  55               Male
  56             </label>
  57             <label>
  58               <input v-model="dataMember.sex" type="radio" name="sex" value="f">
  59               Female
  60             </label>
  61           </div>
  62           <div v-show="dataMember.age>18 && dataMember.age<99" class="form-group">
  63             <label class="control-label col-sm-4">Work Type:</label>
  64             <div class="col-sm-8">
  65               <select v-model="dataMember.work" class="form-control">
  66                 <option value="sedentary">Sedentary</option>
  67                 <option value="moderate">Moderate</option>
  68                 <option value="heavy">Heavy</option>
  69               </select>
  70             </div>
  71           </div>
  72           <div v-show="dataMember.age>18 && dataMember.age<50 && dataMember.sex=='f'" class="form-group">
  73             <label class="control-label col-sm-4">Pregnancy Status:</label>
  74             <div class="col-sm-8">
  75               <select v-model="dataMember.state" class="form-control">
  76                 <option value="npnl">Non-Pregnant, Non-Lactating</option>
  77                 <option value="preg">Pregnant</option>
  78                 <option value="lact-6">Lactating, below 6 months</option>
  79                 <option value="lact+6">Lactating, above 6 months</option>
  80               </select>
  81             </div>
  82           </div>
  83       </form>
  84     </div>
  85   </div>
  86 </template>
  87
  88 <script>
  89 export default {
  90   name:"Member",
  91   props:["dataIndex", "dataMember"],
  92   methods:{
  93     remove:function(){
  94       this.$emit("removeMember", this.dataIndex);
  95     }
  96   }
  97 }
  98 </script>