dietsurvey/index.php

   1 <?php
   2 /**********************************************************************
   3  * Title: Diet-Survey
   4  * Description: Application for calculating nutrient intake
   5  * Author: Agnibho Mondal
   6  * Website: http://code.agnibho.com
   7  **********************************************************************
   8    Copyright (c) 2013-2015 Agnibho Mondal
   9    All rights reserved
  10  **********************************************************************
  11    This file is part of Diet-Survey.
  12
  13    Diet-Survey 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    Diet-Survey 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 Diet-Survey.  If not, see <http://www.gnu.org/licenses/>.
  25  **********************************************************************/
  26 ?>
  27 <!DOCTYPE html>
  28 <html>
  29     <head>
  30         <title>Diet Survey</title>
  31         <meta charset="UTF-8"/>
  32         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  33
  34         <link href="res/bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet">
  35         <link href="res/custom.css" rel="stylesheet">
  36         <script src="res/jquery-1.11.3.min.js"></script>
  37         <script src="res/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
  38         <script src="res/Chart.min.js"></script>
  39         <script src="script.js"></script>
  40     </head>
  41     <body>
  42         <div class="container">
  43             <div class="text-primary">
  44                 <div class="jumbotron">
  45                     <h1>Diet Survey</h1>
  46                     <h2>Family diet survey based on 24 hours recall...</h2>
  47                 </div>
  48             </div>
  49
  50             <div id="js-check">
  51                 <div class="alert alert-danger">
  52                     <h3>It looks like you don't have JavaScript enabled. Please enable JavaScript to use Diet-Survey.</h3>
  53                 </div>
  54             </div>
  55
  56             <div id="initial" class="row"><!--Initial-->
  57
  58                 <div id="family-info" class="col-sm-6"><!--Family Info-->
  59                     <div class="panel panel-success">
  60                         <div class="panel-heading">
  61                             <h3>Family Information</h3>
  62                         </div>
  63                         <div class="panel-body">
  64                             <form role="form">
  65                                 <div class="form-group">
  66                                     <label for="">Head of the Family:</label>
  67                                     <input class="form-control" type="text" id="family-head" placeholder="Enter Name"/>
  68                                 </div>
  69                                 <hr>
  70                             </form>
  71
  72                             <button class="btn btn-success btn-block" type="button" data-toggle="modal" data-target="#edit-member">Add Family Member</button>
  73                             <hr>
  74
  75                             <div id="family-members">
  76                             </div>
  77
  78
  79                             <div class="modal fade" id="edit-member" tabindex="-1" role="dialog" aria-hidden="true">
  80                                 <div class="modal-dialog">
  81                                     <div class="modal-content">
  82                                         <div class="modal-header">
  83                                             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  84                                             <h4>Add a member:</h4>
  85                                         </div>
  86                                         <div class="modal-body">
  87                                             <form class="form-horizontal" role="form">
  88                                                 <div class="form-group">
  89                                                     <label for="member-name" class="control-label col-sm-3">Name:</label>
  90                                                     <div class="col-sm-9">
  91                                                         <input class="form-control" type="text" id="member-name" placeholder="Enter name"/>
  92                                                     </div>
  93                                                 </div>
  94                                                 <div class="form-group">
  95                                                     <label for="member-age" class="control-label col-sm-3">Age:</label>
  96                                                     <div class="col-sm-9">
  97                                                         <input class="form-control" type="text" id="member-age" placeholder="Enter age in years"/>
  98                                                     </div>
  99                                                 </div>
 100                                                 <div class="form-group">
 101                                                     <div class="col-sm-offset-3 col-sm-2">
 102                                                         <div class="radio">
 103                                                             <label>
 104                                                                 <input type="radio" id="member-sex-male" name="member-sex"/>Male
 105                                                             </label>
 106                                                         </div>
 107                                                     </div>
 108                                                     <div class="col-sm-2">
 109                                                         <div class="radio">
 110                                                             <label>
 111                                                                 <input type="radio" id="member-sex-female" name="member-sex"/>Female
 112                                                             </label>
 113                                                         </div>
 114                                                     </div>
 115                                                 </div>
 116                                                 <div class="form-group" id="member-work-box">
 117                                                     <label for="member-work" class="control-label col-sm-3">Work Type:</label>
 118                                                     <div class="col-sm-9">
 119                                                         <select class="form-control" id="member-work">
 120                                                             <option value="Sedentary">Sedentary</option>
 121                                                             <option value="Moderate">Moderate</option>
 122                                                             <option value="Heavy">Heavy</option>
 123                                                         </select>
 124                                                     </div>
 125                                                 </div>
 126                                                 <div class="well" id="female-special">
 127                                                     <div class="form-group">
 128                                                         <div class="col-sm-offset-4">
 129                                                             <div class="radio">
 130                                                                 <label>
 131                                                                     <input type="radio" id="member-female-npnl" name="member-female" checked/>Non-Pregnant / Non-Lactating
 132                                                                 </label>
 133                                                             </div>
 134                                                         </div>
 135                                                     </div>
 136                                                     <div class="form-group">
 137                                                         <div class="col-sm-offset-4">
 138                                                             <div class="radio">
 139                                                                 <label>
 140                                                                     <input type="radio" id="member-female-pregnant" name="member-female"/>Pregnant
 141                                                                 </label>
 142                                                             </div>
 143                                                         </div>
 144                                                     </div>
 145                                                     <div class="form-group">
 146                                                         <div class="col-sm-offset-4">
 147                                                             <div class="radio">
 148                                                                 <label>
 149                                                                     <input type="radio" id="member-female-lactating-lt6" name="member-female"/>Lactating, below 6 months
 150                                                                 </label>
 151                                                             </div>
 152                                                         </div>
 153                                                     </div>
 154                                                     <div class="form-group">
 155                                                         <div class="col-sm-offset-4">
 156                                                             <div class="radio">
 157                                                                 <label>
 158                                                                     <input type="radio" id="member-female-lactating-gt6" name="member-female"/>Lactating, over 6 months
 159                                                                 </label>
 160                                                             </div>
 161                                                         </div>
 162                                                     </div>
 163                                                 </div>
 164                                             </form>
 165                                         </div>
 166                                         <div class="modal-footer">
 167                                             <button type="button" class="btn btn-primary" id="save-member">Save Member</button>
 168                                             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 169                                         </div>
 170                                     </div>
 171                                 </div>
 172                             </div>
 173
 174                         </div>
 175                     </div>
 176                 </div><!--Family-info-->
 177
 178                 <div id="food-info" class="col-sm-6"><!--Food Info-->
 179                     <div class="panel panel-success">
 180                         <div class="panel-heading">
 181                             <h3>Food Consumption in 24 hours</h3>
 182                         </div>
 183                         <div class="panel-body">
 184                             <form role="form">
 185                                 <div class="form-group">
 186                                     <label for="date-day">Date:</label>
 187                                     <div class="row">
 188                                         <div class="col-sm-4">
 189                                             <select class="form-control" id="date-day">
 190                                             </select>
 191                                         </div>
 192                                         <div class="col-sm-4">
 193                                             <select class="form-control" id="date-month">
 194                                             </select>
 195                                         </div>
 196                                         <div class="col-sm-4">
 197                                             <select class="form-control" id="date-year">
 198                                             </select>
 199                                         </div>
 200                                     </div>
 201                                 </div>
 202                                 <hr>
 203                             </form>
 204
 205                             <button class="btn btn-success btn-block" type="button" data-toggle="modal" data-target="#edit-food">Add Food</button>
 206                             <hr>
 207
 208                             <table class="table table-hover" id="food-list">
 209                             </table>
 210
 211                             <div class="modal fade" id="edit-food" tabindex="-1" role="dialog" aria-hidden="true">
 212                                 <div class="modal-dialog">
 213                                     <div class="modal-content">
 214                                         <div class="modal-header">
 215                                             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 216                                             <h4>Add a food:</h4>
 217                                         </div>
 218                                         <div class="modal-body">
 219                                             <form class="form-horizontal" role="form">
 220                                                 <div class="form-group">
 221                                                     <label for="food-name" class="control-label col-sm-3">Food Name:</label>
 222                                                     <div class="col-sm-9">
 223                                                         <select class="form-control" id="food-name">
 224                                                             <option value="">--Select a food--</option>
 225                                                         </select>
 226                                                     </div>
 227                                                 </div>
 228                                                 <div class="form-group">
 229                                                     <label for="food-amount" class="control-label col-sm-3">Amount:</label>
 230                                                     <div class="col-sm-9">
 231                                                         <input class="form-control" type="text" id="food-amount" placeholder="Enter amount in gm or ml"/>
 232                                                     </div>
 233                                                 </div>
 234                                             </form>
 235                                         </div>
 236                                         <div class="modal-footer">
 237                                             <button type="button" class="btn btn-primary" id="add-food">Add Food</button>
 238                                             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 239                                             <button type="button" class="btn btn-default" id="launch-custom">New Food</button>
 240                                         </div>
 241                                     </div>
 242                                 </div>
 243                             </div>
 244
 245                         </div>
 246                     </div>
 247                 </div><!--Food Info-->
 248
 249                 <hr>
 250                 <div class="row">
 251                     <div class="col-sm-offset-4 col-sm-4">
 252                         <button type="button" class="btn btn-primary btn-lg btn-block" id="get-result">Get Result</button>
 253                     </div>
 254                 </div>
 255
 256             </div><!--Initial-->
 257
 258             <div class="row" id="final"><!--Final-->
 259                 <div class="panel panel-info">
 260                     <div class="panel-heading">
 261                         <h3>Family Information</h3>
 262                     </div>
 263                     <div class="panel-body">
 264                         <form class="form-horizontal" role="form">
 265                             <div class="form-group">
 266                                 <label class="col-sm-6 control-label">Head of the Family:</label>
 267                                 <div class="col-sm-6">
 268                                     <p class="form-control-static" id="show-hof"></p>
 269                                 </div>
 270                                 <label class="col-sm-6 control-label">Date of Survey:</label>
 271                                 <div class="col-sm-6">
 272                                     <p class="form-control-static" id="show-date"></p>
 273                                 </div>
 274                             </div>
 275                         </form>
 276                         <div class="panel panel-default">
 277                             <div class="panel-heading">
 278                                 <h5>Family Members</h5>
 279                             </div>
 280                             <div class="body">
 281                                 <div class="row">
 282                                     <div class="col-md-offset-2 col-md-8">
 283                                         <table class="table table-bordered table-hover" id="show-members">
 284                                             <tr><th>Name</th><th>Age</th><th>Sex</th></tr>
 285                                         </table>
 286                                         <ul class="list-group" id="show-member-points">
 287                                         </ul>
 288                                     </div>
 289                                 </div>
 290                             </div>
 291                         </div>
 292                     </div>
 293                 </div>
 294                 <div class="panel panel-info">
 295                     <div class="panel-heading">
 296                         <h3>Foods consumed in last 24 hours</h3>
 297                     </div>
 298                     <div class="body">
 299                         <div class="row">
 300                             <div class="col-md-offset-4 col-md-4">
 301                                 <table class="table table-hover" id="show-foods">
 302                                     <tr><th>Name</th><th>Amount (mg or ml)</th></tr>
 303                                 </table>
 304                             </div>
 305                         </div>
 306                     </div>
 307                 </div>
 308                 <div class="panel panel-info">
 309                     <div class="panel-heading">
 310                         <h3>Nutrient Requirement</h3>
 311                         <h6>Reference: Nutrient Requirements and Recommended Dietary Allowences for Indians</h6>
 312                         <h6>A Report of the Expert Group of the ICMR 2009</h6>
 313                         <h6>National Institute of Nutrition, ICMR</h6>
 314                     </div>
 315                     <div class="body">
 316                         <table class="table table-hover" id="show-requirement">
 317                             <tr><th>Member</th><th>Energy</th><th>Protein</th><th>Iron</th><th>Vitamin A</th><th>Thiamine</th><th>Riboflavin</th><th>Vitamin C</th></tr>
 318                         </table>
 319                     </div>
 320                 </div>
 321                 <div class="panel panel-info">
 322                     <div class="panel-heading">
 323                         <h3>Nutritional value of consumed foods</h3>
 324                         <h6>Reference: Nutritive Value of Indian Foods, ICMR, 1989</h6>
 325                     </div>
 326                     <div class="body">
 327                         <table class="table table-hover" id="show-value">
 328                             <tr><th>Food</th><th>Energy</th><th>Protein</th><th>Iron</th><th>Vitamin A</th><th>Thiamine</th><th>Riboflavin</th><th>Vitamin C</th></tr>
 329                         </table>
 330                     </div>
 331                 </div>
 332                 <div class="panel panel-info">
 333                     <div class="panel-heading">
 334                         <h3>Comparison of nutrient intake</h3>
 335                     </div>
 336                     <div class="body">
 337                         <table class="table table-hover" id="show-compare">
 338                             <tr><th>Nutrient</th><th>Requirement</th><th>Intake</th><th>Deficeiency / Excess</th></tr>
 339                         </table>
 340                     </div>
 341                 </div>
 342                 <div class="panel panel-info">
 343                     <div class="panel-heading">
 344                         <h3>Summary</h3>
 345                     </div>
 346                     <div class="body row">
 347                         <br>
 348                         <div class="col-md-offset-3 col-md-6">
 349                             <ul class="list-group" id="show-summary">
 350                                 <li class="list-group-item">summary</li>
 351                             </ul>
 352                         </div>
 353                     </div>
 354                 </div>
 355
 356                 <canvas id="bar-diagram" height="400" width="600" class="center-block"></canvas>
 357
 358                 <hr>
 359                 <div class="row">
 360                     <div class="col-sm-offset-4 col-sm-4">
 361                         <a href="" class="btn btn-primary btn-lg btn-block">Do Another Survey</a>
 362                     </div>
 363                 </div>
 364             </div><!--Final-->
 365
 366         </div>
 367
 368         <div class="modal fade" id="customize-food" tabindex="-1" role="dialog" aria-hidden="true">
 369             <div class="modal-dialog modal-lg">
 370                 <div class="modal-content">
 371                     <div class="modal-header">
 372                         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 373                         <h4>Custom Food List:</h4>
 374                     </div>
 375                     <div class="modal-body">
 376                         <table class="table">
 377                             <tr class="text-center">
 378                                 <th>Name</th>
 379                                 <th>Energy</th>
 380                                 <th>Protein</th>
 381                                 <th>Iron</th>
 382                                 <th>Vitamin A</th>
 383                                 <th>Thiamine</th>
 384                                 <th>Riboflavin</th>
 385                                 <th>Vitamin C</th>
 386                                 <th></th>
 387                             </tr>
 388                             <tr>
 389                                 <td><input type="text" class="form-control" id="custom-name" placeholder="Name"></td>
 390                                 <td><input type="text" class="form-control" id="custom-energy" placeholder="Energy"></td>
 391                                 <td><input type="text" class="form-control" id="custom-protein" placeholder="Protein"></td>
 392                                 <td><input type="text" class="form-control" id="custom-iron" placeholder="Iron"></td>
 393                                 <td><input type="text" class="form-control" id="custom-vitA" placeholder="Vit A"></td>
 394                                 <td><input type="text" class="form-control" id="custom-thiamine" placeholder="Thiamine"></td>
 395                                 <td><input type="text" class="form-control" id="custom-riboflavin" placeholder="Riboflavin"></td>
 396                                 <td><input type="text" class="form-control" id="custom-vitC" placeholder="Vit C"></td>
 397                                 <td><button class="btn btn-success" id="custom-save">Save</button></td>
 398                             </tr>
 399                         </table>
 400                         <hr>
 401                         <div style="overflow:auto">
 402                             <table class="table table-hover" id="custom-existing">
 403                             </table>
 404                         </div>
 405                     </div>
 406                     <div class="modal-footer">
 407                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 408                     </div>
 409                 </div>
 410             </div>
 411         </div>
 412
 413         <div class="modal fade" id="block-wait" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
 414             <div class="modal-dialog">
 415                 <div class="modal-content">
 416                     <div class="modal-header">
 417                         <h4>Please wait while retrieving data from server</h4>
 418                     </div>
 419                 </div>
 420             </div>
 421         </div>
 422
 423         <div class="modal fade" id="connect-fail" tabindex="-1" role="dialog" aria-hidden="true">
 424             <div class="modal-dialog">
 425                 <div class="modal-content">
 426                     <div class="modal-header">
 427                         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 428                         <h4>Failed to connect server</h4>
 429                     </div>
 430                 </div>
 431             </div>
 432         </div>
 433
 434         <hr>
 435         <div class="panel panel-info">
 436             <div class="panel-heading">
 437                 <h3>Diet Survey</h3>
 438                 <h4>Copyright &copy; 2014 Agnibho Mondal</h4>
 439                 <h4><a href="http://www.agnibho.com" style="text-decoration:none">www.agnibho.com</a></h4>
 440             </div>
 441         </div>
 442     </body>
 443 </html>