[WIP] Refactor 3 9

lib/diary.js

@@ -1,13 +1,14 @@
 var $         = require('jquery');
 var thing     = require('./stylesheets/main.css');
-var breakfast = require('./breakfast')
-var lunch     = require('./lunch')
-var dinner    = require('./dinner')
-var snacks    = require('./snacks')
-var diaryExercises = require('./exercises-diary')
-var foods     = require('./foods')
-var exercise  = require('./exercises')
-var _         = require('lodash')
+var breakfast = require('./breakfast');
+var lunch     = require('./lunch');
+var dinner    = require('./dinner');
+var snacks    = require('./snacks');
+var diaryExercises = require('./exercises-diary');
+var foods     = require('./foods');
+var exercise  = require('./exercises');
+var helpers   = require('../lib/html-handler.js');
+var _         = require('lodash');
 
 function Diary(date) {
   this.loadDiary(date)
@@ -52,11 +53,8 @@ Diary.prototype.printBreakfast = function (currentDiaries) {
   var diary = this;
   if(currentDiaries[this.date].breakfast) {
     currentDiaries[this.date].breakfast.forEach(function(food, index) {
-      $('#diary-breakfast-table').append(`<tr class='breakfast-row' data-row-index='${index}'>
-        <td class='breakfast-food-name'>${food.name}</td>
-        <td class='breakfast-food-calories'>${food.calories}</td>
-        <td><button id='index-${index}' class='delete-food-meal-button badge' type='button'>-</button></td>
-        </tr>`
+      $('#diary-breakfast-table').append(
+        helpers.diaryBreakfastFoodHTML(food.name, food.calories, index)
       );
     });
   };
@@ -67,28 +65,15 @@ Diary.prototype.printBreakfastTableTotals = function () {
   var diary = this;
   var allCalories = diary.breakfast.calculateTotalCalories();
   var remainingCalories = diary.breakfast.calculateRemainingCalories();
-  $('#diary-breakfast-table').append(`<tr class="cal-totals-row">
-    <td>Total Calories</td>
-    <td class='calorie-total'>${allCalories}</td>
-    <td></td>
-    </tr>
-    <tr class="cal-totals-row">
-    <td>Remaining Calories</td>
-    <td class='calorie-total
-    ${this.selectColorCalorieCount(remainingCalories)}
-    '>${remainingCalories}</td>
-    <td></td>
-    </tr>`
+  var colorCalorieCount = diary.selectColorCalorieCount(remainingCalories)
+  $('#diary-breakfast-table').append(
+    helpers.diaryBreakfastTotalsHTML(allCalories, colorCalorieCount, remainingCalories)
   );
 };
 
 Diary.prototype.clearBreakfastTable = function () {
-  $('.breakfast-table').html('' +
-    '<tr>' +
-    '<th>Name</th>' +
-    '<th>Calories</th>' +
-    '<th></th>' +
-    '</tr>'
+  $('.breakfast-table').html(
+    helpers.clearBreakfastTableHTML()
   );
 };
 
@@ -146,11 +131,8 @@ Diary.prototype.printLunch = function (currentDiaries) {
   var diary = this;
   if(currentDiaries[diary.date].lunch) {
     currentDiaries[diary.date].lunch.forEach(function(food, index) {
-      $('#diary-lunch-table').append(`<tr class='lunch-row' data-row-index='${index}'>
-        <td class='lunch-food-name'>${food.name}</td>
-        <td class='lunch-food-calories'>${food.calories}</td>
-        <td><button id='index-${index}' class='delete-food-meal-button badge' type='button'>-</button></td>
-        </tr>`
+      $('#diary-lunch-table').append(
+        helpers.diaryLunchFoodHTML(food.name, food.calories, index)
       );
     });
   };
@@ -161,28 +143,15 @@ Diary.prototype.printLunchTableTotals = function () {
   var diary = this;
   var allCalories = diary.lunch.calculateTotalCalories();
   var remainingCalories = diary.lunch.calculateRemainingCalories();
-  $('#diary-lunch-table').append(`<tr class="cal-totals-row">
-    <td>Total Calories</td>
-    <td class='calorie-total'>${allCalories}</td>
-    <td></td>
-    </tr>
-    <tr class="cal-totals-row">
-    <td>Remaining Calories</td>
-    <td class='calorie-total
-    ${diary.selectColorCalorieCount(remainingCalories)}
-    '>${remainingCalories}</td>
-    <td></td>
-    </tr>`
+  var colorCalorieCount = diary.selectColorCalorieCount(remainingCalories);
+  $('#diary-lunch-table').append(
+    helpers.diaryLunchTotalsHTML(allCalories, colorCalorieCount, remainingCalories)
   );
 };
 
 Diary.prototype.clearLunchTable = function () {
-  $('.lunch-table').html('' +
-    '<tr>' +
-    '<th>Name</th>' +
-    '<th>Calories</th>' +
-    '<th></th>' +
-    '</tr>'
+  $('.lunch-table').html(
+    helpers.clearLunchTableHTML()
   );
 };
 
@@ -202,10 +171,9 @@ Diary.prototype.deleteLunchFood = function (data) {
 };
 
 Diary.prototype.setDinnerTable = function () {
-  var diary = this;
-  diary.findNewDinnerItems();
-  var currentDiaries = diary.fetchDiaries();
-  currentDiaries[diary.date].dinner = diary.dinner.foods;
+  this.findNewDinnerItems();
+  var currentDiaries = this.fetchDiaries();
+  currentDiaries[this.date].dinner = this.dinner.foods;
   this.replaceToLocalStorage(currentDiaries);
   this.dinnerTable();
 };
@@ -240,11 +208,8 @@ Diary.prototype.printDinner = function () {
   var diary = this;
   if(currentDiaries[diary.date].dinner) {
     currentDiaries[diary.date].dinner.forEach(function(food, index){
-      $('.dinner-table').append(`<tr class='dinner-row' data-row-index='${index}'>
-        <td class='dinner-food-name'>${food.name}</td>
-        <td class='dinner-food-calories'>${food.calories}</td>
-        <td><button id='index-${index}' class='delete-food-meal-button badge' type='button'>-</button></td>
-        </tr>`
+      $('.dinner-table').append(
+        helpers.diaryDinnerTableHTML(food.name, food.calories, index)
       );
     });
   };
@@ -255,28 +220,15 @@ Diary.prototype.printDinnerTableTotals = function () {
   var diary = this;
   var allCalories = diary.dinner.calculateTotalCalories();
   var remainingCalories = diary.dinner.calculateRemainingCalories();
-  $('.dinner-table').append(`<tr class="cal-totals-row">
-    <td>Total Calories</td>
-    <td class='calorie-total'>${allCalories}</td>
-    <td></td>
-    </tr>
-    <tr class="cal-totals-row">
-    <td>Remaining Calories</td>
-    <td class='calorie-total
-    ${diary.selectColorCalorieCount(remainingCalories)}'>
-    ${remainingCalories}</td>
-    <td></td>
-    </tr>`
+  var colorCalorieCount = diary.selectColorCalorieCount(remainingCalories)
+  $('.dinner-table').append(
+    helpers.diaryDinnerTotalsHTML(allCalories, colorCalorieCount, remainingCalories)
   );
 };
 
 Diary.prototype.clearDinnerTable = function () {
-  $('.dinner-table').html('' +
-    '<tr>' +
-    '<th>Name</th>' +
-    '<th>Calories</th>' +
-    '<th></th>' +
-    '</tr>'
+  $('.dinner-table').html(
+    helpers.clearDinnerTableHTML()
   );
 };
 
@@ -334,43 +286,27 @@ Diary.prototype.printSnacks = function (currentDiaries) {
   var diary = this;
   if(currentDiaries[diary.date].snacks) {
     currentDiaries[diary.date].snacks.forEach(function(food, index){
-      $('#diary-snacks-table').append(`<tr class='snack-row' data-row-index='${index}'>
-        <td class='snack-food-name'>${food.name}</td>
-        <td class='snack-food-calories'>${food.calories}</td>
-        <td><button id='index-${index}' class='delete-food-meal-button badge' type='button'>-</button></td>
-        </tr>`
+      $('#diary-snacks-table').append(
+        helpers.diarySnackTableHTML(food.name, food.calories, index)
       );
     });
-  };
+  }
   diary.printSnacksTableTotals();
 };
 
 Diary.prototype.printSnacksTableTotals = function () {
   var diary = this;
   var allCalories = diary.snacks.calculateTotalCalories();
   var remainingCalories = diary.snacks.calculateRemainingCalories();
-  $('#diary-snacks-table').append(`<tr class="cal-totals-row">
-    <td>Total Calories</td>
-    <td class='calorie-total'>${allCalories}</td>
-    <td></td>
-    </tr>
-    <tr class="cal-totals-row">
-    <td>Remaining Calories</td>
-    <td class='calorie-total
-    ${diary.selectColorCalorieCount(remainingCalories)}'>
-    ${remainingCalories}</td>
-    <td></td>
-    </tr>`
+  var colorCalorieCount = diary.selectColorCalorieCount(remainingCalories);
+  $('#diary-snacks-table').append(
+    helpers.diarySnackTotalsHTML(allCalories, colorCalorieCount, remainingCalories)
   );
 };
 
 Diary.prototype.clearSnacksTable = function () {
-  $('#diary-snacks-table').html('' +
-    '<tr>' +
-    '<th>Name</th>' +
-    '<th>Calories</th>' +
-    '<th></th>' +
-    '</tr>'
+  $('#diary-snacks-table').html(
+    helpers.clearSnackTableHTML()
   );
 };
 
@@ -427,11 +363,8 @@ Diary.prototype.printExercises = function (currentDiaries) {
   var diary = this;
   if(currentDiaries[diary.date].exercises) {
     currentDiaries[diary.date].exercises.forEach(function(exercise, index){
-      $('#diary-exercise-table').append(`<tr class='exercise-row'>
-        <td class='diary-exercise-name'>${exercise.name}</td>
-        <td class='diary-exercise-calories'>${exercise.calories}</td>
-        <td><button id='index-${index}' class='delete-exercise-diary-button badge' type='button'>-</button></td>
-        </tr>`
+      $('#diary-exercise-table').append(
+        helpers.diaryExercisesTableHTML(exercise.name, exercise.calories, index)
       );
     });
   };
@@ -441,21 +374,15 @@ Diary.prototype.printExercises = function (currentDiaries) {
 Diary.prototype.printExercisesTotals = function () {
   var diary = this;
   var allCalories = diary.exercises.calculateTotalCalories();
-  $('#diary-exercise-table').append(`<tr class="cal-totals-row">
-    <td>Total Calories</td>
-    <td class='calorie-total ${diary.selectColorCaloriesBurned(allCalories)}'>${allCalories}</td>
-    <td></td>
-    </tr>`
+  var colorCalorieCount = diary.selectColorCaloriesBurned(allCalories);
+  $('#diary-exercise-table').append(
+    helpers.diaryExercisesTotalsHTML(allCalories, colorCalorieCount)
   );
 };
 
 Diary.prototype.clearExerciseTable = function () {
-  $('#diary-exercise-table').html('' +
-    '<tr>' +
-    '<th>Name</th>' +
-    '<th>Calories</th>' +
-    '<th></th>' +
-    '</tr>'
+  $('#diary-exercise-table').html(
+    helpers.clearDiaryExercisesHTML()
   );
 };
 
@@ -592,11 +519,8 @@ Diary.prototype.findExercises = function () {
 
 Diary.prototype.printExerciseOptionsTable = function (currentExercises) {
   currentExercises.forEach(function(exercise){
-    $('#exercises-diary-table').append(`<tr>
-      <td class='selected-exercises'><input id=${exercise.name} type='checkbox'></td>
-      <td id='exercise-diary-name'>${exercise.name}</td>
-      <td id='exercise-diary-calories'>${exercise.calories}</td>
-      </tr>`
+    $('#exercises-diary-table').append(
+      helpers.diaryExerciseOptionsTableHTML(exercise.name, exercise.calories)
     );
   });
 };
@@ -653,11 +577,8 @@ Diary.prototype.findFoods = function () {
 
 Diary.prototype.printFoodOptionsTable = function (currentFoods) {
   currentFoods.forEach(function(food){
-    $('#foods-diary-table').append(`<tr>
-      <td class='selected-foods'><input id=${food.name} type='checkbox'></td>
-      <td id='foods-diary-name'>${food.name}</td>
-      <td id='foods-diary-calories'>${food.calories}</td>
-      </tr>`
+    $('#foods-diary-table').append(
+      helpers.diaryFoodOptionsTableHTML(food.name, food.calories)
     );
   });
 };

lib/exercises.js

@@ -1,7 +1,8 @@
-var $     = require('jquery');
-var thing = require('./stylesheets/main.css');
+var $           = require('jquery');
+var thing       = require('./stylesheets/main.css');
 var htmlHandler = require('../lib/html-handler');
-var error = require('../lib/errors-handler');
+var error       = require('../lib/errors-handler');
+var helpers     = require('../lib/html-handler.js');
 
 function Exercise(name, calories) {
   this.name = name;
@@ -42,11 +43,7 @@ Exercise.prototype.addExercisesToPage = function () {
 Exercise.prototype.printExercises = function (currentExercises) {
   currentExercises.forEach(function(exercise){
     $('.exercise-table').append(
-      `<tr>
-      <td class='exercise-name'>${exercise.name}</td>
-      <td class='exercise-calories'>${exercise.calories}</td>
-      <td><button id='delete-exercise-button' class='delete-exercise-button badge' type='button'>-</button></td>
-      </tr>`
+    helpers.addExerciseHTML(exercise.name, exercise.calories)
     );
   });
 };
@@ -58,8 +55,8 @@ Exercise.prototype.updateExercise = function () {
   var $name        = $exerciseRow.children('.exercise-name');
   var oldName      = $name.text();
   var $calories    = $exerciseRow.children('.exercise-calories');
-  $name.html(`<input class='update-exercise-name' type="text" name='name' value=${$name.text()}></br>`);
-  $calories.html(`<input class='update-exercise-calorie-count' type="text" name='calories' value=${$calories.text()}></br>`);
+  $name.html(helpers.addExerciseNameInputHTML($name.text()));
+  $calories.html(helpers.addExerciseCaloriesInputHTML($calories.text()));
   $('.update-exercise-name, .update-exercise-calorie-count').on('blur keypress', function (keypress) {
     var newExercise = new Exercise;
     newExercise.triggerExerciseUpdate(keypress, oldName);
@@ -108,7 +105,6 @@ Exercise.prototype.deleteFromCurrentExercises = function (currentExercises, name
   return currentExercises;
 };
 
-
 Exercise.prototype.retrieveFromLocalStorage = function () {
   var exercisesJSON = localStorage.getItem('exercises');
   if (exercisesJSON === null) {
@@ -123,12 +119,7 @@ Exercise.prototype.replaceToLocalStorage = function (currentExercises) {
 };
 
 Exercise.prototype.clearTable = function () {
-  $('.exercise-table').html('' +
-  '<tr>' +
-  '<th>Name</th>' +
-  '<th>Calories</th>' +
-  '<th>Delete</th>' +
-  '</tr>');
+  $('.exercise-table').html(helpers.clearExerciseTableHTML());
 };
 
 Exercise.prototype.clearForm = function () {