-
Notifications
You must be signed in to change notification settings - Fork 0
/
dictionary.html
86 lines (82 loc) · 3.32 KB
/
dictionary.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" prefix="og: http://ogp.me/ns#">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Dictionary - Botjagwar</title>
<meta content="">
<link rel="stylesheet" href="lib/datatable/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/css/style.css"/>
</head>
<script type="text/javascript" src='lib/vue.js'></script>
<script type="module" src='js/header.js'></script>
<script type="module" src="js/utils.js"></script>
<script type="module" src='js/dictionary.js'></script>
<body>
<div id='app'>
<botjagwar-header></botjagwar-header>
<div style="margin:5%;">
<h1>{{title}}</h1>
Dictionary for <a v-bind:href="'/language.html?code=' + language">{{language_mapping[language]}}</a>
<form class="border border-secondary"
style="padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 4px 15px 4px 4px;">
<h2>Display options</h2>
<hr>
<table>
<tr style="padding: 10px; margin-top: 20px; margin-bottom: 10px;">
<div class="form-group">
<td>
<label for='language'>Language code</label><br>
<small>Language to display the dictionary for. Please enter the ISO language code.</small>
</td>
<td>
<input v-model="language" @keyup.enter='fetchWords' placeholder="akz">
</td>
</div>
</tr>
</table>
<hr>
<button type="button" class="btn btn-primary btn-sm" v-on:click='fetchWords'>Fetch words from language</button>
<span id="fetch_spinner">Loading...</span>
</form>
<table id='dictionaryTable' class='table table-sm table-bordered'>
<thead>
<th>ID</th>
<th>word</th>
<th>Part of speech</th>
<th>Language</th>
<th>Definition</th>
<th>Last modified</th>
</thead>
<tr v-for="word in words">
<td>{{word.id}}</td>
<td><a :href="'/word.html?word=' + word.id">{{word.word}}</a></td>
<td>{{word.part_of_speech}}</td>
<td><a :href="'/dictionary.html?language=' + word.language">{{language_mapping[word.language]}}</a></td>
<td>
<span v-for="definition in word.definitions">
{{definition.definition}} ({{definition.language}})<br>
</span>
</td>
<td>{{word.last_modified}}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src='lib/jquery-3.4.1.js'></script>
<script type="text/javascript" src='lib/datatable/jquery.dataTables.min.js'></script>
<script type="text/javascript" src='lib/bootstrap/js/bootstrap.js'></script>
<script type="text/javascript">
// Basic example
$(document).ready(function () {
$('#dictionaryTable').DataTable({
"paging": true // false to disable pagination (or any other option)
});
$('.dataTables_length').addClass('bs-select');
});
</script>
</body>
</html>