JS Arbetsförmedlingen UPDATE

// Denna fil ska innehålla er lösning till projektuppgiften.

"use strict";

// Variables

var content = document.getElementById("info"); // where the job advertisements will show

var searchbuttonEl = document.getElementById("searchbutton");
var leftmenu = document.getElementById("mainnavlist"); // left-hand menu where all län will appear
var selectbox = document.getElementById("searchlan"); // select box where all län will appear

var onlyitJob = "";  // empty variable needed for the function showJob. In global scope because otherwise this variable cannot be found if the variable
                     // is only in the local scope of function showJob


var i; // used later in loops for iteration
var baseUrl = "http://api.arbetsformedlingen.se/af/v0"; // base url where further arguments are being attached to

// Event Listeners


window.onload = loadLan; // when window is loaded, the function loadData will fire
searchbuttonEl.addEventListener("click", searchJob , false); // click on the search button and the function searchJob will fire

selectbox.addEventListener("change", showJob, false); //choose a lan from the select box, then the job advertisements of this lan will show
leftmenu.addEventListener("click", showJob, false); // click on the left-hand menu, then the job advertisements will show


// Function to get all län to show in the left-hand menu as well as in the select box

function loadLan() {
    // AJAX request
    var xhr = new XMLHttpRequest();

        xhr.onload = function() {
            // check if server response is OK
            if(xhr.status === 200) {
                var jsonStr = JSON.parse(xhr.responseText);
                var allLan = jsonStr.soklista.sokdata; //all län are being stored in this variable
                //var leftmenu = document.getElementById("mainnavlist"); // left-hand menu where all län will appear
                //var selectbox = document.getElementById("searchlan"); // select box where all län will appear

                // Loop through all län

            for(i=0; i<allLan.length; i++) {
                // Create new element
                leftmenu.innerHTML += "<li id='"+ allLan[i].id + "'>" + allLan[i].namn + " (" + allLan[i].antal_ledigajobb + ")"+ "</li>";
                selectbox.innerHTML += "<option value='"+ allLan[i].id+"'>" + allLan[i].namn + "</option>"; // All län will show in the select box on top of the page
            }
        } else if (xhr.status == 400) {
            alert('Error: 400');
        }
        else {
            alert('Error: Something else than 200 was returned');
        }
    }
// Send AJAX request
xhr.open('GET', baseUrl+"/platsannonser/soklista/lan", true);
xhr.send();
}

function showJob() {
    // AJAX request
    var xhr = new XMLHttpRequest();

    xhr.onload = function() {
        //check if server response is OK
        if(xhr.status === 200) {
            var jsonStr = JSON.parse(xhr.responseText);
            var allJob = jsonStr.matchningslista.matchningdata; // all job advertisements are being stored in this variable



            var checkitJob = document.getElementById("onlyit").checked; // Checkbox of "show only IT" is checked
            var onlyitJob = "";

            if(checkitJob === true) {
                onlyitJob = "&yrkesomradeid=3"; // extra argument in the AJAX request url if checkbox of "show only IT" is checked
            } else { // if the checkbox of "show only IT" is not checked, onlyitJob has no value
                onlyitJob = "";
            }


            for(i=0; i<allJob.length; i++) { // shows
            content.innerHTML += "<article>" + "<h3>" + allJob[i].annonsrubrik + "</h3>" + "<h4>" + allJob[i].yrkesbenamning + "</h4>"
                              + "<p>" + "<strong>" + "Anställningstyp: " + "</strong>" + allJob[i].anstallningstyp + "</p>" + "<br />"
                              + "<p>" + "<strong>" + "Antal platser: " + "</strong>" + allJob[i].antalplatser + "</p>" + "<br />"
                              + "<p>" + "<strong>" + "Publiceringsdatum: " + "</strong>" + allJob[i].publiceraddatum + "</p>" + "<br />"
                              + "<p>" + "<strong>" + "Sista ansökningsdag: " + "</strong>" + allJob[i].sista_ansokningsdag + "</p>" + "<br />"
                              + '<a href="' + allJob[i].annonsurl + '" class="btn" target="_blank">Läs Mer</a>' + "</article>";

            }


        } else if (xhr.status == 400) {
            alert('Error: 400');
        }
        else {
            alert('Error: Something else than 200 was returned');
        }
    }
    // Send AJAX request
    var lanid = document.getElementById("searchlan").value; // to get the ID of the chosen län from the select box
    var numrow = document.getElementById("numrows").value; // the value, i.e. the number, that is shown in "Max antal"
    var url = baseUrl + "/platsannonser/matchning?lanid="+lanid+onlyitJob+"&antalrader="+numrow;

    xhr.open('GET', url, true);
    xhr.send();
}

function searchJob() {

    content.innerHTML=""; // the area where the job advertisements are shown is emptied (otherwise former search results will still be shown)
    var input = document.getElementById("searchText").value; //the value of whatever someone has typed into the search box
    // new AJAX request
    var xhr = new XMLHttpRequest();

    xhr.onload = function() {
        //check if server response is OK
        if(xhr.status === 200) {
            var jsonStr = JSON.parse(xhr.responseText);
            var joblist = jsonStr.soklista.sokdata; // all jobs are listed in this variable

            for(i=0;i<joblist.length;i++) {
                content.innerHTML += "<article>" + "<h3>" + joblist[i].namn + "</h3>" + "<br />"
                                  + "<p>" + "Antal platsannonser: " + joblist[i].antal_platsannonser + "</p>" + "<br />"
                                  + "<p>" + "Antal lediga jobb: " + joblist[i].antal_ledigajobb + "</p>" + "</article>";
            }
        } else if (xhr.status == 400) {
            alert('Error: 400');
        }
        else {
            alert('Error: Something else than 200 was returned');
        }

}
    xhr.open('GET', baseUrl + "/platsannonser/soklista/yrken"+input,true); //a searchlist will show all the jobs that start with the same letters as those typed into "input"
    xhr.send();
}