headfootLogout.js

const menu = [{ name: 'Informationen', combos: [{ name: 'Projekte', link: '/project' }, { name: 'Über das M4_LAB', link: '/projectoverview?projectID=1' }], type: 'dropdown', link: '#' }, { name: 'Zusammenarbeit', combos: [{ name: 'Mailinglisten', link: '/mailinglists' }, { name: 'Videokonferenzen', link: '/videoconference.html' }/* {'name':'...', 'link':'#'} */], type: 'dropdown', link: '#' }, { name: 'Events', combos: [{ name: 'Veranstaltungen der HfT', link: 'http://www.hft-stuttgart.de/Aktuell/Veranstaltungen/' }/*, {'name':'...', 'link':'#'} */], type: 'dropdown', link: '#' }, /* {'name':'Bürgerbeteiligung', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'}, */{ name: 'Logout', combos: [], type: 'logoutbutton', link: '/logout' }]

const hft_links = [{ url: 'http://www.hft-stuttgart.de/Forschung/M4-Lab/Team/index.html/de', name: 'Kontakt' }, { url: 'http://www.hft-stuttgart.de/Hochschule/Impressum.html/de', name: 'Impressum' }, { url: 'http://www.hft-stuttgart.de/Einrichtungen/Datenschutz/Datenschutz-Homepage', name: 'Datenschutz' }]

const socialmedias = [{ url: 'https://twitter.com/InnolabM4', name: 'fa-twitter' }, { url: 'https://www.facebook.com/HfTStuttgart/', name: 'fa-facebook-square' }, { url: 'https://www.instagram.com/m4_lab/', name: 'fa-instagram' }, { url: 'https://de.linkedin.com/school/hochschule-f%C3%BCr-technik-stuttgart-%E2%80%93-university-of-applied-sciences/', name: 'fa-linkedin' }, { url: 'https://www.youtube.com/channel/UCi0_JfF2qMZbOhOnNH5PyHA', name: 'fa-youtube' }]

const footer_images = [{ src: '/images/demo/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.jpg', alt: 'Innovative Hochschule' }]

function prependChild (parent, child) {
  parent.insertBefore(child, parent.childNodes[0])
}

function userAuthenticated () {
  const params = new URLSearchParams(window.location.search)
  if (params.get('isAuthenticatedUser')) {
    return true
  } else if (document.getElementById('loginswitch')) { // relikt login via OAuth
    if (document.getElementById('loginswitch').getAttribute('authenticated') == '1') {
      return true
    }
  } else {
    return false
  }
}

function readCookie (cname) {
  const name = cname + '='
  const decodedCookie = decodeURIComponent(document.cookie)
  const ca = decodedCookie.split(';')
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i]
    while (c.charAt(0) == ' ') {
      c = c.substring(1)
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length)
    }
  }
  return ''
}

function sendRequest (URL) {
  console.log(document.cookie)
  const xhr = new XMLHttpRequest()
  xhr.open('POST', URL, true)
  const token = readCookie('XSRF-TOKEN')
  // Send the proper header information along with the request
  xhr.setRequestHeader('X-CSRF-TOKEN', token)
  xhr.send()
}

/* function head()
 * creates header and prepends it to the documents body
 */

