Merge branch 'feature/adding-functionality' into develop

2021-10-08 12:18:56 +03:00
parent dc19bb1fa5 6f8805e23a
commit 239452682c
30 changed files with 638 additions and 188 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -236,3 +236,4 @@ out
 .pnp.*

 /.trash/
+/dist/*.LICENSE.txt
--- a/dist/app.19f5ee6c7563dd0839a8.js
+++ b/dist/app.19f5ee6c7563dd0839a8.js
--- a/dist/app.css
+++ b/dist/app.css
--- a/dist/faker.19f5ee6c7563dd0839a8.js
+++ b/dist/faker.19f5ee6c7563dd0839a8.js
--- a/dist/index.html
+++ b/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Notes in JS (Home task 1)</title>
+
+<link href="app.css" rel="stylesheet"></head>
+<body>
+
+<div id="appConsole"  class="uk-container uk-margin-remove uk-background-muted uk-text-small"></div>
+<div id="app" class="uk-container"></div>
+
+
+<script defer src="vendors-node_modules_faker_index_js.19f5ee6c7563dd0839a8.js"></script><script defer src="faker.19f5ee6c7563dd0839a8.js"></script><script defer src="app.19f5ee6c7563dd0839a8.js"></script></body>
+</html>
--- a/dist/vendors-node_modules_faker_index_js.19f5ee6c7563dd0839a8.js
+++ b/dist/vendors-node_modules_faker_index_js.19f5ee6c7563dd0839a8.js
--- a/package.json
+++ b/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"
@@ -35,5 +36,8 @@
    "webpack": "^5.56.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.1"
+  },
+  "dependencies": {
+    "faker": "^5.5.3"
  }
 }
--- a/src/env.json
+++ b/src/env.json
@@ -1,6 +1,13 @@
 {
+  "routes": {
+    "/all": "All Notes",
+    "/": "Recent Notes",
+    "/archive": "Archived Notes",
+    "/analytics": "Analytics"
+  },
  "localStorageKey": "notes-home-task-1",
  "prePopulateAmount": 7,
+  "fakerAmount": 44,
  "lists": {
    "monthsFull": ["January","February","March","April","May","June","July", "August","September","October","November","December"]
  },
@@ -8,11 +15,15 @@
    "primary", "success", "warning", "danger"
  ],
  "querySelectors": {
+    "root": "#app",
    "console": "#appConsole",
    "navTabs": "#asSwitcher",
    "modal": ".modal",
+    "analyticsGrid": "#analyticsGrid",
    "notesGrid": "#notesGrid",
    "noteEditForm": "#noteEditForm",
+    "btnPrepopulate": "#btnPrepopulate",
+    "selectPrepopulate": "#selectPrepopulate",
    "btnCreateNote": "#btnCreateNote",
    "btnDestroyModal": "#btnDestroyModal",
    "saveNote": "#saveNote",
@@ -36,10 +47,10 @@
  "schemas": {
    "note": {
      "id": [ false, "^[0-9]{6}$" ],
-      "title": [ true, "^(.{1,128})$" ],
+      "title": [ true, 128 ],
      "category": [ true, "^(task|random_thought|idea|quote)$" ],
-      "content": [ false, "^(.{1,1024}$)" ],
-      "archive": [ false, "^(on|)$" ],
+      "content": [ false, 1024 ],
+      "archive": [ false, "^(on|true|)$" ],
      "createdAt": [ false, "^202[1-9]-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}\\.[0-9]{3}Z$" ],
      "updatedAt": [ false, "^202[1-9]-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}\\.[0-9]{3}Z$" ]
    }
--- a/src/faker.js
+++ b/src/faker.js
@@ -0,0 +1,45 @@
+import { env, randomID6n } from './helpers'
+
+const faker = require('faker')
+
+export const fakerDB = length => {
+  const dates = [
+    '1/1/11', '1.1.11', '1-1-11', '01/01/11', '01.01.11', '01-01-11',
+    '01/01/2011', '01.01.2011', '01-01-2011', '01/1/2011', '01.1.2011', '01-1-2011',
+    '1/11/2011', '1.11.2011', '1-11-2011', '1/11/11', '1.11.11', '1-11-11',
+    '11/1/11', '11.1.11', '11-1-11', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',
+  ]
+
+  const data = []
+  const cat = env.schemas.note.category[1].slice(2, -2).split('|')
+
+
+
+
+
+//
+
+  for (let i = 0; i < length; i++) {
+
+    const up = faker.date.between('2021-07-01', '2021-10-07')
+    let pickedDates = []
+    for( let i = 0; i< 4; i++ ) {
+      pickedDates.push( dates[(Math.random() * dates.length) | 0] )
+    }
+    pickedDates = pickedDates.filter( el => el !== ''  )
+    const rec = {
+      id: randomID6n(),
+      title: faker.animal.snake(),
+      category: cat[(Math.random() * cat.length) | 0],
+      archive: ['', 'on'][(Math.random() * 2) | 0],
+      content: faker.hacker.phrase() + (pickedDates.length > 0 ? "<br/><strong style='color: green'>Dates:</strong> [ " + pickedDates.join(',  ') : '') + " ]",
+      createdAt: faker.date.between('2021-07-06', '2021-10-01'),
+      updatedAt: ['', up][(Math.random() * 2) | 0],
+    }
+    data.push(rec)
+  }
+
+  return data
+}
+
+//console.log( JSON.stringify( data, null, 2 ))
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -7,6 +7,12 @@ export const msgBox = document.getElementById(env.querySelectors.console.slice(1
 */
 const monthsNamesFull = env.lists.monthsFull

