Update results table display to new data structure

main
Marian Steinbach 4 years ago
parent 1ac18c014d
commit b7d01ebf10
  1. 1
      package.json
  2. 209
      src/ResultsTable.js
  3. 391350
      src/spider_result.json
  4. 4
      yarn.lock

@ -41,6 +41,7 @@
"resolve": "1.6.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"underscore": "^1.9.1",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.11.3",

@ -6,6 +6,7 @@ import React, { Component } from 'react';
import punycode from 'punycode';
import './ResultsTable.css';
import LazyLoad from 'react-lazy-load';
import _ from 'underscore';
class IconGood extends Component {
render() {
@ -63,14 +64,18 @@ class FaviconField extends Component {
icons = Object.values(this.props.icons);
}
if (this.props.data.value && icons.length) {
return (
<td key='favicon' className='good'>
<LazyLoad width={32} height={32}>
<img src={'/siteicons/' + icons[0]} width={32} height={32} alt='Icon' />
</LazyLoad>
</td>
);
if (this.props.data.value) {
// icon is available for display
if (icons.length) {
return (
<td key='favicon' className='good'>
<LazyLoad width={32} height={32}>
<img src={'/siteicons/' + icons[0]} width={32} height={32} alt='Icon' />
</LazyLoad>
</td>
);
}
return <CriteriumField keyProp='favicon' type='positive' title='Die Site hat ein Icon, das jedoch nicht herunter geladen werden konnte.' />;
}
return <CriteriumField keyProp='favicon' type='negative' title='Die Site hat kein Icon' />;
}
@ -79,27 +84,30 @@ class FaviconField extends Component {
class FeedField extends Component {
render() {
if (this.props.data.value) {
return <CriteriumField keyProp='feed' type='positive' title='Die Site verweist auf mind. einen RSS-/Atom-Feed' />
return <CriteriumField keyProp='feed' type='positive' title='Die Site verweist auf mind. einen RSS-/Atom-Feed' />;
}
return <CriteriumField keyProp='feed' type='negative' title='Kein Link rel=alternate auf einen RSS-/Atom-Feed gefunden' />
return <CriteriumField keyProp='feed' type='negative' title='Kein Link rel=alternate auf einen RSS-/Atom-Feed gefunden' />;
}
}
class HTTPSField extends Component {
class FontField extends Component {
render() {
if (this.props.data.value) {
return <CriteriumField keyProp='https' type='positive' title='Die Site ist über HTTPS erreichbar' />
if (typeof this.props.data !== 'undefined') {
if (this.props.data.value) {
return <CriteriumField keyProp='font' type='positive' title='Die Site verwendet die Schriftart Arvo' />;
}
return <CriteriumField keyProp='font' type='negative' title='Die Site verwendet die Schriftart Arvo nicht' />;
}
return <CriteriumField keyProp='https' type='negative' title='Die Site ist nicht über HTTPS erreichbar (-2 Punkte)' />
return <td key='font'></td>;
}
}
class IPField extends Component {
class HTTPSField extends Component {
render() {
if (this.props.ipaddresses && this.props.ipaddresses.length) {
return <td key='ipaddresses' className='good text'>{ this.props.ipaddresses }</td>;
if (this.props.data.value) {
return <CriteriumField keyProp='https' type='positive' title='Die Site ist über HTTPS erreichbar' />
}
return <CriteriumField keyProp='ipaddresses' type='negative' title='Der Domainname lässt sich nicht in eine IP-Adresse auflösen' />;
return <CriteriumField keyProp='https' type='negative' title='Die Site ist nicht über HTTPS erreichbar (-2 Punkte)' />
}
}
@ -161,7 +169,62 @@ class ScreenshotsField extends Component {
class StateField extends Component {
render() {
return <td key='state'>{ this.props.state }</td>;
var label = this.props.state;
switch (this.props.state) {
case 'Nordrhein-Westfalen':
label = 'NW';
break;
case 'Rheinland-Pfalz':
label = 'RP';
break;
case 'Niedersachsen':
label = 'NS';
break;
case 'Baden-Württemberg':
label = 'BW';
break;
case 'Bayern':
label = 'BY';
break;
case 'Berlin':
label = 'BE';
break;
case 'Brandenburg':
label = 'BB';
break;
case 'Bremen':
label = 'HB';
break;
case 'Hamburg':
label = 'HB';
break;
case 'Hessen':
label = 'HE';
break;
case 'Mecklenburg-Vorpommern':
label = 'MV';
break;
case 'Saarland':
label = 'SL';
break;
case 'Sachsen':
label = 'SN';
break;
case 'Sachsen-Anhalt':
label = 'SA';
break;
case 'Schleswig-Holstein':
label = 'SH';
break;
case 'Thüringen':
label = 'SN';
break;
default:
label = this.props.state;
}
return <td key='state'><abbr title={this.props.state}>{label}</abbr></td>;
}
}
@ -169,17 +232,29 @@ class TypeField extends Component {
render() {
var label;
if (this.props.level === 'DE:BUNDESVERBAND') {
label = <abbr title='Bundesverband'>BV</abbr>;
} else if (this.props.level === 'DE:ORTSVERBAND') {
label = <abbr title='Ortsverband'>OV</abbr>;
} else if (this.props.level === 'DE:KREISVERBAND') {
label = <abbr title='Kreisverband'>KV</abbr>;
if (this.props.type === 'YOUTH_ORGANIZATION') {
label = <abbr title='Grüne Jugend Bundesverband'>GJ BV</abbr>;
} else {
label = <abbr title='Bundesverband'>BV</abbr>;
}
} else if (this.props.level === 'DE:LANDESVERBAND') {
if (this.props.type === 'YOUTH_ORGANIZATION') {
label = <abbr title='Grüne Jugend Landesverband'>GJ LV</abbr>;
} else {
label = <abbr title='Landesverband'>LV</abbr>;
}
} else if (this.props.level === 'DE:REGIONALVERBAND') {
label = <abbr title='Regionalverband'>RV</abbr>;
} else if (this.props.level === 'DE:BEZIRKSVERBAND') {
label = <abbr title='Bezirksverband'>BeV</abbr>;
} else if (this.props.level === 'DE:LANDESVERBAND') {
label = <abbr title='Landesverband'>LV</abbr>;
} else if (this.props.level === 'DE:KREISVERBAND') {
if (this.props.type === 'YOUTH_ORGANIZATION') {
label = <abbr title='Grüne Jugend Kreisverband'>GJ KV</abbr>;
} else {
label = <abbr title='Kreisverband'>KV</abbr>;
}
} else if (this.props.level === 'DE:ORTSVERBAND') {
label = <abbr title='Ortsverband'>OV</abbr>;
}
return <td key='typefield'>{ label }</td>;
}
@ -199,7 +274,7 @@ class URLField extends Component {
var inputDisplayURL = this.trunc(punycode.toUnicode(this.props.inputURL), 45);
// There is a canonical URL...
if (typeof this.props.canonicalURLs !== 'undefined' && this.props.canonicalURLs.length === 1) {
if (typeof this.props.canonicalURLs !== 'undefined' && this.props.canonicalURLs !== null && this.props.canonicalURLs.length === 1) {
// and it is the same as the input URL
if (this.props.inputURL === this.props.canonicalURLs[0]) {
@ -212,10 +287,11 @@ class URLField extends Component {
return <td key='url'><a href={this.props.inputURL} target="_blank" rel='noopener noreferrer'> { inputDisplayURL }</a> <a href={this.props.canonicalURLs[0]} rel='noopener noreferrer'>{targetLabel}</a></td>;
}
var targetDisplayURL = this.trunc(punycode.toUnicode(this.props.canonicalURLs[0]), 45);
return (
<td key='url'>
<a href={this.props.inputURL} target="_blank" rel='noopener noreferrer'> { inputDisplayURL }</a><br />
<a href={this.props.canonicalURLs[0]} target="_blank" rel='noopener noreferrer'> { this.props.canonicalURLs[0] }</a>
<a href={this.props.canonicalURLs[0]} target="_blank" rel='noopener noreferrer'> { targetDisplayURL }</a>
</td>
);
}
@ -228,12 +304,37 @@ class URLField extends Component {
class WWWOptionalField extends Component {
render() {
if (this.props.data.value) {
return <CriteriumField keyProp='wwwoptional' type='positive' title='Die Site ist sowohl mit als auch ohne www. in der URL aufrufbar' />
return <CriteriumField keyProp='wwwoptional' type='positive' title='Die Site ist sowohl mit als auch ohne www. in der URL aufrufbar' />;
}
return <CriteriumField keyProp='wwwoptional' type='negative' title='Die Site ist nicht sowohl mit als auch ohne www. in der URL aufrufbar' />;
}
}
class ScriptErrorsField extends Component {
render() {
if (typeof this.props.data !== 'undefined') {
if (this.props.data.value) {
return <CriteriumField keyProp='noscripterrors' type='positive' title='Es wurden keine JavaScript-Fehler festgestellt' />;
}
return <CriteriumField keyProp='noscripterrors' type='negative' title='Auf der Seite wurden JavaScript-Fehler gefunden' />;
}
return <td key='noscripterrors'></td>;
}
}
class NetworkErrorsField extends Component {
render() {
if (typeof this.props.data !== 'undefined') {
if (this.props.data.value) {
return <CriteriumField keyProp='nonetworkerrors' type='positive' title='Es wurden keine Probleme beim Laden verknüpfter Ressourcen festgestellt' />;
}
return <CriteriumField keyProp='nonetworkerrors' type='negative' title='Beim Laden verknüpfter Ressourcen sind Fehler aufgetreten' />;
}
return <CriteriumField keyProp='wwwoptional' type='negative' title='Die Site ist nicht sowohl mit als auch ohne www. in der URL aufrufbar' />
return <td key='nonetworkerrors'></td>;
}
}
class ResultsTable extends Component {
render() {
// sort results by score (descending)
@ -244,32 +345,34 @@ class ResultsTable extends Component {
var rows = [];
this.props.results.forEach((element, index) => {
var screenshots;
if (typeof element.resulting_urls !== 'undefined' &&
element.resulting_urls !== null &&
typeof this.props.screenshots[element.resulting_urls[0]] !== 'undefined' &&
this.props.screenshots[element.resulting_urls[0]] !== null) {
screenshots = this.props.screenshots[element.resulting_urls[0]];
}
var fields = [
<TypeField key={'tf'+index} level={element.meta.level} />,
<TypeField key={'tf'+index} level={element.meta.level} type={element.meta.type} />,
<StateField key={'sf'+index} state={element.meta.state} />,
<DistrictField key={'df'+index} district={element.meta.district} />,
<CityField key={'cf'+index} city={element.meta.city} />,
<URLField key={'uf'+index} inputURL={element.input_url} canonicalURLs={element.details.canonical_urls} />,
<URLField key={'uf'+index} inputURL={element.input_url} canonicalURLs={element.resulting_urls} />,
<ScoreField key={'scf'+index} score={element.score} />,
<IPField key={'if'+index} ipaddresses={element.details.ipv4_addresses} />,
<ReachableField key={'rf'+index} data={element.result.SITE_REACHABLE} />,
<ResponseDurationField key={'rdf'+index} data={element.result.HTTP_RESPONSE_DURATION} />,
<FaviconField key={'fif'+index} data={element.result.FAVICON} icons={element.details.icons} />,
<HTTPSField key={'htpsf'+index} data={element.result.HTTPS} />,
<WWWOptionalField key={'wwwof'+index} data={element.result.WWW_OPTIONAL} />,
<CanonicalURLField key={'curlf'+index} data={element.result.CANONICAL_URL} />,
<ResponsiveField key={'rspf'+index} data={element.result.RESPONSIVE} />,
<FeedField key={'ff'+index} data={element.result.FEEDS} />,
<ScreenshotsField
key={'ssf'+index}
screenshot={
(element.details.canonical_urls && element.details.canonical_urls.length > 0 && typeof this.props.screenshots[element.details.canonical_urls[0]] !== 'undefined' && this.props.screenshots[element.details.canonical_urls[0]] !== null)
?
this.props.screenshots[element.details.canonical_urls[0]]
:
null
} />,
<CMSField key={'cmsf'+index} cms={element.details.cms} />,
<ReachableField key={'rf'+index} data={element.rating.SITE_REACHABLE} />,
<ResponseDurationField key={'rdf'+index} data={element.rating.HTTP_RESPONSE_DURATION} />,
<FaviconField key={'fif'+index} data={element.rating.FAVICON} icons={element.icons} />,
<HTTPSField key={'htpsf'+index} data={element.rating.HTTPS} />,
<WWWOptionalField key={'wwwof'+index} data={element.rating.WWW_OPTIONAL} />,
<CanonicalURLField key={'curlf'+index} data={element.rating.CANONICAL_URL} />,
<ResponsiveField key={'rspf'+index} data={element.rating.RESPONSIVE} />,
<FontField key={'font'+index} data={element.rating.USE_SPECIFIC_FONTS} />,
<FeedField key={'ff'+index} data={element.rating.FEEDS} />,
<ScriptErrorsField key={'se'+index} data={element.rating.NO_SCRIPT_ERRORS} />,
<NetworkErrorsField key={'ne'+index} data={element.rating.NO_NETWORK_ERRORS} />,
<ScreenshotsField key={'ssf'+index} screenshot={screenshots} />,
<CMSField key={'cmsf'+index} cms={_.flatten(_.map(element.checks.generator, function(v, url){ return v;}))} />,
];
rows.push(<tr key={element.input_url}>{ fields }</tr>)
@ -285,7 +388,6 @@ class ResultsTable extends Component {
<th scope='col'>Stadt</th>
<th scope='col'>URL</th>
<th scope='col'>Score</th>
<th scope='col'>IP-Adresse</th>
<th scope='col'>Erreichbar</th>
<th scope='col'>Antwortzeit</th>
<th scope='col'>Icon</th>
@ -293,7 +395,10 @@ class ResultsTable extends Component {
<th scope='col'>www. optional</th>
<th scope='col'>Kanonische URL</th>
<th scope='col'>Responsive</th>
<th scope='col'>Arvo</th>
<th scope='col'>Feed</th>
<th scope='col'>Script-Fehler</th>
<th scope='col'>Netzwerk-Fehler</th>
<th scope='col'>Screenshots</th>
<th scope='col'>CMS</th>
</tr>

File diff suppressed because it is too large Load Diff

@ -6569,6 +6569,10 @@ uglifyjs-webpack-plugin@^0.4.6:
uglify-js "^2.8.29"
webpack-sources "^1.0.1"
underscore@^1.9.1:
version "1.9.1"
resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
union-value@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"

Loading…
Cancel
Save