Added routes/novigation/notfound

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'