Added routes/novigation/notfound

dist/index.html

@@ -11,5 +11,5 @@
 <div id="app" class="uk-container"></div>
 
 
-<script defer src="vendors-node_modules_faker_index_js.c1de7c32e160a5159bc4.js"></script><script defer src="faker.c1de7c32e160a5159bc4.js"></script><script defer src="app.c1de7c32e160a5159bc4.js"></script></body>
+<script defer src="vendors-node_modules_faker_index_js.1f3719c031c5b8bb0aed.js"></script><script defer src="faker.1f3719c031c5b8bb0aed.js"></script><script defer src="app.1f3719c031c5b8bb0aed.js"></script></body>
 </html>

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "start": "cross-env SOURCE_MAP_ENV=true webpack serve --open",
     "srv": "cross-env SOURCE_MAP_ENV=true webpack serve",
+    "srv-prod": "cross-env SOURCE_MAP_ENV=true NODE_ENV=production webpack serve",
     "watch": "webpack --watch",
     "build": "cross-env NODE_ENV=production webpack",
     "build-dev": "cross-env SOURCE_MAP_ENV=true NODE_ENV=production webpack"

src/env.json

@@ -1,4 +1,10 @@
 {
+  "routes": {
+    "/all": "All Notes",
+    "/": "Recent Notes",
+    "/archive": "Archived Notes",
+    "/analytics": "Analytics"
+  },
   "localStorageKey": "notes-home-task-1",
   "prePopulateAmount": 7,
   "fakerAmount": 44,
@@ -9,6 +15,7 @@
     "primary", "success", "warning", "danger"
   ],
   "querySelectors": {
+    "root": "#app",
     "console": "#appConsole",
     "navTabs": "#asSwitcher",
     "modal": ".modal",

src/helpers.js

@@ -9,6 +9,10 @@ const monthsNamesFull = env.lists.monthsFull
 
 export const randomID6n = () => Math.floor(100000 + Math.random() * 900000)
 
+export const parseURL = url => new URL(url)
+
+
+
 /**
  *
  * @param string

src/index.js

@@ -2,7 +2,10 @@ import { env } from './helpers'
 import './styles/uikit.min.css'
 import './styles/main.css'
 import DOMController from './modules/DOMController'
+import RouteController from './modules/RouteController'
 
-const app = document.getElementById('app')
 window.env = env
-new DOMController(app)
+
+const app = document.getElementById(env.querySelectors.root.slice(1))
+
+new DOMController(app, new RouteController())

src/modules/DOMController.js

@@ -1,16 +1,18 @@
 import Templates from '../templates/Views'
-import { createNode, destroyNode, findDates, formatDate, ucWords } from '../helpers'
+import { createNode, destroyNode, findDates, formatDate, parseURL, replaceURLPathname, ucWords } from '../helpers'
 import NotesAPI from './NotesAPI'
 import ValidationController from './ValidationController'
 import Alert from './AlertController'
 
 export default class DOMController {
 
-  constructor (root) {
+  constructor (root, routes) {
+    this.routes = routes
     this.root = root
 
     try {
       this.root.innerHTML = Templates.grid
+      this.renderRoutes()
     } catch (e) {
       Alert.displayDialog(e.toString(), 0, 3)
     }
@@ -24,21 +26,60 @@ export default class DOMController {
       [this.btnPrepopulate, 'click', (this.btnPrepopulate.dataset.action || 'showError')],
     ])
 
-    this.navTabs()
-
   }
 
   /**
-   * Launches the events for Navigation panel to switch between the views of the App
+   *
    */
-  navTabs () {
-    const navTabs = document.querySelectorAll(window.env.querySelectors.navTabs + ' > li > a')
+  renderRoutes () {
 
-    for (let i = 0; i < navTabs.length; ++i) {
-      this.listener([navTabs[i], 'click', 'createNotesGridByRoute', navTabs[i]])
+    for (const [route, name] of Object.entries(this.routes.routes)) {
+
+      const tab = createNode('li')
+      tab.classList.add('nav-tab')
+
+      if (route === '/') {
+        tab.classList.add('initial')
+        tab.classList.add('uk-active')
+      }
+
+      tab.innerHTML = `<a href="${route}">${name}</a>`
+      const anchor = tab.querySelector('a')
+      this.routes.navbar.appendChild(tab)
+
+      this.listener([anchor, 'click', 'createNotesGridByRoute', anchor])
     }
   }
 
+  createNotesGridByRoute (navTab) {
+    const pathname = parseURL(navTab.href).pathname
+    const route = pathname.slice(1).split('\/')[0]
+    window.history.pushState('', navTab.innerText, pathname) //change url without reload
+    //history.pushState({}, null, pathname) //change url
+
+    this.routes.navbar.querySelector('.uk-active').classList.remove('uk-active')
+    navTab.closest('.nav-tab').classList.add('uk-active')
+
+    document.getElementById(window.env.querySelectors.analyticsGrid.slice(1)).classList.add('uk-hidden')
+    document.getElementById(window.env.querySelectors.notesGrid.slice(1)).classList.remove('uk-hidden')
+
+    switch (route) {
+      case 'all':
+        this.createNotesGrid(0, null)
+        break
+      case '':
+        this.createNotesGrid(window.env.prePopulateAmount || 0)
+        break
+      case 'archive':
+        this.createNotesGrid(window.env.prePopulateAmount || 0, true)
+        break
+      case 'analytics':
+        document.getElementById(window.env.querySelectors.notesGrid.slice(1)).classList.add('uk-hidden')
+        const analyticsGrid =   document.getElementById(window.env.querySelectors.analyticsGrid.slice(1))
+        this.createAnalyticsGrid(analyticsGrid)
+        break
+    }
+  }
 
   prePopulate () {
     const fakerAmount = document.querySelector(env.querySelectors.selectPrepopulate)
@@ -97,26 +138,23 @@ export default class DOMController {
     this.noteToAction(node, 'deleteNote')
   }
 
-  createNotesGridByRoute (navTab) {
-    const route = new URL(navTab.href).pathname.slice(1).split('\/')[0]
-    document.querySelector('li.nav-tab.uk-active').classList.remove('uk-active')
-    navTab.closest('li').classList.add('uk-active')
-    document.getElementById(window.env.querySelectors.notesGrid.slice(1)).classList.remove('uk-hidden')
+  createAnalyticsGrid (grid) {
+    grid.classList.remove('uk-hidden')
+    const aGrid = grid.querySelector(' tbody')
+    aGrid.innerHTML = ''
 
-    switch (route) {
-      case 'all':
-        this.createNotesGrid(0, null)
-        break
-      case '':
-        this.createNotesGrid(window.env.prePopulateAmount || 0)
-        break
-      case 'archived':
-        this.createNotesGrid(window.env.prePopulateAmount || 0, true)
-        break
-      case 'analytics':
-        console.log(NotesAPI.getAnalytics())
-        document.getElementById(window.env.querySelectors.notesGrid.slice(1)).classList.add('uk-hidden')
-        break
+    for (const [key, value] of Object.entries(NotesAPI.getAnalytics())) {
+
+      const row = createNode('tr')
+      const td = createNode('td', {}, ucWords(key))
+      row.appendChild(td)
+
+      for (const [key, val] of Object.entries( value ) ) {
+        const td = createNode('td', {}, val.toString())
+        row.appendChild(td)
+      }
+
+      aGrid.appendChild(row)
     }
   }
 
@@ -214,8 +252,6 @@ export default class DOMController {
       DOMController.fillTheForm(node, args)
     }
 
-    //console.log( .getAttribute('maxlength') )
-
     this.root.appendChild(node)
     node.style.display = 'block'
 

src/modules/NotesAPI.js

@@ -173,7 +173,7 @@ export default class NotesAPI {
       cats.forEach((cat, i) => {
         analytics[cat] = {
           Active: isArchive.filter(el => el[cat] === 'on').length,
-          Archived: isArchive.filter(el => el[cat] !== 'on').length,
+          Archived: isArchive.filter(el => el[cat] == '').length,
         }
       })
     }

src/modules/RouteController.js

@@ -0,0 +1,55 @@
+import Views from '../templates/Views'
+
+export default class RouteController {
+
+  constructor () {
+    document.addEventListener('DOMContentLoaded', e => {
+      this._navigation()
+      this._history()
+    })
+  }
+
+  get routes () {
+    return window.env.routes
+  }
+
+  /**
+   *
+   * @returns {*}
+   */
+  get navbar () {
+    return document.getElementById(window.env.querySelectors.navTabs.slice(1))
+  }
+
+  get page404(){
+    document.body.innerHTML = Views.templates.notFound
+    setTimeout( () => {
+      window.location.assign('/')
+    }, 5000)
+  }
+
+  /**
+   *
+   * @private
+   */
+  _navigation(){
+
+    if( Object.keys(this.routes).filter( path => window.location.pathname === path ).length === 0 ){
+        this.page404
+    } else{
+      document.querySelector( `a[href='${window.location.pathname}']` ).click()
+    }
+
+  }
+
+  _history(){
+    window.addEventListener('popstate', event => {
+      try {
+        document.querySelector('.uk-active').classList.remove('uk-active')
+        document.querySelector(window.env.querySelectors.navTabs + ` a[href='${event.target.location.pathname}']`).closest('.nav-tab').classList.add('uk-active')
+      } catch (e) {}
+
+    })
+  }
+
+}

src/templates/404.js

@@ -0,0 +1,15 @@
+export default `<div class="uk-container uk-text-center">
+    <div class="uk-container">
+        <ul id="asSwitcher"
+        class="uk-subnav uk-subnav-divider uk-margin-large-bottom uk-flex-center">
+            <li class="nav-tab"><a href="/all">All Notes</a></li>
+            <li class="nav-tab initial uk-active"><a href="/">Recent Notes</a></li>
+            <li class="nav-tab"><a href="/archive">Archived Notes</a></li>
+            <li class="nav-tab"><a href="/analytics">Analytics</a></li>
+        </ul>
+    </div>
+    
+    <h1 class=" uk-text-danger">404 - NOT FOUND</h1>
+    <div class="uk-text-large uk-text-muted uk-text-bold">U will be redirected soon</div>
+    
+</div>`

src/templates/Views.js

@@ -1,12 +1,11 @@
 import grid from './grid'
 import editForm from './editForm'
-//import gridRow from '../../.trash/gridRow'
-
+import _404 from './404'
 
 export default {
   templates: {
+    notFound: _404,
     editForm: editForm,
-   // gridRow: gridRow
   },
   grid: grid
 }

src/templates/grid.js

@@ -1,16 +1,10 @@
 export default `
-    <div id="as-navbar" class="uk-background-secondary">
+    <nav id="as-navbar" class="uk-background-secondary">
         <div  class="uk-container">
-        <ul id="asSwitcher" class="uk-subnav uk-subnav-pill uk-margin-small-top uk-margin-small-bottom uk-padding-small">
-            <li class="nav-tab"><a href="/all">All Notes</a></li>
-            <li class="nav-tab initial uk-active"><a href="/">Recent Notes</a></li>
-            <li class="nav-tab"><a href="/archived">Archived Notes</a></li>
-            <li class="nav-tab"><a href="/analytics">Analytics</a></li>    
-        </ul>
+        <ul id="asSwitcher" class="uk-subnav uk-subnav-pill uk-margin-small-top uk-margin-small-bottom uk-padding-small"></ul>
       </div>
-    </div>
-    <table id="analyticsGrid" class="uk-table uk-table-small uk-table-responsive1 uk-table-striped uk-table-hover uk-table-divider"></table>
-    <table id="notesGrid" class="uk-table uk-table-small uk-table-responsive1 uk-table-striped uk-table-hover uk-table-divider">
+    </nav>
+    <table id="notesGrid" class="uk-table uk-table-small uk-table-striped uk-table-hover uk-table-divider">
         <col width="156">
         <col width="250">
         <col width="150">
@@ -34,6 +28,22 @@ export default `
         <tbody>
         </tbody>
     </table>
+    
+    <table id="analyticsGrid" class="uk-table uk-table-small uk-table-striped uk-table-hover uk-table-divider uk-hidden">
+        <col width="156">
+        <col width="250">
+        <col width="150">
+        <thead>
+          <tr>
+              <th>Note Category</th>
+              <th>Active</th>
+              <th>Archived</th>
+          </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+    
     <div class="uk-margin" uk-margin>
                     <div class="uk-margin-large-top">
                         <button id="btnCreateNote" class="uk-button uk-button-primary uk-text-bold uk-border-rounded uk-float-right" data-action="getEditForm">Create Note</button>

webpack.config.js

@@ -110,6 +110,7 @@ module.exports = {
   },
   plugins: plugins,
   devtool: mode === 'production' ? 'source-map' : (process.env.SOURCE_MAP_ENV ? 'eval-cheap-module-source-map' : false),
+  devtool: 'source-map',
   optimization: {
     minimize: isProd,
     splitChunks: {
@@ -138,6 +139,11 @@ module.exports = {
     static: path.resolve(__dirname, 'dist'),
     compress: true,
     port: 1976,
+    //disableHostCheck: true,
+    allowedHosts: [
+      'dev.amok.space',
+    ],
     liveReload: true,
+    historyApiFallback: true
   },
 }