Former-commit-id: e3fe758afdc1e015a2332f62e201f2f53c9d0aea
This commit is contained in:
Ben
2022-04-12 19:47:37 +01:00
parent 4057a1c568
commit e9f812290c
7 changed files with 106 additions and 39 deletions

View File

@@ -9,15 +9,37 @@ class ProductList extends Component {
async OnMount() {
const route = this.state.getroute;
this.products = await fetch(route).then(response => response.json());
const products = await fetch(route).then(response => response.json());
this.setState({
...this.getState,
products: products.data,
current_page: products.page.current_page,
last_page: products.page.last_page,
total: products.page.total,
});
}
Render() {
this.keepLoading = false;
if (this.state.current_page >= this.state.last_page) {
this.keepLoading = false;
this.loadingBar = '';
} else {
this.keepLoading = true;
this.loadingBar = `
<!--Infinite Loading-->
<div class="product-list-loader">
<!-- https://loading.io/css/ -->
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>
`;
}
return {
template: `
<h2>{this.state.title}</h2>
<div class="product-list">
${this.products.data.map(product => {
${this.state.products.data.map(product => {
return `<compact-listing-component name="${product.name}"
id="${product.id}"
listing="${product.listing}"
@@ -28,11 +50,7 @@ class ProductList extends Component {
`;
}).join('')}
</div>
<!--Infinite Loading-->
<div class="product-list-loader">
<!-- https://loading.io/css/ -->
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>
${this.loadingBar}
`,
style: `
.product-list {
@@ -136,8 +154,14 @@ class ProductList extends Component {
OnRender() {
// scroll to bottom event listener
if (this.keepLoading) {
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
console.log('scrolled to bottom');
}
});
}
}
}

View File

@@ -20,12 +20,24 @@ class StoreFront extends Component {
</div>
<div class="carousel-cell">
<img class="carousel-image" src="res/warehouse.png" alt="">
<div class="carousel-caption">
<h1>Our state of the art warehouse ensures your speedy delivery</h1>
<button>Find Out More</button>
</div>
</div>
<div class="carousel-cell">
<img class="carousel-image" src="res/space.png" alt="">
<div class="carousel-caption">
<h1>NASA's Shuttle Discovery</h1>
<button>Shop Space Now</button>
</div>
</div>
<div class="carousel-cell">
<img class="carousel-image" src="res/builder.png" alt="">
<div class="carousel-caption">
<h1>Our Featured Bonsai Tree Set</h1>
<button>Get It Now</button>
</div>
</div>
</div>

View File

@@ -0,0 +1,3 @@
module.exports = {
ResultsPerPage: 16,
};

View File

@@ -0,0 +1,48 @@
const ControllerMaster = require('./controller-master.js');
const Database = require('../database/database.js');
function ValidateQuery(query) {
const validation = ControllerMaster.ValidateQuery(query);
if (!validation.isValid) {
return {
isValid: false,
error: validation.error,
longError: validation.longError,
};
}
return {
isValid: true,
};
}
async function GetSets(page, resPerPage) {
// query for the set
await Database.Query('BEGIN TRANSACTION;');
const countRes = await Database.Query('SELECT COUNT (*) FROM lego_set;');
const total = parseInt(countRes.rows[0].count);
const dbres = await Database.Query(`
SELECT
id, name, price, new_price AS "discount"
FROM lego_set
LEFT JOIN lego_set_inventory as inv ON lego_set.id = inv.set_id
ORDER BY id ASC
LIMIT $1::int
OFFSET $2::int`,
[resPerPage, page * resPerPage]);
await Database.Query('END TRANSACTION;');
const sets = dbres.rows;
for (const set of sets) {
set.image = `/api/cdn/${set.id}.png`;
set.type = 'set';
}
return { total, sets };
}
module.exports = {
ValidateQuery,
GetSets,
};

View File

@@ -45,7 +45,7 @@ async function connectToDatabase() {
async function Query(query, params, callback) {
if (!connection) {
await connect();
await Connect();
}
// debug moment
@@ -59,7 +59,6 @@ async function Destroy() {
connection = null;
}
module.exports = {
Connect,
Query,

View File

@@ -12,8 +12,8 @@ async function main() {
logLevel: process.env.LOG_LEVEL,
logToConsole: process.env.LOG_CONSOLE,
logFile: process.env.LOG_FILE,
networkHost: process.env.LOG_NET_HOST,
networkPort: process.env.LOG_NET_PORT,
// networkHost: process.env.LOG_NET_HOST,
// networkPort: process.env.LOG_NET_PORT,
});
Logger.Info('Pre-Init Complete');

View File

@@ -40,36 +40,17 @@ async function Get(req, res) {
async function Featured(req, res) {
// query all sets and return all of them
const dbres = await Database.Query(`SELECT
id, name, price, new_price AS "discount"
FROM lego_set
LEFT JOIN lego_set_inventory as inv ON lego_set.id = inv.set_id
ORDER BY id ASC;
`);
const sets = dbres.rows;
for (const set of sets) {
set.image = `/api/cdn/${set.id}.png`;
set.type = 'set';
}
const { sets } = await Controller.GetSets(0, 8);
res.send(JSON.stringify({
data: [...sets],
page: {
total_sent: sets.length,
per_page: 8,
current_page: 1,
last_page: 1,
},
}));
// Validation
// const validation = Controller.ValidateQuery(query);
// if (!validation.isValid) {
// return res.status(400).json({
// error: {
// short: validation.error,
// long: validation.longError,
// },
// });
// }
// next();
}
module.exports = {