diff --git a/index.html b/index.html
index ed05606bb817dc00d2566b5f12785014153e0ac7..c13efb24fdb94dd10fac84954f5ea896acfdedda 100644
--- a/index.html
+++ b/index.html
@@ -17,47 +17,115 @@
</head>
<body>
<div id="app">
- <b-container>
- <button @click="fetchRepoData">Fetch!</button>
- </b-container>
<b-container fluid>
- <b-row>
- <b-card v-for="repo in repos"
- :title="repo.org_plus_name"
- tag="article"
- style="max-width: 20rem;"
- class="mb-2"
- >
- <b-tabs card>
- <b-tab title="Git">
- <b-card-text>
- <b-card-text>
- <p>
- <a href="`https://pypi.org/project/${ repo.python.name }/`"> <img :src="`https://img.shields.io/pypi/v/${ repo.python.name }.svg`" /> </a>
- <a href="`https://travis-ci.org/${ repo.org_plus_name }`"> <img :src="`https://travis-ci.org/${ repo.org_plus_name }.svg?branch=master`" /> </a>
- <a href="`https://circleci.com/gh/${ repo.org_plus_name }`"> <img :src="`https://circleci.com/gh/${ repo.org_plus_name }.svg?style=svg`" /> </a>
- <a href="`https://hub.docker.com/r/ocrd/core/tags/`"> <img :src="`https://img.shields.io/docker/automated/ocrd/core.svg`" /> </a>
- <a href="`https://codecov.io/gh/${ repo.org_plus_name }`"> <img :src="`https://codecov.io/gh/${ repo.org_plus_name }/branch/master/graph/badge.svg`" /> </a>
- <a href="`https://scrutinizer-ci.com/g/${ repo.org_plus_name }`"> <img :src="`https://scrutinizer-ci.com/g/${ repo.org_plus_name }/badges/quality-score.png?b=master`" /> </a>
- <a href="`https://lgtm.com/projects/g/${ repo.org_plus_name }/alerts/`"> <img :src="`https://img.shields.io/lgtm/alerts/g/${ repo.org_plus_name }.svg?logo=lgtm&logoWidth=18`" /> </a>
- </p>
- </b-card-text>
- <b-table v-if="repo.git" :items="[repo.git]"></b-table>
- </b-card-text>
- </b-tab>
- <b-tab title="Tools">
- <b-card-text>
- <b-table v-if="repo.ocrd_tool" :items="[repo.ocrd_tool]"></b-table>
- </b-card-text>
+
+ <b-tabs>
+
+ <b-tab title="Processors">
+ <b-row>
+ Filter by category:
+ <b-badge
+ v-for="category in categories"
+ :variant="category_filter.indexOf(category) != -1 ? 'primary' : 'secondary'"
+ @click="category_filter.indexOf(category) != -1 ? category_filter.splice(category_filter.indexOf(category), 1) : category_filter.push(category)"
+ >
+ {{ category }}
+ </b-badge>
+ </b-row>
+ <b-row>
+ Filter by step:
+ <b-badge
+ v-for="step in steps"
+ :variant="step_filter.indexOf(step) != -1 ? 'primary' : 'secondary'"
+ @click="step_filter.indexOf(step) != -1 ? step_filter.splice(step_filter.indexOf(step), 1) : step_filter.push(step)"
+ >
+ {{ step }}
+ </b-badge>
+ </b-row>
+ <b-row>
+ <b-card
+ v-for="processor in processors"
+ :title="processor.executable.replace('ocrd-', '')"
+ tag="article"
+ style="max-width: 20rem;"
+ class="mb-2"
+ >
+ <b-card-text>
+
+ <b-tabs>
+ <b-tabs>
+ <b-tab title="Description">
+ <blockquote>
+ {{ processor.description }}
+ <b-badge variant="info" v-for="step in processor.steps">{{ step }}</b-badge>
+ <b-badge variant="success" v-for="category in processor.categories">{{ category }}</b-badge>
+ </blockquote>
+ <p>
+ Part of <a href="">{{ processor.part_of }}</a>
+ </p>
+ <p>
+ <a href="">Read the Documentation!</a>
+ </p>
</b-tab>
- <b-tab title="Python">
- <b-card-text>
- <b-table v-if="repo.python" :items="[repo.python]"></b-table>
- </b-card-text>
+
+ <b-tab title="Parameters">
+ <ul>
+ <li v-for="param, name in processor.parameters">
+ <strong>{{ name }}</strong> {{ param }}
+ </li>
+ </ul>
</b-tab>
+
</b-tabs>
- </b-card>
- </b-row>
+
+ </b-card-text>
+ </b-card>
+ </b-row>
+ </b-tab>
+
+ <b-tab title="Projects">
+ <b-row>
+ <button @click="fetchRepoData">Fetch!</button>
+ </b-row>
+ <b-row>
+ <b-card
+ v-for="repo in repos"
+ :title="repo.org_plus_name"
+ tag="article"
+ style="max-width: 20rem;"
+ class="mb-2"
+ >
+ <b-tabs card>
+ <b-tab title="Git">
+ <b-card-text>
+ <p>
+ <a href="`https://pypi.org/project/${ repo.python.name }/`"> <img :src="`https://img.shields.io/pypi/v/${ repo.python.name }.svg`" /> </a>
+ <!-- <a href="`https://travis-ci.org/${ repo.org_plus_name }`"> <img :src="`https://travis-ci.org/${ repo.org_plus_name }.svg?branch=master`" /> </a> -->
+ <!-- <a href="`https://circleci.com/gh/${ repo.org_plus_name }`"> <img :src="`https://circleci.com/gh/${ repo.org_plus_name }.svg?style=svg`" /> </a> -->
+ <!-- <a href="`https://hub.docker.com/r/ocrd/core/tags/`"> <img :src="`https://img.shields.io/docker/automated/ocrd/core.svg`" /> </a> -->
+ <!-- <a href="`https://codecov.io/gh/${ repo.org_plus_name }`"> <img :src="`https://codecov.io/gh/${ repo.org_plus_name }/branch/master/graph/badge.svg`" /> </a> -->
+ <!-- <a href="`https://scrutinizer-ci.com/g/${ repo.org_plus_name }`"> <img :src="`https://scrutinizer-ci.com/g/${ repo.org_plus_name }/badges/quality-score.png?b=master`" /> </a> -->
+ <!-- <a href="`https://lgtm.com/projects/g/${ repo.org_plus_name }/alerts/`"> <img :src="`https://img.shields.io/lgtm/alerts/g/${ repo.org_plus_name }.svg?logo=lgtm&logoWidth=18`" /> </a> -->
+ </p>
+ <b-table v-if="repo.git" :items="[repo.git]"></b-table>
+ </b-card-text>
+ </b-tab>
+ <b-tab title="Tools">
+ <b-card-text>
+ <b-table v-if="repo.ocrd_tool" :items="[repo.ocrd_tool]"></b-table>
+ </b-card-text>
+ </b-tab>
+ <b-tab title="Python">
+ <b-card-text>
+ <b-table v-if="repo.python" :items="[repo.python]"></b-table>
+ </b-card-text>
+ </b-tab>
+ </b-tabs>
+ </b-card>
+ </b-row>
+ </b-tab>
+ </b-tabs>
+
</b-container>
</div>
diff --git a/script.js b/script.js
index 7b1ad3c7b72a1f250de9c38aa5e8a3ebfe284ebd..96142b5d5dbf4dc548c5ed2a32723a25f14f6a13 100644
--- a/script.js
+++ b/script.js
@@ -2,11 +2,48 @@
window.app = new Vue({
el: '#app',
data: {
- repos_raw: []
+ repos_raw: [],
+ category_filter: [],
+ step_filter: [],
},
computed: {
repos() {
return this.repos_raw
+ },
+ steps() {
+ return this.all_processors.reduce((all, processor) => {
+ all.push(...processor.steps.filter(step => all.indexOf(step) == -1))
+ return all
+ }, [])
+ },
+ categories() {
+ return this.all_processors.reduce((all, processor) => {
+ all.push(...processor.categories.filter(category => all.indexOf(category) == -1))
+ return all
+ }, [])
+ },
+ all_processors() {
+ return this.repos_raw.reduce((all, repo) => {
+ if (repo.ocrd_tool)
+ all.push(...Object.values(repo.ocrd_tool.tools).map(tool => {
+ tool.part_of = repo.org_plus_name
+ return tool
+ }))
+ return all
+ }, [])
+ },
+ processors() {
+ return this.all_processors.filter(tool => {
+ for (let step_filter of this.step_filter) {
+ if (tool.steps.indexOf(step_filter) == -1)
+ return false
+ }
+ for (let category_filter of this.category_filter) {
+ if (tool.categories.indexOf(category_filter) == -1)
+ return false
+ }
+ return true
+ })
}
},
mounted() {
@@ -16,6 +53,13 @@ window.app = new Vue({
fetchRepoData() {
fetch('repos.json').then(resp => resp.json()).then(repos => this.repos.push(...repos))
},
+ toggleStepFilter(v) {
+ if (v in this.step_filter) {
+ this.step_filter = this.step_filter.splice(this.step_filter.indexOf(v), 1)
+ } else {
+ this.step_filter.push(v)
+ }
+ }
}
})