benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok this is epic checkout time

Browse Source 
Former-commit-id: 6d395392f1f610cbe7c445f6ecac2cff9430a3d3
This commit is contained in:
Ben
2022-04-27 02:11:34 +01:00
parent 78d43acdcb
commit 7cf9dc7354
14 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/public/auth.mjs
View File

@@ -58,15 +58,13 @@ export async function InitAuth0() {
const fetchOptions = { const fetchOptions = {
method: 'GET', method: 'GET',
// bear hug
headers: { Authorization: `Bearer ${token}` }, headers: { Authorization: `Bearer ${token}` },
}; };
const res = await fetch('/api/auth/login', fetchOptions).then(res => res.json()); const res = await fetch('/api/auth/login', fetchOptions).then(res => res.json());
console.log(res);
localStorage.setItem('admin', res.user.admin); localStorage.setItem('admin', res.user.admin);
// do stuff
} }
} }

6
client/public/basket/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>LegoLog!</title> <title>LegoLog Basket</title>
<meta name="viewport"> <meta name="viewport">
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="../global.css"> <link rel="stylesheet" type="text/css" href="../global.css">
@@ -22,12 +22,8 @@
<script type="module" src="/components/basket-popout.mjs"></script> <script type="module" src="/components/basket-popout.mjs"></script>
<script type="module" src="/components/accessability-popout.mjs"></script> <script type="module" src="/components/accessability-popout.mjs"></script>
<script type="module" src="/components/notificationbar.mjs"></script> <script type="module" src="/components/notificationbar.mjs"></script>
<script type="module" src="/components/storefront.mjs"></script>
<script type="module" src="/components/tag.mjs"></script> <script type="module" src="/components/tag.mjs"></script>
<script type="module" src="/components/product-list.mjs"></script>
<script type="module" src="/components/super-compact-listing.mjs"></script> <script type="module" src="/components/super-compact-listing.mjs"></script>
<script type="module" src="/components/compact-listing.mjs"></script>
<script type="module" src="/components/product-listing.mjs"></script>
<script type="module" src="/index.mjs"></script> <script type="module" src="/index.mjs"></script>
</head> </head>

36
client/public/checkout/index.html Normal file
View File

@@ -0,0 +1,36 @@
<html>
<head>
<title>LegoLog Checkout</title>
<meta name="viewport">
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="../global.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<!-- Auth0 - a library for authentication -->
<script src="https://cdn.auth0.com/js/auth0-spa-js/1.13/auth0-spa-js.production.js"></script>
<!-- Components used on this page - they must be included to work -->
<script type="module" src="/components/components.mjs"></script>
<script type="module" src="/components/navbar.mjs"></script>
<script type="module" src="/components/search.mjs"></script>
<script type="module" src="/components/basket-popout.mjs"></script>
<script type="module" src="/components/checkout.mjs"></script>
<script type="module" src="/components/accessability-popout.mjs"></script>
<script type="module" src="/components/notificationbar.mjs"></script>
<script type="module" src="/components/tag.mjs"></script>
<script type="module" src="/components/super-compact-listing.mjs"></script>
<script type="module" src="/index.mjs"></script>
</head>
<body>
<notificationbar-component></notificationbar-component>
<navbar-component></navbar-component>
<limited-margin>
<checkout-component></checkout-component>
</limited-margin>
</body>

2
client/public/components/basket.mjs
View File

