Changeset d66b8eb for phonelux-frontend/src/components/PhoneOfferComponent

Timestamp:

09/21/22 18:47:39 (2 years ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

34950c6

Parents:

5201690

Message:

Component for editing offers added

Location:

phonelux-frontend/src/components/PhoneOfferComponent

Files:

• PhoneOfferComponent.css (modified) (1 diff)
• PhoneOfferComponent.js (modified) (6 diffs)

phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css

@@ -35 +35 @@
     cursor: pointer;
 }
+
+.phone-offer-compare-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-remove-favouriteoffer-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-remove-favouriteoffer-icon{
+    color: rgb(226, 213, 39);
+}
+
+.phone-offer-compare-selected-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-compare-selected-icon{
+    color: rgb(226, 213, 39);
+}
+
+
+
+

phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js

@@ -9 +9 @@
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import CheckIcon from '@mui/icons-material/Check';
+import CompareIcon from '@mui/icons-material/Compare';
+import BookmarkRemoveIcon from '@mui/icons-material/BookmarkRemove';
 
 export class PhoneOfferComponent extends Component {
@@ -16 +18 @@
     
       this.state = {
-       
       }
     }
@@ -72 +73 @@
       });
     }
+
+    handleOfferCompare = () => {
+      let offersToCompare = []
+     if(localStorage.getItem('offersToCompare'))
+     {
+      offersToCompare = JSON.parse(localStorage.getItem('offersToCompare'))
+     }
+
+     if(!offersToCompare.includes(this.props.id) && offersToCompare.length<5)
+     {
+      offersToCompare.push(this.props.id)
+     }
+     else{
+      offersToCompare = offersToCompare.filter(offer => offer != this.props.id)
+     }
+     localStorage.setItem('offersToCompare', JSON.stringify(offersToCompare))
+     this.forceUpdate()
+    }
     
     
@@ -81 +100 @@
       <td>{this.props.price} ден.</td>
       <td>
+
+        {/* if else jsx syntax here to add icon */}
+
+        {(() => {
+          if(!localStorage.getItem('token'))
+          {
+            return <></>
+          }
+
+          if(localStorage.getItem('offersToCompare') && localStorage.getItem('offersToCompare').includes(this.props.id))
+          {
+            return  <Tippy placement='bottom' content='Избриши понуда за споредба'>
+                      <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-selected-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+                    </Tippy>
+          }
+          else{
+            return  <Tippy placement='bottom' content='Додади понуда за споредба'>
+            <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          </Tippy>
+          }
+      })()}
+        {/* {
+          localStorage.getItem('token') && !localStorage.getItem('offersToCompare').includes(this.props.id)? 
+          <Tippy placement='bottom' content='Додади понуда за споредба'>
+          <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+        </Tippy> : <></>
+        } */}
         {
           window.location.href.split('/')[5] == 'favouriteoffers' ?   
@@ -98 +144 @@
           localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length != 0? 
           <Tippy placement='bottom' content='Избриши од омилени понуди'>
-          <StarIcon onClick={this.removeFromFavourite} className='phone-offer-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          <StarIcon onClick={this.removeFromFavourite} className='phone-offer-remove-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
           </Tippy>
           : <></>
@@ -105 +151 @@
 
         <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
-          <button className='phone-offer-specifications-button'>Спецификации</button>
+          <button className='phone-offer-specifications-button'><b>Спецификации</b></button>
         </Link>
         </td>