166 lines
5.1 KiB
HTML
166 lines
5.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Kaj Forney -- PA 13 - SELECT Statements</title>
|
|
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/grid.css">
|
|
|
|
<script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body class="parallax">
|
|
|
|
<div class="row">
|
|
<div class="col-2"></div>
|
|
<div class="col-8">
|
|
<h1>Linux Game Compatibility</h1>
|
|
</div>
|
|
<div class="col-2"></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-2">
|
|
<label>Show Only Working?</label>
|
|
</div>
|
|
<div class="col-10">
|
|
<input id='working' type='checkbox' />
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col-2'>
|
|
<label>Game Title</label>
|
|
</div>
|
|
<div class='col-10'>
|
|
<input id='gameTitle' type='text' />
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col-2'>
|
|
<label>Linux Distro</label>
|
|
</div>
|
|
<div class='col-10'>
|
|
<input id='os' type='text' />
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col-2'>
|
|
<label>CPU Model</label>
|
|
</div>
|
|
<div class='col-10'>
|
|
<input id='cpu' type='text' />
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col-2'>
|
|
<label>GPU Model</label>
|
|
</div>
|
|
<div class='col-10'>
|
|
<input id='gpu' type='text' />
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col-2'>
|
|
<label>Sort By Time Submitted</label>
|
|
</div>
|
|
<div class='col-10'>
|
|
<select id='sortTime'>
|
|
<option value=''></option>
|
|
<option value='ASC'>Ascending</option>
|
|
<option value='DESC'>Descending</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col-12'>
|
|
<button id='search'>View Reports</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='reportOutput' class="overflow">
|
|
</div>
|
|
|
|
<script>
|
|
const isEmpty = (obj) => Object.keys(obj).length === 0;
|
|
|
|
document.getElementById('search').addEventListener('click', (event) => {
|
|
const classScheduleUrl = 'http://localhost:8888';
|
|
let ajaxParameters = {};
|
|
if (document.querySelector('#working:checked')) {
|
|
ajaxParameters.working = 1;
|
|
}
|
|
if (document.getElementById('gameTitle').value.length !== 0) {
|
|
ajaxParameters.gameTitle = document.getElementById('gameTitle').value;
|
|
}
|
|
if (document.getElementById('os').value.length !== 0) {
|
|
ajaxParameters.os = document.getElementById('os').value;
|
|
}
|
|
if (document.getElementById('cpu').value.length !== 0) {
|
|
ajaxParameters.cpu = document.getElementById('cpu').value;
|
|
}
|
|
if (document.getElementById('gpu').value.length !== 0) {
|
|
ajaxParameters.gpu = document.getElementById('gpu').value;
|
|
}
|
|
if (document.getElementById('sortTime').value.length !== 0) {
|
|
ajaxParameters.sortTime = document.getElementById('sortTime').value;
|
|
}
|
|
|
|
function niceOutput(a) {
|
|
if(a == 1) {
|
|
return "Yes";
|
|
} else {
|
|
return "No";
|
|
}
|
|
}
|
|
|
|
const xhttp = new XMLHttpRequest();
|
|
xhttp.onload = function() {
|
|
let displayTable = '<table>' +
|
|
'<thead>' +
|
|
'<tr>' +
|
|
'<th>Game Title</th>' +
|
|
'<th>Submitted</th>' +
|
|
'<th>Working?</th>' +
|
|
'<th>Distro</th>' +
|
|
'<th>CPU</th>' +
|
|
'<th>GPU</th>' +
|
|
'<th>Notes</th>' +
|
|
'</tr>' +
|
|
'</thead>' +
|
|
'<tbody>';
|
|
if (typeof this.responseText !== 'undefined' && this.responseText.length > 0) {
|
|
let ajaxResult = JSON.parse(this.responseText);
|
|
if (typeof ajaxResult.reports !== 'undefined') {
|
|
for (let x = 0; x < ajaxResult.reports.length; x++) {
|
|
displayTable += '<tr>' +
|
|
'<td>' + ajaxResult.reports[x].game_title + '</td>' +
|
|
'<td>' + new Date(ajaxResult.reports[x].timestamp * 1000).toLocaleDateString() + '</td>' +
|
|
'<td>' + niceOutput(ajaxResult.reports[x].verdict) + '</td>' +
|
|
'<td>' + ajaxResult.reports[x].systemInfo_os + '</td>' +
|
|
'<td>' + ajaxResult.reports[x].systemInfo_cpu + '</td>' +
|
|
'<td>' + ajaxResult.reports[x].systemInfo_gpu + '</td>' +
|
|
'<td>' + ajaxResult.reports[x].notes_summary + '</td>' +
|
|
'</tr>';
|
|
}
|
|
}
|
|
}
|
|
displayTable += '</tbody></table>';
|
|
document.getElementById('reportOutput').innerHTML = displayTable;
|
|
}
|
|
xhttp.open("GET", classScheduleUrl + (!isEmpty(ajaxParameters) ? '?' + new URLSearchParams(ajaxParameters) : ''));
|
|
xhttp.send();
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |