added user-page and messages page

app/app.js

@@ -32,6 +32,14 @@ app.config(['$routeProvider', function($routeProvider){
     .when('/shopping-cart',{
       templateUrl: './app/views/shopping-cart-page.html',
       controller: 'ShoppingCartPageController'
+    })
+    .when('/user-page',{
+      templateUrl: './app/views/user-page.html',
+      controller: 'UserPageController'
+    })
+    .when('/messages',{
+      templateUrl: './app/views/messages-page.html',
+      controller: 'MessagesPageController'
     }).otherwise({
       redirectTo: '/'
     })

app/controllers/AddItemPageController.js

@@ -1,4 +1,4 @@
-app.controller('AddItemPageController',['$scope',function($scope){
+app.controller('AddItemPageController',['$scope','$timeout',function($scope,$timeout){
   $scope.resObj = {
     mealName: '',
     type: '',
@@ -25,8 +25,21 @@ app.controller('AddItemPageController',['$scope',function($scope){
     $scope.resObj.ingredients.push('');
   }
 
+  var firebaseUsersTest = firebase.database().ref().child('users');
+  firebaseUsersTest.on('value', function(snap){
+    $scope.usersTest = snap.val();
+
+  })
+
   $scope.sendMeal = function(){
-    databaseMeals.push().set($scope.resObj);
+    var userKeys = Object.keys($scope.usersTest);
+    console.log(userKeys)
+    for (let i = 0; i < userKeys.length; i++) {
+      firebaseUsersTest.child(userKeys[i]).child('meals').push().set(Object.assign($scope.resObj));
+    }
+    var databaseMeals2 = firebase.database().ref().child('meals');
+    databaseMeals2.push().set($scope.resObj);
+
   }
 
   $scope.sendDiet = function(){

app/controllers/MessagesPageController.js

@@ -0,0 +1,49 @@
+app.controller('MessagesPageController',['$scope','$timeout',function($scope,$timeout){
+
+  // gettig of user images url
+  $scope.userImages = {};
+  var firebaseUsers = firebase.database().ref().child('users');
+  firebaseUsers.on('value',function(snap){
+    $scope.users = snap.val();
+    $scope.userKeys = Object.keys($scope.users)
+    for (let i = 0; i < $scope.userKeys.length; i++) {
+      firebase.storage().ref($scope.userKeys[i]).getDownloadURL().then(function(url){
+        $scope.userImages[$scope.userKeys[i]] = url;
+
+      }).catch(function(error){
+        console.log(error);
+      })
+    }
+    $scope.selectedUser = $scope.userKeys[0];
+  })
+  // gettig of user images url
+
+  // chat output
+  $scope.selectUser = function(key){
+    $scope.selectedUser = key;
+  }
+  // chat output
+
+  //send message
+  $scope.messageObject = {
+    userMessage: ''
+  };
+
+  $scope.sendMessage = function(){
+    var selectedUser = $scope.selectedUser;
+    if($scope.messageObject.userMessage){
+      $scope.messageObject.uid = 'uRkqD9GmNxUsdgF1XtmPicDJwAz1';
+      var date = new Date();
+      // $scope.messageObject.name = 'Admin';
+      // $scope.messageObject.surname = '';
+      $scope.messageObject.date = date.getHours() + ':' + (date.getMinutes().toString().length < 2?'0'+date.getMinutes():date.getMinutes())
+      firebase.database().ref().child('users').child($scope.selectedUser).child('chat').push().set($scope.messageObject);
+      $scope.messageObject.userMessage = '';
+      $scope.selectedUser = selectedUser;
+    }
+    console.log($scope.userKeys.indexOf($scope.selectedUser))
+  }
+
+  //send message
+
+}])

app/controllers/ReadyMenuSecondController.js

@@ -50,11 +50,23 @@ app.controller('ReadyMenuSecondController',['$scope','$location','$timeout','$wi
       var item = document.querySelector('.ready-menu-second .item:nth-child(2)');
       var JQItem = angular.element(item);
       JQItem.addClass('ready-menu-second-scroll-class');
-    } else{
+    }
+    else{
       var item = document.querySelector('.ready-menu-second .item:nth-child(2)');
       var JQItem = angular.element(item);
       JQItem.removeClass('ready-menu-second-scroll-class');
     }
+
+    if(window.pageYOffset >= '600'){
+      var item = document.querySelector('.ready-menu-second .item:nth-child(3)');
+      var JQItem = angular.element(item);
+      JQItem.addClass('ready-menu-second-scroll-class');
+    }
+    else{
+      var item = document.querySelector('.ready-menu-second .item:nth-child(3)');
+      var JQItem = angular.element(item);
+      JQItem.removeClass('ready-menu-second-scroll-class');
+    }
   })
 
   $scope.onInit = function(){
@@ -85,4 +97,11 @@ app.controller('ReadyMenuSecondController',['$scope','$location','$timeout','$wi
       },50)
     }
   }
+
+  $scope.deleteDietItem = function(i){
+    var newDiets = Object.assign($scope.diets);
+    var dietsKeys = Object.keys(newDiets);
+    delete newDiets[dietsKeys[i]];
+    firebase.database().ref().child('diets').set(newDiets);
+  }
 }])

app/controllers/SelectMenuPageController.js

@@ -1,4 +1,4 @@
-app.controller('SelectMenuPageController',['$scope','$firebaseObject','$timeout','$interval',function($scope,$firebaseObject,$timeout,$interval){
+app.controller('SelectMenuPageController',['$scope','$firebaseObject','$timeout','$interval','$window',function($scope,$firebaseObject,$timeout,$interval,$window){
   if(firebase.auth().currentUser){
     $scope.ref = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals');
   } else{
@@ -52,4 +52,34 @@ app.controller('SelectMenuPageController',['$scope','$firebaseObject','$timeout'
     })
   })
 
+  var firebaseMainMeals = firebase.database().ref().child('meals');
+  var firebaseUsers = firebase.database().ref().child('users');
+  firebaseUsers.on('value', function(snap){
+    $scope.testUsers = snap.val();
+
+  })
+  firebaseMainMeals.on('value',function(snap){
+    $scope.mainObjDelete = snap.val();
+
+  })
+
+  $scope.deleteMealItem = function(key){
+    var userKeys = Object.keys($scope.testUsers);
+    for (let i = 0; i < userKeys.length; i++) {
+      // var user = users[usersKeys[i]];
+      var newObject = $scope.testUsers[userKeys[i]].meals;
+      var userMealsKeys = Object.keys($scope.testUsers[userKeys[i]].meals);
+      delete newObject[userMealsKeys[key]]
+      firebaseUsers.child(userKeys[i]).child('meals').set(Object.assign(newObject));
+    }
+
+
+    var mainObjKeys = Object.keys($scope.mainObjDelete);
+    delete $scope.mainObjDelete[mainObjKeys[key]];
+    firebaseMainMeals.set(Object.assign($scope.mainObjDelete));
+    // $timeout(function(){
+    //   $window.location.reload();
+    // },1000)
+  }
+
 }])

app/controllers/ShoppingCartPageController.js

@@ -30,4 +30,11 @@ app.controller('ShoppingCartPageController',['$scope','$window','$timeout',funct
     delete $scope.shoppingCartItems[keys[i]];
     firebaseShoppingCart.set($scope.shoppingCartItems);
   }
+
+  $scope.orderSuccess = false;
+  $scope.checkOut = function(){
+    firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('userDiets').set($scope.shoppingCartItems);
+    firebaseShoppingCart.set({});
+    $scope.orderSuccess = true;
+  }
 }])

app/controllers/UserPageController.js

@@ -0,0 +1,77 @@
+app.controller('UserPageController',['$scope','$http',function($scope,$http){
+  //navigation btns
+  $scope.activeBtn = 'personal info';
+  //navigation btns
+
+  var ref = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('userObject');
+  var ref2 = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('userDiets');
+  ref.on('value',function(snap){
+    $scope.userObject = snap.val();
+    if($scope.userObject){
+      $scope.newUserObject = Object.assign($scope.userObject);
+    }
+  })
+
+  ref2.on('value',function(snap){
+    $scope.userDiets = snap.val()
+  })
+
+  $scope.isShowInputs = false;
+  $scope.toggleIsShowInputs = function(){
+    if($scope.isShowInputs){
+      ref.set($scope.newUserObject);
+      $scope.isShowInputs = !$scope.isShowInputs;
+    } else{
+      $scope.isShowInputs = !$scope.isShowInputs;
+    }
+  }
+
+  //AIzaSyCHfQNLTRwK9C24adja3xs79GtqeKOTIOE - google apies
+
+  $http.get('https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json').then(function(response){
+    $scope.countriesObject = response.data;
+  })
+
+  // chat
+  $scope.messageObject = {
+    userMessage: ''
+  };
+
+  $scope.sendMessage = function(){
+    if($scope.messageObject.userMessage){
+      $scope.messageObject.uid = firebase.auth().currentUser.uid;
+      var date = new Date();
+      // $scope.messageObject.name = $scope.userObject.name || 'user';
+      // $scope.messageObject.surname = $scope.userObject.surname || '';
+      $scope.messageObject.date = date.getHours() + ':' + (date.getMinutes().toString().length < 2?'0'+date.getMinutes():date.getMinutes())
+      firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('chat').push().set($scope.messageObject);
+      $scope.messageObject.userMessage = '';
+    }
+  }
+
+  var chatRef = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('chat');
+  chatRef.on('value', function(snap){
+    $scope.messages = snap.val();
+  })
+  // chat
+
+  // change image
+  $scope.storage = firebase.storage().ref();
+  firebase.storage().ref(firebase.auth().currentUser.uid).getDownloadURL().then(function(url){
+    $scope.userAvatarUrl = url;
+  })
+  $scope.changeImg = function(e){
+    var file = e.target.files[0];
+    var fileName = firebase.auth().currentUser.uid;
+    var metadata = {
+      contentType: file.type
+    };
+    var task = $scope.storage.child(fileName).put(file, metadata);
+    task.then(function(snapshot){
+      $scope.userAvatarUrl = snapshot.downloadURL;
+    }).catch(function(error){
+      console.log(error);
+    })
+  }
+  // change image
+}])

app/controllers/appRootController.js

@@ -1,4 +1,4 @@
-app.controller('AppRootController',['$scope','$window','$timeout','$location','$firebaseAuth','$interval',function($scope,$window,$timeout,$location,$firebaseAuth,$interval){
+app.controller('AppRootController',['$scope','$window','$timeout','$location','$firebaseAuth','$interval','$firebaseObject',function($scope,$window,$timeout,$location,$firebaseAuth,$interval,$firebaseObject){
   var window = angular.element($window);
   $scope.load = function(){
     $timeout(function(){
@@ -102,7 +102,7 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location','$
   $scope.signOut = function(){
     firebase.auth().signOut().then(function(success){
       console.log('Sign out seccessfully: ',success);
-      if($location.path().indexOf('shopping-cart') > -1){
+      if($location.path().indexOf('shopping-cart') > -1 || $location.path().indexOf('add-item') > -1 || $location.path().indexOf('user-page') > -1 || $location.path().indexOf('messages') > -1){
         $window.location.assign('/');
       }
     }).catch(function(error){
@@ -113,12 +113,17 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location','$
   // login-popup
 
   $scope.isLoginActive = true;
+  $scope.confirmPasswordIncorrect = false;
 
   $scope.newUserObj = {};
+  $scope.newUserDataObj = {};
+  $scope.registerObject = {};
 
   $scope.createNewUser = function(){
+    $scope.confirmPasswordIncorrect = false;
     firebase.auth().createUserWithEmailAndPassword($scope.newUserObj.email, $scope.newUserObj.password).then(function(success){
       firebase.database().ref().child('users').child(success.uid).child('meals').set($scope.meals);
+      firebase.database().ref().child('users').child(success.uid).child('userObject').set($scope.newUserDataObj);
 
       var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
       loginPopupJQ.css('opacity','0');
@@ -142,22 +147,6 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location','$
         loginPopupJQ.css('display','none');
       },1000)
 
-      // refresh user meals object
-      var mealsObject = $scope.meals;
-      var mealsObjectKeys = Object.keys(mealsObject);
-      $timeout(function(){
-        var userObjectKeys = Object.keys($scope.meals);
-        var newUserMealsObject = Object.assign(mealsObject);
-        for (var i = 0; i < mealsObjectKeys.length; i++) {
-          if(userObjectKeys.indexOf(mealsObjectKeys[i]) > -1){
-            if($scope.meals[mealsObjectKeys[i]].isSelected){
-              newUserMealsObject[mealsObjectKeys[i]].isSelected = true;
-            }
-          }
-        }
-        firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals').set(newUserMealsObject);
-      },1100)
-      // refresh user meals object
     }).catch(function(error){
       console.log('Sign in error: ',error.message);
     })
@@ -169,6 +158,12 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location','$
     }
   }
 
+  $scope.onConfirmPasswordInput = function(){
+    if($scope.registerObject.confirmPassword){
+      $scope.confirmPasswordIncorrect = $scope.registerObject.confirmPassword == $scope.newUserObj.password ? false : true;
+    }
+  }
+
   $scope.cancelPopup = function(){
     var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
     loginPopupJQ.css('opacity','0');
@@ -197,4 +192,30 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location','$
       },50)
     }
   }
+
+  $scope.isDeleteIconsShow = false;
+
+  $scope.deleteItemModeToggle = function(){
+    var selectMenuItemJQ = angular.element(document.querySelectorAll('.select-menu-page .meal-item-delete-btn'));
+    var selectReadyMenuItemJQ = angular.element(document.querySelectorAll('.diet-item-delete-btn'));
+    if($scope.isDeleteIconsShow){
+      selectMenuItemJQ.css('opacity','0');
+      selectReadyMenuItemJQ.css('opacity','0');
+      $scope.isDeleteIconsShow = false;
+    } else{
+      selectMenuItemJQ.css('opacity','1');
+      selectReadyMenuItemJQ.css('opacity','1');
+      $scope.isDeleteIconsShow = true;
+    }
+  }
+
+  $scope.isShowDeleteItemModeToggle = function(){
+    if($scope.isUserSigned && (firebase.auth().currentUser.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1') && (($location.path().indexOf('select-menu') > -1)||($location.path().indexOf('ready-menu-') > -1))){
+      return true;
+    } else{
+      return false;
+    }
+  }
+
+
 }])

app/directives/custom-on-change.js

@@ -0,0 +1,13 @@
+app.directive('customOnChange', function() {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attrs) {
+      var onChangeHandler = scope.$eval(attrs.customOnChange);
+      element.on('change', onChangeHandler);
+      element.on('$destroy', function() {
+        element.off();
+      });
+
+    }
+  };
+});

app/views/app-root.html

@@ -8,7 +8,7 @@
     <div class="preload-screen">
       <img src="content\images\preloader\Double Ring-1s-200px.gif">
     </div>
-    <div class="selected-meals-btn" ng-click="openSelectedMeals()" ng-show="isShowMealsBtn()">
+    <div ng-if="isUserSigned" class="selected-meals-btn" ng-click="openSelectedMeals()" ng-show="isShowMealsBtn()">
       <span>{{selectedNumber}}</span>
       <span class="selected-meals-tip">BAG</span>
     </div>
@@ -23,6 +23,9 @@
       <span class="fa fa-sign-in"></span>
       Sign out
     </div>
+    <a ng-if="isUserSigned" href="#!/user-page" class="user-page-icon">
+      <span class="fa fa-user"></span>
+    </a>
     <div class="login-popup">
       <div class="cancel" ng-click="cancelPopup()">
         <span class="fa fa-times"></span>
@@ -43,18 +46,22 @@
           </div>
           <div class="register" ng-if="!isLoginActive">
             <form ng-submit="createNewUser()" novalidate name="registerForm">
-              <input type="email" placeholder="Email" ng-model="newUserObj.email" ng-required="true" name="email">
+              <input autocomplete="off" type="email" placeholder="Email" ng-model="newUserObj.email" ng-required="true" name="email">
               <span ng-if="registerForm.email.$invalid && registerForm.email.$touched">Enter a valid email</span>
-              <input ng-change="onPasswordInput()" ng-class="{'invalid': passwordErrorMessage && isShortPassword}" type="password" placeholder="Create a password" ng-model="newUserObj.password" name="password" ng-required="true">
-              <span ng-if="passwordErrorMessage && isShortPassword">{{passwordErrorMessage}}</span>
-              <!-- <input type="password" placeholder="Confirm your password">
-              <input type="text" placeholder="Your phone number"> -->
+              <input ng-class="{'input-invalid': registerForm.password.$touched && isShortPassword}" ng-change="onPasswordInput()" type="password" placeholder="Create a password" ng-model="newUserObj.password" name="password" ng-required="true">
+              <span ng-if="registerForm.password.$touched && isShortPassword">Password should be at least 6 characters</span>
+              <input ng-change="onConfirmPasswordInput()" ng-class="{'input-invalid': confirmPasswordIncorrect && registerForm.confirmPassword.$touched}" type="password" placeholder="Confirm your password" ng-required="true" ng-model="registerObject.confirmPassword" name="confirmPassword">
+              <span ng-if="confirmPasswordIncorrect && registerForm.confirmPassword.$touched">The passwords don't match, please try again</span>
+              <input type="text" placeholder="Your phone number" ng-required="true" ng-model="newUserDataObj.phoneNumber" name="phoneNumber">
               <input type="submit" value="register">
             </form>
           </div>
         </div>
       </div>
     </div>
+    <div ng-if="isShowDeleteItemModeToggle()" ng-click="deleteItemModeToggle()" class="delete-item-mode-btn">
+      Delete mode
+    </div>
     <!-- Fixed elements -->
     <i class="fa fa-bars" ng-click="toggleMenu()"></i>
     <div class="logo">

app/views/messages-page.html

@@ -0,0 +1,54 @@
+<div class="messages-page">
+  <div class="messages-page-wrapper">
+    <div class="select-dialog">
+      <div class="item" ng-class="{'item-active': key == selectedUser}" ng-click="selectUser(key)" ng-repeat="(key, user) in users" ng-if="key != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'">
+        <div class="item-img">
+          <img ng-src="{{userImages[key]}}">
+          <img ng-if="!userImages[key]" ng-src="content\images\user-page\male-user-silhouette_318-35708.jpg">
+        </div>
+        <div class="item-name">
+          {{user.userObject.name || 'user' + $index}} {{user.userObject.surname || ''}}
+        </div>
+      </div>
+    </div>
+    <div class="dialog">
+      <div class="chat">
+        <div ng-class="message.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'?'admin-message':'user-message'" ng-repeat="message in users[selectedUser].chat">
+          <div class="message-info">
+            <div class="message-img">
+              <img ng-if="(message.uid != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1') && userImages[selectedUser]" ng-src="{{userImages[selectedUser]}}">
+              <img ng-if="(message.uid != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1') && !userImages[selectedUser]" src="content\images\user-page\male-user-silhouette_318-35708.jpg">
+              <img ng-if="message.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'" src="content\images\user-page\admin.png">
+            </div>
+            <div class="message-date">
+              {{message.date}}
+            </div>
+          </div>
+          <div class="message-text-wrapper">
+            <div class="message-name">
+              <div ng-if="message.uid != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'">
+                {{users[selectedUser].userObject.name}} {{users[selectedUser].userObject.surname}}
+              </div>
+              <div ng-if="message.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'">
+                Admin
+              </div>
+            </div>
+            <div class="message-text">
+              {{message.userMessage}}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="write-message">
+        <div class="write-input">
+          <input type="text" placeholder="Type your message..." ng-model="messageObject.userMessage">
+        </div>
+        <div class="write-btn">
+          <div class="write-btn-wrapper" ng-click="sendMessage()">
+            <span class="fa fa-paper-plane"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/nav-menu.html

@@ -4,10 +4,10 @@
     <li ng-class="{'active-link': isActive('/')}" ng-click="toggleMenu()"><a href="#!/">Main page</a></li>
     <li ng-class="{'active-link': isActive('/select-menu')}" ng-click="toggleMenu()"><a href="#!/select-menu">Customize menu</a></li>
     <li ng-class="{'active-link': isActive('/ready-menu')}" ng-click="toggleMenu()"><a href="#!/ready-menu">Ready menus</a></li>
-    <li ng-click="toggleMenu()"><a href="#">Delivery</a></li>
+    <li ng-click="toggleMenu()"><a href="#">Delivery & Contacts</a></li>
     <li ng-click="toggleMenu()"><a href="#">About us</a></li>
-    <li ng-click="toggleMenu()"><a href="#">Contacts</a></li>
     <li ng-if="isModeratorSigned" ng-class="{'active-link': isActive('/add-item')}" ng-click="toggleMenu()"><a href="#!/add-item">Add item</a></li>
+    <li ng-if="isModeratorSigned" ng-class="{'active-link': isActive('/messages')}" ng-click="toggleMenu()"><a href="#!/messages">Messages</a></li>
   </ul>
   <div class="nav-menu-icons-wrapper">
     <div class="nav-menu-icon">

app/views/ready-menu-second.html

@@ -1,7 +1,11 @@
 <div class="ready-menu-second" ng-init="onInit()" ng-controller="ReadyMenuSecondController">
   <div class="ready-menu-second-wrapper">
     <div class="item" ng-repeat="diet in diets" ng-if="diet.dietType == filterBy">
+
       <div class="item-img">
+        <div ng-click="deleteDietItem($index)" class="diet-item-delete-btn">
+          <span class="fa fa-times"></span>
+        </div>
         <img ng-src="{{diet.imageUrl}}">
       </div>
       <div class="item-content">

app/views/select-menu-page.html

@@ -20,8 +20,107 @@
       </div>
     </div>
   </div>
-  <div class="meal-items">
-    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == mealType">
+  <div class="meal-items" ng-if="mealType == 'breakfast'">
+    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == 'breakfast'">
+      <div ng-click="deleteMealItem($index)" class="meal-item-delete-btn">
+        <span class="fa fa-times"></span>
+      </div>
+      <div class="meal-item-title">
+        <h2>{{meal.mealName}}</h2>
+      </div>
+      <div class="meal-item-img">
+        <img ng-src="{{meal.imageUrl}}">
+      </div>
+      <div class="meal-item-ingredients">
+        <h3>Ingredients</h3>
+        <ul>
+          <li ng-repeat="ingredient in meal.ingredients track by $index">- {{ingredient}}</li>
+        </ul>
+      </div>
+      <div class="meal-item-bottom">
+        <div class="meal-item-bottom-container">
+          <div class="meal-item-price">
+            <span>{{meal.price}} USD</span>
+          </div>
+          <div class="meal-item-btn">
+            <button type="button" ng-click="selectMeal($index)">Add</button>
+          </div>
+        </div>
+      </div>
+      <div class="meal-item-checked-icon" ng-if="meal.isSelected">
+        <i class="fa fa-check-circle"></i>
+      </div>
+    </div>
+  </div>
+  <div class="meal-items"  ng-if="mealType == 'lunch'">
+    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == 'lunch'">
+      <div ng-click="deleteMealItem($index)" class="meal-item-delete-btn">
+        <span class="fa fa-times"></span>
+      </div>
+      <div class="meal-item-title">
+        <h2>{{meal.mealName}}</h2>
+      </div>
+      <div class="meal-item-img">
+        <img ng-src="{{meal.imageUrl}}">
+      </div>
+      <div class="meal-item-ingredients">
+        <h3>Ingredients</h3>
+        <ul>
+          <li ng-repeat="ingredient in meal.ingredients track by $index">- {{ingredient}}</li>
+        </ul>
+      </div>
+      <div class="meal-item-bottom">
+        <div class="meal-item-bottom-container">
+          <div class="meal-item-price">
+            <span>{{meal.price}} USD</span>
+          </div>
+          <div class="meal-item-btn">
+            <button type="button" ng-click="selectMeal($index)">Add</button>
+          </div>
+        </div>
+      </div>
+      <div class="meal-item-checked-icon" ng-if="meal.isSelected">
+        <i class="fa fa-check-circle"></i>
+      </div>
+    </div>
+  </div>
+  <div class="meal-items"  ng-if="mealType == 'dinner'">
+    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == 'dinner'">
+      <div ng-click="deleteMealItem($index)" class="meal-item-delete-btn">
+        <span class="fa fa-times"></span>
+      </div>
+      <div class="meal-item-title">
+        <h2>{{meal.mealName}}</h2>
+      </div>
+      <div class="meal-item-img">
+        <img ng-src="{{meal.imageUrl}}">
+      </div>
+      <div class="meal-item-ingredients">
+        <h3>Ingredients</h3>
+        <ul>
+          <li ng-repeat="ingredient in meal.ingredients track by $index">- {{ingredient}}</li>
+        </ul>
+      </div>
+      <div class="meal-item-bottom">
+        <div class="meal-item-bottom-container">
+          <div class="meal-item-price">
+            <span>{{meal.price}} USD</span>
+          </div>
+          <div class="meal-item-btn">
+            <button type="button" ng-click="selectMeal($index)">Add</button>
+          </div>
+        </div>
+      </div>
+      <div class="meal-item-checked-icon" ng-if="meal.isSelected">
+        <i class="fa fa-check-circle"></i>
+      </div>
+    </div>
+  </div>
+  <div class="meal-items"  ng-if="mealType == 'snacks'">
+    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == 'snacks'">
+      <div ng-click="deleteMealItem($index)" class="meal-item-delete-btn">
+        <span class="fa fa-times"></span>
+      </div>
       <div class="meal-item-title">
         <h2>{{meal.mealName}}</h2>
       </div>
@@ -31,7 +130,7 @@
       <div class="meal-item-ingredients">
         <h3>Ingredients</h3>
         <ul>
-          <li ng-repeat="ingredient in meal.ingredients">- {{ingredient}}</li>
+          <li ng-repeat="ingredient in meal.ingredients track by $index">- {{ingredient}}</li>
         </ul>
       </div>
       <div class="meal-item-bottom">

app/views/shopping-cart-page.html

@@ -1,42 +1,56 @@
 <div class="shopping-cart-page" ng-controller="ShoppingCartPageController">
-  <div class="title">
-    <h1>YOUR CART</h1>
-  </div>
-  <div class="items-wrapper-header">
-    <div class="product">
-      Product
-    </div>
-    <div class="duration">
-      Duration
-    </div>
-    <div class="price">
-      Price
+  <div class="shopping-cart-page-wrapper" ng-if="!orderSuccess">
+    <div class="title">
+      <h1>YOUR CART</h1>
     </div>
-  </div>
-  <div class="items-wrapper">
-    <div class="item" ng-repeat="item in shoppingCartItems">
-      <div class="item-img">
-        <img ng-src="{{item.imageUrl}}">
+    <div class="items-wrapper-header">
+      <div class="product">
+        Product
       </div>
-      <div class="item-title">
-        <h3>{{item.title}}</h3>
-        <button ng-click="removeItem($index)" type="button">Remove</button>
+      <div class="duration">
+        Duration
       </div>
-      <div class="item-duration">
-        {{item.weekCount ? item.weekCount + ' weeks': 1 + ' week'}}
+      <div class="price">
+        Price
       </div>
-      <div class="item-price">
-        {{item.overallPrice}} USD
+    </div>
+    <div class="items-wrapper">
+      <div class="item" ng-repeat="item in shoppingCartItems">
+        <div class="item-img">
+          <img ng-src="{{item.imageUrl}}">
+        </div>
+        <div class="item-title">
+          <h3>{{item.title}}</h3>
+          <button ng-click="removeItem($index)" type="button">Remove</button>
+        </div>
+        <div class="item-duration">
+          {{item.weekCount > 1 ? item.weekCount + ' weeks' : item.weekCount + ' week'}}
+        </div>
+        <div class="item-price">
+          {{item.overallPrice}} USD
+        </div>
       </div>
     </div>
-  </div>
-  <div class="items-footer">
-    <div class="total-price">
-        Total {{totalPrice()}} USD
+    <div class="no-selected" ng-if="!totalPrice()">
+      No diets selected
     </div>
-    <div class="btns">
-      <button type="button"><a href="#">continue shopping</a></button>
-      <button type="button">check out</button>
+    <div class="items-footer">
+      <div class="total-price">
+          Total {{totalPrice()}} USD
+      </div>
+      <div class="btns">
+        <button type="button"><a href="#">continue shopping</a></button>
+        <button type="button" ng-click="checkOut()">check out</button>
+      </div>
+    </div>
+  </div>
+  <div ng-if="orderSuccess" class="order-success-wrapper">
+    <div class="order-success">
+      <h1>Thank you for your purchase!</h1>
+      <div class="order-success-btns">
+        <button type="button"><a href="#">continue shopping</a></button>
+        <button type="button"><a href="#!/user-page">to your profile</a></button>
+      </div>
     </div>
   </div>
 </div>

app/views/user-page.html

@@ -0,0 +1,218 @@
+<div class="user-page" ng-controller="UserPageController">
+  <div class="user-page-wrapper">
+    <div class="navigation">
+      <div class="navigation-profile">
+        <div class="profile-img">
+          <img ng-if="userAvatarUrl" ng-src="{{userAvatarUrl}}">
+          <img ng-if="!userAvatarUrl" ng-src="content\images\user-page\male-user-silhouette_318-35708.jpg">
+        </div>
+        <div class="profile-name">
+          {{userObject.name}} {{userObject.surname}}
+        </div>
+        <div class="profile-change-img-btn">
+          <label>
+            Change Image
+            <input type="file" id="select-file" custom-on-change="changeImg">
+          </label>
+
+        </div>
+      </div>
+      <div class="navigation-btns">
+        <div ng-class="{'navigation-btn-active': activeBtn == 'personal info'}" ng-click="activeBtn = 'personal info'" class="navigation-btn">
+          <span class="fa fa-user"></span>
+          personal info
+        </div>
+        <div ng-class="{'navigation-btn-active': activeBtn == 'your diets'}" ng-click="activeBtn = 'your diets'" class="navigation-btn">
+          <span class="fa fa-cutlery"></span>
+          your diets
+        </div>
+        <div ng-class="{'navigation-btn-active': activeBtn == 'write us'}" ng-click="activeBtn = 'write us'" class="navigation-btn">
+          <span class="fa fa-edit"></span>
+          write us
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div ng-if="activeBtn == 'personal info'" class="personal-info">
+        <div class="personl-info-wrapper">
+          <h2>Personal Information</h2>
+          <div class="personal-info-items-wrapper" ng-class="{'edit-active': isShowInputs}">
+            <div class="personal-info-item">
+              <div class="personal-info-item-title">
+                Name
+              </div>
+              <div class="personal-info-item-value">
+                <span ng-if="!isShowInputs">{{userObject.name || '-'}}</span>
+                <input ng-if="isShowInputs" type="text" value="{{userObject.name}}" ng-model="newUserObject.name">
+              </div>
+            </div>
+            <div class="personal-info-item">
+              <div class="personal-info-item-title">
+                Surname
+              </div>
+              <div class="personal-info-item-value">
+                <span ng-if="!isShowInputs">{{userObject.surname || '-'}}</span>
+                <input ng-if="isShowInputs" type="text" value="{{userObject.surname}}" ng-model="newUserObject.surname">
+              </div>
+            </div>
+            <div class="personal-info-item">
+              <div class="personal-info-item-title">
+                Telefone
+              </div>
+              <div class="personal-info-item-value">
+                <span ng-if="!isShowInputs">{{userObject.phoneNumber || '-'}}</span>
+                <input ng-if="isShowInputs" type="text" value="{{userObject.phoneNumber}}" ng-model="newUserObject.phoneNumber">
+              </div>
+            </div>
+            <div class="personal-info-item">
+              <div class="personal-info-item-title">
+                Date of birth
+              </div>
+              <div class="personal-info-item-value">
+                <span ng-if="!isShowInputs && userObject.dayOfBirth && userObject.monthOfBirth && userObject.yearOfBirth">{{userObject.dayOfBirth}} - {{userObject.monthOfBirth}} - {{userObject.yearOfBirth}}</span>
+                <span ng-if="!isShowInputs && !(userObject.dayOfBirth && userObject.monthOfBirth && userObject.yearOfBirth)">-</span>
+                <input ng-if="isShowInputs" type="text" value="{{userObject.dayOfBirth}}" ng-model="newUserObject.dayOfBirth" placeholder="day">
+                <select ng-if="isShowInputs" value="{{userObject.monthOfBirth}}" ng-model="newUserObject.monthOfBirth">
+                  <option>-</option>
+                  <option value="01">january</option>
+                  <option value="02">february</option>
+                  <option value="03">march</option>
+                  <option value="04">april</option>
+                  <option value="05">may</option>
+                  <option value="06">june</option>
+                  <option value="07">july</option>
+                  <option value="08">august</option>
+                  <option value="09">september</option>
+                  <option value="10">october</option>
+                  <option value="11">november</option>
+                  <option value="12">december</option>
+                </select>
+                <input ng-if="isShowInputs" type="text" value="{{userObject.yearOfBirth}}" ng-model="newUserObject.yearOfBirth" placeholder="year">
+              </div>
+            </div>
+            <div class="personal-info-item">
+              <div class="personal-info-item-title">
+                Gender
+              </div>
+              <div class="personal-info-item-value">
+                <span ng-if="!isShowInputs">{{userObject.gender || '-'}}</span>
+                <select ng-if="isShowInputs" value="{{userObject.gender}}" ng-model="newUserObject.gender">
+                  <option selected>-</option>
+                  <option>Male</option>
+                  <option>Female</option>
+                </select>
+              </div>
+            </div>
+            <div class="personal-info-item">
+              <div class="personal-info-item-title">
+                Country
+              </div>
+              <div class="personal-info-item-value">
+                <span ng-if="!isShowInputs">{{userObject.country}}</span>
+                <select ng-if="isShowInputs" value="{{userObject.country}}" ng-model="newUserObject.country">
+                  <option ng-selected="true">-</option>
+                  <option ng-repeat="(key,country) in countriesObject track by $index" value="{{key}}">{{key}}</option>
+                </select>
+              </div>
+            </div>
+            <div class="personal-info-item">
+              <div class="personal-info-item-title">
+                City
+              </div>
+              <div class="personal-info-item-value">
+                <span ng-if="!isShowInputs">{{userObject.city || '-'}}</span>
+                <select ng-if="isShowInputs" value="{{userObject.city}}" ng-model="newUserObject.city">
+                  <option ng-selected="true">-</option>
+                  <option ng-repeat="city in countriesObject[newUserObject.country] track by $index" value="{{city}}">{{city}}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="personal-info-adit-btn">
+            <span ng-if="!isShowInputs" ng-click="toggleIsShowInputs()">Edit Profile</span>
+            <span ng-if="isShowInputs" ng-click="toggleIsShowInputs()">Save</span>
+          </div>
+        </div>
+      </div>
+      <div ng-if="activeBtn == 'your diets'" class="your-diets">
+        <div class="header">
+          <div class="product">
+            Product
+          </div>
+          <div class="duration">
+            Duration
+          </div>
+          <div class="days-left">
+            Days left
+          </div>
+          <div class="price">
+            Price
+          </div>
+        </div>
+        <div class="no-diets-user-page" ng-if="!userDiets">
+          no diets selected
+        </div>
+        <div class="items-wrapper">
+          <div class="item" ng-repeat="diet in userDiets">
+            <div class="item-product">
+              <div class="item-product-name">
+                {{diet.title}}
+              </div>
+              <!-- <div class="item-product-img">
+                <img ng-src="{{diet.imageUrl}}">
+              </div> -->
+            </div>
+            <div class="item-duration">
+              {{diet.weekCount > 1 ? diet.weekCount + ' weeks' : diet.weekCount + ' week'}}
+            </div>
+            <div class="item-days-left">
+              {{diet.weekCount * 7}} days
+            </div>
+            <div class="item-price">
+              {{diet.price}} USD
+            </div>
+          </div>
+        </div>
+      </div>
+      <div ng-if="activeBtn == 'write us'" class="write-us">
+        <div class="chat">
+          <div ng-class="message.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'?'admin-message':'user-message'" ng-repeat="message in messages">
+            <div class="message-info">
+              <div class="message-img">
+                <img ng-if="(message.uid != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1') && userAvatarUrl" ng-src="{{userAvatarUrl}}">
+                <img ng-if="(message.uid != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1') && !userAvatarUrl" src="content\images\user-page\male-user-silhouette_318-35708.jpg">
+                <img ng-if="message.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'" src="content\images\user-page\admin.png">
+              </div>
+              <div class="message-date">
+                {{message.date}}
+              </div>
+            </div>
+            <div class="message-text-wrapper">
+              <div class="message-name">
+                <div ng-if="message.uid != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'">
+                  {{userObject.name}} {{userObject.surname}}
+                </div>
+                <div ng-if="message.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'">
+                  Admin
+                </div>
+              </div>
+              <div class="message-text">
+                {{message.userMessage}}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="write-message">
+          <div class="write-input">
+            <input type="text" placeholder="Type your message..." ng-model="messageObject.userMessage">
+          </div>
+          <div class="write-btn">
+            <div class="write-btn-wrapper" ng-click="sendMessage()">
+              <span class="fa fa-paper-plane"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

content/css/styles.css

@@ -236,7 +236,7 @@ main.ng-enter .shopping-cart-page .item{
   }
 }
 
-.login-btn, .sign-out-btn {
+.login-btn, .sign-out-btn, .delete-item-mode-btn, .user-page-icon {
   position: absolute;
   right: 80px;
   top: 13px;
@@ -247,10 +247,24 @@ main.ng-enter .shopping-cart-page .item{
   cursor: pointer;
 }
 
+.delete-item-mode-btn {
+  left: 100px;
+  width: 140px;
+  top: 15px;
+  letter-spacing: 0;
+  text-align: center;
+}
+
 .login-btn {
   right: 92px;
 }
 
+.user-page-icon {
+  right: 215px;
+  font-size: 26px;
+  top: 10px;
+}
+
 .login-btn span, .sign-out-btn span{
   font-size: 25px;
   position: relative;
@@ -325,6 +339,10 @@ main.ng-enter .shopping-cart-page .item{
   outline: none;
 }
 
+.register .input-invalid {
+  border: 1px solid rgba(255, 155, 155,1)!important;
+}
+
 .login-popup .content span {
   color: red;
   opacity: 0.7;
@@ -341,7 +359,11 @@ main.ng-enter .shopping-cart-page .item{
   cursor: pointer;
 }
 
-.login-popup .register input.ng-touched.ng-invalid {
+.login-popup input.ng-touched.ng-invalid {
+  border: 1px solid rgba(255, 155, 155,1);
+}
+
+.login-popup input.ng-touched.ng-pristine {
   border: 1px solid rgba(255, 155, 155,1);
 }
 
@@ -1101,6 +1123,33 @@ main.ng-enter .shopping-cart-page .item{
   padding: 70px 0;
 }
 
+.select-menu-page .meal-item-delete-btn {
+  transition: all 0.5s ease;
+  opacity: 0;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: -11px;
+  top: -11px;
+  z-index: 3;
+  background: rgba(29, 29, 31,.7);
+  border-radius: 50%;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+}
+
+.select-menu-page .meal-item-delete-btn:hover {
+  background: rgba(29, 29, 31,1);
+  transform: scale(1.2);
+}
+
+.select-menu-page .meal-item-delete-btn span{
+  color: #fff;
+  font-size: 20px;
+}
+
 /* .select-menu-page .meal-item.ng-leave {
   transition: all 1s ease;
   opacity: 1;
@@ -1133,12 +1182,12 @@ main.ng-enter .shopping-cart-page .item{
   transition: all 0.4s ease;
   transform: translateX(0px);
   text-align: center;
-  text-transform: capitalize;
   padding: 5px 0;
   color: #fff;
   background: rgba(29, 29, 31, 0.7);
   letter-spacing: 0.7px;
   font-weight: normal;
+  text-transform: capitalize;
 }
 
 /* .select-menu-page .meal-item:nth-child(3n + 3) {
@@ -1291,7 +1340,7 @@ main.ng-enter .shopping-cart-page .item{
 
 .selected-meals-btn {
   position: absolute;
-  right: 210px;
+  right: 260px;
   top: 11px;
   z-index: 2;
   width: 31px;
@@ -1729,6 +1778,33 @@ main.ng-enter .shopping-cart-page .item{
   margin-bottom: 0;
 }
 
+.diet-item-delete-btn {
+  transition: all 0.5s ease;
+  opacity: 0;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: -11px;
+  top: -11px;
+  z-index: 3;
+  background: rgba(29, 29, 31,.7);
+  border-radius: 50%;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+}
+
+.diet-item-delete-btn span{
+  color: #fff;
+  font-size: 20px;
+}
+
+.diet-item-delete-btn:hover {
+  background: rgba(29, 29, 31,1);
+  transform: scale(1.2);
+}
+
 .ready-menu-second .item-img {
   width: 50%;
   box-shadow: 0 0 22px #cacaca;
@@ -1919,6 +1995,7 @@ main.ng-enter .shopping-cart-page .item{
 /* shopping-cart-page */
 .shopping-cart-page {
   padding-bottom: 50px;
+  perspective: 600px;
 }
 
 .shopping-cart-page .title h1 {
@@ -2029,10 +2106,27 @@ main.ng-enter .shopping-cart-page .item{
   text-align: right;
 }
 
+.shopping-cart-page .no-selected {
+  width: 1170px;
+  margin: 0 auto;
+  background: #FCFCFE;
+  text-align: center;
+  font-size: 19px;
+  padding: 20px 0;
+  border-bottom: 1px solid #ccc;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  font-weight: lighter;
+  color: #333;
+  font-family: 'Muli', sans-serif;
+  box-shadow: rgb(202, 202, 202) 0px 5px 15px;
+}
+
 .shopping-cart-page .items-footer {
   width: 1170px;
   margin: 0 auto;
   background: #FCFCFE;
+  box-shadow: rgb(202, 202, 202) 0px 5px 15px;
   transition: all 1s ease;
 }
 
@@ -2072,6 +2166,96 @@ main.ng-enter .shopping-cart-page .item{
   color: #FCFCFE;
   padding: 8px 13px;
   border: none;
+  cursor: pointer;
+}
+
+.shopping-cart-page .order-success-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88vh;
+  overflow: hidden;
+}
+
+.shopping-cart-page .order-success-wrapper.ng-enter {
+  transform-origin: 50% 0;
+  animation: orderSuccess 2s ease;
+  opacity: 0.3;
+}
+
+@keyframes orderSuccess {
+  0%{transform:rotateX(-90deg)}
+  30%{transform:rotateX(20deg)}
+  65%{
+    transform:rotateX(-15deg);
+    opacity: 1;
+  }
+  100%{
+    transform:rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+/* @keyframes orderSuccess {
+  0% {
+    transform: translateY(-300%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+} */
+
+.shopping-cart-page .order-success-wrapper .order-success {
+  display: block;
+  width: 768px;
+  box-shadow: 0 4px 15px rgba(202, 202, 202,0.9);
+  background: #FCFCFE;
+  padding: 50px 40px;
+  border-bottom: 1px solid #ccc;
+  font-family: "Muli";
+  text-align: center;
+}
+
+.shopping-cart-page .order-success-wrapper .order-success h1 {
+  margin-bottom: 50px;
+  font-weight: lighter;
+  font-family: "AvenirNextLTPro-Demi";
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.shopping-cart-page .order-success-btns {
+  text-align: center;
+}
+
+.shopping-cart-page .order-success-btns button {
+  font-size: 18px;
+  text-transform: uppercase;
+  background: none;
+  border: 1px solid #ccc;
+  font-weight: normal;
+  border-radius: 2px;
+  margin: 0 15px;
+  transition: all .5s ease;
+}
+
+.shopping-cart-page .order-success-btns button:hover {
+  background: rgba(241, 241, 245,0.4);
+  color: #FCFCFE;
+  /* border: 1px solid rgba(241, 241, 245,0.1); */
+}
+
+.shopping-cart-page .order-success-btns button:hover a {
+  /* color: #FCFCFE; */
+}
+
+.shopping-cart-page .order-success-btns button a{
+  display: block;
+  text-decoration: none;
+  color: #1D1D1F;
+  padding: 8px 13px;
 }
 
 /* .shopping-cart-page .shopping-cart-footer-animate {
@@ -2087,3 +2271,520 @@ main.ng-enter .shopping-cart-page .item{
   }
 } */
 /* shopping-cart-page */
+
+/* user-page */
+.user-page {
+  background: #FCFCFE;
+  padding: 50px 0;
+  min-height: 92vh;
+}
+
+.user-page-wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  display: flex;
+  box-shadow: 0 0 22px #cacaca;
+}
+
+.user-page .navigation {
+  width: 25%;
+  background: #1D1D1F;
+  text-align: center;
+}
+
+
+.user-page .navigation-profile {
+  color: #fff;
+  font-family: 'Muli', sans-serif;
+}
+
+.user-page .navigation .profile-img {
+  display: inline-block;
+  background: #FCFCFE;
+  border-radius: 50%;
+  width: 40%;
+  overflow: hidden;
+  text-align: center;
+  margin-top: 30px;
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.user-page .navigation .profile-img img {
+  position: absolute;
+  width: 115%;
+  height: 115%;
+  left: -8px;
+  top: 5px;
+}
+
+.user-page .navigation .profile-name {
+  margin-top: 20px;
+  letter-spacing: 0.3px;
+  font-size: 20px;
+}
+
+.user-page .navigation .profile-change-img-btn {
+  display: inline-block;
+  border: 1px solid #fff;
+  border-radius: 20px;
+  padding: 5px 10px;
+  margin-top: 20px;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.user-page .navigation label {
+  cursor: pointer;
+}
+
+.user-page .navigation #select-file {
+  position: absolute;
+  visibility: hidden;
+  z-index: -1;
+}
+
+.user-page .navigation-btns {
+  color: #F1F1F5;
+  font-family: "AvenirNextLTPro-Demi";
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  margin-top: 20px;
+}
+
+.user-page .navigation-btns .navigation-btn {
+  padding: 35px 0;
+  font-size: 13px;
+  transition: all 0.5s ease;
+  cursor: pointer;
+  letter-spacing: 0.3px;
+}
+
+.user-page .navigation-btns span {
+  display: block;
+  font-size: 40px;
+  margin-bottom: 10px;
+}
+
+.user-page .navigation-btn-active {
+  background: #171719;
+  border-left: 3px solid #F1F1F5;
+}
+
+.user-page .content {
+  background: #F1F1F5;
+  width: 75%;
+  padding: 50px 0;
+  position: relative;
+}
+
+.user-page .content .personl-info-wrapper {
+  max-width: 640px;
+  margin: 0 auto;
+  background: #FCFCFE;
+  padding: 40px;
+  box-shadow: 0 0 11px rgba(202, 202, 202,.3);
+}
+
+.user-page .content .personl-info-wrapper h2{
+  margin: 0px 0 20px;
+  font-family: "AvenirNextLTPro-Demi";
+  letter-spacing: 0.3px;
+}
+
+.user-page .content .personal-info-item {
+  display: flex;
+  font-family: 'Muli', sans-serif;
+  padding: 15px 0;
+  border-bottom: 1px solid rgba(29, 29, 31,0.1);
+  font-size: 16px;
+}
+
+.user-page .content .personal-info-item-title {
+  width: 40%;
+  color: #666;
+  display: flex;
+  align-items: center;
+}
+
+.user-page .content .personal-info-item-value {
+  width: 60%;
+  color: #000;
+}
+
+.user-page .content .personal-info-adit-btn {
+  text-align: center;
+  cursor: pointer;
+}
+
+.user-page .content .personal-info-adit-btn span{
+  display: inline-block;
+  margin-top: 40px;
+  font-family: 'Muli', sans-serif;
+  padding: 8px 13px;
+  background: rgba(29, 29, 31,0.9);
+  color: #fff;
+}
+
+.user-page .content .personal-info input, .user-page .content .personal-info select {
+  font-family: 'Muli', sans-serif;
+  font-size: 16px;
+  border: 1px solid rgba(29, 29, 31,.1);
+  box-shadow: inset 0 0 1px #cacaca;
+  padding: 5px 5px;
+  height: 30px;
+}
+
+.user-page .content .personal-info input::placeholder {
+  color: #c1c1c1;
+}
+
+.user-page .content .edit-active .personal-info-item {
+  padding: 10px 0;
+}
+
+.user-page .content .personal-info-item:nth-child(4) input {
+  width: 25%;
+}
+
+.user-page .content .personal-info-item:nth-child(4) select {
+  position: relative;
+  top: 2px;
+}
+
+.user-page .content .personal-info-item:nth-child(6) select {
+  width: 207px;
+}
+
+.user-page .content .personal-info-item:nth-child(7) select {
+  width: 207px;
+}
+
+.user-page .content .your-diets {
+  max-width: 680px;
+  margin: 0 auto;
+  background: #FCFCFE;
+  box-shadow: 0 0 11px rgba(202, 202, 202,.3);
+}
+
+.user-page .your-diets .header {
+  border-bottom: 1px solid #ccc;
+  display: flex;
+  font-family: "AvenirNextLTPro-Demi";
+  color: #1D1D1F;
+  padding: 20px 20px 10px;
+}
+
+.user-page .your-diets .no-diets-user-page {
+  text-align: center;
+  font-family: 'Muli', sans-serif;
+  padding: 17px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.user-page .your-diets .header .product {
+  width: 40%;
+  text-align: left;
+}
+
+.user-page .your-diets .header .duration {
+  width: 20%;
+  text-align: center;
+}
+
+.user-page .your-diets .header .days-left {
+  width: 20%;
+  text-align: center;
+}
+
+.user-page .your-diets .header .price {
+  width: 20%;
+  text-align: right;
+}
+
+.user-page .your-diets .items-wrapper {
+  font-family: 'Muli', sans-serif;
+}
+
+.user-page .your-diets .item {
+  display: flex;
+  border-bottom: 1px solid #ccc;
+  padding: 20px;
+}
+
+.user-page .your-diets .item-product {
+  width: 40%;
+}
+
+.user-page .your-diets .item-product-name {
+  margin-bottom: 0px;
+}
+
+.user-page .your-diets .item-product-img img{
+  width: 50%;
+}
+
+.user-page .your-diets .item-duration {
+  width: 20%;
+  text-align: center;
+}
+
+.user-page .your-diets .item-days-left {
+  width: 20%;
+  text-align: center;
+}
+
+.user-page .your-diets .item-price {
+  width: 20%;
+  text-align: right;
+}
+
+.user-page .write-us .write-message, .messages-page .write-message {
+  position: absolute;
+  bottom: 0;
+  display: inline-block;
+  background-color: #fff;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  box-shadow: rgba(202, 202, 202, 0.3) 0px 0px 20px;
+}
+
+.user-page .write-us .write-input, .messages-page .write-input {
+  width: 90%;
+  text-align: center;
+  padding: 46px 0;
+}
+
+.messages-page .write-input {
+  padding: 30px 0;
+}
+
+.user-page .write-us .write-input input, .messages-page .write-input input{
+  width: 90%;
+  font-family: 'Muli', sans-serif;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+}
+
+.user-page .write-us .write-btn, .messages-page .write-btn {
+  width: 13%;
+}
+
+.user-page .write-us .write-btn-wrapper, .messages-page .write-btn-wrapper {
+  display: inline-block;
+  background: rgba(29, 29, 31,1);
+  border-radius: 50%;
+  color: #fff;
+  padding: 15px;
+  cursor: pointer;
+}
+
+.user-page .chat, .messages-page .chat {
+  padding: 30px;
+  padding-top: 50px;
+  padding-bottom: 30px;
+  margin-top: -50px;
+  overflow-y: scroll;
+  height: 80vh;
+}
+
+.messages-page .chat {
+  padding-bottom: 70px;
+}
+
+.user-page .chat .user-message, .messages-page .chat .user-message {
+  display: flex;
+  margin-bottom: 30px;
+}
+
+.user-page .chat .admin-message, .messages-page .chat .admin-message {
+  display: flex;
+  flex-direction: row-reverse;
+  margin-bottom: 30px;
+}
+
+.user-page .chat .user-message .message-info, .messages-page .chat .user-message .message-info {
+  text-align: center;
+}
+
+.user-page .chat .admin-message .message-info, .messages-page .chat .admin-message .message-info {
+  text-align: center;
+}
+
+.user-page .chat .user-message .message-img, .messages-page .chat .user-message .message-img {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  background: #FCFCFE;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.user-page .chat .admin-message .message-img, .messages-page .chat .admin-message .message-img {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  background: #FCFCFE;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+
+.user-page .chat .user-message .message-img img, .messages-page .chat .user-message .message-img img {
+  width: 120%;
+  position: relative;
+  right: 6px;
+}
+
+.user-page .chat .admin-message .message-img img, .messages-page .chat .admin-message .message-img img {
+  width: 120%;
+  position: relative;
+  right: 6px;
+}
+
+.user-page .chat .user-message .message-date, .messages-page .chat .user-message .message-date {
+  text-align: center;
+  font-size: 14px;
+  color: #919699;
+}
+
+.user-page .chat .admin-message .message-date, .messages-page .chat .admin-message .message-date {
+  text-align: center;
+  font-size: 14px;
+  color: #919699;
+}
+
+.user-page .chat .user-message .message-text-wrapper, .messages-page .chat .user-message .message-text-wrapper {
+  display: inline-block;
+  position: relative;
+  padding: 20px;
+  background: #fff;
+  margin-left: 30px;
+  margin-right: 92px;
+  border-radius: 10px;
+  font-family: 'Muli', sans-serif;
+  box-shadow: 0 0 10px rgba(202, 202, 202, .3);
+}
+
+.user-page .chat .admin-message .message-text-wrapper, .messages-page .chat .admin-message .message-text-wrapper {
+  display: inline-block;
+  position: relative;
+  padding: 20px;
+  background: #fff;
+  margin-left: 92px;
+  margin-right: 30px;
+  border-radius: 10px;
+  font-family: 'Muli', sans-serif;
+  box-shadow: 0 0 10px rgba(202, 202, 202, .3);
+}
+
+.user-page .chat .user-message .message-text-wrapper::before, .messages-page .chat .user-message .message-text-wrapper::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: -15px;
+  top: 20px;
+  border-style: solid;
+  border-width: 10px 15px 10px 0;
+  border-color: transparent #fff transparent transparent;
+}
+
+.user-page .chat .admin-message .message-text-wrapper::before, .messages-page .chat .admin-message .message-text-wrapper::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  right: -15px;
+  top: 20px;
+  border-style: solid;
+  border-width: 10px 0 10px 15px;
+  border-color: transparent transparent transparent #fff;
+
+}
+
+.user-page .chat .user-message .message-name, .messages-page .chat .user-message .message-name {
+  color: #1D1D1F;
+  font-size: 17px;
+  font-family: "AvenirNextLTPro-Demi";
+  margin-bottom: 10px;
+}
+
+.user-page .chat .admin-message .message-name, .messages-page .chat .admin-message .message-name {
+  color: #1D1D1F;
+  font-size: 17px;
+  font-family: "AvenirNextLTPro-Demi";
+  margin-bottom: 10px;
+}
+/* user-page */
+
+/* messages-page */
+.messages-page {
+  background: #FCFCFE;
+  padding: 50px 0;
+  min-height: 92vh;
+}
+
+.messages-page-wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  display: flex;
+  box-shadow: 0 0 22px #cacaca;
+}
+
+.messages-page .select-dialog {
+  width: 25%;
+  background: #1D1D1F;
+  min-height: 85vh;
+}
+
+.messages-page .select-dialog .item {
+  display: flex;
+  padding: 20px;
+  font-family: 'Muli', sans-serif;
+  border-bottom: 1px solid #333;
+  transition: all 0.5s ease;
+  cursor: pointer;
+}
+
+.messages-page .select-dialog .item-img {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  background: #FCFCFE;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.messages-page .select-dialog .item-img img{
+  width: 120%;
+  position: relative;
+  top: 2px;
+  right: 5px;
+}
+
+.messages-page .select-dialog .item-name {
+  color: #fff;
+  margin: 5px 20px;
+}
+
+.messages-page .dialog {
+  width: 75%;
+  position: relative;
+  background: #F1F1F5;
+  padding: 50px 0;
+}
+
+.messages-page .item-active{
+  background-color: #171719;
+  border-left: 3px solid #F1F1F5;
+}
+/* messages-page */

index.html

@@ -16,7 +16,7 @@
         authDomain: "angularjsapp-6056c.firebaseapp.com",
         databaseURL: "https://angularjsapp-6056c.firebaseio.com",
         projectId: "angularjsapp-6056c",
-        storageBucket: "",
+        storageBucket: "angularjsapp-6056c.appspot.com",
         messagingSenderId: "644093397730"
       };
       firebase.initializeApp(config);
@@ -37,6 +37,9 @@
     <script src="./app/controllers/ReadyMenuController.js"></script>
     <script src="./app/controllers/ReadyMenuSecondController.js"></script>
     <script src="./app/controllers/ShoppingCartPageController.js"></script>
+    <script src="./app/controllers/UserPageController.js"></script>
+    <script src="./app/controllers/MessagesPageController.js"></script>
+    <script src="./app/directives/custom-on-change.js"></script>
   </head>
   <body>
     <app-root ng-include="'./app/views/app-root.html'"></app-root>