1 | /** @jsx React.DOM */ |
---|
2 | (function() { |
---|
3 | "use strict"; |
---|
4 | |
---|
5 | var PT = React.PropTypes; |
---|
6 | |
---|
7 | var ErrorPane = window.MyReact.ErrorPane; |
---|
8 | var AggregatorPage = window.MyAggregator.AggregatorPage; |
---|
9 | |
---|
10 | var 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 | |
---|
142 | var 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 | |
---|
227 | var 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 | |
---|
272 | var 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 | |
---|
298 | React.render(React.createElement(Main, null), document.getElementById('body')); |
---|
299 | React.render(React.createElement(Footer, null), document.getElementById('footer') ); |
---|
300 | |
---|
301 | })(); |
---|