iamshaunjp · thiruclk · May 1, 2019 · May 1, 2019 · May 1, 2019 · May 1, 2019
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "net-ninja-pwa"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,65 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}
diff --git a/js/ui.js b/js/ui.js
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>
diff --git a/css/materialize.min.css → public/css/materialize.min.css b/css/materialize.min.css → public/css/materialize.min.css
diff --git a/css/styles.css → public/css/styles.css b/css/styles.css → public/css/styles.css
diff --git a/img/dish.png → public/img/dish.png b/img/dish.png → public/img/dish.png
diff --git a/img/icons/icon-128x128.png → public/img/icons/icon-128x128.png b/img/icons/icon-128x128.png → public/img/icons/icon-128x128.png
diff --git a/img/icons/icon-144x144.png → public/img/icons/icon-144x144.png b/img/icons/icon-144x144.png → public/img/icons/icon-144x144.png
diff --git a/img/icons/icon-152x152.png → public/img/icons/icon-152x152.png b/img/icons/icon-152x152.png → public/img/icons/icon-152x152.png
diff --git a/img/icons/icon-192x192.png → public/img/icons/icon-192x192.png b/img/icons/icon-192x192.png → public/img/icons/icon-192x192.png
diff --git a/img/icons/icon-384x384.png → public/img/icons/icon-384x384.png b/img/icons/icon-384x384.png → public/img/icons/icon-384x384.png
diff --git a/img/icons/icon-512x512.png → public/img/icons/icon-512x512.png b/img/icons/icon-512x512.png → public/img/icons/icon-512x512.png
diff --git a/img/icons/icon-72x72.png → public/img/icons/icon-72x72.png b/img/icons/icon-72x72.png → public/img/icons/icon-72x72.png
diff --git a/img/icons/icon-96x96.png → public/img/icons/icon-96x96.png b/img/icons/icon-96x96.png → public/img/icons/icon-96x96.png
diff --git a/index.html → public/index.html b/index.html → public/index.html
@@ -11,8 +11,9 @@
   <script type="text/javascript" src="/js/materialize.min.js"></script>
   <link rel="manifest" href="/manifest.json">
   <!-- ios support -->
-  <link rel="apple-touch-icon" href="/icons/icon-96x96.png">
+  <link rel="apple-touch-icon" href="/img/icons/icon-96x96.png">
   <meta name="apple-mobile-web-app-status-bar" content="#FFE1C4">
+  <meta name="theme-color" content="#FFE1C4">
 </head>
 <body class="grey lighten-4">
 
@@ -39,46 +40,7 @@
 
   <!-- recipes -->
   <div class="recipes container grey-text text-darken-1">
-    <div class="card-panel recipe white row">
-      <img src="/img/dish.png" alt="recipe thumb">
-      <div class="recipe-details">
-        <div class="recipe-title">Edame Noodles</div>
-        <div class="recipe-ingredients">Edame Beans, Noodels, Garlic oil</div>
-      </div>
-      <div class="recipe-delete">
-        <i class="material-icons">delete_outline</i>
-      </div>
-    </div>
-    <div class="card-panel recipe white row">
-      <img src="/img/dish.png" alt="recipe thumb">
-      <div class="recipe-details">
-        <div class="recipe-title">Edame Noodles</div>
-        <div class="recipe-ingredients">Edame Beans, Noodels, Garlic oil</div>
-      </div>
-      <div class="recipe-delete">
-        <i class="material-icons">delete_outline</i>
-      </div>
-    </div>
-    <div class="card-panel recipe white row">
-      <img src="/img/dish.png" alt="recipe thumb">
-      <div class="recipe-details">
-        <div class="recipe-title">Edame Noodles</div>
-        <div class="recipe-ingredients">Edame Beans, Noodels, Garlic oil</div>
-      </div>
-      <div class="recipe-delete">
-        <i class="material-icons">delete_outline</i>
-      </div>
-    </div>
-    <div class="card-panel recipe white row">
-      <img src="/img/dish.png" alt="recipe thumb">
-      <div class="recipe-details">
-        <div class="recipe-title">Edame Noodles</div>
-        <div class="recipe-ingredients">Edame Beans, Noodels, Garlic oil</div>
-      </div>
-      <div class="recipe-delete">
-        <i class="material-icons">delete_outline</i>
-      </div>
-    </div>
+
   </div>
 
   <div class="center">
