In de vijfde week heb ik meegeholpen aan het nieuwe design dat werd aangeleverd door de UX studenten. Omdat wij zelf niet tevreden waren met dit design heb ik een mix gemaakt van ons vorige design en het nieuwe aangeleverde design.

Oude design: de opdrachtgever vond de blauwe balk te veel aandacht trekken en te veel opties hebben.

Nieuwe design: Meer focus op de data visualisatie door een strakkere uitstraling.

Daarnaast heb ik in de D3 graph de cirkels aangepast naar rechthoeken zodat het clippath die over de vormen zit geen rondingen meer heeft en daardoor een strakkere uitstraling heeft.

Oude versie

Nieuwe versie

Ook heb ik nog veel errors en kleine bugs weg gewerkt, zo zaten er nog veel bugs in het aanmaken en verwijderen van sessies. Wanneer je een nieuwe sessie aanmaakte was het niet mogelijk om hier iets mee te doen. Dit kwam omdat de HTML elementen onload werden opgehaald en daarna niet meer. Omdat ik met JavaScript nieuwe elementen aan maak werden deze niet opgehaald en kon je er niks mee. Dit heb ik opgelost door de volgende twee functies te schrijven:

export const getSessionTabs = () => {
  const sessionTabs = document.querySelectorAll('header > ul li')

  sessionTabs.forEach(session => {
    const openSession = async () => {
      if (session.className !== 'addButton') {
        const data = await getOpenedSessionData(session.className)
        updateGraph(await data)
        sessionTabs.forEach((session) => session.classList.remove('opened'))
        session.classList.add('opened')
      }
    }
    session.addEventListener('click', () => openSession())
  })
}

export const getTabCloseButtons = () => {
  const tabCloseButtons = document.querySelectorAll('header > ul li button')

  tabCloseButtons.forEach(tab => {
    const clicked = () => {
      if (tab.className) {
        deleteSession(tab.className)
        window.location.hash = ''
      }
    }
    tab.addEventListener('click', (e) => {
      if(tab.id !== 'addButton') {
        e.stopPropagation()
      }
      clicked()
    })
  })
}

Een volgende bug die optrad was dat wanneer je een sessie verwijderde ‘bubbling’ toe trad en de functies die gekoppeld zijn aan de sessie tabbladen ook uitgevoerd werden. Met gebruik van de volgende code heb ik dit opgelost:

tab.addEventListener('click', (e) => {
      if(tab.id !== 'addButton') {
        e.stopPropagation()
      }
      clicked()
    })

Ook heb ik Nora geholpen met de routes van de onboarding deze zien er nu als volgt uit:

router
    .get('/', directToOnboarding)
    .post('/', renderIndex)
    .get('/onboarding', renderOnboarding)

export const directToOnboarding = (req, res) => {
  res.redirect('onboarding')
}

export const renderIndex = (req, res) => {
  res.render('home')
}

export const renderOnboarding = (req, res) => {
    res.render('onboarding')
  }