TheCocktailBible/switchSearch.js at main · Whyiest/TheCocktailBible · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// Variable stored know what we are looking for
sessionStorage.setItem('pageState', 'name');


function processRequest () {
    const urlParams = new URLSearchParams(window.location.search);
    const searchValue = urlParams.get('s');
    if (searchValue == "ingredient") {
        switchSearch();
    }

}

function switchSearch() {

    let searchBarNamePlaceholder = "";
    let searchBarIngredientPlaceholder = "";
    let buttonNamePlaceholder = "";
    let buttonIngredientPlaceholder = "";
    let resultMessagePlaceholder = "";

    let searchButtonTextArea = document.getElementById("switcher-text");
    let searchBar = document.getElementById("search-bar");
    let searchButton = document.getElementById("search-button");
    let resultMessageArea = document.getElementById("result-message");

    // Setting values -----------

    if (localStorage.getItem('lang') === 'fr') {
        searchBarNamePlaceholder = "Cherchez un cocktail par nom";
        searchBarIngredientPlaceholder = "Cherchez un cocktail par ingredient";
        buttonIngredientPlaceholder = "Cherchez par <span class=\"switch-state-color\">ingredients</span>";
        buttonNamePlaceholder = "Cherchez par <span class=\"switch-state-color\">nom</span>";
        resultMessagePlaceholder = "Cherche un cocktail avec la barre au-dessus !";
    }
    else {
        searchBarNamePlaceholder = "Search a cocktail by name";
        searchBarIngredientPlaceholder = "Search a cocktail by ingredient";
        buttonIngredientPlaceholder = "Search by <span class=\"switch-state-color\">ingredients</span>";
        buttonNamePlaceholder = "Search by <span class=\"switch-state-color\">name</span>";
        resultMessagePlaceholder = "Search a cocktail with the field above !";
    }

    // Switch element -----------

    if (sessionStorage.getItem('pageState') === 'ingredient') {


        resultGrid.innerHTML = "";
        searchButtonTextArea.innerHTML = buttonIngredientPlaceholder;
        searchBar.placeholder = searchBarNamePlaceholder;
        resultMessageArea.innerHTML = resultMessagePlaceholder;
        searchButton.setAttribute('onclick','getCocktailsByName()')
        sessionStorage.setItem('pageState', 'name');
    }
    else if (sessionStorage.getItem('pageState') === 'name') {

        resultGrid.innerHTML = "";
        searchButtonTextArea.innerHTML = buttonNamePlaceholder  ;
        searchBar.placeholder = searchBarIngredientPlaceholder;
        searchButton.setAttribute('onclick','getCocktailsByIngredient()')
        sessionStorage.setItem('pageState', 'ingredient');
    }
    else {
        alert("Critical error, refreshing page...");
        window.location.reload();
    }
    return false
}