details page #12 #33 #34

config.env

@@ -1,2 +1,2 @@
 DATABASE_URL = postgres://wfzqwuxojoldyy:fcfa445436e8af3dc5fcc5b983b9a9c61742af639977313a302cccaae1a056da@ec2-54-83-59-144.compute-1.amazonaws.com:5432/dbr227kt3c7e59?ssl=true
-db=postgres://salam:salam@localhost:5432/elegant
+SECRET_COOKIE = WMS2018

public/css/details.css

@@ -1,38 +1,57 @@
+body {
+  margin: 0px;
+  padding: 0px;
+}
 .style{
-  border: 2px solid gray;
+  height: 30vh;
+  width: 17vw;
+  border: 1px solid gray;
   border-radius: 2vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-left: 10px;
+  margin-right: 10px;
+
+}
+.info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 .bigphoto{
-  width: 45vw;
-  margin-right: 1%;
+  width: 30%;
+  height: 60vh;
+  display: flex;
+  align-self: center;
+  margin-bottom: 20px;
 }
 
-.topContainer{
-  display: flex;
-  height: 80vh;
-  justify-content: center;
-  margin-bottom: 1%;
+.bigphoto img{
+  height: 85%;
+
 }
 
-.rightContainer{
+.topContainer{
   display: flex;
   flex-direction: column;
-  width: 23vw;
+  align-content: space-between;
 }
-.cont1{
-  height: 50%;
-  margin-bottom: 1%;
+
+
+
+.photos{
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   justify-content: center;
-  align-items: center;
+  margin-bottom: 20px;
+
 }
-.cont2{
-  height: 50%;
+.rightContainer{
+  display: flex;
+  flex-direction: column;
 }
 
 .bottomContainer{
@@ -43,18 +62,6 @@
   margin: 0 auto;
 }
 
-.cont11{
-  width: 32.433333%;
-    margin-right: 1%;
-}
-.cont12{
-  width: 32.433333%;
-    margin-right: 1%;
-}
-.cont13{
-  width: 33.433333%;
-}
-
 .navbar {
   display: flex;
   padding-left: 15px;

public/css/style.css

@@ -56,14 +56,12 @@ body {
 }
 /* end header */
 
-
-
 .navbar {
   display: flex;
   padding-left: 15px;
   padding-right: 15px;
   height: 70px;
-  background-color: #FAFAFA;
+  background-color: #fafafa;
   align-items: center;
   justify-content: center;
 }
@@ -119,7 +117,6 @@ body {
   font-size: 14px;
   color: white;
   position: absolute;
-
 }
 
 .boxs {
@@ -161,11 +158,50 @@ body {
   color: #752223;
 }
 
-.fa{
+.fa {
   display: inline-block;
-    font: normal normal normal 14px/1 FontAwesome;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    color: #752223;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  color: #752223;
+}
+
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0, 0, 0); /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  background-color: #fefefe;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+/* The Close Button */
+.close {
+  color: #aaaaaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
 }

public/js/functions.js

@@ -1,5 +1,6 @@
-function fetchFunction(url,data,cb) {
+function fetchFunction(url, data, cb) {
   fetch(url, {
+
    method: 'POST',
    headers: {
      'Accept': 'application/json',
@@ -14,12 +15,136 @@ function fetchFunction(url,data,cb) {
  .catch( (err) => {
    console.log(err);
  });
+
 }
 
 function burgerAction() {
-  var div =  document.getElementById('sidebar');
-  var btn = document.getElementById('burgerButton');
-  div.classList.toggle("active");
+  const div = document.getElementById('sidebar');
+  const btn = document.getElementById('burgerButton');
+  div.classList.toggle('active');
+}
+
+let save;
+function btnClick(id) {
+  const elem = document.getElementById(id);
+  const heart = elem.className;
+  const p = document.getElementById('text');
+  const modal = document.getElementById('myModal');
+  const span = document.getElementById('close');
+  if (heart === 'fa fa-heart-o') {
+    save = true;
+    elem.classList.remove('fa-heart-o');
+    elem.classList.add('fa-heart');
+    fetchFunction(
+      '/saved',
+      JSON.stringify({
+        clothId: id,
+      }),
+      (err, result) => {
+        if (err) {
+          p.textContent = 'Erorr in server';
+          modal.style.display = 'block';
+        } else if (result.status === 401) {
+          p.textContent = 'Login first';
+          modal.style.display = 'block';
+          span.onclick = () => {
+            modal.style.display = 'none';
+            window.location.pathname = '/login';
+          };
+          window.onclick = (event) => {
+            if (event.target == modal) {
+              modal.style.display = 'none';
+              window.location.pathname = '/login';
+            }
+          };
+        } else {
+          p.textContent = 'Saved successed';
+          modal.style.display = 'block';
+          span.onclick = () => {
+            modal.style.display = 'none';
+            p.textContent = 'Unsaved successed';
+          };
+
+          window.onclick = (event) => {
+            if (event.target === modal) {
+              modal.style.display = 'none';
+              p.textContent = 'Unsaved successed';
+            }
+          };
+        }
+      },
+    );
+  } else {
+    save = false;
+    elem.classList.remove('fa-heart');
+    elem.classList.add('fa-heart-o');
+    fetchFunction(
+      '/unsaved',
+      JSON.stringify({
+        clothId: id,
+      }),
+      (err, result) => {
+        if (err) {
+          p.textContent = 'Erorr in server';
+          modal.style.display = 'block';
+        } else if (result.status === 401) {
+          p.textContent = "The clothes didn't un saved";
+          modal.style.display = 'block';
+        } else {
+          p.textContent = 'Unsaved successed';
+          modal.style.display = 'block';
+          span.onclick = () => {
+            modal.style.display = 'none';
+            p.textContent = 'Saved successed';
+          };
+
+          window.onclick = (event) => {
+            if (event.target === modal) {
+              modal.style.display = 'none';
+              p.textContent = 'Saved successed';
+            }
+          };
+        }
+      },
+    );
+  }
+}
+
+function savedpage(id) {
+  const elem = document.getElementById(id);
+  const heart = elem.className;
+  const p = document.getElementById('text');
+  const modal = document.getElementById('myModal');
+  const span = document.getElementById('close');
+  fetchFunction(
+    '/unsaved',
+    JSON.stringify({
+      clothId: id,
+    }),
+    (err, result) => {
+      if (err) {
+        p.textContent = 'Erorr in server';
+        modal.style.display = 'block';
+      } else if (result.status === 401) {
+        p.textContent = "The clothes didn't un saved";
+        modal.style.display = 'block';
+      } else {
+        p.textContent = 'Unsaved successed';
+        modal.style.display = 'block';
+        span.onclick = () => {
+          modal.style.display = 'none';
+          window.location.reload();
+        };
+
+        window.onclick = (event) => {
+          if (event.target === modal) {
+            modal.style.display = 'none';
+            window.location.reload();
+          }
+        };
+      }
+    },
+  );
 }
 
 function blogArticleId(id){

public/js/savedFashion.js

@@ -0,0 +1,5 @@
+function btnClick() {
+  const elem = document.querySelector('i');
+  elem.classList.remove('fa-heart-o');
+  elem.classList.add('fa-heart');
+}

src/controllers/blogArtical.js

@@ -1,15 +1,14 @@
 const view = require('../models/queries/viewBlogs.js');
 
 
-exports.get=(req,res)=>{
+exports.get = (req, res) => {
   const id = req.params.id;
-  view.viewBlog(id,(errInOneBlog,blogdata) =>{
-    if(errInOneBlog) response.status(404).send();
+  view.viewBlog(id, (errInOneBlog, blogdata) => {
+    if (errInOneBlog) response.status(404).send();
     else {
-      return res.render('blogArtical' , {
-          layout: 'fashion', blogdata , style: 'blogArtical', title: 'blog Articl',
-        });
+      return res.render('blogArtical', {
+        layout: 'fashion', blogdata, style: 'blogArtical', title: 'blog Articl',
+      });
     }
   });
-
-}
+};

src/controllers/details.js

@@ -1,3 +1,15 @@
+const viewDetails = require('../models/queries/viewDetails');
+
 exports.get = (req, res) => {
-  res.render('details', { style: 'details', layout: 'fashion', title: 'details' });
+  const imgId = req.params.id;
+  viewDetails(imgId, (err, details) => {
+    if (err) return res.status(500).send({ err });
+    const bigimg = {
+      img: details[0].img,
+      gender: details[0].gender,
+    };
+    return res.render('details', {
+      style: 'details', layout: 'fashion', title: 'details', details, bigimg,
+    });
+  });
 };