+export const randomID6n = () => Math.floor(100000 + Math.random() * 900000)
+
+export const parseURL = url => new URL(url)
+
+
+
 /**
 *
 * @param string
--- a/src/images/archive_48dp.svg
+++ b/src/images/archive_48dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#fcc343"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zm-8.89 11.92L6.5 12H10v-2h4v2h3.5l-5.15 5.15c-.19.19-.51.19-.7 0zM5.12 5l.81-1h12l.94 1H5.12z"/></svg>
--- a/src/images/archive_black_48dp.svg
+++ b/src/images/archive_black_48dp.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zm-8.89 11.92L6.5 12H10v-2h4v2h3.5l-5.15 5.15c-.19.19-.51.19-.7 0zM5.12 5l.81-1h12l.94 1H5.12z"/></svg>
--- a/src/images/delete_48dp.svg
+++ b/src/images/delete_48dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#d6676d"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zM18 4h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
--- a/src/images/delete_black_48dp.svg
+++ b/src/images/delete_black_48dp.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zM18 4h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
--- a/src/images/edit_48dp.svg
+++ b/src/images/edit_48dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#abcdef"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM21.41 6.34l-3.75-3.75-2.53 2.54 3.75 3.75 2.53-2.54z"/></svg>
--- a/src/images/edit_black_48dp.svg
+++ b/src/images/edit_black_48dp.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM21.41 6.34l-3.75-3.75-2.53 2.54 3.75 3.75 2.53-2.54z"/></svg>
--- a/src/images/unarchive_48dp.svg
+++ b/src/images/unarchive_48dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#bada55"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.71 3H5.29L3 5.79V21h18V5.79L18.71 3zM14 15v2h-4v-2H6.5L12 9.5l5.5 5.5H14zM5.12 5l.81-1h12l.94 1H5.12z"/></svg>
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,10 @@

 </head>
 <body>
-    <div id="appConsole" class="uk-container"></div>
-    <div id="app" class="uk-container"></div>
+
+<div id="appConsole"  class="uk-container uk-margin-remove uk-background-muted uk-text-small"></div>
+<div id="app" class="uk-container"></div>
+
+
 </body>
 </html>
--- a/src/index.js
+++ b/src/index.js
@@ -2,23 +2,10 @@ import { env } from './helpers'
 import './styles/uikit.min.css'
 import './styles/main.css'
 import DOMController from './modules/DOMController'
-
-const app = document.getElementById('app')
+import RouteController from './modules/RouteController'

 window.env = env

-new DOMController(app)
+const app = document.getElementById(env.querySelectors.root.slice(1))

-/*NotesAPI.saveNote({
-  //id: 441512,
-  title: 'Note 1234',
-  category: 'category 1234',
-  content: 'contents 1234',
-  updatedAt: null
-})*/
-
-//NotesAPI.deleteNote(441512)
-//console.log(NotesAPI.getNotes())
-
-/*
-1/1/11     or 1.1.11      or 1-1-11 01/01/11   or 01.01.11    or 01-01-11 01/01/2011 or 01.01.2011  or 01-01-2011 :    true 01/1/2011  or 01.1.2011   or 01-1-2011  :    true 1/11/2011  or 1.11.2011   or 1-11-2011 1/11/11    or 1.11.11     or 1-11-11 11/1/11    or 11.1.11     or 11-1-11*/
+new DOMController(app, new RouteController())
--- a/src/modules/AlertController.js
+++ b/src/modules/AlertController.js
@@ -0,0 +1,28 @@
+import { createNode, msgBox } from '../helpers'
+
+export default class AlertController {
+
+  static showError () {
+    this.displayDialog('Error occurred :(', 3000, 3)
+  }
+
+  /**
+   *
+   * @param msg
+   * @param fadeOut
+   * @param type
+   * @param parent
+   */
+  static displayDialog (msg = 'Alert without message', fadeOut = 0, type = 0, parent = null) {
+    const alertTypes = window.env.alertTypes
+    const dialog = createNode('div', { class: `uk-alert-${alertTypes[type]} uk-padding-small` }, msg)
+    parent instanceof Element ? parent.appendChild(alert) : msgBox.appendChild(dialog)
+
+    if (fadeOut > 0) {
+      setTimeout(() => {
+        dialog.remove()
+      }, fadeOut)
+    }
+  }
+
+}
--- a/src/modules/DOMController.js
+++ b/src/modules/DOMController.js
@@ -1,62 +1,133 @@
 import Templates from '../templates/Views'
