Skip to content
Snippets Groups Projects
Commit c3e19aef authored by Konstantin Baierer's avatar Konstantin Baierer
Browse files

wip

parent d5eb9ef1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html
+ 105
− 37
View file @ c3e19aef
......@@ -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&amp;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&amp;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>
......
script.js
+ 45
− 1
View file @ c3e19aef
......@@ -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)
}
}
}
})
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment