diff --git a/dbAPI.js b/dbAPI.js
deleted file mode 100644
index 82f2c587bb68a3da5e8ecdb4324578b5b52041dd..0000000000000000000000000000000000000000
--- a/dbAPI.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/* var http = require('http');
-var url = require('url');
-var fs = require('fs');
-http.createServer(function (req, res) {
- var q = url.parse(req.url, true);
- var filename = "." + q.pathname;
- fs.readFile(filename, function(err, data) {
- if(err){
- res.writeHead(404, {'Content-type': 'text/html'});
- return res.end("404 Not Found");
- }
- res.writeHead(200, {'Content-Type': 'text/html'});
- res.write(data);
- return res.end();
- });
-}).listen(8080); */
-
-const {Pool} = require('pg');
-const fs = require('fs');
-const { resolve } = require('path');
-const { rejects } = require('assert');
-
-const pool = new Pool({
- host: 'localhost',
- user: 'postgres',
- port: 5432,
- password: 'Yasham1984',
- database: 'your-fashion-data'
-});
-
-//pool.connect();
-
-/* pool.query('select * from Users', (err, res) => {
- if(!err){
- console.log(res.rows);
- console.log('connected');
- }else{
- console.log(err.message);
- }
- client.end;
-}); */
-
-const readImage = (path) => {
- return new Promise((resolve, reject) => {
- fs.readFile(path, (err, data) => {
- if(err){
- reject(err);
- }else{
- resolve(data);
- }
- });
- });
-};
-
-const insertProduct = async (productID, product_name, description, price, stock_level, imagePath, tag) => {
- try{
- const client = await pool.connect();
- const image = await readImage(imagePath);
- const query = 'INSERT INTO Products (productID, product_name, description, price, stock_level, image, tag) VALUES ($1, $2, $3, $4, $5, $6, $7)';
- const values = [productID, product_name, description, price, stock_level, image, tag];
- await client.query(query, values);
- console.log('Product inserted successfully.');
- client.release();
- }catch(err){
- console.log(err.message);
- }
-};
-
-insertProduct(1, 'Blue Shirt', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..',
-29.99, 10, 'images/BlueShirt.jpg', 'BlueShirt');
-
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index e822799acd89f791849c9df637a7774367fd8f86..7d55ca5f7b14acba927a3964335d1e97a534b334 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -1,59 +1,38 @@
-const carts = document.querySelectorAll('.add-cart-btn');
-let products = [];
+async function populateProducts(endpoint) {
+ const container = document.querySelector('.container');
-async function getProducts() {
- try {
- const response = await fetch('http://localhost:5000/products');
- if (!response.ok) {
- throw new Error('Failed to fetch products');
- }
- const data = await response.json(); // Parse response body as JSON
- products = data.products;
- //console.log(data.products);
-
- // Split products into pages and sections
- // const numPages = 6;
- //const numSectionsPerPage = 6;
- // products = ({tag, name}) => products.find(a => a.some(o => o.tag === tag || o.name === name));
- //let getArray = ({tag, name}) => products.find(a => a.some(o => o.tag === tag || o.name === name));
- populateProducts();
- } catch (error) {
- console.error('Error fetching products:', error);
+ if(!container){
+ console.error('Container element not found');
+ return;
}
- console.log('Products:', products);
-}
-
+
+ try{
+ const response = await fetch(endpoint);
+ const products = await response.json();
+/* const response1 = await fetch('/women-products');
+ const womenProducts = await response1.json();
+ const products = menProducts.concat(womenProducts); */
-getProducts();
+ container.innerHTML = '';
-//splits an array into chuncks
-/* function chunkArray(arr, chunkSize) {
- const chunkedArray = [];
- for (let i = 0; i < arr.length; i += chunkSize) {
- chunkedArray.push(arr.slice(i, i + chunkSize));
- }
- return chunkedArray;
-} */
-function populateProducts() {
- const container = document.querySelector('.container');
-
- if (container) {
- const productsHtml = products.map(product => `
+ products.forEach(product => {
+ const productsHtml = document.createElement('div');
+ productsHtml.innerHTML = `
<div class="product">
<div class="product-card">
<h2 class="name">${product.name}</h2>
<span class="price">£${product.price}</span>
<a class="popup-btn">Quick View</a>
- <img src="${product.Image}" class="product-img" alt="Image of ${product.name}">
+ <img src="${product.image}" class="product-img" alt="Image of ${product.name}">
</div>
<div class="popup-view">
<div class="popup-card">
<a><i class="fas fa-times close-btn"></i></a>
<div class="product-img">
- <img src="${product.Image}" alt="Image of ${product.name}">
+ <img src="${product.image}" alt="Image of ${product.name}">
</div>
<div class="info">
<h2>Your fashion<br><span>Modern styles</span></h2>
@@ -65,12 +44,51 @@ function populateProducts() {
</div>
</div>
</div>
- `).join('');
+ `;
+ container.appendChild(productsHtml);
+
+
- container.innerHTML = productsHtml;
- addCartActions(container);
- }
+ if(products.image){
+ const img = new Image();
+ img.src =`data:image/jpeg;base64,${product.image.toString('base64')}`;
+ productsHtml.appendChild(img);
+ }
+
+/* if(container){
+ container.appendChild(productsHtml);
+ }else{
+ console.error('Container element not found');
+ } */
+ });
+}catch (error){
+ console.error('Failed to populate products:', error);
}
+ //console.log(container);
+ addCartActions(container);
+}
+document.addEventListener('DOMContentLoaded', (event) => {
+ const menProductsLink = document.getElementById('men-products');
+ const womenProductsLink = document.getElementById('women-products');
+
+ if (menProductsLink) {
+ menProductsLink.addEventListener('click', (e) => {
+ e.preventDefault(); // Prevent the default link behavior
+ populateProducts('/men-products');
+ });
+ } else {
+ console.error("Men's products link not found.");
+ }
+
+ if (womenProductsLink) {
+ womenProductsLink.addEventListener('click', (e) => {
+ e.preventDefault(); // Prevent the default link behavior
+ populateProducts('/women-products');
+ });
+ } else {
+ console.error("Women's products link not found.");
+ }
+});
@@ -80,6 +98,7 @@ function populateProducts() {
function addCartActions(container) {
+ const products = [];
var popupViews = document.querySelectorAll('.popup-view');
var popupBtns = document.querySelectorAll('.popup-btn');
@@ -113,14 +132,6 @@ function addCartActions(container) {
}
}
-/* for (let i = 0; i < carts.length; i++) {
- carts[i].addEventListener('click', () => {
- cardsNumbers(products[i]);
- totalCost(products[i]);
- });
-} */
-
-
function onLoadCardsNumbers() {
let productNumber = localStorage.getItem('cardsNumbers');
diff --git a/server.js b/server.js
index d060f1ab86ac5e8e53f2738c7ae145a8351bf8b0..a40f42f79570ed096da17d8d37e17118eccda7cd 100644
--- a/server.js
+++ b/server.js
@@ -1,17 +1,65 @@
const express = require('express');
const path = require('path');
+const {Pool} = require('pg');
const app = express();
-const publicDirectory = path.join(__dirname, './public');
+const port = 5000;
+
+const pool = new Pool({
+ host: 'localhost',
+ user: 'postgres',
+ port: 5432,
+ password: 'Yasham1984',
+ database: 'your-fashion-data'
+});
+
+
-/* console.log(__dirname);
-console.log(publicDirectory); */
+//Server static files from 'public' directory and CSS from '0public/css'
+app.use(express.json());
+const publicDirectory = path.join(__dirname, './public');
app.use(express.static(publicDirectory));
app.set('view engine', 'hbs');
+
+
+app.use(express.static('./css'));
+
+//Routes setup
app.use('/', require('./routes/pages'));
app.use('/products', require('./routes/productsRouteFile'));
-app.use('/images', express.static('./public/images'));
-app.listen(5000, () => {
- console.log("Server is listening on port 5000");
+app.get('/', (req, res) => {
+ res.send('Welcome to your fashion online shop');
});
+
+//query for men-products
+app.get('/men-products', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ const { rows } = await client.query("SELECT * FROM products WHERE category = 'men' LIMIT 6");
+ res.json(rows);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error(err);
+ }
+});
+//query for women-products
+app.get('/women-products', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ const { rows } = await client.query("SELECT * FROM products WHERE category = 'women'");
+ res.json(rows);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+});
+
+app.listen(port, () => {
+ console.log(`Server is listening on port ${port}`);
+});
+
+
+
diff --git a/views/index.hbs b/views/index.hbs
index 4842f7cfb6f73fefda2f8cace876d6984e78b44e..4feb76698cf9e88ec2206505736fce3dd7a050f4 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -40,10 +40,10 @@
<li class="nav-item">
- <a class="nav-link" href="/men">Men</a>
+ <a class="nav-link" id="men-products" href="/men">Men</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="/women">Women</a>
+ <a class="nav-link" id="women-products" href="/women">Women</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kids">Kids</a>
@@ -83,7 +83,7 @@
<div class="carousel__cell"><img class="slides" src="https://cdn.shopify.com/s/files/1/0878/3908/files/social_sharing_shopify.jpg?v=1667977060"></div>
<div class="carousel__cell"><img class="slides" src="https://www.nextdirect.com/nxtcms/resource/blob/5587208/f0e6f37c9c409a172eb0ca2236449efb/hero1-kids-data.jpg"></div>
<div class="carousel__cell"><img class="slides" src="https://i.ebayimg.com/images/g/9bEAAOSwmh9ez480/s-l1200.webp"></div>
- <div class="carousel__cell"><img class="slides" src="https://cdn-fnknc.nitrocdn.com/jwqHRGAzpUgGskUSHlppNQzwuXgXIKwg/assets/images/optimized/rev-b97e6c5/www.fashionbeans.com/wp-content/uploads/2017/11/50britishbrands-3.jpg"></div>
+ <div class="carousel__cell"><img class="slides" src="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2021/09/GettyImages-1174825598-2400x1440.jpg"></div>
<div class="carousel__cell"><img class="slides" src="https://www.realmenrealstyle.com/wp-content/uploads/2023/08/Promote-Positive-Communication.jpg"></div>
<div class="carousel__cell"><img class="slides" src="https://i.insider.com/62e40d594b455800188b5fca?width=700"></div>
</div>
diff --git a/views/men.hbs b/views/men.hbs
index f9038097a473f5b1606b784d666e97eafbe35351..683610e64cf140f68fdb3389ca977da1c6633beb 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -38,10 +38,10 @@
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
- <a class="nav-link" href="/men">Men</a>
+ <a class="nav-link" id="men-products" href="/men">Men</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="/women">Women</a>
+ <a class="nav-link" id="women-products" href="/women">Women</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kids">Kids</a>
diff --git a/views/women.hbs b/views/women.hbs
index 7024c1825cec9209e88f70d0804518b7613ed7c8..3b0e6c42a6b4bf02809ce9067440b5acd6934e84 100644
--- a/views/women.hbs
+++ b/views/women.hbs
@@ -66,7 +66,7 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container"></div>
+ <div class="container" id="container"></div>
<script src="/product-cards.js"></script>