-import { msgBox, 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) {
-      DOMController.alert(e.toString(), 0, 3)
+      Alert.displayDialog(e.toString(), 0, 3)
    }

    this.btnCreateNote = this.root.querySelector(window.env.querySelectors.btnCreateNote)
+    this.btnPrepopulate = this.root.querySelector(window.env.querySelectors.btnPrepopulate)
    this.createNotesGrid(window.env.prePopulateAmount || 0)

    this.listener([
      [this.btnCreateNote, 'click', (this.btnCreateNote.dataset.action || 'showError'), { legend: 'Create Note' }],
+      [this.btnPrepopulate, 'click', (this.btnPrepopulate.dataset.action || 'showError')],
    ])

-    this.navTabs()
-
-  }
-
-  navTabs () {
-    const navTabs = document.querySelectorAll(window.env.querySelectors.navTabs + ' > li > a')
-
-    for (let i = 0; i < navTabs.length; ++i) {
-      this.listener([navTabs[i], 'click', 'createNotesGridByRoute', navTabs[i]])
-    }
  }

  /**
   *
   */
-  showError () {
-    DOMController.alert('Error occurred :(', 3000, 3)
+  renderRoutes () {
+
+    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)
+
+    if (+fakerAmount.value <= 0) {
+      return
+    }
+    env.fakerAmount = (+fakerAmount.value > 44) ? 44 : +fakerAmount.value
+    localStorage.removeItem(window.env.localStorageKey)
+    fakerAmount.selectedIndex = 0
+    document.querySelector('.nav-tab.uk-active > a').click()
+
  }

  /**
+   * The method is being called for typical DOM-event task inside the table row
+   * to manipulate with records: deleting, editing, archiving.
   *
-   * @param msg
-   * @param fadeOut
-   * @param type
-   * @param womb
+   * @param node
+   * @param method
   */
-  static alert (msg = 'Alert without message', fadeOut = 0, type = 0, womb = null) {
-    const alertTypes = window.env.alertTypes
-    const alert = createNode('div', { class: `uk-alert-${alertTypes[type]} uk-padding-small`, 'uk-alert': null }, msg)
-    alert.style.display = 'block'
-    womb instanceof Element ? womb.appendChild(alert) : msgBox.appendChild(alert)
+  noteToAction (node, method) {
+
+    const row = node.closest('tr')
+
+    NotesAPI[method](parseInt(row.dataset.id, 10))
+    row.classList.add('as-removing')

-    if (fadeOut > 0) {
    setTimeout(() => {
-        alert.remove()
-      }, fadeOut)
+      row.remove()
+      document.querySelector('.nav-tab.uk-active > a').click()
+    }, 1050)
  }
