Skip to content

Commit

Permalink
-a
Browse files Browse the repository at this point in the history
  • Loading branch information
@ejhon1116
ejhon1116 committed Nov 14, 2024
1 parent a780d4b commit 0290e57
Show file tree
Hide file tree
Showing 3 changed files with 319 additions and 57 deletions.
59 changes: 59 additions & 0 deletions pc-parts-testing.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PC Building Website</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<link href="pc-parts/pc_parts_styles.css" rel="stylesheet"></link>
</head>
<body class="font-sans">
<div class="container mx-auto px-4 py-8">
<h1 class="text-4xl font-bold text-center mb-8">PC Building Website</h1>
<div class="flex flex-col md:flex-row gap-8">
<div class="filters p-6 md:w-1/4">
<h2 class="text-2xl font-semibold mb-4">Item Filters</h2>
<div class="mb-4">
<label for="price-limit-input" class="block mb-2">Max Price:</label>
<input type="number" id="price-limit-input" value="100000" class="w-full p-2">
</div>
<div class="mb-4">
<label for="name-input" class="block mb-2">Name Filter:</label>
<input type="text" id="name-input" class="w-full p-2">
</div>
<div id="type-checkboxes" class="mb-4">
<h3 class="text-lg font-semibold mb-2">Filter by Type:</h3>
<button id="type-deselect">Deselect All</button>
</div>
<div id="brand-checkboxes" class="mb-4">
<h3 class="text-lg font-semibold mb-2">Filter by Brand:</h3>
<button id="brand-deselect">Deselect All</button>
</div>
</div>
<div class="md:w-3/4">
<table class="w-full">
<thead>
<tr>
<th class="p-3 text-left" col="1">Type</th>
<th class="p-3 text-left" col="2">Brand</th>
<th class="p-3 text-left" col="3">Name</th>
<th class="p-3 text-left" col="4">Price</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>
</div>
</div>

<div id="pagination">

</div>
<script src="pc-parts/part_fetch_show_copy.js"></script>
</body>
</html>
232 changes: 232 additions & 0 deletions pc-parts/part_fetch_show copy.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
// Fetch items from the API
async function fetchItems() {
try {
const response = await fetch('https://nmzggks95b.execute-api.us-east-2.amazonaws.com/');
const items = await response.json();
return items;
} catch (error) {
console.error('Error fetching items:', error);
return [];
}
}

// Generate table based on items and price limit
function generateTable(items, start, end, priceLimit, nameFilter, typeBlacklist, brandBlacklist) {
console.log('${end-start} ' + end-start);
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = ''; // Clear existing content
let odd = true;


// Table Creation
i = 0;
items.every(item => {
if (parseFloat(item.price) <= priceLimit && item.name.toLowerCase().includes(nameFilter.toLowerCase()) && !typeBlacklist.includes(item.type) && !brandBlacklist.includes(item.brand)) {
if(i > end) {
return false;
}
if(i > start && i < end) {
const row = document.createElement('tr');

const type = document.createElement('td');
type.setAttribute("col", 1);
type.textContent = item.type;
row.appendChild(type);

const brand = document.createElement('td');
brand.setAttribute("col", 2);
brand.textContent = item.brand;
row.appendChild(brand);

const name = document.createElement('td');
name.setAttribute("col", 3);
row.appendChild(name);

const price = document.createElement('td');
price.setAttribute("col", 4);
price.textContent = '$' + item.price;
row.appendChild(price);

const link = document.createElement('a');
link.setAttribute('href', item.url);
link.textContent = item.name;
name.appendChild(link);


row.className = odd ? "odd" : "even";

tableBody.appendChild(row);

odd = !odd;
}
i++;
}
return true;
});
}

