In week vier ben ik aan de slag gegaan met het design die we van de UX’ers hadden gekregen. Hierin is het Dashboard die ik in de eerste week heb gemaakt gedeeltelijk geïmplementeerd. Het dashboard had ik voornamelijk serverside geschreven en gerenderd. Voor het nieuwe ontwerp die gebruik maakt van een tabblad pattern moest deze code naar de client verplaatst worden voor een prettigere gebruikers ervaring.

Het was even omschakelen voor mij omdat ik normaal gesproken de tabblad elementen zou renderen door middel van een template engine op de server. Omdat dit nu client side moest maak ik met JavaScript zelf de elementen aan. Dit doe ik met de volgende code:

const sessionUl = document.querySelector('header > ul')
  const sessionId = await fetchDataFromAPI('POST', '<https://bubble-machine-api-dummy.herokuapp.com/rest/session>')
  const newSession = document.createElement('li')
  const sessionNumber = document.createTextNode(`Session: ${await sessionId.sessionId}`)
  const sessionLink = document.createElement('a')
  sessionLink.href = `#${await sessionId.sessionId}`
  sessionLink.appendChild(sessionNumber)
  newSession.appendChild(sessionLink)

  newSession.setAttribute('class', `${await sessionId.sessionId} opened`)
    const sessionTabs = document.querySelectorAll('header > ul li')
    sessionTabs.forEach((session) => session.classList.remove('opened'))
  
  const newButton = document.createElement('button')
  const buttonText = document.createTextNode('x')
  newButton.appendChild(buttonText)
  newButton.setAttribute('class', sessionId.sessionId )
  newSession.appendChild(newButton)

Deze manier van elementen creëren voelt voor mij toch wat omslachtig, door op deze manier de elementen aan te maken is het wel mogelijk om zonder page reload nieuwe sessies te starten.

Ook het verwijderen van een sessie moest gerealiseerd worden, ook dit doe ik met client side JavaScript. Met een eventlistener check ik welke sessie wordt aangeklikt zodat ik deze vervolgens kan verwijderen:

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', () => clicked()
	)}

export const deleteSession = async (sessionID) => {
  await fetchDataFromAPI('DELETE', `https://bubble-machine-api-dummy.herokuapp.com/rest/session/${sessionID}`)
  const deleteTab = document.getElementsByClassName(sessionID)
  deleteTab[0].remove()
}

Om er voor te zorgen dat de juiste sessie wordt geopened wanneer je op een tab klikt heb ik een Hash in de url gebruikt. Wanneer je op een tab klikt wordt de hash aangepast naar het sessie nummer. Vervolgens kunnen vanuit de verschillende functies deze hash gebruikt worden om de functie voor de goede sessie uit te voeren.

window.location.hash = sessionId.sessionId

Uiteindelijk zag deze versie er als volgt uit:

Er zitten hier nog dubbele knoppen in, deze zijn later in deze week door Nora aangepast in de CSS waarnaar we op de volgende uitstraling kwamen:

Daarnaast heb ik nog gekeken of ik items kon verstoppen als deze geen connecties meer hadden met personen, helaas is mij dit niet gelukt.