Commit c1cf8abe authored by Moritz Schepp's avatar Moritz Schepp
Browse files

adapt frontend to elastic backend

parent e34aea9d
......@@ -30,7 +30,7 @@ class Api {
call(params, aspects) {
console.log('API: ' + params)
let results = []
let results = {}
let promises = []
aspects = aspects || ['pages', 'people', 'works', 'places', 'editions']
......@@ -40,12 +40,7 @@ class Api {
params.set('action', 'search-' + aspect)
let promise = fetch('api.json?' + params.toString()).
then((response) => response.json()).
then(response => {
results[aspect] = response
if (!Array.isArray(results[aspect]['results'])) {
results[aspect]['results'] = [results[aspect]['results']]
}
})
then(response => results[aspect] = response)
promises.push(promise)
}
......@@ -56,33 +51,33 @@ class Api {
})
}
group(data) {
let results = {
person: [],
work: [],
edition: [],
place: [],
page: []
};
// group(data) {
// let results = {
// person: [],
// work: [],
// edition: [],
// place: [],
// page: []
// };
for (const result of data) {
const type = result.id.split('-')[0];
results[type].push(result);
}
// for (const result of data) {
// const type = result.id.split('-')[0];
// results[type].push(result);
// }
let i = 0;
for (const t of ['person', 'work', 'edition', 'place', 'page']) {
for (let result of results[t]) {
result.index = i++;
}
}
// let i = 0;
// for (const t of ['person', 'work', 'edition', 'place', 'page']) {
// for (let result of results[t]) {
// result.index = i++;
// }
// }
return {
results: data,
grouped: results,
amount: data.length
}
}
// return {
// results: data,
// grouped: results,
// amount: data.length
// }
// }
}
const api = new Api();
......
......@@ -17,6 +17,10 @@ function locale() {
return 'fr';
}
function otherLocale() {
return (locale() == 'fr' ? 'de' : 'fr')
}
function cLocale() {
return hashParams().get('locale') || 'all'
}
......@@ -64,34 +68,6 @@ function tcap(key) {
return capitalize(translate(key));
}
function resultUrl(result) {
if (result.type == 'edition') {
return 'view.html?edition=' + result.edition + '&page=' +
result.page + '&translation=350mg&lang=' + result.locale || 'de'
}
if (result.type == 'page') {
return 'content.html?id=' + result.confluence_id + '&lang=' + result.locale
}
return '#'
}
function openResult(result) {
let url = null;
switch (result.type) {
case 'person':
openPersName(result.textgrid_id);
break;
case 'work':
openArtWork(result.textgrid_id);
break;
case 'place':
openPlaceName(result.textgrid_id);
break;
}
}
function tease(text, amount=30) {
if (typeof text != 'string') {
return null
......@@ -105,8 +81,7 @@ function tease(text, amount=30) {
}
export {
locale, cLocale, translate as t, capitalize as cap, tcap, loadTranslations,
locale, otherLocale, cLocale, translate as t, capitalize as cap, tcap, loadTranslations,
isEmptyObject,
openResult, resultUrl,
tease
}
......@@ -19,7 +19,7 @@ class ContentLocaleSelector extends React.Component {
}
render() {
console.log(cLocale())
// console.log(cLocale())
return(
<div className="arch-content-locale-selector mt-4 mb-4">
......
import React from 'react'
import {openResult, resultUrl, tease, t} from './architrave'
import {locale, otherLocale, tease, t} from './architrave'
export function SearchResult(props) {
const clickMe = function(event) {
console.log(props.data.type, props)
if (['edition', 'page'].indexOf(props.data.type) == -1) {
export class ArchSearchResult extends React.Component {
constructor(props) {
super(props)
this.clickMe = this.clickMe.bind(this)
}
isType(type) {
const index = this.props.data._index
if (type == 'register') {return !!index.match(/_(people|works|places)$/)}
if (type == 'page') {return !!index.match(/_wiki_pages$/)}
if (type == 'edition') {return !!index.match(/_edition_pages$/)}
if (type == 'person') {return !!index.match(/_people$/)}
if (type == 'work') {return !!index.match(/_works$/)}
if (type == 'place') {return !!index.match(/_places$/)}
return false
}
clickMe(event) {
if (this.isType('register')) {
event.preventDefault()
openResult(props.data)
this.openResult()
}
}
let text = ''
resultUrl() {
const source = this.props.data._source
// console.log(source)
let s = props.data.summary
if (s) {
if (typeof s == 'string') {s = [s]}
text = s.map((e, i) => {
if (this.isType('edition')) {
return 'view.html?edition=' + source.edition + '&page=' +
source.page_number + '&translation=350mg&lang=' + source.locale || 'de'
}
if (this.isType('page')) {
return 'content.html?id=' + source.id + '&lang=' + source.locale
}
return '#'
}
openResult() {
if (this.isType('person')) {openPersName(this.props.data._source.id)}
if (this.isType('work')) {openArtWork(this.props.data._source.id)}
if (this.isType('place')) {openPlaceName(this.props.data._source.id)}
}
highlights() {
const list = this.props.data.highlight.search_data || []
return list.map((e, i) => {
return(
<div
key={i}
......@@ -24,27 +62,101 @@ export function SearchResult(props) {
></div>
)
})
} else if (props.data.text) {
text = <p className="pt-2 arch-text">{tease(props.data.text, 200)}</p>
}
const url = resultUrl(props.data)
let page = ''
if (props.data.type == 'edition') {
page = ` (${t('page')} ${props.data.page})`
}
return(
<a
className="arch-search-result d-block mb-3 p-3"
href={url}
target="_blank"
rel="noopener"
onClick={clickMe}
>
<em>{props.data.name || props.data.id}{page}</em>
{text}
</a>
)
}
\ No newline at end of file
}
name() {
console.log(this.props.data)
if (this.isType('register')) {
const d = this.props.data
const hl =
d.highlight[`name.${locale()}`] ||
d.highlight[`name.${otherLocale()}`] ||
[]
return hl[0] ||
d._source.name[locale()] ||
d._source.name[otherLocale()]
}
if (this.isType('edition')) {
let page = ` (${t('page')} ${this.props.data._source.page_number})`
return(
(this.props.data.highlight.name || [])[0] ||
this.props.data._source.name ||
`${this.props.data._source.id}${page}`
)
}
if (this.isType('page')) {
return this.props.data._source.name
}
}
render() {
return(
<a
className="arch-search-result d-block mb-3 p-3"
href={this.resultUrl()}
target="_blank"
rel="noopener"
onClick={this.clickMe}
>
<em className="arch-title" dangerouslySetInnerHTML={{__html: this.name()}} />
<div className="hi">
{this.highlights()}
</div>
</a>
)
}
}
// export function ArchSearchResult(props) {
// // const clickMe = function(event) {
// // console.log(props.data.type, props)
// // if (['edition', 'page'].indexOf(props.data.type) == -1) {
// // event.preventDefault()
// // openResult(props.data)
// // }
// // }
// let text = ''
// let s = props.data.summary
// if (s) {
// if (typeof s == 'string') {s = [s]}
// text = s.map((e, i) => {
// return(
// <div
// key={i}
// className="pt-2 arch-text"
// dangerouslySetInnerHTML={{__html: e}}
// ></div>
// )
// })
// } else if (props.data.text) {
// text = <p className="pt-2 arch-text">{tease(props.data.text, 200)}</p>
// }
// const url = resultUrl(props.data)
// let page = ''
// if (props.data.type == 'edition') {
// page = ` (${t('page')} ${props.data.page})`
// }
// return(
// <a
// className="arch-search-result d-block mb-3 p-3"
// href={url}
// target="_blank"
// rel="noopener"
// onClick={clickMe}
// >
// <em>{props.data.name || props.data.id}{page}</em>
// {text}
// </a>
// )
// }
import React from 'react'
import {locale, t, tcap, openResult, tease} from './architrave'
import {locale, t, tcap, tease} from './architrave'
import {
HashRouter as Router,
Route,
} from 'react-router-dom'
import {params, hashParams} from './routing'
import api from './api'
import {SearchResult} from './search_result'
import {ArchSearchResult} from './search_result'
import {Pagination} from './pagination'
import {ContentLocaleSelector} from './content_locale_selector'
......@@ -34,18 +34,18 @@ export default class ArchSearchResults extends React.Component {
}
render() {
let tab = hashParams().get('tab') || 'editions'
const tab = hashParams().get('tab') || 'editions'
const page = parseInt(hashParams().get('page') || 1)
if (!this.state.results) {
return ''
}
let results = this.state.results[tab]
const content = results.results.map((e) => {
return <SearchResult key={e.id} data={e} />
const content = results.hits.hits.map((hit) => {
return <ArchSearchResult key={hit._id} data={hit} />
})
const page = parseInt(hashParams().get('page') || 1)
const body =
<React.Fragment>
......@@ -53,7 +53,7 @@ export default class ArchSearchResults extends React.Component {
{content}
</div>
<div className="d-flex justify-content-center">
<Pagination total={results.total} perPage={10} />
<Pagination total={results.hits.total} perPage={10} />
</div>
</React.Fragment>
const noResults = <p className="pt-5">{tcap('no_results')}</p>
......@@ -66,7 +66,7 @@ export default class ArchSearchResults extends React.Component {
label={tcap('editions')}
active={tab}
clickHandler={(e) => this.tabTo(e, 'editions')}
total={this.state.results.editions.total}
total={this.state.results.editions.hits.total}
icon="book"
/>
<TabSwitcher
......@@ -74,7 +74,7 @@ export default class ArchSearchResults extends React.Component {
label={tcap('people')}
active={tab}
clickHandler={(e) => this.tabTo(e, 'people')}
total={this.state.results.people.total}
total={this.state.results.people.hits.total}
icon="user"
/>
<TabSwitcher
......@@ -82,7 +82,7 @@ export default class ArchSearchResults extends React.Component {
label={tcap('places')}
active={tab}
clickHandler={(e) => this.tabTo(e, 'places')}
total={this.state.results.places.total}
total={this.state.results.places.hits.total}
icon="map-marker-alt"
/>
<TabSwitcher
......@@ -90,7 +90,7 @@ export default class ArchSearchResults extends React.Component {
label={tcap('workTypes')}
active={tab}
clickHandler={(e) => this.tabTo(e, 'works')}
total={this.state.results.works.total}
total={this.state.results.works.hits.total}
icon="gem"
/>
<TabSwitcher
......@@ -98,11 +98,11 @@ export default class ArchSearchResults extends React.Component {
label={tcap('pages')}
active={tab}
clickHandler={(e) => this.tabTo(e, 'pages')}
total={this.state.results.pages.total}
total={this.state.results.pages.hits.total}
icon="file"
/>
</ul>
{results.total > 0 ? body : noResults}
{results.hits.total > 0 ? body : noResults}
</div>
)
}
......
......@@ -17,11 +17,16 @@ $pink: #C90057;
a.arch-search-result {
background-color: $gray;
.arch-title {
display: block;
margin-bottom: 1em;
}
.arch-text {
color: $black !important;
}
.hi {
.hl {
background-color: #FFFFC7;
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment