From ae5c5e4c5b558ed7cb3e85d3b068f10148bfaf8b Mon Sep 17 00:00:00 2001 From: amoskeyz Date: Sun, 21 Jul 2019 04:55:18 +0100 Subject: [PATCH 1/2] feat(main page) add functionality to user main page -> consume user api endpoints [Delivers #167415577] --- UI/css/main.css | 96 ++++++++- UI/css/style.css | 2 +- UI/index.html | 4 +- UI/js/automart.js | 112 ++++++++++ UI/js/config.js | 8 +- UI/js/login.js | 14 +- UI/js/main.js | 141 ++++++------ UI/js/onLoad.js | 165 ++++++++++++++ UI/js/user.js | 12 +- UI/main.html | 536 +++++++++------------------------------------- 10 files changed, 560 insertions(+), 530 deletions(-) create mode 100644 UI/js/automart.js create mode 100644 UI/js/onLoad.js diff --git a/UI/css/main.css b/UI/css/main.css index 320fba2..bc3138c 100644 --- a/UI/css/main.css +++ b/UI/css/main.css @@ -156,7 +156,8 @@ nav{ } .profile_img{ padding-top: 10px; - background: white; + background: white; + height: 210px; } .profile_img > img{ @@ -323,6 +324,38 @@ article{ font-size: 20px; } +.home::before{ + position: absolute; + content: '\f015'; + font-weight: 900; + font-size: 25px; + top:-5px; + right:200px; +} + +.pos::before{ + position: absolute; + content: '\f067'; + font-weight: 900; + left:70px; + font-size:20px +} + +.ord::before{ + position: absolute; + content: '\f218'; + font-weight: 900; + font-size: 20px; + left: 70px +} +.mads::before{ + position: absolute; + content: '\f02c'; + font-weight: 900; + left:70px; + font-size:20px +} + .grow { transform: scale(1); } @@ -339,7 +372,7 @@ article{ justify-content: center } -.tag-button > button{ +.tag-button > button, .postAds{ margin: 60px 10px 10px 10px; padding:20px; font-size: 16px; @@ -350,6 +383,11 @@ article{ transition: all 0.25s linear; } +.postAds{ + margin:0; + margin-right:120px; +} + .tag-button > button:nth-child(1){ background: red; } @@ -429,6 +467,53 @@ article > p{ margin: 7px } +.loader { + border: 5px solid #f3f3f3; + border-radius: 50%; + border-top: 5px solid #3498db; + width: 20px; + height: 20px; + animation: spin 1s linear infinite; + position: absolute; + /* top: auto; */ + /* bottom: auto; */ + left: 0; + right:0; + margin: auto; + /* margin-top: -5px; */ + /* padding: */ + + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + + .connn{ + display: flex; + align-items: center; + width: 100%; + /* position: relative; */ + } + .loaderw { + border: 5px solid #f3f3f3; + border-radius: 50%; + border-top: 5px solid #3498db; + width: 40px; + height: 40px; + animation: spin 1s linear infinite; + position: absolute; + top: 250px; + /* bottom: 0; */ + left: 0; + right:0; + margin: auto; + /* margin-top: -5px; */ + /* padding: */ + + } #main_bar{ height: 91vh; @@ -636,14 +721,15 @@ h3{ width:400px; height:300px; border:2px solid grey; - padding: 3px + padding: 3px; + margin-right: 150px; } .car-model > label{ display: flex; - margin: auto; + margin-left: 100px; margin-top: 20px; padding:10px; - width:25%; + width:20%; border: 2px solid slateblue; background: white; transition: all 0.25 linear ease; diff --git a/UI/css/style.css b/UI/css/style.css index 22c456e..e9366de 100644 --- a/UI/css/style.css +++ b/UI/css/style.css @@ -111,7 +111,7 @@ nav{ rgba(0,0,0,0.8), rgba(96,73,203,0.8) ), - url(../img/34.jpg) no-repeat; + url(http://res.cloudinary.com/amoslv/image/upload/v1563476573/eleouih7selykavbixk6.jpg) no-repeat; background-size: cover; display: flex; align-items: center; diff --git a/UI/index.html b/UI/index.html index bd43f83..2b10484 100644 --- a/UI/index.html +++ b/UI/index.html @@ -269,8 +269,8 @@

24 Hour

- - + + diff --git a/UI/js/automart.js b/UI/js/automart.js new file mode 100644 index 0000000..1d1c505 --- /dev/null +++ b/UI/js/automart.js @@ -0,0 +1,112 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable no-undef */ + +const showBox = document.querySelector('.scrolling-ads'); +const input = document.querySelector('.iin'); +const post = document.querySelector('.postAds'); +const spinne = document.querySelector('.spinne'); +const spin = document.querySelector('.spin'); +const Bar = document.querySelector('#bar'); +const modelDetails = document.querySelector('.model-details'); +const profile = document.querySelector('.pross'); + + +modelDetails.style.display = 'none'; +showBox.style.display = 'none'; +Bar.style.display = 'none'; +let carStatus; +const displayCars = (carObj) => { + carStatus = 'newest'; + const { + id, car_image, manufacturer, model, status, price, + } = carObj; + // console.log(carObj); + if (status === 'sold') carStatus = 'solder'; + const carHtml = ` + +
+ +

${manufacturer} ${model}

+

Nigeria

+

N${price}

+
+ `; + + return carHtml; +}; + +const getCarDetails = () => { + const manufacturer = document.querySelector('.manufacturer').value; + const model = document.querySelector('.model').value; + const bodyType = document.querySelector('.body-type').value; + const price = document.querySelector('.price').value; + const state = document.querySelector('.state').value; + // const location = document.querySelector('.locationn').value; + const carObj = { + manufacturer, model, body_type: bodyType, price, state, + }; + return carObj; +}; +let carimage; + +input.addEventListener('input', async (e) => { + // console.log(profile); + profile.attributes.src.value = URL.createObjectURL(input.files[0]); + const fet = async (formData) => { + const object = { + method: 'post', + headers: new Headers({ + token, + }), + body: formData, + }; + + const response = await fetch(`${devURL}upload`, object); + const statusCode = response.status; + const responseObj = await response.json(); + return { responseObj, statusCode }; + }; + + const formData = new FormData(); + formData.append('photo', input.files[0]); + formData.append('files', 'photo'); + + spin.showModal(); + + carimage = await fet(formData); + // console.log(carimage); + + spin.className = 'grow'; + + if (carimage.statusCode === 200) { + modelDetails.style.display = 'block'; + spin.close(); + // post.disable = false; + } + + if (carimage.statusCode === 400) { + // modelDetails.style.display = 'none'; + notify.textContent = 'Network Error, Please Reload'; + spin.close(); + } +}); +// console.log(post.disable = true); +post.addEventListener('click', async () => { + if (carimage.responseObj.data) { + const carDetails = getCarDetails(); + const url = `${devURL}/car/`; + const postCar = await fetcher(url, 'POST', carDetails); + + if (postCar.statusCode === 201) { + const urx = `${devURL}cars/${postCar.responseObj.data.id}`; + const { responseObj, statusCode } = await fetcher(urx, 'PATCH', { car_image: carimage.responseObj.data }); + if (statusCode === 200) { + // console.log(responseObj); + window.location = 'main.html'; + } + } + // if (statusCode === 400) { + + // } + } +}); diff --git a/UI/js/config.js b/UI/js/config.js index 69ef56e..2234363 100644 --- a/UI/js/config.js +++ b/UI/js/config.js @@ -1,7 +1,7 @@ /* eslint-disable no-unused-vars */ /* eslint-disable no-undef */ -const { authtoken } = localStorage; +const { token } = localStorage; // const devURL = 'http://localhost:3000/api/v1/'; @@ -13,13 +13,15 @@ const fetcher = async (url, method, body = undefined) => { method, headers: new Headers({ 'Content-Type': 'application/json', - authtoken, + token, }), body: JSON.stringify(body), }; + // console.log(object); const response = await fetch(url, object); + // console.log(response); const statusCode = response.status; const responseObj = await response.json(); - console.log(responseObj); + // console.log(responseObj); return { responseObj, statusCode }; }; diff --git a/UI/js/login.js b/UI/js/login.js index 0c19323..a652305 100644 --- a/UI/js/login.js +++ b/UI/js/login.js @@ -75,7 +75,7 @@ display.addEventListener('click', async (event) => { display.classList.add('effect'); display.classList.remove('uuu'); } - + if (checker && !submitFlag) { const url = `${devURL}user`; const { responseObj, statusCode } = await fetcher(url, 'POST', details); @@ -83,9 +83,10 @@ display.addEventListener('click', async (event) => { if (statusCode === 200) { add.classList.add('move-left'); add.classList.remove('move-right'); - userName.textContent = `${responseObj.data.firstName} ${responseObj.data.lastName}`; + console.log(responseObj); + userName.textContent = `${responseObj.data.first_name} ${responseObj.data.last_name}`; userEmail.textContent = `${responseObj.data.email}`; - image.attributes.src.value = 'img/avatar.png'; + image.attributes.src.value = `${responseObj.data.profile_pic}`; detailss.style.opacity = '1'; goBack.style.display = 'initial'; spinner.style.display = 'none'; @@ -127,7 +128,9 @@ display.addEventListener('click', async (event) => { no.style.display = 'block'; no.style.color = 'rgb(23, 148, 23)'; const { token } = responseObj.data; - localStorage.setItem('authtoken', token); + localStorage = ''; + localStorage.setItem('token', token); + localStorage.setItem('userDet', input[1].value); if (responseObj.data.email === 'admin@automart.com') { setTimeout(() => { window.location = 'admin.html'; }, 3000); @@ -146,7 +149,6 @@ display.addEventListener('click', async (event) => { } if (!checker) { - console.log('im here'); spinner.style.display = 'none'; display.classList.add('effect'); display.classList.remove('uuu'); @@ -181,4 +183,4 @@ window.addEventListener('load', () => { inputs.forEach((input) => { input.value = ''; }); -}); \ No newline at end of file +}); diff --git a/UI/js/main.js b/UI/js/main.js index b3a5dae..5afe160 100644 --- a/UI/js/main.js +++ b/UI/js/main.js @@ -1,3 +1,4 @@ +/* eslint-disable no-undef */ const a = document.querySelectorAll('a'); const imgg = document.querySelector('.amos'); const purchase = document.querySelector('.purchase-btn'); @@ -7,7 +8,7 @@ const purchaseDialog = document.querySelector('.purchase'); const leftBar = document.querySelector('#left_bar'); const mainBar = document.querySelector('#main_bar'); const rightBar = document.querySelector('#right_bar'); -const Bar = document.querySelector('#bar'); +// const Bar = document.querySelector('#bar'); const updateDialog = document.querySelector('.update-dialog'); const acceptDialog = document.querySelector('.accept-dialog'); const counterDialog = document.querySelector('.counter-dialog'); @@ -21,8 +22,6 @@ const harsh = document.querySelector('.harsh'); const harsh111 = document.querySelector('.harsh111'); const counterPrice = document.querySelectorAll('.counter'); const dialog = document.querySelectorAll('dialog'); -const input = document.querySelector('.iin'); -const profile = document.querySelector('.pro'); const search = document.querySelector('.search'); const changer = document.querySelector('.changer'); const myOrder = document.querySelector('.ord'); @@ -31,86 +30,80 @@ const myAds = document.querySelector('.mads'); harsh.addEventListener('click', (event) => { - event.preventDefault(); - leftBar.style.display = 'inline-grid'; - leftBar.style.left = '0px'; - harsh111.style.opacity = '0' - }); + event.preventDefault(); + leftBar.style.display = 'inline-grid'; + leftBar.style.left = '0px'; + harsh111.style.opacity = '0'; +}); - harsh111.addEventListener('click', (event) => { - event.preventDefault(); - rightBar.style.display = 'inline-grid'; - rightBar.style.right = '0px'; - mainBar.style.opacity='0.6'; - harsh.style.opacity = '0'; - }); +harsh111.addEventListener('click', (event) => { + event.preventDefault(); + rightBar.style.display = 'inline-grid'; + rightBar.style.right = '0px'; + mainBar.style.opacity = '0.6'; + harsh.style.opacity = '0'; +}); - search.addEventListener('click', (event) => { - event.preventDefault(); - rightBar.style.right = '-500px'; - harsh.style.opacity = '1'; - mainBar.style.opacity='1' - }); +search.addEventListener('click', (event) => { + event.preventDefault(); + rightBar.style.right = '-500px'; + harsh.style.opacity = '1'; + mainBar.style.opacity = '1'; +}); - if(rightBar.style.right === '-500px'){ - rightBar.style.opacity= '0' - } +if (rightBar.style.right === '-500px') { + rightBar.style.opacity = '0'; +} -input.addEventListener('input',(e)=>{ - profile.attributes.src.value = URL.createObjectURL(input.files[0]) -}) -a.forEach(car =>{ - car.addEventListener('click', (e) =>{ - let details = (e.path[0]); - imgg.attributes.src.value = `${details.attributes.src.value}`; - }) -}) +// input.addEventListener('input', () => { +// profile.attributes.src.value = URL.createObjectURL(input.files[0]); +// }); -updatePrice.forEach(up =>{ - up.addEventListener('click', (e) =>{ - updateDialog.showModal(); - }) -}) +updatePrice.forEach((up) => { + up.addEventListener('click', () => { + updateDialog.showModal(); + }); +}); -small.forEach(mall =>{ - mall.addEventListener('click', (e) =>{ - leftBar.style.left = '-500px'; - harsh111.style.opacity = '1' - }) -}) -acceptPrice.forEach(accept =>{ - accept.addEventListener('click', (e) =>{ - acceptDialog.showModal(); - }) -}) -rejectPrice.forEach(reject =>{ - reject.addEventListener('click', (e) =>{ - rejectDialog.showModal(); - }) -}) -counterPrice.forEach(counter =>{ - counter.addEventListener('click', (e) =>{ - counterDialog.showModal(); - }) -}) +small.forEach((mall) => { + mall.addEventListener('click', () => { + leftBar.style.left = '-500px'; + harsh111.style.opacity = '1'; + }); +}); +acceptPrice.forEach((accept) => { + accept.addEventListener('click', () => { + acceptDialog.showModal(); + }); +}); +rejectPrice.forEach((reject) => { + reject.addEventListener('click', () => { + rejectDialog.showModal(); + }); +}); +counterPrice.forEach((counter) => { + counter.addEventListener('click', () => { + counterDialog.showModal(); + }); +}); -purchase.addEventListener('click', (e) =>{ - purchaseDialog.showModal(); - dialog[1].className = 'grow'; +purchase.addEventListener('click', () => { + purchaseDialog.showModal(); + dialog[1].className = 'grow'; }); -report.addEventListener('click', (e) =>{ - reportDialog.showModal(); - dialog[0].className = 'grow'; -}) +report.addEventListener('click', () => { + reportDialog.showModal(); + dialog[0].className = 'grow'; +}); -close.forEach(clo =>{ -clo.addEventListener('click',(e)=>{ - dialog.forEach(dia =>{ - setTimeout( function(){dia.close();}, 300); - dialog[0].classList.remove('grow'); - }) -}) -}) \ No newline at end of file +close.forEach((clo) => { + clo.addEventListener('click', () => { + dialog.forEach((dia) => { + setTimeout(() => { dia.close(); }, 300); + dialog[0].classList.remove('grow'); + }); + }); +}); diff --git a/UI/js/onLoad.js b/UI/js/onLoad.js new file mode 100644 index 0000000..387d2f9 --- /dev/null +++ b/UI/js/onLoad.js @@ -0,0 +1,165 @@ +/* eslint-disable no-use-before-define */ +/* eslint-disable no-undef */ + +const name = document.querySelector('.name'); +const email = document.querySelector('.email'); +const photo = document.querySelector('.photo'); +const notify = document.querySelector('.notify'); +const roll = document.querySelector('.roll'); +const purchaseError = document.querySelector('.purchase-error'); +const manu = document.querySelector('.manu'); +const mod = document.querySelector('.mod'); +const boo = document.querySelector('.boo'); +const cost = document.querySelector('.cost'); +const sta = document.querySelector('.sta'); +const stat = document.querySelector('.stat'); +const dialogStatus = document.querySelector('.dia-status'); +const dialogPrice = document.querySelector('.dia-price'); +const purchaseOrder = document.querySelector('.purchase-order'); + + +let idPath; +window.addEventListener('load', async (event) => { + event.preventDefault(); + try { + carLoader(); + getUserProfile(); + // a.forEach((car) => { + // // console.log(car); + // car.addEventListener('click', () => { + // // const details = (e.path[0]); + // // console.log('i am here'); + // }); + // }); + } catch (error) { + notify.append = `${error}`; + } +}); + +showBox.addEventListener('click', async (e) => { + let initialPath = e.path[0]; + idPath = e.path[1].id; + let namePath = e.path[1]; + + if (initialPath.tagName !== 'IMG') { + initialPath = e.path[0].parentElement.firstElementChild; + namePath = e.path[1].lastChild.previousSibling.lastElementChild; + if (initialPath.tagName !== 'IMG') { initialPath = initialPath.firstElementChild; } + namePath = e.path[1].lastChild.previousSibling.lastElementChild; + } + + imgg.attributes.src.value = `${initialPath.attributes.src.value}`; + + if (idPath === '') idPath = e.path[0].id; + + const url = `${devURL}car/${idPath}`; + const { responseObj, statusCode } = await fetcher(url, 'GET'); + + if (statusCode === 200) { + manu.textContent = `Manufacturer: ${responseObj.data.manufacturer}`; + mod.textContent = `Model: ${responseObj.data.model}`; + boo.textContent = `Body Type: ${responseObj.data.body_type}`; + cost.textContent = `Price: N${responseObj.data.price}`; + stat.textContent = `State: ${responseObj.data.state}`; + sta.textContent = `status: ${responseObj.data.status}`; + sta.textContent = `status: ${responseObj.data.status}`; + dialogPrice.textContent = `Price: N${responseObj.data.price}`; + dialogStatus.textContent = `Status: ${responseObj.data.status}`; + } +}); + +const amountPurchase = document.querySelector('.price-offered'); +const priceOff = () => { + const amount = amountPurchase.value; + const price = { amount, car_id: idPath }; + return price; +}; + +roll.style.display = 'none'; + +purchaseOrder.addEventListener('click', async () => { + purchaseError.style.color = 'red'; + purchaseOrder.style.color = 'slateblue'; + roll.style.display = 'initial'; + const details = priceOff(); + + if (details.amount === '') { + purchaseError.textContent = 'Amount is required'; + roll.style.display = 'none'; + purchaseOrder.style.color = 'white'; + return; + } + + const url = `${devURL}order`; + const { responseObj, statusCode } = await fetcher(url, 'POST', details); + + if (statusCode === 201) { + purchaseError.style.color = 'green'; + purchaseError.textContent = 'Order Successfully Created'; + await setTimeout(() => { + purchaseDialog.close(); + roll.style.display = 'none'; + purchaseOrder.style.color = 'white'; + purchaseError.textContent = ''; + amountPurchase.value = ''; + }, 4000); + } + + if (statusCode === 400) { + purchaseError.textContent = `${responseObj.error}`; + roll.style.display = 'none'; + purchaseOrder.style.color = 'white'; + } +}); + +const carLoader = async () => { + try { + const url = `${devURL}car`; + const { responseObj, statusCode } = await fetcher(url, 'GET'); + + if (statusCode === 200) { + const { data } = responseObj; + data.forEach(async (cars) => { + const { + id, manufacturer, model, price, car_image, status, + } = cars; + const carObj = { + id, manufacturer, model, price, car_image, status, + }; + showBox.innerHTML += displayCars(carObj); + }); + + notify.style.display = 'none'; + spinne.style.display = 'none'; + Bar.style.display = 'block'; + showBox.style.display = 'flex'; + } else if (statusCode === 404) { + showBox.innerHTML = ''; + showBox.innerHTML = responseObj.error; + } else if (statusCode === 401) { + window.location = 'index.html'; + } + } catch (err) { + spinne.style.display = 'none'; + notify.textContent = 'Network Error, Please Reload'; + } +}; + +const details = { + email: localStorage.userDet, +}; + +const getUserProfile = async () => { + try { + const url = `${devURL}user`; + const { responseObj, statusCode } = await fetcher(url, 'POST', details); + + if (statusCode === 400) window.location = 'index.html'; + + photo.attributes.src.value = `${responseObj.data.profile_pic}`; + name.textContent = `${responseObj.data.first_name} ${responseObj.data.last_name}`; + email.textContent = `${responseObj.data.email}`; + } catch (err) { + notify.appendChild = `${err}`; + } +}; diff --git a/UI/js/user.js b/UI/js/user.js index 02dcd3e..383b554 100644 --- a/UI/js/user.js +++ b/UI/js/user.js @@ -12,9 +12,9 @@ const getSignUpDetails = () => { const lastName = document.querySelectorAll('.userName')[1].value; const email = document.querySelectorAll('.userName')[2].value; const password = document.querySelector('#password').value; - const phoneNumber = document.querySelector('#number').value; + const address = document.querySelector('#address').value; const obj = { - firstName, lastName, email, password, phoneNumber, + first_name: firstName, last_name: lastName, email, password, address, }; return obj; }; @@ -29,14 +29,20 @@ form.addEventListener('submit', async (event) => { spinner.style.display = 'initial'; const url = `${devURL}auth/signup`; deet.style.transform = 'scale(0)'; + const { responseObj, statusCode } = await fetcher(url, 'POST', details); + if (statusCode === 201) { deh.style.color = 'green'; deh.textContent = 'Registered Successful'; de.textContent = 'Welcome'; deet.style.transform = 'scale(1)'; + const { token } = responseObj.data; - localStorage.setItem('authtoken', token); + localStorage = ''; + localStorage.setItem('token', token); + localStorage.setItem('userDet', document.querySelectorAll('.userName')[2].value); + setTimeout(() => { window.location = 'main.html'; }, 3000); } else { deh.textContent = 'Error'; diff --git a/UI/main.html b/UI/main.html index bdb755e..2d4b068 100644 --- a/UI/main.html +++ b/UI/main.html @@ -11,18 +11,16 @@
- @@ -327,49 +128,22 @@

2018 Toyota Supra

Post Ad

+
- - + +
- - - - - - - -
+ + + + +
+ + +
@@ -386,7 +160,7 @@

2018 Toyota Supra

2018 Toyota Supra

@@ -714,6 +375,9 @@

Status: Approved

+ + + \ No newline at end of file From 6a057cd719a833b3a23278f5ccba414dbd735312 Mon Sep 17 00:00:00 2001 From: amoskeyz Date: Thu, 27 Feb 2020 13:05:48 +0100 Subject: [PATCH 2/2] add image --- UI/css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/UI/css/style.css b/UI/css/style.css index e9366de..647277f 100644 --- a/UI/css/style.css +++ b/UI/css/style.css @@ -111,7 +111,7 @@ nav{ rgba(0,0,0,0.8), rgba(96,73,203,0.8) ), - url(http://res.cloudinary.com/amoslv/image/upload/v1563476573/eleouih7selykavbixk6.jpg) no-repeat; + url(https://res.cloudinary.com/amoslv/image/upload/v1582802896/f2srootnaczaeav2agsv.jpg) no-repeat; background-size: cover; display: flex; align-items: center; @@ -980,4 +980,4 @@ footer{ font-size: 16px } -} \ No newline at end of file +}