kingkevin
/
partdb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

put js and css in seperate file

This commit is contained in:
King Kévin 2023-01-23 23:58:59 +01:00
parent 69233fed43
commit 94580ac67b
3 changed files with 50 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/index.css Normal file
View File

@ -0,0 +1,5 @@
table {
border: 1px #E1E3F2 solid;
resize: both;
overflow: auto;
}

55
public/index.html
View File

@ -2,59 +2,8 @@
<html>
<head>
<title>electronic parts database explorer</title>
<script type='application/javascript'>
"use strict";
// the last search query
var last_search = null;
function search()
{
const terms = document.getElementById('terms');
if (terms && terms.value && terms.value.length >= 3) {
console.log(terms.value);
} else {
return;
}
last_search = '/search/' + terms.value;
let xhr = new XMLHttpRequest();
xhr.open('GET', last_search, true);
xhr.onload = function() {
if (this.responseURL.endsWith(last_search)) {
populate(JSON.parse(this.response));
}
};
xhr.onerror = function() {
console.log("search call failed");
};
xhr.send();
}
function populate(parts)
{
const results = document.getElementById('results');
results.innerHTML = null;
for (const part of parts) {
console.log(part);
const tr = document.createElement('tr');
for (const key of ["name", "description"]) {
const td = document.createElement('td');
td.innerHTML = part[key];
tr.appendChild(td);
}
results.appendChild(tr);
}
}
</script>
<style>
table {
border: 1px #E1E3F2 solid;
width: 500px;
resize: both;
overflow: auto;
}
</style>
<script type='application/javascript' src='partdb.js'></script>
<link rel='stylesheet' href='index.css'>
</head>
<body>
<div>

43
public/partdb.js Normal file
View File

@ -0,0 +1,43 @@
"use strict";
// the last search query
var last_search = null;
function search()
{
const terms = document.getElementById('terms');
if (terms && terms.value && terms.value.length >= 3) {
console.log(terms.value);
} else {
return;
}
last_search = '/search/' + terms.value;
let xhr = new XMLHttpRequest();
xhr.open('GET', last_search, true);
xhr.onload = function() {
if (this.responseURL.endsWith(last_search)) {
populate(JSON.parse(this.response));
}
};
xhr.onerror = function() {
console.log("search call failed");
};
xhr.send();
}
function populate(parts)
{
const results = document.getElementById('results');
results.innerHTML = null;
for (const part of parts) {
const tr = document.createElement('tr');
for (const key of ["name", "description"]) {
const td = document.createElement('td');
td.innerHTML = part[key];
tr.appendChild(td);
}
results.appendChild(tr);
}
}