index.jade

doctype html
html
  head
    title express-monoicle
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css', integrity='sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi', crossorigin='anonymous')
    
    style.
      .container-fluid {
        margin-top: 25px;
      }

      .card {
        display: inline-block;
        width: 98%;
      }

      .tag {
        text-align: right;
      }

      .tag-method {
        margin-right: 5px;
      }

      #routes-container {
        box-shadow: 10px 10px 5px #f2f2f2;
      }

      #routes {
        margin: 10px;
      }

      #routes li:hover {
        cursor: pointer;
      }

      .pill-ctx {
        margin: 0;
        padding: 0;
      }

      #middlewares, #middlewares-header {
        display: flex;
        flex-flow: row wrap;
        list-style-type: none;
      }

      #middlewares li, #middlewares-header li {
        text-align: center;
        width: 50%;
      }

      #middlewares-header li {
        font-size: 2em;
        font-weight: bolder;
      }
  body
    .container-fluid
      .col-xs-4
        img.img-fluid(src="http://res.cloudinary.com/lc8bqflyz/image/upload/v1478126894/Screen_Shot_2016-11-02_at_2.43.29_PM_nmvgoc.png")
        #routes-container
          ul#routes.list-group
      .col-xs-8
        ul#middlewares-header
          li request
          li response
        ul#middlewares

  script.
    //- Data from server
    const data = !{JSON.stringify(globalMonoStore)}
    
    // Set up references to DOM nodes
    const routesContainerEl = document.getElementById('routes-container')
    const routesListEl = document.getElementById('routes')
    const middlewaresHeaderEl = document.getElementById('middlewares-header')
    const middlewaresListEl = document.getElementById('middlewares')

    const init = () => {
      //- Dynamically sets the positioning of our elements
      routesContainerEl.style.height = `${window.innerHeight - 200}px`
      middlewaresHeaderEl.style['margin-top'] = `${routesContainerEl.offsetTop - 65}px`

      for (let i = data.length - 1; i >= 0; i--) {
        routesListEl.appendChild(createRouteEl(data[i], i))
      }
    }

    routesListEl.addEventListener('click', e => {
      if (e.target.localName === 'li') {
        const idx = e.target.id.replace(/.+-/, '')
        const { changes, path } = data[idx]

        resetMiddlewares()

        let count = 0
        for (const key in changes.req) {
          if (+key > count) count = +key
        }

        for (const key in changes.res) {
          if (+key > count) count = +key
        }

        for (let position = 1; position <= count; position++) {
          const fnName = changes.req[0].route.stack[position - 1].name
          middlewaresListEl.appendChild(createMiddlewareEl(changes.req[position], fnName, position))
          middlewaresListEl.appendChild(createMiddlewareEl(changes.res[position], fnName, position))
        }
      }
    })

    // DOM Helpers
    const resetMiddlewares = () => middlewaresListEl.innerHTML = ''

    // DOM Creators
    const createRouteEl = ({ changes, method, path }, idx) => {
      const routeEl = document.createElement('li')
      const routeContent = document.createTextNode(path)
      routeEl.id = `route-${idx}`
      routeEl.className = 'list-group-item'

      //- Left pills
      const methodEl = document.createElement('span')
      const methodContent = document.createTextNode(method)

      switch (method) {
        case 'GET':
          methodEl.className = 'tag tag-success tag-method label-pill float-xs-left'
          break
        case 'POST':
          methodEl.className = 'tag tag-warning tag-method label-pill float-xs-left'
          break
        case 'PUT':
          methodEl.className = 'tag tag-info tag-method label-pill float-xs-left'
          break
        case 'DELETE':
          methodEl.className = 'tag tag-primary tag-method label-pill float-xs-left'
          break
        default:
          methodEl.className = 'tag tag-default tag-method label-pill float-xs-left'
      }

      methodEl.appendChild(methodContent)

      //- Right pills
      const counterEl = document.createElement('span')

      const counterReqEl = document.createElement('p')
      const counterReqContent = document.createTextNode(`req: ${Object.keys(changes.req).length - 1}`)
      counterReqEl.className = 'pill-ctx'
      counterReqEl.appendChild(counterReqContent)

      //- Fix bug with including empty res object
      let lastKey
      let keyCount = 0
      for (const key in changes.res) {
        lastKey = key
        keyCount++
      } 
      
      const counterResEl = document.createElement('p')
      let counterResContent;
      if (Object.keys(changes.res[lastKey]).length < 1) {
        counterResContent = document.createTextNode(`res: ${keyCount - 2}`)
      } else {
        counterResContent = document.createTextNode(`res: ${keyCount - 1}`)
      }
      counterResEl.className = 'pill-ctx'
      counterResEl.appendChild(counterResContent)

      counterEl.className = 'tag bg-primary label-pill float-xs-right'
      counterEl.appendChild(counterReqEl)
      counterEl.appendChild(counterResEl)

      routeEl.appendChild(methodEl)
      routeEl.appendChild(counterEl)
      routeEl.appendChild(routeContent)

      return routeEl
    }

    const createMiddlewareEl = (changes, path, position) => {
      const middlewareEl = document.createElement('li')

      const card = document.createElement('div')
      card.className = 'card'

      const cardBlock = document.createElement('div')
      cardBlock.className = 'card-block'

      //- Create req objects
      const middlewareNameEl = document.createElement('h4')
      const middlewareNameContent = document.createTextNode(`${path} [${position}]`)
      middlewareNameEl.className = 'card-title'
      middlewareNameEl.appendChild(middlewareNameContent)
      cardBlock.appendChild(middlewareNameEl)

      for (const prop in changes) {
        //- Shows objects
        let value = changes[prop]
        if (typeof value === 'object') value = JSON.stringify(value)

        const changedItemEl = document.createElement('p')
        const changedItemContent = document.createTextNode(`${prop}: ${value}`)
        changedItemEl.className = 'card-text'
        changedItemEl.appendChild(changedItemContent)
        cardBlock.appendChild(changedItemEl)
      }

      card.appendChild(cardBlock)
      middlewareEl.appendChild(card)

      return middlewareEl
    }

    init()