AdvancedSearch.php

<!DOCTYPE html>
<html>
<head>
    <title>Drinkpedia</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/AdvancedSearch.css">
    <link rel="stylesheet" type="text/css" href="css/AutoComplete.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type = "text/javascript" src="scripts/DataQuery.js"></script>  
</head>

<body>
    <?php 
        include 'scripts/Functions.php';
        $ingredientsList = getAllIngredients();
    ?>

    <div id="content">
        <div id="elementInput" class="autocomplete">
            <span>
                <h2 style="margin-right: 10px;">Rechercher un aliment :</h2>
            </span>
            <span>
                <input name="ingredients" list="ingredients" value="" id="myInput" autocomplete="off" type="search" oninput="elementInputChange(this.value)" onchange="elementInputChange(this.value)" placeholder="Ingrédient">
                
                <datalist id="ingredients">
                    <?php
                        foreach($ingredientsList as $ingredient) echo '<option value="' . $ingredient . '" />' ;
                    ?>
                </datalist> 	
            </span>
            <span>
                <link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />

                <div id="toggleWanted" class="switch-toggle switch-3 switch-candy unclickable">
                    <input id="on" name="state-d" type="radio" checked="" />
                    <label for="on" onclick="setElementWanted();">✓</label>

                    <input id="na" name="state-d" type="radio" checked="checked" />
                    <label for="na" onclick="setElementNone();">/</label>

                    <input id="off" name="state-d" type="radio" />
                    <label for="off" onclick="setElementUnwanted();">✘</label>

                    <a></a>
                </div>
            </span>  
        </div>
        <div id="searchDiv">
            <button onclick="performSearch();">Rechercher</button>
        </div>
        <div id="parametersDiv">
            <h2>Autoriser des éléments manquants </h2>
            <input id="AllowMissingCheckbox" type="checkbox" onclick="allowMissingClicked(this.checked);">
            <h2>Autoriser des éléments non desirés </h2>
            <input id="AllowUnwaentedCheckbox" type="checkbox" onclick="allowUnwantedClicked(this.checked);">
            <h2>Nombre maximum de conditions non-satisfiées : </h2>
            <input type="number" id="maxUnsatifiedInput" min="0" max="20" oninput="maxUnsatisfiedChanged(this.value);" value="0">
        </div>
        <div class="chosenItemsOverview">
            
        </div>
        <div style="display: none;">
            <div id="CI_Clone" class="chosenItem">
                <img class="chosenItemImage" src="images/check.png" >
                <h2 class="chosenItemName">Example</h2>
                <button value="Clone" onclick="chosenItemCrossClicked(this)" class="chosenItemCross">X</button>
            </div>
        </div>
    </div>

    <script>
        let ingredientsOverview = document.getElementsByClassName("chosenItemsOverview")[0];
        let ingredientViewOriginal = document.getElementById('CI_Clone');
        let inputField = document.getElementById('myInput');

        let chosenIngredients = new Map();
        let allIngredients = [<?php $first = true; foreach($ingredientsList as $ingredient) { if(!$first) echo ','; else $first = false; echo '"' . $ingredient . '"'; } ?>];

        var allowUnwanted = false;
        var allowMissing = false;
        var maxUnsatisfied = 0;

        function allowMissingClicked(status)
        {
            allowMissing = (status == 'checked');
        }

        function allowUnwantedClicked(status)
        {
            allowUnwanted = (status == 'checked');
        }

        function maxUnsatisfiedChanged(value)
        {
            maxUnsatisfied = value;
        }

        function elementInputChange(val)
        {
            var toggleSwitch = document.getElementById('toggleWanted');
            if(allIngredients.includes(val))
            {
                toggleSwitch.classList.remove('unclickable');
                if(chosenIngredients.get(val) == 'wanted')
                {
                    document.getElementById('on').checked = "checked";
                    document.getElementById('na').checked = "";
                    document.getElementById('off').checked = "";
                }
                else if(chosenIngredients.get(val) == 'unwanted')
                {
                    document.getElementById('on').checked = "";
                    document.getElementById('na').checked = "";
                    document.getElementById('off').checked = "checked";
                }
            }
            else
            {
                toggleSwitch.classList.add('unclickable');
                document.getElementById('on').checked = "";
                document.getElementById('na').checked = "checked";
                document.getElementById('off').checked = "";
            }
        }

        function setElementWanted()
        {
            var element = document.getElementById('myInput').value;
            setElementWantedByName(element);
        }

        function setElementWantedByName(name)
        {
            chosenIngredients.set(name, 'wanted');
            appendIngredient(name, 'wanted');
            if(inputField.value == name) elementInputChange(name);
        }

        function setElementNone()
        {
            var element = document.getElementById('myInput').value;
            setElementNoneByName(element);
        }

        function setElementNoneByName(name)
        {
            chosenIngredients.delete(name);
            removeIngredient(name);
            if(inputField.value == name) elementInputChange(name);
        }

        function setElementUnwanted()
        {
            var element = document.getElementById('myInput').value;
            setElementUnwantedByName(element);
        }

        function setElementUnwantedByName(name)
        {
            chosenIngredients.set(name, 'unwanted');
            appendIngredient(name, 'unwanted');
            if(inputField.value == name) elementInputChange(name);
        }

        function performSearch()
        {
            var wanted = new Array();
            var unwanted = new Array();
            chosenIngredients.forEach((value, key) => {
                if(value == 'wanted') wanted.push(key);
                else if(value == 'unwanted') unwanted.push(key);
            });
            getRecipes(wanted, unwanted, maxUnsatisfied, allowMissing, allowUnwanted, function(e) {
                if(maxUnsatisfied > 0) notifyParentScore(e);
                else notifyParent(e);
            });
        }

        function notifyParent(e) // Send a message to the parent window, asking to display the recipe #e
        {
            var data = {
                event: 'recipelist',
                value: e
            };
            window.top.postMessage(data, [data.event, data.value]);
        }
        
        function notifyParentScore(e) // Send a message to the parent window, asking to display the recipe #e
        {
            var data = {
                event: 'recipelistscore',
                value: e
            };
            window.top.postMessage(data, [data.event, data.value]);
        }

        function appendIngredient(ing, status)
        {
            let new_id = 'CI_' + ing;
            if(document.getElementById(new_id)) removeIngredient(ing);

            let clone = ingredientViewOriginal.cloneNode(true);
            clone.id = 'CI_' + ing;
            let cross = clone.getElementsByClassName('chosenItemCross')[0];
            let name = clone.getElementsByClassName('chosenItemName')[0];
            let image = clone.getElementsByClassName('chosenItemImage')[0];

            cross.value = ing;
            name.innerHTML = ing;

            if(status == 'unwanted') image.src = 'images/uncheck.png';

            ingredientsOverview.appendChild(clone);
        }

        function removeIngredient(ing)
        {
            ingredientsOverview.removeChild(document.getElementById('CI_' + ing));
            if(inputField.value == ing) document.getElementById('na').click();
        }

        function chosenItemCrossClicked(node)
        {
            removeIngredient(node.value);
        }

    </script>
</body>

</html>