added select-menu and add-item pages

app/app.js

@@ -1,11 +1,20 @@
-var app = angular.module('angularProject',['ngRoute','ngAnimate']);
+var app = angular.module('angularProject',['ngRoute','ngAnimate','firebase']);
 
 app.config(['$routeProvider', function($routeProvider){
   $routeProvider
     .when('/',{
       templateUrl: './app/views/main-page.html',
       controller: 'MainPageController'
+    })
+    .when('/select-menu',{
+      templateUrl: './app/views/select-menu-page.html',
+      controller: 'SelectMenuPageController'
+    })
+    .when('/add-item',{
+      templateUrl: './app/views/add-item-page.html',
+      controller: 'AddItemPageController'
     }).otherwise({
       redirectTo: '/'
     })
+
 }])

app/controllers/AddItemPageController.js

@@ -0,0 +1,28 @@
+app.controller('AddItemPageController',['$scope',function($scope){
+  $scope.resObj = {
+    mealName: '',
+    type: '',
+    weight: '',
+    ingredients: [,,,],
+    imageUrl: '',
+    price: '',
+    isSelected: false
+  }
+
+  var databaseMeals = firebase.database().ref().child('meals');
+
+  //functions
+
+  $scope.deleteIngredient = function(i){
+    $scope.resObj.ingredients.splice(i,1);
+  }
+  $scope.addIngredient = function(){
+    $scope.resObj.ingredients.push('');
+  }
+
+  $scope.sendMeal = function(){
+    databaseMeals.push().set($scope.resObj);
+  }
+
+
+}])

app/controllers/SelectMenuPageController.js

@@ -0,0 +1,42 @@
+app.controller('SelectMenuPageController',['$scope','$firebaseObject','$timeout',function($scope,$firebaseObject,$timeout){
+  var ref = firebase.database().ref().child('meals');
+  // var fireObj = $firebaseObject(ref);keys[i]
+  // var mealItems = fireObj.first;
+  // fireObj.$loaded().then(function(result){
+  //   console.log(result.first);
+  // })
+  $scope.mealType = 'breakfast';
+  $scope.meals = [];
+  $scope.selectMeal = function(i){
+    var keys = Object.keys($scope.meals);
+    $scope.meals[keys[i]].isSelected = true;
+    ref.child(keys[i]).set($scope.meals[keys[i]]);
+  }
+  ref.on('value', snap => {
+    // var databaseT0ests = [];
+    // var retrievedObject = snap.val();
+    // if(retrievedObject){
+    //   var keys = Object.keys(retrievedObject);
+    //   for (var i = 0; i < keys.length; i++) {
+    //     databaseTests[i] = retrievedObject[keys[i]];
+    //   }
+    // }
+    $timeout(function(){
+      $scope.meals = snap.val();
+    })
+  })
+
+  $scope.openSelectedMeals = function(){
+    var selectedMeals = angular.element(document.querySelector('.selected-meals'));
+    var appRoot = angular.element(document.querySelector('.app-root'));
+    var overlay2 = angular.element(document.querySelector('.overlay2'));
+    // selectedMeals.css({'transform': 'translateX(0)'})
+    appRoot.css({'transform': 'translateX(-281px)'});
+    overlay2.css({'pointer-events': 'auto','opacity':'1'});
+    overlay2.on('click',function(){
+      overlay2.css({'pointer-events': 'none','opacity':'0'});
+      appRoot.css({'transform': 'translateX(0px)'});
+    })
+  }
+
+}])

app/directives/mainSlider.js

