Further pz2.js updates.
[pazpar2-moved-to-github.git] / www / pz2_js / client_pz2.js
1 // very simple client that shows a basic usage of the pz2.js
2
3 // create a parameters array and pass it to the pz2's constructor
4 // then register the form submit event with the pz2.search function
5
6 my_paz = new pz2( { "onshow": my_onshow,
7                     "onstat": my_onstat,
8                     "onterm": my_onterm,
9                     "termlist": "subject,author",
10                     "onbytarget": my_onbytarget,
11                     "onrecord": my_onrecord } );
12
13 // wait until the DOM is rady (could have been defined in the HTML)
14 $(document).ready( function() { document.search.onsubmit = onFormSubmitEventHandler; } );
15
16 function onFormSubmitEventHandler() {
17     my_paz.search(document.search.query.value, 15, 'relevance');
18     return false;
19 }
20 //
21 // pz2.js event handlers:
22 //
23 function my_onshow(data) {
24     var body = document.getElementById("body");
25     body.innerHTML = "";
26     for ( i = 0; i < data.hits.length; i++) {
27         var hit = data.hits[i];
28         body.innerHTML += '<div id="' + hit.recid + '" onclick="my_paz.record(this.id)"><span>' + i + 
29                           '. </span><span><b>' + hit["md-title"] +
30                           ' </b></span> by <span><i>' + hit["md-author"] + '</i></span></div>';
31     }
32     body.innerHTML += "<hr/>";
33     body.innerHTML += '<div>active clients: ' + data.activeclients + '</div>' +
34                      '<div>merged: ' + data.merged + '</div>' +
35                      '<div>total: ' + data.total + '</div>' +
36                      '<div>start: ' + data.start + '</div>' +
37                      '<div>num: ' + data.num + '</div>';
38 }
39
40 function my_onstat(data) {
41     var stat = document.getElementById("stat");
42     stat.innerHTML = '<div>active clients: ' + data.activeclients + '</div>' +
43                      '<div>hits: ' + data.hits + '</div>' +
44                      '<div>records: ' + data.records + '</div>' +
45                      '<div>clients: ' + data.clients + '</div>' +
46                      '<div>searching: ' + data.searching + '</div>';
47 }
48
49 function my_onterm(data) {
50     var termlist = document.getElementById("termlist");
51     termlist.innerHTML = "";
52     termlist.innerHTML  += "<div><b> --Author-- </b></div>";
53     for ( i = 0; i < data.author.length; i++ ) {
54         termlist.innerHTML += '<div><span>' + data.author[i].name + ' </span><span> (' + data.author[i].freq + ')</span></div>';
55     }
56     termlist.innerHTML += "<hr/>";
57     termlist.innerHTML += "<div><b> --Subject-- </b></div>";
58     for ( i = 0; i < data.subject.length; i++ ) {
59         termlist.innerHTML += '<div><span>' + data.subject[i].name + ' </span><span> (' + data.subject[i].freq + ')</span></div>';
60     }
61 }
62
63 function my_onrecord(data) {
64     details = data;
65     recordDiv = document.getElementById(data.recid);
66     recordDiv.innerHTML = "<table><tr><td><b>Ttle</b> : </td><td>" + data["md-title"] +
67                             "</td></tr><tr><td><b>Date</b> : </td><td>" + data["md-date"] +
68                             "</td></tr><tr><td><b>Author</b> : </td><td>" + data["md-author"] +
69                             "</td></tr><tr><td><b>Subject</b> : </td><td>" + data["md-subject"] + 
70                             "</td></tr><tr><td><b>Location</b> : </td><td>" + data["location"][0].name + "</td></tr></table>";
71
72 }
73
74 function my_onbytarget(data) {
75     targetDiv = document.getElementById("bytarget");
76     targetDiv.innerHTML = "<tr><td>ID</td><td>Hits</td><td>Diag</td><td>Rec</td><td>State</td></tr>";
77     
78     for ( i = 0; i < data.length; i++ ) {
79         targetDiv.innerHTML += "<tr><td><b>" + data[i].id +
80                                "</b></td><td>" + data[i].hits +
81                                "</td><td>" + data[i].diagnostic +
82                                "</td><td>" + data[i].records +
83                                "</td><td>" + data[i].state + "</td></tr>";
84     }
85 }