TPDL2020-context-propagation/static/index.html

144 lines
5.8 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="static/css/starter.css" rel="stylesheet">
<!-- <link href="static/css/cover.css" rel="stylesheet"> -->
<title>TPDL 2020 Companion WebApp</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">TPDL 2020 Paper #55 WebApp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">The paper</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container" id="app">
<div class="row justify-content-center">
<div class="col-10">
<div class="input-group">
<input type="text" class="form-control" v-model="query" placeholder="Your query terms..."
aria-label="Your query terms..." aria-describedby="button-addon2">
<select class="form-control col-md-3" aria-describedby="button-addon2" v-model="index"
v-on:change="switch_index">
<option v-bind:value="'propagation-before'">Before propagation</option>
<option v-bind:value="'propagation-after'">After propagation</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2"
v-on:click="new_query">Search!</button>
</div>
</div>
<a href="#" v-on:click="run_example(1)">Example 1 (Latent)</a>
<a href="#" v-on:click="run_example(2)">Example 2 (Reuse)</a>
<a href="#" v-on:click="run_example(3)">Example 3 (Multidisciplinary)</a>
</div>
</div>
<div class="row justify-content-center" v-if="hits">
<div>
<strong>Query:</strong> {{query}} - Viewing records {{start}} to {{start+10}} - <strong>Hits:</strong> {{total}}
</div>
</div>
<div class="row justify-content-center" v-if="hits">
<div>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item" v-bind:class="{disabled: start < 10}" v-on:click="start >= 10 && previous_page()">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item" v-bind:class="{disabled: start+10 > total}"
v-on:click="start+10 <= total && next_page()">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
<table class="table table-responsive">
<thead>
<tr>
<th scope="col"><span class="badge badge-primary">ID</span> &amp; <span
class="badge badge-warning">PIDs</span></th>
<th scope="col">Type</th>
<th scope="col">Metadata</th>
</tr>
</thead>
<tbody>
<tr v-for="hit in hits">
<td>
<div><span class="badge badge-primary">{{hit.id}}</span></div>
<div v-for="pid in hit.pid['_l_']"><span class="badge badge-warning">{{pid}}</span></div>
</td>
<td>
<div>
<span v-if="hit.type == 'publication'" class="badge badge-success">publication</span>
<span v-if="hit.type == 'dataset'" class="badge badge-danger">dataset</span>
</div>
</td>
<td>
<div><strong>Titles</strong></div>
<div v-for="title in hit.title['_l_']">→ {{title}}</div>
<div><strong>Abstracts</strong></div>
<div v-for="abstract in hit.abstract['_l_']">→ {{abstract}}</div>
<div v-if="index != 'propagation-before'"><strong>Propagated abstracts</strong></div>
<div v-if="index != 'propagation-before'" v-for="propagated in hit.propagated_abstract['_l_']">→ {{propagated}}<br />
</td>
</tr>
</tbody>
</table>
</div>
</main>
<!-- Optional JavaScript -->
<script src="static/bower_components/vue/dist/vue.min.js"></script>
<script src="static/bower_components/axios/dist/axios.min.js"></script>
<script src="static/js/app.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="static/bower_components/jquery/dist/jquery.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>