@@ -68,7 +68,7 @@ class Basket extends Component {
</div> </div>
<!-- checkout button --> <!-- checkout button -->
<div class="basket-footer-checkout"> <div class="basket-footer-checkout">
<button class="basket-footer-button" type="button">Checkout as ${localStorage.user}</button> <a href="/checkout"><button class="basket-footer-button checkout-button" type="button">Checkout as ${localStorage.user}</button></a>
</div> </div>
</div> </div>
`, `,

70
client/public/components/checkout.mjs Normal file
View File

@@ -0,0 +1,70 @@
import { GetBasketTotalPrice } from './basket-popout.mjs';
import { RegisterComponent, Component } from './components.mjs';
class Checkout extends Component {
static __IDENTIFY() { return 'checkout'; }
constructor() {
super(Checkout);
}
async OnMount() {
this.setState({
total: parseFloat(await GetBasketTotalPrice()).toFixed(2),
});
}
Render() {
return {
template: /* html */`
<div class="checkout">
<div class="checkout-header">
<span class="checkout-header-title">Checkout</span>
<span class="checkout-header-total">Total: £{this.state.total}</span>
</div>
<div class="checkout-delivery-form">
<div class="checkout-form-row">
<input class="checkout-form-row-input" type="text" name="name" placeholder="name"/>
</div>
<div class="checkout-form-row">
<input class="checkout-form-row-input" type="text" name="address" placeholder="address"/>
</div>
<div class="checkout-form-row">
<input class="checkout-form-row-input" type="text" name="postcode" placeholder="postcode"/>
</div>
</div>
<div class="checkout-payment-form">
<div class="checkout-form-row">
<input class="checkout-form-row-input" type="text" name="card_number" placeholder="Card Number"/>
<input class="checkout-form-row-input" type="text" name="cvv" placeholder="CCV"/>
<input class="checkout-form-row-input" type="text" name="exp" placeholder="MM/YY"/>
</div>
`,
style: `
.checkout {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.checkout-form-row-input {
border: 1px solid #79747E;
box-sizing: border-box;
border-radius: 4px;
}
`,
};
}
OnRender() {
}
}
RegisterComponent(Checkout);

21
client/public/components/navbar.mjs
View File

@@ -1,6 +1,6 @@
import { RegisterComponent, Component, SideLoad } from './components.mjs'; import { RegisterComponent, Component, SideLoad } from './components.mjs';
import { LoginSignup, Signout } from '../auth.mjs'; import { LoginSignup, Signout } from '../auth.mjs';
import * as StorageListener from '../localStorage-listener.mjs'; import * as StorageListener from '../localstorage-listener.mjs';
// due to peculiarities in asynchronus loading of components, // due to peculiarities in asynchronus loading of components,
// we need to have this remember the state of the logged in user // we need to have this remember the state of the logged in user
@@ -46,13 +46,19 @@ class NavBar extends Component {
return; return;
} }
if (localStorage.admin === 'true' || localStorage.admin === true) {
this.root.querySelector('.stock-mode').style.display = 'flex';
} else {
this.root.querySelector('.stock-mode').style.display = 'none';
}
const account = this.root.querySelector('.account-item'); const account = this.root.querySelector('.account-item');
// doing this with proper dom manipulation wasn't working // doing this with proper dom manipulation wasn't working
account.innerHTML = ` account.innerHTML = `
<a class="nav-link" href="#">${localStorage.user}▾</a> <a class="nav-link" href="#">${localStorage.user}▾</a>
<ul class="sub-nav" > <ul class="sub-nav" >
<li><a class="sub-nav-link" href="#">My Account</a></li> <li><a class="sub-nav-link" href="#">My Orders</a></li>
<li><a class="sub-nav-link logout-button" href="#">Log Out</a></li> <li><a class="sub-nav-link logout-button" href="#">Log Out</a></li>
</ul> </ul>
`; `;
@@ -76,12 +82,6 @@ class NavBar extends Component {
this.SetupHamburger(); this.SetupHamburger();
this.OnLogin(); this.OnLogin();
if (localStorage.admin === true) {
this.root.querySelector('.stock-mode').style.display = 'flex';
} else {
this.root.querySelector('.stock-mode').style.display = 'none';
}
StorageListener.ListenOnKey('admin', (e) => { StorageListener.ListenOnKey('admin', (e) => {
const admin = e.value; const admin = e.value;
if (admin) { if (admin) {
@@ -91,8 +91,9 @@ class NavBar extends Component {
} }
}); });
this.root.querySelector('stock-slider').addEventListener('change', (e) => { this.root.querySelector('.stock-slider').addEventListener('change', (e) => {
console.log(e); const stock = e.target.checked;
localStorage.setItem('stock-mode', stock);
}); });
// setup log in button // setup log in button

4
client/public/featured/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>LegoLog: Featured Sets</title> <title>LegoLog Featured Sets</title>
<meta name="viewport"> <meta name="viewport">
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="../global.css"> <link rel="stylesheet" type="text/css" href="../global.css">
@@ -22,11 +22,9 @@
<script type="module" src="/components/components.mjs"></script> <script type="module" src="/components/components.mjs"></script>
<script type="module" src="/components/navbar.mjs"></script> <script type="module" src="/components/navbar.mjs"></script>
<script type="module" src="/components/search.mjs"></script> <script type="module" src="/components/search.mjs"></script>
<script type="module" src="/components/basket.mjs"></script>
<script type="module" src="/components/basket-popout.mjs"></script> <script type="module" src="/components/basket-popout.mjs"></script>
<script type="module" src="/components/accessability-popout.mjs"></script> <script type="module" src="/components/accessability-popout.mjs"></script>
<script type="module" src="/components/notificationbar.mjs"></script> <script type="module" src="/components/notificationbar.mjs"></script>
<script type="module" src="/components/storefront.mjs"></script>
<script type="module" src="/components/tag.mjs"></script> <script type="module" src="/components/tag.mjs"></script>
<script type="module" src="/components/product-list.mjs"></script> <script type="module" src="/components/product-list.mjs"></script>
<script type="module" src="/components/super-compact-listing.mjs"></script> <script type="module" src="/components/super-compact-listing.mjs"></script>

2
client/public/index.mjs
View File

@@ -1,7 +1,7 @@
// import { RendererPreInit, BrickRenderer } from './brick-renderer/index.mjs'; // import { RendererPreInit, BrickRenderer } from './brick-renderer/index.mjs';
import { InitAuth0 } from './auth.mjs'; import { InitAuth0 } from './auth.mjs';
import * as StorageListener from './localStorage-listener.mjs'; import * as StorageListener from './localstorage-listener.mjs';
function main() { function main() {
InitAuth0(); InitAuth0();

7
client/public/localStorage-listener.mjs
View File

@@ -1,4 +1,8 @@
// this was made for the purpose of being able to listen to changes in localStorage
// because i needed that to see if the user was admin or not to display certain elements
// in the navbar
// HOWEVERRRRRRRRRRRRRRRRR it would have been like SUPER SUPER useful when making the
// basket. hey whatever it's done now. TODO for a future refractor i guess...
const CallbackKeyArray = []; const CallbackKeyArray = [];
const OldSetItem = localStorage.setItem; const OldSetItem = localStorage.setItem;
@@ -19,6 +23,7 @@ function OnStorage(event) {
} }
export function Init() { export function Init() {
// WHAAAAAAAAAAAAAAAAAAAAAT
localStorage.setItem = function (key, value) { localStorage.setItem = function (key, value) {
OldSetItem.apply(this, arguments); OldSetItem.apply(this, arguments);
OnStorage({ OnStorage({

3
client/public/product/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>LegoLog!</title> <title>LegoLog Product Page</title>
<meta name="viewport"> <meta name="viewport">
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="../global.css"> <link rel="stylesheet" type="text/css" href="../global.css">
@@ -18,7 +18,6 @@
<script type="module" src="/components/components.mjs"></script> <script type="module" src="/components/components.mjs"></script>
<script type="module" src="/components/navbar.mjs"></script> <script type="module" src="/components/navbar.mjs"></script>
<script type="module" src="/components/search.mjs"></script> <script type="module" src="/components/search.mjs"></script>
<script type="module" src="/components/basket.mjs"></script>
<script type="module" src="/components/basket-popout.mjs"></script> <script type="module" src="/components/basket-popout.mjs"></script>
<script type="module" src="/components/accessability-popout.mjs"></script> <script type="module" src="/components/accessability-popout.mjs"></script>
<script type="module" src="/components/notificationbar.mjs"></script> <script type="module" src="/components/notificationbar.mjs"></script>

2
client/public/search/index.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>LegoLog: Featured Sets</title> <title>LegoLog Search Results</title>
<meta name="viewport"> <meta name="viewport">
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="../global.css"> <link rel="stylesheet" type="text/css" href="../global.css">

4
db/dump.sql
View File

@@ -16539,3 +16539,7 @@ INSERT INTO lego_set_inventory (set_id, stock, price, new_price, last_updated) V
-- admin user -- admin user
INSERT INTO users (id, email, admin, nickname, date_created, date_updated) VALUES ('62686cdead060b0068fe7d38', 'systemadmin@legolog.com', true, 'systemadmin', NOW(), NOW()); INSERT INTO users (id, email, admin, nickname, date_created, date_updated) VALUES ('62686cdead060b0068fe7d38', 'systemadmin@legolog.com', true, 'systemadmin', NOW(), NOW());
-- offer code
INSERT INTO offer_code (code, discount, discount_type, min_order_value, type, expiry_date) VALUES ('LEGO10', 10, 1, 10.00, 'set', '2022-06-10');

20
db/schema.sql
View File

@@ -90,22 +90,34 @@ CREATE TABLE IF NOT EXISTS users (
date_updated TIMESTAMP WITHOUT TIME ZONE NOT NULL date_updated TIMESTAMP WITHOUT TIME ZONE NOT NULL
); );
CREATE TABLE IF NOT EXISTS orders ( CREATE TABLE IF NOT EXISTS order_log (
id VARCHAR (50) NOT NULL PRIMARY KEY, id VARCHAR (50) NOT NULL PRIMARY KEY,
user_id VARCHAR (50) NOT NULL, user_id VARCHAR (50) NOT NULL, -- 0 if guest
subtotal DECIMAL NOT NULL,
date_placed TIMESTAMP WITHOUT TIME ZONE NOT NULL, date_placed TIMESTAMP WITHOUT TIME ZONE NOT NULL,
FOREIGN KEY ( user_id ) REFERENCES users( id ) FOREIGN KEY ( user_id ) REFERENCES users( id )
); );
CREATE TABLE IF NOT EXISTS order_items ( CREATE TABLE IF NOT EXISTS order_item (
order_id VARCHAR (50) NOT NULL, order_id VARCHAR (50) NOT NULL,
brick_id VARCHAR (50), brick_id VARCHAR (50),
-- colour is a modifier for the brick -- colour is a modifier for the brick
brick_colour INT, brick_colour INT,
set_id VARCHAR (50), set_id VARCHAR (50),
amount INT NOT NULL, amount INT NOT NULL,
FOREIGN KEY ( order_id ) REFERENCES orders( id ), price_paid DECIMAL NOT NULL,
FOREIGN KEY ( order_id ) REFERENCES order_log( id ),
FOREIGN KEY ( brick_id ) REFERENCES lego_brick( id ), FOREIGN KEY ( brick_id ) REFERENCES lego_brick( id ),
FOREIGN KEY ( brick_colour ) REFERENCES lego_brick_colour( id ), FOREIGN KEY ( brick_colour ) REFERENCES lego_brick_colour( id ),
FOREIGN KEY ( set_id ) REFERENCES lego_set( id ) FOREIGN KEY ( set_id ) REFERENCES lego_set( id )
); );
CREATE TABLE IF NOT EXISTS offer_code (
id SERIAL NOT NULL PRIMARY KEY,
code TEXT NOT NULL,
discount DECIMAL NOT NULL, -- percentage or fixed amount
discount_type INT NOT NULL, -- 0 = percentage, 1 = fixed amount
min_order_value DECIMAL NOT NULL,
type TEXT NOT NULL, -- set or brick
expiry_date TIMESTAMP WITHOUT TIME ZONE NOT NULL
);

5
src/routes/helpers.js
View File

@@ -2,8 +2,7 @@ const BrickController = require('../controllers/brick-controller.js');
const SetController = require('../controllers/set-controller.js'); const SetController = require('../controllers/set-controller.js');
const Logger = require('../logger.js'); const Logger = require('../logger.js');
// AppEng Deadline const EndDate = new Date('2022-06-10T00:00:00.000Z');
const EndDate = new Date(1651269600 * 1000);
function Special(req, res) { function Special(req, res) {
res.send({ res.send({
@@ -15,6 +14,8 @@ function Special(req, res) {
} }
async function CalculateBasketPrice(req, res) { async function CalculateBasketPrice(req, res) {
// and here we remmeber the c days where you had to declare all
// of your variables at the top of the scope *ah*
const setList = []; const setList = [];
const setQuantities = []; const setQuantities = [];
const brickList = []; const brickList = [];