function head () {
  const headerdiv = document.createElement('div')
  const alertdiv = document.createElement('div')
  headerdiv.classList.add('wrapper', 'row1')
  const navheader = document.createElement('header')
  navheader.id = 'header'
  navheader.classList.add('clear')
  const alertbutton = document.createElement('button')
  alertbutton.type = 'button'
  alertbutton.classList.add('close')
  alertbutton.setAttribute('data-dismiss', 'alert')
  alertbutton.innerHTML = '&times;'
  alertdiv.innerHTML = '<strong>Disclaimer</strong> This website is under construction and in prototype-phase. It is not for public use.'
  prependChild(alertdiv, alertbutton)
  alertdiv.classList.add('alert', 'alert-danger', 'alert-dismissible', 'fade', 'show', 'text-center')
  // alertdiv.style = "text-align:center;";
  navheader.appendChild(alertdiv)
  const navbar = document.createElement('nav')
  navbar.classList.add('navbar', 'navbar-default')
  const fluiddiv = document.createElement('div')
  fluiddiv.classList.add('container-fluid')
  const navbardiv = document.createElement('div')
  navbardiv.classList.add('navbar-header')
  const navelements = document.createElement('ul')
  navelements.id = 'navelemente'
  const logos = document.createElement('li')
  const link_m4lab = document.createElement('a')
  link_m4lab.href = '/'
  link_m4lab.innerHTML = "<img src='/images/demo/m4lab_logo.jpg' alt='Logo Innovationslabor M4_LAB'>"
  logos.appendChild(link_m4lab)
  navelements.appendChild(logos)
  for (let j = 0; j < menu.length; j++) {
    const headitem = document.createElement('li')
    const itemtype = menu[j].type
    headitem.classList.add('nav-item')
    const headlink = document.createElement('a')
    headlink.href = menu[j].link
    headlink.id = 'navbarDropdown' + j
    headlink.classList.add('nav-link')
    headlink.setAttribute('role', 'button')
    if (itemtype == 'dropdown') {
      headitem.classList.add('dropdown')
      headlink.classList.add('dropdown-toggle')
      headlink.setAttribute('data-toggle', 'dropdown')
      headlink.setAttribute('aria-haspopup', 'true')
      headlink.setAttribute('aria-expanded', 'false')
    }
    headlink.innerHTML = menu[j].name
    if (itemtype == 'dropdown') {
      const combodiv = document.createElement('div')
      combodiv.id = headlink.id + '_par'
      combodiv.setAttribute('aria-labelledby', headlink.id)
      combodiv.classList.add('dropdown-menu')
      for (let k = 0; k < menu[j].combos.length; k++) {
        const combolink = document.createElement('a')
        combolink.classList.add('dropdown-item')
        if (userAuthenticated() || typeof user !== 'undefined') { // either logged in the old way or logged in using SAML
          if (menu[j].combos[k].link.includes('?')) {
            combolink.href = menu[j].combos[k].link + '&isAuthenticatedUser=true'
          } else {
            combolink.href = menu[j].combos[k].link + '?isAuthenticatedUser=true'
          }
        } else {
          combolink.href = menu[j].combos[k].link
        }
        combolink.innerHTML = menu[j].combos[k].name
        combodiv.appendChild(combolink)
      }
      headitem.appendChild(combodiv)
    } else if (itemtype == 'logoutbutton') {
      /*    if(userAuthenticated()){
                headlink.innerHTML="Account";
                headlink.href="/account/";
            } */
      headlink.innerHTML = 'Logout'
      headlink.href = '/logout'
      headlink.classList.remove('nav-link')
      headlink.classList.add('btn')
      headlink.classList.add('btn-outline-danger')
    }
    headitem.appendChild(headlink)
    navelements.appendChild(headitem)
  }
  /*    let searchitem = document.createElement('li');
    searchitem.classList.add("nav-item");
    let searchinput = document.createElement('input');
    searchinput.value='Suche...'
    searchinput.type="text";
    searchinput.classList.add("nav-item-suchfeld");
    searchinput.setAttribute('onFocus', "this.value=(this.value=='search...')? '' : this.value");
    searchitem.appendChild(searchinput);
    let magnifier = document.createElement('input');
    magnifier.type="image"
    magnifier.src="/images/Lupe_grau.png";
    magnifier.width="25";
    magnifier.height="25";
    magnifier.alt="";
    magnifier.id="sf_submit";
    magnifier.value="search";
    searchitem.appendChild(magnifier);
    navelements.appendChild(searchitem); */
  navbardiv.appendChild(navelements)
  fluiddiv.appendChild(navbardiv)
  navbar.appendChild(fluiddiv)
  navheader.appendChild(navbar)
  headerdiv.appendChild(navheader)
  prependChild(document.body, headerdiv)
};

/* function foot()
 * creates footer and appends it to the documents body
 */

function foot () {
  const footerdiv = document.createElement('div')
  footerdiv.id = 'homepage'
  footerdiv.classList.add('last', 'clear')
  footerdiv.innerHTML = '<hr>'
  const containerdiv = document.createElement('div')
  containerdiv.classList.add('flex-container')
  const hftlink = document.createElement('a')
  hftlink.classList.add('col-md-3')
  hftlink.setAttribute('style', 'flex-basis: 400px;')
  hftlink.href = 'https://www.hft-stuttgart.de'
  const hftimage = document.createElement('img')
  hftimage.src = '/images/demo/hft_logo.jpg'
  hftimage.alt = 'Logo der Hochschule für Technik Stuttgart'
  hftimage.height = '75'
  hftlink.appendChild(hftimage)
  containerdiv.appendChild(hftlink)
  const contactdiv = document.createElement('div')
  contactdiv.classList.add('col-md-3', 'footer-unten')
  contactdiv.setAttribute('style', 'flex-basis:400px')
  contactdiv.innerHTML = 'Hochschule für Technik Stuttgart'
  const rowdiv = document.createElement('div')
  rowdiv.classList.add('row')
  for (let i = 0; i < hft_links.length; i++) {
    const coldiv = document.createElement('div')
    coldiv.classList.add('contactrow', 'footer-unten')
    const collink = document.createElement('a')
    collink.innerHTML = hft_links[i].name
    collink.classList.add('contact-lower')
    collink.href = hft_links[i].url
    coldiv.appendChild(collink)
    rowdiv.appendChild(coldiv)
  }
  contactdiv.appendChild(rowdiv)
  containerdiv.appendChild(contactdiv)
  const socialdiv = document.createElement('div')
  socialdiv.classList.add('col-md-3')
  socialdiv.setAttribute('style', 'flex-basis: 400px;')
  const socialrow = document.createElement('div')
  socialrow.id = 'socialmediabuttons'
  for (let j = 0; j < socialmedias.length; j++) {
    const sociallink = document.createElement('a')
    sociallink.href = socialmedias[j].url
    const socialcontent = document.createElement('i')
    socialcontent.classList.add('fab', socialmedias[j].name)
    sociallink.appendChild(socialcontent)
    socialrow.appendChild(sociallink)
    socialrow.innerHTML += '&nbsp;'
  }
  socialdiv.appendChild(socialrow)
  containerdiv.appendChild(socialdiv)
  const imagediv = document.createElement('div')
  imagediv.classList.add('col-md-3')
  imagediv.setAttribute('style', 'flex-basis:400px;')
  for (let k = 0; k < footer_images.length; k++) {
    const image = document.createElement('img')
    image.src = footer_images[k].src
    image.width = '300'
    image.height = '73'
    image.alt = footer_images[k].alt
    imagediv.appendChild(image)
  }
  containerdiv.appendChild(imagediv)
  footerdiv.appendChild(containerdiv)
  document.body.appendChild(footerdiv)
};

head()
foot()