function generateCheckbox(items) {
//////////////////////////////
/* TYPE CHECKBOX GENERATOR */
//////////////////////////////
const typeCheckboxSection = document.getElementById("type-checkboxes");
const distinctTypes = [...new Set(items.map(item => item.type))];
distinctTypes.sort((a, b) => a.localeCompare(b))

distinctTypes.forEach(type => {
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.className = "checkbox type";
checkbox.id = `${type}-checkbox`;
checkbox.name = type;
checkbox.checked = true;

const label = document.createElement("label");
label.htmlFor = `${type}-checkbox`;
label.textContent = type;

const wrapper = document.createElement("div");
wrapper.className = "type-checkbox-item"
wrapper.appendChild(checkbox);
wrapper.appendChild(label);

typeCheckboxSection.appendChild(wrapper);

checkbox.addEventListener("change", function() {
if (!this.checked) {
// Add to blacklist when unchecked
if (!blacklisted_types.includes(checkbox.name)) {
blacklisted_types.push(checkbox.name);
}
} else {
// Remove from blacklist when checked
const index = blacklisted_types.indexOf(checkbox.name);
if (index > -1) {
blacklisted_types.splice(index, 1);
}
}
generateTable(items, priceLimit, name, blacklisted_types, blacklisted_brands);
})
});

const deselectType = document.getElementById("type-deselect");
deselectType.addEventListener('click', function() {
document.querySelectorAll('.checkbox.type').forEach(checkbox => {
if (!blacklisted_types.includes(checkbox.name)) {
blacklisted_types.push(checkbox.name);
}
checkbox.checked = false;
});
generateTable(items, priceLimit, name, blacklisted_types, blacklisted_brands);
});

//////////////////////////////
/* BRAND CHECKBOX GENERATOR */
//////////////////////////////
const brandCheckboxSection = document.getElementById("brand-checkboxes");
const distinctBrands = [...new Set(items.map(item => item.brand))];
distinctBrands.sort((a, b) => a.localeCompare(b)).filter((brand) => brand.name != "")

distinctBrands.forEach(brand => {
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.className = "checkbox brand";
checkbox.id = `${brand}-checkbox`;
checkbox.name = brand;
checkbox.checked = true;

const label = document.createElement("label");
label.htmlFor = `${brand}-checkbox`;
label.textContent = brand;

const wrapper = document.createElement("div");
wrapper.className = "brand-checkbox-item"
wrapper.appendChild(checkbox);
wrapper.appendChild(label);

brandCheckboxSection.appendChild(wrapper);

checkbox.addEventListener("change", function() {
if (!this.checked) {
// Add to blacklist when unchecked
if (!blacklisted_brands.includes(checkbox.name)) {
blacklisted_brands.push(checkbox.name);
}
} else {
// Remove from blacklist when checked
const index = blacklisted_brands.indexOf(checkbox.name);
if (index > -1) {
blacklisted_brands.splice(index, 1);
}
}
generateTable(items, priceLimit, name, blacklisted_types, blacklisted_brands);
})
});

const deselectBrand = document.getElementById("brand-deselect");
deselectBrand.addEventListener('click', function() {
document.querySelectorAll('.checkbox.brand').forEach(checkbox => {
if (!blacklisted_brands.includes(checkbox.name)) {
blacklisted_brands.push(checkbox.name);
}
checkbox.checked = false;
});
generateTable(items, priceLimit, name, blacklisted_types, blacklisted_brands);
});

}

function sortItems(items) {
items.sort((a, b) => {
return parseFloat(a.price) > parseFloat(b.price) ? -1 : 1;
});
}

// Initialize the page
async function initPage() {
const items = await fetchItems();
sortItems(items);

items_per_page = 50
start = 0;
end = items_per_page - 1;
num_pages = items.length / items_per_page;
curr_page = 0;
pagination = document.getElementById("pagination")

next_page_link = document.createElement("a")
next_page_link.href = "#";
next_page_link.innerText = "->";

next_page_link.addEventListener("click", (event) => {
event.preventDefault();
curr_page++;
start += curr_page + items_per_page
end += curr_page + items_per_page
generateTable(items, start, end, priceLimit, name, blacklisted_types, blacklisted_brands);
});

pagination.appendChild(next_page_link)

const price_limit_input = document.getElementById('price-limit-input');
price_limit_input.addEventListener('input', function() {
priceLimit = parseFloat(price_limit_input.value) || 1000000;
generateTable(items, start, end, priceLimit, name, blacklisted_types, blacklisted_brands);
});
const name_input = document.getElementById('name-input');

name_input.addEventListener('input', function() {
name = name_input.value;
generateTable(items, start, end, priceLimit, name_input.value, blacklisted_types, blacklisted_brands);
});

generateCheckbox(items);
generateTable(items, start, end, priceLimit, name, blacklisted_types, blacklisted_brands);
}

let blacklisted_types = [];
let blacklisted_brands = [];
let priceLimit = 100000;
let name = '';
// Call initPage when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', initPage);
Loading

0 comments on commit 0290e57

Please sign in to comment.