@@ -106,6 +68,24 @@ <h6 >New Recipe</h6>
     </form>
   </div>
 
+
+  <script src="https://www.gstatic.com/firebasejs/5.11.0/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/5.11.0/firebase-firestore.js"></script>
+  <script>
+    // Initialize Firebase
+    var config = {
+      apiKey: "AIzaSyDuDGcpHGU-Sx1Hla3wYwZvXbjeKpHqPjA",
+      authDomain: "net-ninja-pwa.firebaseapp.com",
+      databaseURL: "https://net-ninja-pwa.firebaseio.com",
+      projectId: "net-ninja-pwa",
+      storageBucket: "net-ninja-pwa.appspot.com",
+      messagingSenderId: "1008745109838"
+    };
+    firebase.initializeApp(config);
+    const db = firebase.firestore();
+  </script>
+  <script src="/js/app.js"></script>
+  <script src="/js/db.js"></script>
   <script src="/js/ui.js"></script>
 </body>
 </html>
diff --git a/public/js/app.js b/public/js/app.js
@@ -0,0 +1,5 @@
+if('serviceWorker' in navigator){
+  navigator.serviceWorker.register('/sw.js')
+    .then(reg => console.log('service worker registered'))
+    .catch(err => console.log('service worker not registered', err));
+}
diff --git a/public/js/db.js b/public/js/db.js
@@ -0,0 +1,50 @@
+// enable offline data
+db.enablePersistence()
+  .catch(function(err) {
+    if (err.code == 'failed-precondition') {
+      // probably multible tabs open at once
+      console.log('persistance failed');
+    } else if (err.code == 'unimplemented') {
+      // lack of browser support for the feature
+      console.log('persistance not available');
+    }
+  });
+
+// real-time listener
+db.collection('recipes').onSnapshot(snapshot => {
+  snapshot.docChanges().forEach(change => {
+    if(change.type === 'added'){
+      renderRecipe(change.doc.data(), change.doc.id);
+    }
+    if(change.type === 'removed'){
+      removeRecipe(change.doc.id);
+    }
+  });
+});
+
+// add new recipe
+const form = document.querySelector('form');
+form.addEventListener('submit', evt => {
+  evt.preventDefault();
+
+  const recipe = {
+    name: form.title.value,
+    ingredients: form.ingredients.value
+  };
+
+  db.collection('recipes').add(recipe)
+    .catch(err => console.log(err));
+
+  form.title.value = '';
+  form.ingredients.value = '';
+});
+
+// remove a recipe
+const recipeContainer = document.querySelector('.recipes');
+recipeContainer.addEventListener('click', evt => {
+  if(evt.target.tagName === 'I'){
+    const id = evt.target.getAttribute('data-id');
+    //console.log(id);
+    db.collection('recipes').doc(id).delete();
+  }
+})
diff --git a/js/materialize.min.js → public/js/materialize.min.js b/js/materialize.min.js → public/js/materialize.min.js
diff --git a/public/js/ui.js b/public/js/ui.js
@@ -0,0 +1,35 @@
+const recipes = document.querySelector('.recipes');
+
+document.addEventListener('DOMContentLoaded', function() {
+  // nav menu
+  const menus = document.querySelectorAll('.side-menu');
+  M.Sidenav.init(menus, {edge: 'right'});
+  // add recipe form
+  const forms = document.querySelectorAll('.side-form');
+  M.Sidenav.init(forms, {edge: 'left'});
+});
+
+// render recipe data
+const renderRecipe = (data, id) => {
+
+  const html = `
+    <div class="card-panel recipe white row" data-id="${id}">
+      <img src="/img/dish.png" alt="recipe thumb">
+      <div class="recipe-details">
+        <div class="recipe-title">${data.name}</div>
+        <div class="recipe-ingredients">${data.ingredients}</div>
+      </div>
+      <div class="recipe-delete">
+        <i class="material-icons" data-id="${id}">delete_outline</i>
+      </div>
+    </div>
+  `;
+  recipes.innerHTML += html;
+
+};
+
+// remove recipe
+const removeRecipe = (id) => {
+  const recipe = document.querySelector(`.recipe[data-id=${id}]`);
+  recipe.remove();
+};
diff --git a/manifest.json → public/manifest.json b/manifest.json → public/manifest.json
diff --git a/pages/about.html → public/pages/about.html b/pages/about.html → public/pages/about.html
@@ -10,8 +10,9 @@
   <link type="text/css" href="/css/styles.css" rel="stylesheet">
   <script type="text/javascript" src="/js/materialize.min.js"></script>
   <link rel="manifest" href="/manifest.json">
