Unnamed Fossil Project

Check-in [35b0eed1a0]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Start working up filter text
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256:35b0eed1a0ef4bb20ba3523162ab46fadbb8a29b12c4dd0d53a400c05fafce56
User & Date: vandys 2019-06-22 17:28:10
Context
2019-06-22
18:23
Filtering bringup check-in: 3848b64d45 user: vandys tags: trunk
17:28
Start working up filter text check-in: 35b0eed1a0 user: vandys tags: trunk
2019-06-21
23:55
Get item changes and updating with visual cues working. check-in: 470fc733db user: vandys tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to html/shopr.html.

27
28
29
30
31
32
33
34

35
36
37
38
39
40
41

<div id="scrlist" style="display: none;">
 <div id="scrlist2">
  <span style="background: white;">+RGY</span>
  <span id="spanR" onclick="filtR();">R</span>
  <span id="spanG" onclick="filtG();">G</span>
  <span id="spanY" onclick="filtY();">Y</span>
  <input type="text" id="ifilter" placeholder="Choose or Add">

  <span>+</span>
  <img src="/imgs/menu.svg" style="float: right;" />
 </div>
 <div id="items">
 </div>
</div>








|
>







27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<div id="scrlist" style="display: none;">
 <div id="scrlist2">
  <span style="background: white;">+RGY</span>
  <span id="spanR" onclick="filtR();">R</span>
  <span id="spanG" onclick="filtG();">G</span>
  <span id="spanY" onclick="filtY();">Y</span>
  <input type="text" id="ifilter"
   onkeyup="update_filter();" placeholder="Choose or Add">
  <span>+</span>
  <img src="/imgs/menu.svg" style="float: right;" />
 </div>
 <div id="items">
 </div>
</div>

Changes to js/shopr.js.

12
13
14
15
16
17
18


19
20
21
22
23
24
25
26
...
142
143
144
145
146
147
148






149
150
151
152
153
154
155
...
169
170
171
172
173
174
175







176
177
178
179
180
181
182
...
297
298
299
300
301
302
303






























304
305
306
307
308
309
310
// Current list name, null if need to choose one
var cur_list = null;

// Current generation of cur_list we hold
var curgen = null;

// List of elems as last delivered by the server


var cur_names = null;

// Currently displayed page elem
var curdiv = null;
function setcur(e) {
    if (curdiv != null) {
	curdiv.style.display = "none";
    }
................................................................................
    // This is what'll be on the screen now
    cur_names = ls;

    // Clear old list display
    while (items.firstChild != null) {
	items.removeChild(items.firstChild);
    }







    // Display received items
    for (let i = 0; i < ls.items.length; ++i) {
	const l = ls.items[i];

	// Red/Green/Yellow tappables
	// The element "id" is item<row>_<col> so click
................................................................................
	} else if (l.idx == 1) {
	    s2.textContent = l.name;
	    s2.classList.add("isel");
	} else {
	    s3.textContent = l.name;
	    s3.classList.add("isel");
	}








	// Add to DOM
	items.appendChild(s1);
	items.appendChild(s2);
	items.appendChild(s3);

	// Make easy to reference for future updates
................................................................................
	url += ("&gen=" + curgen.toString());
    }

    // Requesting URL, including authentication
    req.open("GET", url);
    req.send();
}































// Choose a list
function sel_list(e) {
    cur_list = e.currentTarget.textContent;
    cur_names = null;
    paint_list();
    return false;







>
>
|







 







>
>
>
>
>
>







 







>
>
>
>
>
>
>







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
...
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
...
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
...
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
// Current list name, null if need to choose one
var cur_list = null;

// Current generation of cur_list we hold
var curgen = null;

// List of elems as last delivered by the server
// {name: "listname", items: [item1, ...], gen: <int>}
//  item: {name: "item name", idx: <int>}
var cur_names = null, show_names = null;

// Currently displayed page elem
var curdiv = null;
function setcur(e) {
    if (curdiv != null) {
	curdiv.style.display = "none";
    }
................................................................................
    // This is what'll be on the screen now
    cur_names = ls;

    // Clear old list display
    while (items.firstChild != null) {
	items.removeChild(items.firstChild);
    }

    // Filter, if applied then case insensitive
    let ifv = null;
    if (ifilter.value) {
	ifv = ifilter.value.toLowerCase();
    }

    // Display received items
    for (let i = 0; i < ls.items.length; ++i) {
	const l = ls.items[i];

	// Red/Green/Yellow tappables
	// The element "id" is item<row>_<col> so click
................................................................................
	} else if (l.idx == 1) {
	    s2.textContent = l.name;
	    s2.classList.add("isel");
	} else {
	    s3.textContent = l.name;
	    s3.classList.add("isel");
	}

	// Currently filtered?  Hide it.
	if (ifv && !l.name.toLowerCase().includes(ifv)) {
	    s1.style.display =
	    s2.style.display =
	    s3.style.display = "none";
	}

	// Add to DOM
	items.appendChild(s1);
	items.appendChild(s2);
	items.appendChild(s3);

	// Make easy to reference for future updates
................................................................................
	url += ("&gen=" + curgen.toString());
    }

    // Requesting URL, including authentication
    req.open("GET", url);
    req.send();
}

// Typing in our "filter" input field, so adjust what
//  we show.
// Note, our search is case insensitive, but we keep the input in
//  its typed case, so that if they're entering a new item name it
//  can be added in the original input format.
function update_filter() {
    if ((cur_names == null) || (cur_names.items.length == 0)) {
	return;
    }

    // Adjust what's hidden based on latest input
    let ifv = null;
    if (ifilter.value) {
	ifv = ifilter.value.toLowerCase();
    }
    let showing = null;
    for (let i of cur_names.items) {
	if ((ifv == null) || i.name.toLowerCase.contains(ifv)) {
	    showing = "inline";
	} else {
	    showing = "none";
	}

	// Update display attribute
	for (let e of i.elems) {
	    e.style.display = showing;
	}
    }
}

// Choose a list
function sel_list(e) {
    cur_list = e.currentTarget.textContent;
    cur_names = null;
    paint_list();
    return false;