AdvancedSearch.php 8.64 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
    <?php 
        include 'scripts/Functions.php';
        $ingredientsList = getAllIngredients();
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
16
    ?>
17

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
        </div>
        <div id="searchDiv">
            <button onclick="performSearch();">Rechercher</button>
        </div>
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
52
53
54
55
56
57
58
59
60
        <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">
61
62
            
        </div>
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
63
64
65
66
67
68
69
        <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>
70
    </div>
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
71
72

    <script>
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
73
74
75
76
        let ingredientsOverview = document.getElementsByClassName("chosenItemsOverview")[0];
        let ingredientViewOriginal = document.getElementById('CI_Clone');
        let inputField = document.getElementById('myInput');

77
        let chosenIngredients = new Map();
78
79
80
81
82
        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;
83

ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
        function allowMissingClicked(status)
        {
            allowMissing = (status == 'checked');
        }

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

        function maxUnsatisfiedChanged(value)
        {
            maxUnsatisfied = value;
        }

99
100
101
102
103
        function elementInputChange(val)
        {
            var toggleSwitch = document.getElementById('toggleWanted');
            if(allIngredients.includes(val))
            {
104
                toggleSwitch.classList.remove('unclickable');
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
                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
            {
120
                toggleSwitch.classList.add('unclickable');
121
122
123
124
125
126
127
128
129
                document.getElementById('on').checked = "";
                document.getElementById('na').checked = "checked";
                document.getElementById('off').checked = "";
            }
        }

        function setElementWanted()
        {
            var element = document.getElementById('myInput').value;
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
130
131
132
133
134
135
136
137
            setElementWantedByName(element);
        }

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

        function setElementNone()
        {
            var element = document.getElementById('myInput').value;
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
143
144
145
146
147
148
149
150
            setElementNoneByName(element);
        }

        function setElementNoneByName(name)
        {
            chosenIngredients.delete(name);
            removeIngredient(name);
            if(inputField.value == name) elementInputChange(name);
151
152
153
154
155
        }

        function setElementUnwanted()
        {
            var element = document.getElementById('myInput').value;
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
156
157
158
159
160
161
162
163
            setElementUnwantedByName(element);
        }

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

166
167
168
169
170
171
172
173
174
        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) {
175
176
                if(maxUnsatisfied > 0) notifyParentScore(e);
                else notifyParent(e);
177
178
179
180
181
182
183
            });
        }

        function notifyParent(e) // Send a message to the parent window, asking to display the recipe #e
        {
            var data = {
                event: 'recipelist',
184
185
186
                value: e,
                showScore: 'false',
                title: 'Résultats de la recherche :'
187
            };
188
            window.parent.postMessage(data, [data.event, data.value, data.showScore, data.title]);
189
        }
190
191
192
193
        
        function notifyParentScore(e) // Send a message to the parent window, asking to display the recipe #e
        {
            var data = {
194
195
196
197
                event: 'recipelist',
                value: e,
                showScore: 'false',
                title: 'Résultats de la recherche :'
198
            };
199
            window.parent.postMessage(data, [data.event, data.value, data.showScore, data.title]);
200
        }
201

ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
        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);
        }

ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
232
    </script>
ALGLAVE Ivan's avatar
ALGLAVE Ivan committed
233
234
235
</body>

</html>