depicts/templates/catalog.html

103 lines
3 KiB
HTML

{% extends "base.html" %}
{% macro item_detail(entity) %}
{% for key, prop_label in labels.items() %}
{% set claims = entity.claims[key] %}
{% if claims %}
<div>
<strong>{{ prop_label }}</strong>:
{% for claim in claims %}
{% if 'datavalue' in claim.mainsnak %}
{% set claim_qid = claim.mainsnak.datavalue.value.id %}
<a href="https://www.wikidata.org/wiki/{{ claim_qid }}">{{ other[claim_qid] or '[ label missing ]' }}</a> ({{ claim_qid }})
{% else %}
<i>no value</i>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
{% endmacro %}
{% block title %}{{ title }}{% endblock %}
{% block style %}
<style>
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
.autocomplete-items {
position: absolute;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
cursor: pointer;
background-color: #fff;
}
</style>
{% endblock %}
{% block content %}
<div class="p-2" id="app">
<h1>{{ self.title() }}</h1>
{% for item in items %}
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-3">
<img src="{{ item.image.thumburl }}" class="card-img">
</div>
<div class="col-md-9">
<div class="card-body">
<h5 class="card-title">{{ item.label }}</h5>
<p>
<a href="https://www.wikidata.org/wiki/{{ item.qid }}" class="btn btn-primary">view on Wikidata</a>
</p>
{{ item_detail(item.entity) }}
<div class="autocomplete w-100">
<input class="form-control-lg my-2 search" data-qid="{{item.qid}}" autocomplete="off" @input="search" v-model.trim="searchTerms['{{ item.qid}}']" />
<div v-if="hits.{{item.qid}} && hits.{{item.qid}}.length" id="item-list" class="autocomplete-items">
<div v-for="hit in hits.{{item.qid}}">
<div>
<a href="#">${ hit.label }</a>
<span v-if="hit.alt_label">(${ hit.alt_label })</span>
&mdash; ${ hit.count } existing paintings
(${ hit.qid })
<a :href="'https://www.wikidata.org/wiki/' + hit.qid">view on Wikidata</a>
</div>
<div v-if="hit.description">
<div class="description">${ hit.description }</div>
</div>
</div> <! -- end for -->
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
{% block script %}
<script>
var lookup_url = {{ url_for('depicts_lookup') | tojson }};
</script>
<script src="{{ url_for('static', filename='vue/vue.js') }}"></script>
<script src="{{ url_for('static', filename='js/catalog.js') }}"></script>
{% endblock %}