103 lines
3 KiB
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>
|
|
— ${ hit.count } existing artworks
|
|
(${ 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 %}
|