@@ -21,6 +21,10 @@ app.directive('mainSlider',['$interval','$timeout',function($interval,$timeout){
 
       var runInterval = function(){
         $scope.sliderInterval = $interval(function(){
+          $scope.canIClick = false;
+          $timeout(function(){
+            $scope.canIClick = true;
+          },3000)
           if($scope.currentSlide == $scope.slides.length - 1){
             $scope.currentSlide = 0;
           } else{

app/directives/scroll.js

@@ -11,8 +11,6 @@ app.directive('scroll', ['$window','$timeout',function($window,$timeout) {
     },
     link: function(scope, element) {
 
-      // костыли
-
       var canIHover = function(){
         element.removeClass(scope.scrollClassThird);
         $timeout(function(){
@@ -30,12 +28,13 @@ app.directive('scroll', ['$window','$timeout',function($window,$timeout) {
                 }
               },300)
             }
-            element.addClass(scope.scrollClass);
             canIHover();
+            element.addClass(scope.scrollClass);
+
           } else {
             if(!scope.isOnce){
-              element.removeClass(scope.scrollClass);
               canIHover();
+              element.removeClass(scope.scrollClass);
             }
           }
 

app/directives/selectedMeals.js

@@ -0,0 +1,7 @@
+app.directive('selectedMeals',[function(){
+  return {
+    replace: true,
+    resctrict: 'E',
+    templateUrl: 'app/views/selected-meals.html',
+  }
+}])

app/services/firebaseFactory.js

@@ -0,0 +1,12 @@
+// app.factory('firebaseFactory',['$firebaseObject',function($firebaseObject){
+//   function _sendMeal(){
+//     var ref = firebase.database().ref();
+//     $scope.fireObj = $firebaseObject(ref);
+//     $scope.fireObj.$loaded().then(function(result){
+//       console.log(result.first);
+//     })
+//   }
+//   return {
+//     sendMeal: _sendMeal,
+//   }
+// }])

app/views/add-item-page.html

@@ -0,0 +1,25 @@
+<div class="add-item-page" ng-controller="AddItemPageController">
+  <div class="form-wrapper">
+    <form ng-submit='sendMeal()'>
+      <label for="meal-name"><h2>Enter the name of the meal:</h2></label>
+      <input type="text" id="meal-name" ng-model="resObj.mealName">
+      <h2>Enter ingredients:</h2>
+      <div class="ingredient-wrapper"  ng-repeat="ingredient in resObj.ingredients track by $index">
+        <input type="text" ng-model="resObj.ingredients[$index]">
+        <span ng-click="deleteIngredient($index)" class="fa fa-times"></span>
+      </div>
+      <button type="button" ng-click="addIngredient()">Add ingredient</button>
+      <input type="text" placeholder="image url" ng-model="resObj.imageUrl">
+      <select ng-model="resObj.type">
+        <option value="" disabled selected>Select meal type</option>
+        <option value="breakfast">Breakfast</option>
+        <option value="lunch">Lunch</option>
+        <option value="dinner">Dinner</option>
+        <option value="snacks">Snacks</option>
+      </select>
+      <input type="text" ng-model="resObj.weight" placeholder="weight">
+      <input type="text" ng-model="resObj.price" placeholder="price">
+      <button type="submit">Send</button>
+    </form>
+  </div>
+</div>

app/views/app-root.html

@@ -1,8 +1,10 @@
-<div ng-controller="AppRootController" ng-class="isOpenMenu?'open-menu' : 'close-menu'" ng-init="load()">
+<div class="app-root" ng-controller="AppRootController" ng-class="isOpenMenu?'open-menu' : 'close-menu'" ng-init="load()">
   <div class="header-line">
     <!-- Fixed elements -->
     <nav-menu toggle-menu="toggleMenu()" ng-class="isOpenMenu?'open-menu' : 'close-menu'"></nav-menu>
     <div ng-click="toggleMenu()" class="overlay" ng-class="{'overlay-active': isOpenMenu}"></div>
+    <div class="overlay2"></div>
+    <selected-meals></selected-meals>
     <div class="preload-screen">
       <img src="content\images\preloader\Double Ring-1s-200px.gif">
     </div>

app/views/nav-menu.html

@@ -2,11 +2,12 @@
   <span class="nav-menu-title"> MENU </span>
   <ul>
     <li ng-class="{'active-link': isActive('/')}" ng-click="toggleMenu()"><a href="#!/">Main page</a></li>
-    <li ng-click="toggleMenu()"><a href="#">Customize menu</a></li>
+    <li ng-class="{'active-link': isActive('/select-menu')}" ng-click="toggleMenu()"><a href="#!/select-menu">Customize menu</a></li>
     <li ng-click="toggleMenu()"><a href="#">Ready menus</a></li>
     <li ng-click="toggleMenu()"><a href="#">Delivery</a></li>
     <li ng-click="toggleMenu()"><a href="#">About us</a></li>
     <li ng-click="toggleMenu()"><a href="#">Contacts</a></li>
+    <li ng-class="{'active-link': isActive('/add-item')}" ng-click="toggleMenu()"><a href="#!/add-item">Add item</a></li>
   </ul>
   <div class="nav-menu-icons-wrapper">
     <div class="nav-menu-icon">

app/views/select-menu-page.html

@@ -0,0 +1,42 @@
+<div class="select-menu-page" ng-controller="SelectMenuPageController">
+  <div class="selected-meals-btn" ng-click="openSelectedMeals()">
+    <span class="fa fa-bars"></span>
+  </div>
+  <div class="search">
+    <div class="search-wrapper">
+      <div class="search-description">
+        explore the master kitchen menu:
+      </div>
+      <div class="search-buttons-wrapper">
+        <div class="search-button" ng-click="mealType = 'breakfast'" ng-class="{'search-button-active': mealType == 'breakfast'}">
+          Breakfast
+        </div>
+        <div class="search-button" ng-click="mealType = 'lunch'" ng-class="{'search-button-active': mealType == 'lunch'}">
+          Lunch
+        </div>
+        <div class="search-button" ng-click="mealType = 'dinner'" ng-class="{'search-button-active': mealType == 'dinner'}">
+          Dinner
+        </div>
+        <div class="search-button" ng-click="mealType = 'snacks'" ng-class="{'search-button-active': mealType == 'snacks'}">
+          Snacks
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="meal-items">
+    <div ng-click="selectMeal($index)" class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == mealType">
+      <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">- {{ingredient}}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

app/views/selected-meals.html

@@ -0,0 +1,3 @@
+<div class="selected-meals">
+  <h1>hi</h1>
+</div>

content/css/styles.css

@@ -68,11 +68,62 @@ body * {
   pointer-events: none;
 }
 
+.overlay2 {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(29,29,31,.6);
+  z-index: 3;
+  opacity: 0;
+  transition: opacity .6s cubic-bezier(.645,.045,.355,1);
+  pointer-events: none;
+}
+
 .overlay-active {
   pointer-events: auto;
   opacity: 1;
 }
 
+main.ng-enter{
+  -webkit-transition: all 1.6s cubic-bezier(.645,.045,.355,1);
+  transition: all 1.6s cubic-bezier(.645,.045,.355,1);
+  opacity: 0.6s
+}
+
+main.ng-enter-active {
+  opacity: 1;
+}
+
+
+/* main.ng-enter > div > div {
+  transition: all 1s ease;
+  transform: translateY(1000%);
+}
+
+
+main.ng-enter-active > div > div {
+  transform: translateY(0);
+} */
+
+main.ng-enter .meal-item {
+  transform: translateY(600px);
+}
+main.ng-enter .meal-item:nth-child(3n + 1) {
+  transition: all 1s cubic-bezier(.645,.045,.355,1);
+}
+
+
+main.ng-enter .meal-item:nth-child(3n + 2) {
+  transition: all 1.3s cubic-bezier(.645,.045,.355,1);
+}
+
+main.ng-enter .meal-item:nth-child(3n + 3) {
+  transition: all 1.6s cubic-bezier(.645,.045,.355,1);
+}
+
+main.ng-enter.ng-enter-active .meal-item {
+  transform: translateY(0);
+}
 
 /* header-line */
 .header-line {
@@ -136,11 +187,16 @@ body * {
 
 .nav-menu li {
   list-style-type: none;
-  padding: 18px 0;
+
   transition: all .5s cubic-bezier(.39,.575,.565,1);
   cursor: pointer;
 }
 
+.nav-menu a {
+  display: block;
+  padding: 18px 0;
+}
+
 .nav-menu li:hover {
   transform: translateX(4px);
 }
@@ -205,7 +261,7 @@ body * {
 
 .open-menu {
   transition: all 0.6s cubic-bezier(.645,.045,.355,1);
-  transform: translateX(281px);
+  transform: translateX(281px)!important;
 }
 
 .close-menu {
@@ -785,3 +841,244 @@ body * {
   font-size: 14px;
 }
 /* footer */
+
+/* select-menu-page */
+.select-menu-page {
+  background: rgb(252, 252, 254);
+}
+
+.select-menu-page .search {
+  background: linear-gradient(to top,rgba(29, 29, 31,.9),rgba(29, 29, 31,.95));
+}
+
+.select-menu-page .search-wrapper {
+  margin: 0 auto;
+  max-width: 1024px;
+}
+
+.select-menu-page .search-description {
+  color: #fff;
+  border-bottom: 1px solid #fff;
+  padding: 20px 85px;
+  font-size: 27px;
+}
+
+.select-menu-page .search-buttons-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.select-menu-page .search-button {
+  position: relative;
+  width: 25%;
+  text-align: center;
+  padding: 20px 0;
+  color: #fff;
+  font-size: 18px;
+  letter-spacing: 1px;
+  cursor: pointer;
+  user-select: none;
+  /* font-family: 'Roboto'; */
+}
+
+.select-menu-page .search-button-active::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: 0 auto;
+  border-style: solid;
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent rgb(252, 252, 254) transparent;
+}
+
+.select-menu-page .meal-items {
+  max-width: 1170px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 70px 0;
+}
+
+/* .select-menu-page .meal-item.ng-leave {
+  transition: all 1s ease;
+  opacity: 1;
+}
+
+.select-menu-page .meal-item.ng-leave.ng-leave-active {
+  opacity: 0;
+} */
+
+.select-menu-page .meal-item {
+  position: relative;
+  perspective: 1000px;
+  width: 31%;
+  /* margin-right: 3.5%; */
+  margin-bottom: 35px;
+}
+
+.select-menu-page .meal-item-title {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.select-menu-page .meal-item-title h2 {
+  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);
+}
+
+/* .select-menu-page .meal-item:nth-child(3n + 3) {
+  margin-right: 0;
+} */
+
+.select-menu-page .meal-item-img {
+  overflow: hidden;
+}
+
+.select-menu-page .meal-item img{
+  width: 100%;
+  transition: all 0.4s ease;
+  transform: translateX(0px);
+}
+
+.select-menu-page .meal-item-ingredients {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 50%;
+  background: rgba(29, 29, 31,0.95);
+  transition: all 0.3s ease;
+  transform: rotateY(280.3deg);
+  transform-origin: 0 50%;
+  color: #fff;
+  padding: 12px;
+}
+
+.select-menu-page .meal-item-ingredients h3 {
+  margin: 5px;
+}
+
+.select-menu-page .meal-item-ingredients li {
+  font-size: 15px;
+  font-family: 'Roboto';
+  margin: 10px 5px;
+}
+
+.select-menu-page .meal-item:hover .meal-item-ingredients{
+  transform: rotateY(360deg);
+}
+
+.select-menu-page .meal-item:hover img{
+  transform: translateX(50px);
+}
+
+.select-menu-page .meal-item:hover .meal-item-title h2{
+  transform: translate3d(0, -100%, 0);
+  opacity: 0;
+}
+
+.selected-meals-btn {
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  z-index: 2;
+}
+
+.selected-meals {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: 281px;
+  background-color: #1D1D1F;
+  padding: 50px;
+  padding-top: 100px;
+  transition: all 0.6s cubic-bezier(.645,.045,.355,1);
+  transform: translateX(281px);
+}
+/* select-menu-page */
+
+/* add-item-page */
+.add-item-page {
+  background: #F1F1F5;
+}
+
+.add-item-page .form-wrapper {
+  max-width: 768px;
+  margin: 0 auto;
+  padding: 70px 0;
+}
+
+.add-item-page form {
+  padding: 50px;
+  background: #FCFCFE;
+  box-shadow: 0 0 22px #cacaca;
+  text-align: center;
+}
+
+.add-item-page form h2 {
+  text-align: center;
+  letter-spacing: 0.5px;
+  color: #1D1D1F;
+}
+
+.add-item-page form input, .add-item-page form select {
+  width: 80%;
+  margin: 15px 0;
+  background-color: #F1F1F5;
+  height: 35px;
+  border: none;
+  box-shadow: inset 0 0 8px #cacaca;
+  padding: 0 10px;
+  font-size: 18px;
+  font-family: 'Roboto', sans-serif;
+  outline: none;
+}
+
+.add-item-page form .ingredient-wrapper input {
+  width: 80%;
+  margin-left: 5%;
+}
+
+.add-item-page form .ingredient-wrapper span {
+  width: 5%;
+  font-size: 22px;
+  opacity: .4;
+  transition: all .3s ease;
+  cursor: pointer;
+}
+
+.add-item-page form .ingredient-wrapper span:hover {
+  opacity: .8;
+}
+
+.add-item-page form button {
+  display: inline-block;
+  width: 150px;
+  height: 35px;
+  border: none;
+  box-shadow: 0 0 5px #cacaca;
+  font-family: 'Roboto', sans-serif;
+  font-size: 15px;
+  margin: 15px 0;
+  cursor: pointer;
+  background: rgba(29, 29, 31,.85);
+  color: #fff;
+  outline: none;
+}
+/* add-item-page */

index.html

@@ -4,9 +4,23 @@
     <title>TheNetNinja Angular Playlist</title>
     <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
     <script src="./app/lib/angular.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
     <script src="./app/lib/angular-animate.min.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
+    <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
+    <script>
+      var config = {
+        apiKey: "AIzaSyBQB26DA2wibbue6Cu5JFwa-XUe41GwbeQ",
+        authDomain: "angularjsapp-6056c.firebaseapp.com",
+        databaseURL: "https://angularjsapp-6056c.firebaseio.com",
+        projectId: "angularjsapp-6056c",
+        storageBucket: "",
+        messagingSenderId: "644093397730"
+      };
+      firebase.initializeApp(config);
+    </script>
     <script src="./app/app.js"></script>
     <script src="./app/directives/navmenu.js"></script>
     <script src="./app/controllers/AppRootController.js"></script>
@@ -17,9 +31,11 @@
     <script src="./app/directives/scroll.js"></script>
     <script src="./app/directives/loyaltyPrograms.js"></script>
     <script src="./app/directives/footer.js"></script>
+    <script src="./app/controllers/SelectMenuPageController.js"></script>
+    <script src="./app/controllers/AddItemPageController.js"></script>
+    <script src="./app/directives/selectedMeals.js"></script>
   </head>
   <body>
     <app-root ng-include="'./app/views/app-root.html'"></app-root>
-
   </body>
 </html>