wip create campaign notif (#535)

src/app/notifications/notification.component.css

@@ -587,12 +587,22 @@ input[type='date']::-webkit-calendar-picker-indicator {
 
 .description_createCampaign{
   margin-top: 1em;
-  margin-left: 5.7em;
+  margin-left: 1.25em;
   font-weight: 400;
   line-height: 18.2px;
   font-size: 14px;
   width: 37em;
-  padding-bottom: 1em;
+
+}
+
+.description_campaign_details{
+
+  margin-left: 1.25em;
+  font-weight: 400;
+  line-height: 18.2px;
+  font-size: 14px;
+  width: 37em;
+
 }
 /* will be uncommented */
  .pic_avatar_notif {
@@ -618,6 +628,11 @@ input[type='date']::-webkit-calendar-picker-indicator {
     width: 80%;
   }
 
+  .description_campaign_details{
+    margin: auto;
+    width: 80%;
+  }
+
   .link_container{
     border-radius: 0px;
     border-top-left-radius: 30px 30px !important;

src/app/notifications/notification.component.html

@@ -629,14 +629,14 @@
                             [src]="
                             getCampaignLogo(i.label.cmp_update)
                             "
-                            width="30px"
-                            style="top: 0.5em !important; float: left"
+
+                            style="top: 0.5em !important; float: left; width: 2.25em !important; height: 2.25em ! important;"
                           />
                           <div
                             style="
                               display: block;
                               padding-top: 0.5em;
-                              padding-left: 4.5em;
+                              padding-left: 3em;
                               margin-top: 0.5em;
                             "
                           >
@@ -648,16 +648,25 @@
                                 font-family: 'poppins';
                               "
                             >
-                              {{ i.label.cmp_update.title }}
+                              {{ i.label.cmp_update.title | titlecase }}
                             </p>
                             <p style="margin-bottom: 0; color: #75758f">
-                              {{ getCampaignStartDate(i.label.cmp_update) }}
+                              {{ getCampaignStartDate(i.label.cmp_update) }}.
                             </p>
                           </div>
                         </div>
                         <p class="description_createCampaign">
                           {{ i.label.cmp_update.resume }}
                         </p>
+                        <p class="description_campaign_details">
+                          <img src="./assets/Images/views-icon.svg"/>
+                          {{ i.label.views || 0}}
+                          <span style="margin-left: 5%;">{{
+                            (getRetrieveBudget(i.label.cmp_update)
+
+                              | number) || '--.--'
+                          }} <span style="font-weight: bold;">{{ getTokenSymbol(i.label.cmp_update.token)}}</span></span>
+                        </p>
                         <div style="width: 100%; height: 2em">
                           <button
                             [className]=" !disableRetrieveButtonAction(i.label.cmp_update) ? 'budget_button' : 'budget_button_disabled'"

src/app/notifications/notification.component.ts

@@ -20,7 +20,7 @@ import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import { Big } from 'big.js';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter, map, takeUntil } from 'rxjs/operators';
 import { TokenStorageService } from '@app/core/services/tokenStorage/token-storage-service.service';
 import { INotificationsResponse } from '@app/core/notifications-response.interface';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -966,8 +966,37 @@ closeModal(content: any) {
   }
 
   getCampaignStartDate(cmp:any) {
-    const date = new Date(cmp.startDate * 1000);
-    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+    const startDate = new Date(cmp.startDate * 1000);
+    const currentDate = new Date();
+
+    // Calculate the time difference in milliseconds
+    const timeDifference: number = currentDate.getTime() - startDate.getTime();
+
+    // Calculate years, months, days, and hours
+    const years = Math.floor(timeDifference / (1000 * 60 * 60 * 24 * 365));
+    const remainingMilliseconds = timeDifference % (1000 * 60 * 60 * 24 * 365);
+    const months = Math.floor(remainingMilliseconds / (1000 * 60 * 60 * 24 * 30));
+    const remainingDays = Math.floor(remainingMilliseconds / (1000 * 60 * 60 * 24));
+    const days = remainingDays % 30;
+    const remainingHours = Math.floor((remainingMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+
+    // Construct the result string
+    let result = '';
+    if (years > 0) {
+        result += `${years} y`;
+    }
+    if (months > 0) {
+        result += `${months} m`;
+    }
+    if (days > 0) {
+        result += `${days} d`;
+    }
+    if (remainingHours > 0) {
+        result += `${remainingHours} h`;
+    }
+
+    return result.trim();
+
   }
 
   redirectToCampaign(cmp:any) {
@@ -1010,8 +1039,30 @@ closeModal(content: any) {
 
 
   }
-
-
+  getTokenSymbol(token:any) {
+    return token.name.startsWith('SATT') ? 'SaTT' : token.name
+  }
+  getStatistics(hash:string) {
+    this.campaignService.getStatisticsCampaign(hash)
+      .pipe(
+        map((response: any) => {
+          if (response.message === 'success' && response.code === 200) {
+
+            return response.data.stat;
+          }
+        }),
+
+      )
+      .subscribe((data: any) => {
+        let sumOfViews = 0;
+        for (const platform in data) {
+          if (data.hasOwnProperty(platform)) {
+            sumOfViews += data[platform].views;
+          }
+        }
+        return sumOfViews;
+      });
+  }
   getRetrieveBudget(cmp:any) {
     return parseInt(cmp.cost) / 10 **18
   }
@@ -1129,6 +1180,9 @@ closeModal(content: any) {
 
   }
   switchFunction(item: any) {
+    if(item.type === 'create_campaign') {
+      item.label.views = this.getStatistics(item.label.cmp_update.hash)
+    }
     if(item.type === 'cmp_candidate_reject_link') item.label.showReason = false
     const etherInWei = new Big(1000000000000000000);
     //let itemDate = new Date(item.created);