source: SRUAggregator/trunk/src/main/resources/assets/js/main.js @ 5957

Last change on this file since 5957 was 5957, checked in by emanuel.dima@uni-tuebingen.de, 9 years ago
  1. alpha15: added support for new spec explains/search; misc UI corrections
File size: 10.2 KB
Line 
1/** @jsx React.DOM */
2(function() {
3"use strict";
4
5var PT = React.PropTypes;
6
7var ErrorPane = window.MyReact.ErrorPane;
8var AggregatorPage = window.MyAggregator.AggregatorPage;
9
10var Main = React.createClass({displayName: 'Main',
11        getInitialState: function () {
12                return {
13                        navbarCollapse: false,
14                        navbarPageFn: this.renderAggregator,
15                        errorMessages: [],
16                };
17        },
18
19        error: function(errObj) {
20                var err = "";
21                if (typeof errObj === 'string' || errObj instanceof String) {
22                        err = errObj;
23                } else if (typeof errObj === 'object' && errObj.statusText) {
24                        console.log("ERROR: jqXHR = ", errObj);
25                        err = errObj.statusText;
26                } else {
27                        return;
28                }
29
30                var that = this;
31                var errs = this.state.errorMessages.slice();
32                errs.push(err);
33                this.setState({errorMessages: errs});
34
35                setTimeout(function() {
36                        var errs = that.state.errorMessages.slice();
37                        errs.shift();
38                        that.setState({errorMessages: errs});
39                }, 10000);
40        },
41       
42        ajax: function(ajaxObject) {
43                var that = this;
44                if (!ajaxObject.error) {
45                        ajaxObject.error = function(jqXHR, textStatus, error) {
46                                if (jqXHR.readyState === 0) {
47                                        that.error("Network error, please check your internet connection");
48                                } else if (jqXHR.responseText) {
49                                        that.error(jqXHR.responseText + " ("+error+")");
50                                } else  {
51                                        that.error(error + " ("+textStatus+")");
52                                }
53                                console.log("ajax error, jqXHR: ", jqXHR);
54                        };
55                }
56                // console.log("ajax", ajaxObject);
57                jQuery.ajax(ajaxObject);
58        },
59
60        renderAggregator: function() {
61                return React.createElement(AggregatorPage, {ajax: this.ajax, corpora: this.state.corpora, languageMap: this.state.languageMap});
62        },
63
64        renderStatistics: function() {
65                return React.createElement(StatisticsPage, {ajax: this.ajax});
66        },
67
68        renderHelp: function() {
69                return React.createElement(HelpPage, null);
70        },
71
72        toggleCollapse: function() {
73                this.setState({navbarCollapse: !this.state.navbarCollapse});
74        },
75
76        setNavbarPageFn: function(pageFn) {
77                this.setState({navbarPageFn:pageFn});
78        },
79
80        renderCollapsible: function() {
81                var classname = "navbar-collapse collapse " + (this.state.navbarCollapse?"in":"");
82                return (
83                        React.createElement("div", {className: classname}, 
84                                React.createElement("ul", {className: "nav navbar-nav"}, 
85                                        React.createElement("li", {className: this.state.navbarPageFn === this.renderAggregator ? "active":""}, 
86                                                React.createElement("a", {className: "link", tabIndex: "-1", 
87                                                        onClick: this.setNavbarPageFn.bind(this, this.renderAggregator)}, "Aggregator")
88                                        ), 
89                                        React.createElement("li", {className: this.state.navbarPageFn === this.renderHelp ? "active":""}, 
90                                                React.createElement("a", {className: "link", tabIndex: "-1", 
91                                                        onClick: this.setNavbarPageFn.bind(this, this.renderHelp)}, "Help")
92                                        )
93                                ), 
94                                React.createElement("ul", {id: "CLARIN_header_right", className: "nav navbar-nav navbar-right"}, 
95                                        React.createElement("li", {className: "unauthenticated"}, 
96                                                React.createElement("a", {href: "login", tabIndex: "-1"}, React.createElement("span", {className: "glyphicon glyphicon-log-in"}), " LOGIN")
97                                        )
98                                )
99                        )
100                );
101        },
102
103        render: function() {
104                return  (
105                        React.createElement("div", null, 
106                                React.createElement("div", {className: "container"}, 
107                                        React.createElement("div", {className: "beta-tag"}, 
108                                                React.createElement("span", null, "ALPHA")
109                                        )
110                                ), 
111                       
112                                React.createElement("div", {className: "navbar navbar-default navbar-static-top", role: "navigation"}, 
113                                        React.createElement("div", {className: "container"}, 
114                                                React.createElement("div", {className: "navbar-header"}, 
115                                                        React.createElement("button", {type: "button", className: "navbar-toggle", onClick: this.toggleCollapse}, 
116                                                                React.createElement("span", {className: "sr-only"}, "Toggle navigation"), 
117                                                                React.createElement("span", {className: "icon-bar"}), 
118                                                                React.createElement("span", {className: "icon-bar"}), 
119                                                                React.createElement("span", {className: "icon-bar"})
120                                                        ), 
121                                                        React.createElement("a", {className: "navbar-brand", href: "#", tabIndex: "-1"}, React.createElement("header", null, "Federated Content Search"))
122                                                ), 
123                                                this.renderCollapsible()
124                                        )
125                                ), 
126
127                                React.createElement(ErrorPane, {errorMessages: this.state.errorMessages}), 
128
129                                React.createElement("div", {id: "push"}, 
130                                        React.createElement("div", {className: "container"}, 
131                                                this.state.navbarPageFn()
132                                        ), 
133                                        React.createElement("div", {className: "top-gap"})
134                                )
135                        )
136                );
137        }
138});
139
140
141
142var StatisticsPage = React.createClass({displayName: 'StatisticsPage',
143        propTypes: {
144                ajax: PT.func.isRequired,
145        },
146
147        getInitialState: function () {
148                return {
149                        searchStats: {}, 
150                        lastScanStats: {}, 
151                };
152        },
153
154        componentDidMount: function() {
155                this.refreshStats();
156        },
157
158        refreshStats: function() {
159                this.props.ajax({
160                        url: 'rest/statistics',
161                        success: function(json, textStatus, jqXHR) {
162                                this.setState({
163                                        searchStats: json.searchStats, 
164                                        lastScanStats: json.lastScanStats, 
165                                });
166                                console.log("stats:", json);
167                        }.bind(this),
168                });
169        },
170
171        listItem: function(it) {
172                return React.createElement("li", null, " ", it[0], ":", 
173                                         typeof(it[1]) === "object" ? 
174                                                React.createElement("ul", null, _.pairs(it[1]).map(this.listItem)) : 
175                                                it[1]
176                                       
177                                );
178        },
179
180        // renderEndpoint: function(endp) {
181        //      return <li>
182        //                              <ul>
183        //                                      <li>endpoint: {endp[0]}</li>
184        //                              <li>numberOfRequests: {endp[1].numberOfRequests}</li>
185        //                              <li>avgQueueTime: {endp[1].avgQueueTime}</li>
186        //                              <li>maxQueueTime: {endp[1].maxQueueTime}</li>
187        //                              <li>avgExecutionTime: {endp[1].avgExecutionTime}</li>
188        //                              <li>maxExecutionTime: {endp[1].maxExecutionTime}</li>
189        //                                      <li>errors
190        //                                              <ul>
191        //                                                      { _.pairs(object).map(endp[1].errors, function(e) { return <li>{e[0]}:{e[1]}</li>; }) }
192        //                                              </ul>
193        //                                      </li>
194        //                              </ul>
195        //                      </li>;
196        // },
197        // renderInstitution: function(instname, instendps) {
198        //      return  <li>
199        //                              <ul>
200        //                                      <li>{instname}</li>
201        //                                      <li>
202        //                                              <ul>{_.pairs(object).map(instendps, this.renderEndpoint)}</ul>
203        //                                      </li>
204 //                                     </ul>
205 //                             </li>;
206        // },
207
208        renderStatistics: function(stats) {
209                return React.createElement("ul", null, _.pairs(stats).map(this.listItem));
210        },
211
212        render: function() {
213                return  (
214                        React.createElement("div", null, 
215                                React.createElement("div", {className: "top-gap"}, 
216                                        React.createElement("h1", null, "Statistics"), 
217                                        React.createElement("h2", null, "Last Scan"), 
218                                        this.renderStatistics(this.state.lastScanStats), 
219                                        React.createElement("h2", null, "Search"), 
220                                        this.renderStatistics(this.state.searchStats)
221                                )
222                        )
223                        );
224        },
225});
226
227var HelpPage = React.createClass({displayName: 'HelpPage',
228        openHelpDesk: function() {
229                window.open('http://support.clarin-d.de/mail/form.php?queue=Aggregator&lang=en', 
230                        '_blank', 'height=560,width=370');
231        },
232
233        render: function() {
234                return  (
235                        React.createElement("div", null, 
236                                React.createElement("div", {className: "top-gap"}, 
237                                        React.createElement("h3", null, "Performing search in FCS corpora"), 
238                                        React.createElement("p", null, "To perform simple keyword search in all CLARIN-D Federated Content Search centers" + ' ' + 
239                                        "and their corpora, go to the search field at the top of the page," + ' ' + 
240                                        "enter your query, and click 'search' button or press the 'Enter' key."), 
241                                       
242                                        React.createElement("h3", null, "Search Options - adjusting search criteria"), 
243                                        React.createElement("p", null, "To select specific corpora based on their name or language and to specify" + ' ' + 
244                                        "number of search results (hits) per corpus per page, click on the 'Search options'" + ' ' +
245                                        "link. Here, you can filter resources based on the language, select specific resources," + ' ' + 
246                                        "set the maximum number of hits."), 
247
248                                        React.createElement("h3", null, "Search Results - inspecting search results"), 
249                                        React.createElement("p", null, "When the search starts, the 'Search results' page is displayed" + ' ' + 
250                                        "and its content starts to get filled with the corpora responses." + ' ' + 
251                                        "To save or process the displayed search result, in the 'Search results' page," + ' ' + 
252                                        "go to the menu and select either 'Export to Personal Workspace'," + ' ' + 
253                                        "'Download' or 'Use WebLicht' menu item. This menu appears only after" + ' ' + 
254                                        "all the results on the page have been loaded. To get the next hits from each corpus," + ' ' + 
255                                        "click the 'next' arrow at the bottom of 'Search results' page."), 
256
257
258                                        React.createElement("h3", null, "More help"), 
259                                        React.createElement("p", null, "More detailed information on using FCS Aggregator is available" + ' ' + 
260                                        "at the Aggegator wiki page. If you still cannot find an answer to your question," + ' ' + 
261                                        "or if want to send a feedback, you can write to Clarin-D helpdesk: "), 
262                                        React.createElement("button", {type: "button", className: "btn btn-default btn-lg", onClick: this.openHelpDesk}, 
263                                                React.createElement("span", {className: "glyphicon glyphicon-question-sign", 'aria-hidden': "true"}), 
264                                                " HelpDesk"
265                                        )                                       
266                                )
267                        )
268                );
269        }
270});
271
272var Footer = React.createClass({displayName: 'Footer',
273        render: function() {
274                return  (
275                        React.createElement("div", {className: "container"}, 
276                                React.createElement("div", {id: "CLARIN_footer_left"}, 
277                                                React.createElement("a", {title: "about", id: "aboutlink", href: "about"}, 
278                                                React.createElement("span", {className: "glyphicon glyphicon-info-sign"}), 
279                                                React.createElement("span", null, "VERSION 2.0.0.α15")
280                                        )
281                                ), 
282                                React.createElement("div", {id: "CLARIN_footer_middle"}, 
283                                        React.createElement("a", {title: "CLARIN ERIC", href: "https://www.clarin.eu/"}, 
284                                        React.createElement("img", {src: "img/clarindLogo.png", alt: "CLARIN ERIC logo", style: {height:80}})
285                                        )
286                                ), 
287                                React.createElement("div", {id: "CLARIN_footer_right"}, 
288                                        React.createElement("a", {title: "contact", href: "mailto:fcs@clarin.eu"}, 
289                                                React.createElement("span", {className: "glyphicon glyphicon-envelope"}), 
290                                                React.createElement("span", null, " CONTACT")
291                                        )
292                                )
293                        )
294                );
295        }
296});
297
298React.render(React.createElement(Main, null),  document.getElementById('body'));
299React.render(React.createElement(Footer, null), document.getElementById('footer') );
300
301})();
Note: See TracBrowser for help on using the repository browser.