+
+  /**
+   *
+   * @param node
+   */
+  noteToArchive (node) {
+    this.noteToAction(node, 'archiveNote')
+  }
+
+  /**
+   *
+   * @param node
+   */
+  noteFromArchive (node) {
+    this.noteToAction(node, 'unArchiveNote')
  }

  /**
@@ -64,26 +135,26 @@ export default class DOMController {
   * @param node
   */
  noteToTrash (node) {
-    const row = node.closest('tr')
-    NotesAPI.deleteNote(parseInt(row.dataset.id, 10))
-    row.classList.add('as-removing')
-
-    setTimeout(() => {
-      row.remove()
-      this.createNotesGrid(window.env.prePopulateAmount || 0)
-    }, 3000)
+    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' )
+  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;
-      default: console.log(route)
+    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)
    }
  }

@@ -94,15 +165,12 @@ export default class DOMController {
   */
  createNotesGrid (len = window.env.prePopulateAmount || 0, archived = false) {

-    const notes = NotesAPI.getNotesSanitized(len, archived)
-
-    if (notes.length === 0) { return }
-
-
-
    const notesGrid = document.querySelector(window.env.querySelectors.notesGrid + ' tbody')
    notesGrid.innerHTML = ''

+    const notes = NotesAPI.getNotesSanitized(len, archived)
+    if (notes.length === 0) { return }
+
    notes.forEach(el => {

      const row = createNode('tr')
@@ -117,29 +185,23 @@ export default class DOMController {
            value = formatDate(value)
            break
          case 'category':
-            value = ucWords( value )
+            value = ucWords(value)
            break
          case 'title':
-            //attrs.class = 'uk-text-truncate'
            attrs.class = 'uk-text-bold'
            break
-          case 'content':
-
-            //attrs.class = 'uk-text-truncate'
-            //attrs.title = value
-            break
          case 'dates':
+            attrs.style = 'font-size: 12px'
            value = findDates(el.content).join(', ')
-            //attrs.class = 'uk-text-truncate'
-            //attrs.title = value
            break
          case 'edit' :
-            attrs.class = 'icon icon-edit grid-control'
+            attrs.class = 'grid-control icon icon-edit'
            attrs['data-action'] = 'getEditForm'
            break
          case 'archive' :
-            attrs.class = 'icon icon-archive grid-control'
-            attrs['data-action'] = 'toArchive'
+            attrs.class = 'grid-control icon ' + (value === 'on' ? 'icon-unarchive' : 'icon-archive')
+            attrs['data-action'] = value === 'on' ? 'noteFromArchive' : 'noteToArchive'
+            value = ''
            break
          case 'delete' :
            attrs.class = 'icon icon-delete grid-control'
@@ -172,11 +234,70 @@ export default class DOMController {
    for (let key of formData.keys()) {
      data[key] = formData.get(key)
    }
-
    return data
  }

  /**
+   *
+   * @param args
+   */
+  getEditForm (args = {}) {
+
+    const node = createNode('div', { class: window.env.querySelectors.modal.slice(1) },
+      Templates.templates.editForm)
+
+    if (args.legend) {
+      node.querySelector('legend').innerHTML = args.legend
+    } else {
+      DOMController.fillTheForm(node, args)
+    }
+
+    this.root.appendChild(node)
+    node.style.display = 'block'
+
+    const contentInput = node.querySelector('textarea[maxlength]')
+    const titleInput = node.querySelector('input[maxlength]')
+
+    this.listener([
+      [node.querySelector(window.env.querySelectors.btnDestroyModal), 'click', destroyNode, node], //Remove modal dialog
+      [node.querySelector('form'), 'submit', NotesAPI.saveNote],
+      [contentInput, 'keydown', ValidationController.lengthOnKeyUp, contentInput],
+      [titleInput, 'keydown', ValidationController.lengthOnKeyUp, titleInput],
+    ])
+  }
+
+  /**
+   *
+   * @param $form
+   * @param $el
+   */
+  static fillTheForm ($form, $el) {
+    if ($el instanceof Element) {
+      const note = NotesAPI.getNoteByID(+$el.closest('tr').dataset.id)
+
+      if (note.length === 1) {
+        for (const [key, value] of Object.entries(note[0])) {
+          const $input = $form.querySelector(`[name='${key}']`)
+
+          if ($input instanceof Element) {
+
+            if ($input.type === 'checkbox') {
+
+              if (value !== '') {
+                $input.click()
+              }
+
+            } else {
+              $input.value = value
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * The function takes single DOM element or list of them
   *
   * @param els
   * @returns {void|*}
@@ -184,15 +305,16 @@ export default class DOMController {
  listener (els) { return els[0] instanceof Element ? this.on(els) : els.forEach(el => this.on(el)) }

  /**
-   *
-   * @param args //selector, event, method, params
+   * TODO: guessed this should be rethought
+   * @param args
   */
  on (args) {

    const [selector, event, method] = args

    if (!(selector instanceof Element)) {
-      return
+      Alert.displayDialog(`Internal Error: Try reload a page`, 3000, 3)
+      return false
    }

    try {
@@ -207,7 +329,7 @@ export default class DOMController {
          evt.preventDefault()

          setTimeout(() => {
-            this.createNotesGrid(window.env.prePopulateAmount || 0)
+            document.querySelector('.nav-tab.uk-active > a').click()
          }, 300)
        }

@@ -218,26 +340,13 @@ export default class DOMController {
        }
      })

+      return true
+
    } catch (err) {
-      console.error(err)
+      Alert.displayDialog(`Error: ${err.toString()}`, 3000, 3)
+
+      return false
    }
  }

-  getEditForm (args = {}) {
-
-    const node = createNode('div', { class: window.env.querySelectors.modal.slice(1) },
-      Templates.templates.editForm)
-
-    if (args.legend) {
-      node.querySelector('legend').innerHTML = args.legend
-    }
-
-    this.root.appendChild(node)
-    node.style.display = 'block'
-
-    this.listener([
-      [node.querySelector(window.env.querySelectors.btnDestroyModal), 'click', destroyNode, node], //Remove modal dialog
-      [node.querySelector('form'), 'submit', NotesAPI.saveNote],
-    ])
-  }
 }
--- a/src/modules/NotesAPI.js
+++ b/src/modules/NotesAPI.js
@@ -1,24 +1,41 @@
 import DOMController from './DOMController'
 import Validation from './ValidationController'
+import { fakerDB } from '../faker'
+import Alert from './AlertController'

-export default class NotesAPI{
+export default class NotesAPI {
+
+  /**
+   *
+   * @returns {any}
+   * @param save
+   */
+  static getStorage (save = true) {
+    const key = window.env.localStorageKey
+    let storage = localStorage.getItem(key)
+
+    if (storage === null) {
+      storage = JSON.stringify(fakerDB(env.fakerAmount)) || '[]'
+      if (save) localStorage.setItem(key, storage)
+    }
+
+    return JSON.parse(storage)
+  }

  /**
   *
   * @param n
   * @param archive
-   * @param key
   * @returns {*}
   */
-  static getNotes (n, archive = false, key = (window.env.localStorageKey || '') ) {
+  static getNotes (n = 0, archive = false) {

-    let notes = JSON.parse(localStorage.getItem(key) || '[]')
+    let notes = NotesAPI.getStorage()

-    if( typeof archive === 'boolean' ){
-      notes = notes.filter( el => ( archive ?  el.archive === 'on' :  el.archive !== 'on' ) )
+    if (typeof archive === 'boolean') {
+      notes = notes.filter(el => (archive ? el.archive === 'on' : el.archive !== 'on'))
    }

-
    notes.sort((a, b) => {
      return new Date(a.createdAt) > new Date(b.createdAt) ? -1 : 1
    })
@@ -26,37 +43,46 @@ export default class NotesAPI{
    return n > 0 ? notes.slice(0, n) : notes
  }

+  /**
+   *
+   * @param id
+   * @returns {*}
+   */
+  static getNoteByID (id) {
+    return NotesAPI.getStorage().filter(el => el.id === id)
+  }
+
  /**
   *
   * @param n
   * @param archive
   * @returns {*[]|[]}
   */
-  static getNotesSanitized( n = 0, archive = false){
+  static getNotesSanitized (n = 0, archive = false) {
    let notes = NotesAPI.getNotes(0, archive)

-    notes = Validation.allAgainstSchema(notes, window.env.schemas.note )
+    notes = Validation.allAgainstSchema(notes, window.env.schemas.note)
    return n > 0 ? notes.slice(0, n) : notes
  }

  /**
   *
   * @param noteToStore
+   * @param action
   */
-  static saveNote (noteToStore = null) {
+  static saveNote (noteToStore = null, action = 'modal') {

-    if( Object.keys(noteToStore).length === 0 ){
+    if (Object.keys(noteToStore).length === 0) {
      noteToStore = DOMController.getFormData()
    }

-    const isValid = Validation.againstSchema( noteToStore, window.env.schemas.note )
+    const isValid = Validation.againstSchema(noteToStore, window.env.schemas.note)

-    if( isValid.status === true ){
+    if (isValid.status === true) {

      noteToStore = isValid.data
-
-      const notes = NotesAPI.getNotes()
-      const noteExists = notes.find(note => note.id === noteToStore.id)
+      const notes = NotesAPI.getNotes(0, null)
+      const noteExists = notes.find(note => note.id === +noteToStore.id)

      if (noteExists) {
        noteExists.title = noteToStore.title
@@ -70,12 +96,16 @@ export default class NotesAPI{
        noteToStore.createdAt = new Date().toISOString()
        notes.push(noteToStore)
      }
+
      NotesAPI.saveNotesToStorage(notes)

-      document.querySelector( window.env.querySelectors.noteEditForm ).closest('.modal').remove()
+      if (action === 'modal') {
+        //TODO: Need to implement in different way
+        document.querySelector(window.env.querySelectors.noteEditForm).closest('.modal').remove()
+      }

    } else {
-      DOMController.alert( 'Could save the note! ' + isValid.errors.join(', '),6666, 2 ) //, document.getElementById('modalMsgBox')
+      Alert.displayDialog('Could save the note! ' + isValid.errors.join(', '), 6000, 2) //, document.getElementById('modalMsgBox')
    }

  }
@@ -85,11 +115,35 @@ export default class NotesAPI{
   * @param id
   */
  static deleteNote (id) {
-    const notes = NotesAPI.getNotes()
+    const notes = NotesAPI.getStorage()
    const filteredNotesByID = notes.filter(note => note.id !== id)
    NotesAPI.saveNotesToStorage(filteredNotesByID)
  }

+  static unArchiveNote (id) {
+    this.archiveNote(id, '')
+  }
+
+  /**
+   *
+   * @param id
+   * @param value
+   */
+  static archiveNote (id, value = 'on') {
+
+    if (value !== '') value = 'on'
+
+    let note = NotesAPI.getNoteByID(id)
+
+    if (note.length > 0 && note[0].archive !== value) {
+      note[0].archive = value
+      NotesAPI.saveNote(note[0], 'archive')
+      return true
+    }
+
+    return false
+  }
+
  /**
   *
   * @param notes
@@ -98,4 +152,32 @@ export default class NotesAPI{
  static saveNotesToStorage (notes, key = window.env.localStorageKey) {
    localStorage.setItem(key, JSON.stringify(notes, null, 2))
  }
+
+  /**
+   *
+   * @returns {{}}
+   */
+  static getAnalytics () {
+
+    const analytics = {}
+    const data = NotesAPI.getStorage()
+    const cats = [...new Set(data.map(item => item.category))]
+
+    if (typeof cats[0] !== 'undefined') {
+      const isArchive = data.map(item => {
+        const container = {}
+        container[item.category] = item.archive
+        return container
+      })
+
+      cats.forEach((cat, i) => {
+        analytics[cat] = {
+          Active: isArchive.filter(el => el[cat] === 'on').length,
+          Archived: isArchive.filter(el => el[cat] == '').length,
+        }
+      })
+    }
+
+    return analytics
+  }
 }
--- a/src/modules/RouteController.js
+++ b/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) {}
+
+    })
+  }
+
+}
--- a/src/modules/ValidationController.js
+++ b/src/modules/ValidationController.js
@@ -1,14 +1,21 @@
+import { env } from '../helpers'
+
 export default class ValidationController {

-
-  static allAgainstSchema(array, schema) {
+  /**
+   *
+   * @param array
+   * @param schema
+   * @returns {*[]}
+   */
+  static allAgainstSchema (array, schema) {
    const objs = []

-    array.forEach( obj => {
+    array.forEach(obj => {
      const res = this.againstSchema(obj, schema)

-      if( res.status === true ){
-        objs.push( res.data )
+      if (res.status === true) {
+        objs.push(res.data)
      }

    })
@@ -38,6 +45,8 @@ export default class ValidationController {
        const field = (obj[key] || '').toString().trim()

        if (field !== '') {
+
+          if (typeof value[1] !== 'number') {
            const regex = new RegExp(value[1].toString(), 'i')

            if (regex.exec(field)) {
@@ -50,6 +59,9 @@ export default class ValidationController {
                out.error_text.push(`${key} is required`)
              }
            }
+          } else if (field.length > 0) {
+            out.data[key] = field.slice(0, value[1])
+          }

        } else {

@@ -61,9 +73,7 @@ export default class ValidationController {
      }

    } catch (e) {
-
-      console.error(e.toString())
-      out.error_text.push(`Critical error! See console`)
+      out.error_text.push(`Critical error! ` + e.toString())
    }

    out.status = !(out.error_text.length > 0 && out.errors.length > 0)
@@ -71,4 +81,18 @@ export default class ValidationController {
    return out
  }

+  /**
+   *
+   * @param node
+   */
+  static lengthOnKeyUp (node) {
+    const logger = document.querySelector(`[for='${node.id}'] > span`)
+    logger.innerHTML = `${node.value.length}/${env.schemas.note[node.getAttribute('name')][1]}`
+
+    node.value.length > env.schemas.note[node.getAttribute('name')][1]
+      ? logger.classList.add('uk-text-danger')
+      : logger.classList.remove(
+        'uk-text-danger')
+  }
+
 }
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,5 +1,4 @@
 body{
-    background-color: ghostwhite;
    margin-top: 100px;
 }

@@ -19,8 +18,12 @@ tbody td{
    display: flex;
    z-index: 2;
    position: fixed;
-    bottom: 2rem;
-    right: 2rem;
+    bottom: 0;
+    right: 0;
+    white-space: pre-wrap;
+    font-family: Consolas, monospace;
+    box-sizing: content-box;
+    overflow: hidden;
 }

 .icon{
@@ -31,12 +34,23 @@ tbody td{

 .icon.grid-control{
    cursor: pointer;
+    filter: opacity(.5);
    transition: transform 250ms;
 }

 .icon.grid-control:hover{
-    filter: brightness(0.1) sepia(1) hue-rotate(90deg) saturate(1);
-    transform: translateY(5%);
+    filter: opacity(1);
+}
+.icon.grid-control:not(.icon-unarchive):hover{
+    transform: translateY(4px);
+}
+
+.icon.grid-control.icon-unarchive:hover{
+    transform: translateY(-4px);
+}
+
+.icon.as-gray{
+    filter: grayscale(1);
 }

@keyframes fadeInAnimation {
@@ -49,7 +63,7 @@ tbody td{
 }

 .as-removing{
-    animation: fadeInAnimation ease 3s;
+    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
 }
@@ -60,17 +74,22 @@ tbody td{
 }

 .icon-edit{
-    background-image: url(../images/edit_black_48dp.svg)
+    background-image: url(../images/edit_48dp.svg)
 }

 .icon-archive{
-    background-image: url(../images/archive_black_48dp.svg)
+    background-image: url(../images/archive_48dp.svg)
+}
+.icon-unarchive{
+    background-image: url(../images/unarchive_48dp.svg)
 }

 .icon-delete{
-    background-image: url(../images/delete_black_48dp.svg)
+    background-image: url(../images/delete_48dp.svg)
 }

+
+
 /* The Modal (background) */
 #noteEditFormModal, .modal {
    display: none; /* Hidden by default */
@@ -112,3 +131,10 @@ tbody td{
    text-decoration: none;
    cursor: pointer;
 }
+
+input[readonly]{
+    outline: none;
+    border: none;
+    background: transparent;
+    color: #666;
+}
--- a/src/templates/404.js
+++ b/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>`
--- a/src/templates/Views.js
+++ b/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
 }
--- a/src/templates/editForm.js
+++ b/src/templates/editForm.js
@@ -1,12 +1,20 @@
+import { env } from '../helpers'
+
 export default `<form id="noteEditForm" class="uk-form-horizontal uk-margin-large modal-content" style="background: ghostwhite">
    <fieldset class="uk-fieldset">
-        <legend class="uk-legend">Edit Note</legend>
+        <legend class="uk-legend">
+            <span class="uk-float-right uk-text-small">
+                created: <input class="" type="text" name="createdAt" readonly="readonly" value="" placeholder="0000-00-00">
+                updated: <input type="text" name="updatedAt" readonly="readonly" value=""  placeholder="0000-00-00">
+            </span>
+            <span>Edit Note #<input class="uk-text-large" type="text" name="id" readonly="readonly" value="" placeholder="0"></span>
+        </legend>
        <div id="modalMsgBox"></div>
        
        <div class="uk-margin">
-            <label class="uk-form-label" for="formTitle">Title</label>
+            <label class="uk-form-label" for="formTitle">Title <span></span></label>
            <div class="uk-form-controls">
-                <input id="formTitle" name="title" class="uk-input" type="text" maxlength="127" placeholder="Add a title...">
+                <input id="formTitle" name="title" class="uk-input" type="text" maxlength="${env.schemas.note.title[1]}" placeholder="Add a title...">
            </div>
        </div>
        
@@ -25,7 +33,8 @@ export default `<form id="noteEditForm" class="uk-form-horizontal uk-margin-larg
            </div>
        
        <div class="uk-margin">
-            <textarea name="content" class="uk-textarea" rows="6" placeholder="Description..."></textarea>
+            <label class="uk-form-label" for="noteContentInput">Description <span></span></label>
+            <textarea id="noteContentInput" name="content" class="uk-textarea" rows="6" maxlength="${env.schemas.note.content[1]}" placeholder="Description..."></textarea>
        </div>
        
        <div class="uk-margin">
--- a/src/templates/grid.js
+++ b/src/templates/grid.js
@@ -1,20 +1,11 @@
 export default `
-    <div id="as-navbar" class="uk-background-secondary">
+    <nav id="as-navbar" class="uk-background-secondary">
        <div  class="uk-container">
-        <div class="uk-float-right uk-margin-top uk-margin-right">
-            <button id="btnCreateNote" class="uk-button uk-button-primary" data-action="getEditForm">Create Note</button>
+        <ul id="asSwitcher" class="uk-subnav uk-subnav-pill uk-margin-small-top uk-margin-small-bottom uk-padding-small"></ul>
      </div>
-      <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 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>
-    </div>
-</div>
-    <table id="notesGrid" class="uk-table uk-table-small uk-table-responsive1 uk-table-striped uk-table-hover uk-table-divider">
-        <col width="150">
+    </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">
        <col>
@@ -30,15 +21,40 @@ export default `
            <th>Content</th>
            <th>Dates</th>
            <th></th>
-            <th class="icon icon-archive"></th>
-            <th class="icon icon-delete"></th>
+            <th class="icon icon-archive as-gray"></th>
+            <th class="icon icon-delete as-gray"></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
-        <!--<tr>
-            <td colspan="8" class="uk-margin uk-text-right">
-                <button id="btnCreateNote" class="uk-button uk-button-primary" data-action="getEditForm">Create Note</button>
-            </td>
-        </tr>-->
-    </table>`
+    </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>
+                        <select id="selectPrepopulate" class="uk-input uk-form-width-medium">
+                            <option value="" selected disabled>Select amount to...</option>
+                            <option>7</option>
+                            <option>15</option>
+                            <option>25</option>
+                            <option>44</option>
+                        </select>
+                        <button id="btnPrepopulate" class="uk-button uk-button-danger uk-text-bold uk-border-rounded" data-action="prePopulate">Pre-populate</button>
+                    </div>
+                  </div>
+`
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -102,13 +102,15 @@ module.exports = {
      },
    ],
  },
-  entry: { app: './src/index' },
+  //
+  entry: { faker: './src/faker', app: './src/index'  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
  plugins: plugins,
-  devtool: mode === 'production' ? 'source-map' : (process.env.SOURCE_MAP_ENV ? 'eval-cheap-module-source-map' : false),
+  devtool: mode !== 'production' ? (process.env.SOURCE_MAP_ENV ? 'eval-cheap-module-source-map' : false) : false,
+//  devtool: 'source-map',
  optimization: {
    minimize: isProd,
    splitChunks: {
@@ -137,6 +139,11 @@ module.exports = {
    static: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 1976,
+    //disableHostCheck: true,
+    allowedHosts: [
+      'dev.amok.space',
+    ],
    liveReload: true,
+    historyApiFallback: true,
  },
 }
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#fcc343"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zm-8.89 11.92L6.5 12H10v-2h4v2h3.5l-5.15 5.15c-.19.19-.51.19-.7 0zM5.12 5l.81-1h12l.94 1H5.12z"/></svg>`
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zm-8.89 11.92L6.5 12H10v-2h4v2h3.5l-5.15 5.15c-.19.19-.51.19-.7 0zM5.12 5l.81-1h12l.94 1H5.12z"/></svg>`