AdvancedSearch.php 4.96 KB
Newer Older
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
    <title>Drinkpedia</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/AdvancedSearch.css">
7
    <link rel="stylesheet" type="text/css" href="css/AutoComplete.css">
8
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
9
    <script type = "text/javascript" src="scripts/DataQuery.js"></script>  
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
10
11
12
</head>

<body>
13
14
15
16
17
    <?php 
        include 'scripts/Functions.php';
        $ingredientsList = getAllIngredients();
        ?>

18
    <div id="content">
19
        <div id="elementInput" class="autocomplete">
20
            <span>
21
                <h2 style="margin-right: 10px;">Rechercher un aliment :</h2>
22
23
            </span>
            <span>
24
25
26
27
28
29
30
                <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> 	
31
32
33
34
            </span>
            <span>
                <link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" />

35
                <div id="toggleWanted" class="switch-toggle switch-3 switch-candy unclickable">
36
37
38
39
40
41
42
43
44
45
46
47
                    <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>  
48
49
50
51
52
53
54
        </div>
        <div id="searchDiv">
            <button onclick="performSearch();">Rechercher</button>
        </div>
        <div id="chosenItemsOverview">
            
        </div>
55
    </div>
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
56
57

    <script>
58
        let chosenIngredients = new Map();
59
60
61
62
63
        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;
64
65
66
67
68
69

        function elementInputChange(val)
        {
            var toggleSwitch = document.getElementById('toggleWanted');
            if(allIngredients.includes(val))
            {
70
                toggleSwitch.classList.remove('unclickable');
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
                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{

                }
            }
            else
            {
89
                toggleSwitch.classList.add('unclickable');
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
                document.getElementById('on').checked = "";
                document.getElementById('na').checked = "checked";
                document.getElementById('off').checked = "";
            }
        }

        function setElementWanted()
        {
            var element = document.getElementById('myInput').value;
            chosenIngredients.set(element, 'wanted');
        }

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

        function setElementUnwanted()
        {
            var element = document.getElementById('myInput').value;
            chosenIngredients.set(element, 'unwanted');
        }

114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
        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) {
                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]);
        }

ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
136
    </script>
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
137
138
139
</body>

</html>