-  <link rel="apple-touch-icon" href="/icons/icon-96x96.png">
+  <link rel="apple-touch-icon" href="/img/icons/icon-96x96.png">
   <meta name="apple-mobile-web-app-status-bar" content="#FFE1C4">
+  <meta name="theme-color" content="#FFE1C4">
 </head>
 <body class="grey lighten-4">
 
@@ -43,6 +44,7 @@ <h5 class="center">About Food Ninja</h5>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatibus omnis, ea doloremque exercitationem id necessitatibus. Voluptatem officiis cupiditate commodi totam, hic laborum est ducimus amet iure, non dignissimos illo.</p>
   </div>
 
+  <script src="/js/app.js"></script>
   <script src="/js/ui.js"></script>
 </body>
 </html>
diff --git a/pages/contact.html → public/pages/contact.html b/pages/contact.html → public/pages/contact.html
@@ -10,8 +10,9 @@
   <link type="text/css" href="/css/styles.css" rel="stylesheet">
   <script type="text/javascript" src="/js/materialize.min.js"></script>
   <link rel="manifest" href="/manifest.json">
-  <link rel="apple-touch-icon" href="/icons/icon-96x96.png">
+  <link rel="apple-touch-icon" href="/img/icons/icon-96x96.png">
   <meta name="apple-mobile-web-app-status-bar" content="#FFE1C4">
+  <meta name="theme-color" content="#FFE1C4">
 </head>
 <body class="grey lighten-4">
 
@@ -48,6 +49,7 @@ <h6>Find us at:</h6>
     </ul>
   </div>
 
+  <script src="/js/app.js"></script>
   <script src="/js/ui.js"></script>
 </body>
 </html>
diff --git a/public/pages/fallback.html b/public/pages/fallback.html
@@ -0,0 +1,50 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Food Ninja</title>
+  <!-- materialize icons, css & js -->
+  <link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link type="text/css" href="/css/styles.css" rel="stylesheet">
+  <script type="text/javascript" src="/js/materialize.min.js"></script>
+  <link rel="manifest" href="/manifest.json">
+  <link rel="apple-touch-icon" href="/img/icons/icon-96x96.png">
+  <meta name="apple-mobile-web-app-status-bar" content="#FFE1C4">
+  <meta name="theme-color" content="#FFE1C4">
+</head>
+<body class="grey lighten-4">
+
+  <!-- top nav -->
+  <nav class="z-depth-0">
+    <div class="nav-wrapper container">
+      <a href="/">Food<span>Ninja</span></a>
+      <span class="right grey-text text-darken-1">
+        <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
+      </span>
+    </div>
+  </nav>
+
+  <!-- side nav -->
+  <ul id="side-menu" class="sidenav side-menu">
+    <li><a class="subheader">FOODNINJA</a></li>
+    <li><a href="/" class="waves-effect">Home</a></li>
+    <li><a href="/pages/about.html" class="waves-effect">About</a></li>
+    <li><div class="divider"></div></li>
+    <li><a href="/pages/contact.html" class="waves-effect">
+      <i class="material-icons">mail_outline</i>Contact</a>
+    </li>
+  </ul>
+
+  <!-- content -->
+  <div class="container grey-text center">
+    <h5>OOPS!</h5>
+    <p>Currently you can't view this page without a connection.</p>
+    <a href="/" class="btn-small orange z-depth-0">Go to the Homepage</a>
+  </div>
+
+  <script src="/js/app.js"></script>
+  <script src="/js/ui.js"></script>
+</body>
+</html>