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..e52ca4c 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/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
+}
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 = `
+ `;
+
+ 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
- - Automatic
+ - Car
- New
- Red
- Automatic
@@ -444,52 +218,6 @@ 2018 Toyota Supra
-
-
-

-
-
-
-
2018 Toyota Supra
-
-
- - Automatic
- - New
- - Red
- - Automatic
-
-
N70,000,000
-
-
-
-
-
-
-

-
-
-
-
Toyota
-
-
- - 2018
- - Supra
- - New
- - Red
- - Automatic
-
-
N70,000,000
-
-
-
-
-
+
+
+ Mark Ad As sold
+
+
+
+
+
+
+ Confirm Reject Offer
+
+
+
+
@@ -714,6 +375,9 @@ Status: Approved
+
+
+