{% 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 %}