-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (155 loc) · 6.98 KB
/
index.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>MP3</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="public/fonts/Raleway.css" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="public/css/normalize.css">
<link rel="stylesheet" href="public/css/skeleton.css">
<!-- Our project just needs Font Awesome Solid + Brands -->
<link href="public/css/fontawesome.css" rel="stylesheet">
<link href="public/css/brands.css" rel="stylesheet">
<link href="public/css/solid.css" rel="stylesheet">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="public/images/favicon.png">
<!-- Script for entries
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="public/js/jquery.min.js"></script>
<script>
var page = 1;
function paginate(pageno) {
this.page = pageno;
showResult();
}
function showResult() {
var entries = document.getElementById("entries").value;
var searchterm = document.getElementById("search").value;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
var results = JSON.parse(this.responseText);
$("#Pagination").empty();
$("#DataTable").empty();
buildHtmlTable(results["results"]);
buildPagination(results["numberOfPages"]);
}
}
if (searchterm.length==0) {
xmlhttp.open("GET","getmp3.php?s=all&entries="+entries+"&page="+page, true);
} else {
xmlhttp.open("GET","getmp3.php?s=search&q="+searchterm+"&entries="+entries+"&page="+page,true);
}
xmlhttp.send();
}
function buildHtmlTable(myList) {
var columns = addAllColumnHeaders(myList);
for (var i = 0 ; i < myList.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
if (columns[colIndex] == "filename") {
var cellValue = '<a class="button" href="public/mp3/' + myList[i][columns[colIndex]] + '"download><i class="fas fa-download"></i></a>';
} else {
var cellValue = myList[i][columns[colIndex]];
}
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#DataTable").append(row$);
}
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(myList)
{
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0 ; i < myList.length ; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1){
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
// $("#DataTable").append(headerTr$);
return columnSet;
}
function buildPagination(numberOfPages){
if (numberOfPages > 1) {
$("#Pagination").append('<button onclick="paginate(1)">«</button>');
if (page > 1) {
$("#Pagination").append('<button onclick="paginate(' + (page - 1) + ')">' + (page - 1) + '</button>');
}
$("#Pagination").append('<button class="button-primary">' + page + '</button>');
if (page < numberOfPages) {
$("#Pagination").append('<button onclick="paginate(' + (page + 1) + ')">' + (page + 1) + '</button>');
}
$("#Pagination").append('<button onclick="paginate(' + numberOfPages + ')">»</button>');
}
}
</script>
</head>
<body onload="showResult('')">
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<h1>MP3 Repo</h1>
</div>
<!-- Search Form
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="row">
<div class="ten columns">
<form>
<label for="search">Search:</label>
<input id="search" class="u-full-width" type="text" size="30" onkeyup="showResult()" placeholder="Search">
</form>
</div>
<div class="two columns">
<label for="entries">Einträge:</label>
<select id="entries" onchange="showResult()">
<option value="10" selected>10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</div>
</div>
</div>
<!-- Search results
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container" id="livesearch">
<table class="u-full-width">
<thead>
<tr>
<th>Download</th><th>Date</th><th>Artist</th><th>Title</th>
</tr>
</thead>
<tbody id="DataTable">
</tbody>
</table>
<div class="row">
<div class="u-full-width" id="Pagination">
</div>
</div>
</div>
</body>
</html>