[enh] Crowdfunding : affichage du % de financement

src/app/app.module.ts

@@ -29,6 +29,7 @@ import {AccountPage} from "../pages/account/account";
 import {ConnectPage} from "../pages/connect/connect";
 import {CryptoService} from "../services/crypo-service";
 import {SafeUrlPipe} from "../directives/safe-url.pipe";
+import {CrowdfundingService} from "../services/crowdfunding-service";
 
 const appRoutes: Routes = [
   {
@@ -125,6 +126,7 @@ const appRoutes: Routes = [
     ImageService,
     AuthService,
     CryptoService,
+    CrowdfundingService,
     {provide: APP_BASE_HREF, useValue: '/#/'},
     {provide: ErrorHandler, useClass: IonicErrorHandler}
   ]

src/app/app.scss

@@ -99,3 +99,45 @@ input.pubkey {
     display: none;
   }
 }
+
+
+
+.success {
+  color: green;
+
+  .range-bar {
+    background: #00b200 !important;
+  }
+
+  .range-knob {
+    background: #00b200 !important;
+  }
+}
+
+.successing {
+  color: orange;
+
+  .range-bar {
+    background: #fe6e11 !important;
+  }
+
+  .range-knob {
+    background: #fe6e11 !important;
+  }
+}
+
+.starting {
+  color: #aeae00;
+
+  .range-bar {
+    background: #dfdf00 !important;
+  }
+
+  .range-knob {
+    background: #dfdf00 !important;
+  }
+}
+
+.nothing {
+  color: gray;
+}

src/pages/announce/announce.html

@@ -21,10 +21,26 @@
       <p class="fees" *ngIf="announceService.ann.feesFloat">
         +{{ announceService.ann.fees }} Ğ1 (frais de transport)
       </p>
+      <ng-container *ngIf="announceService.ann.type == 'Crowdfunding'">
+        <h3>Financement (crowdfunding)</h3>
+        <ion-col item-right class="range-col" text-center [ngClass]="{ 'nothing': !announceService.ann.pctFunded, 'success': announceService.ann.pctFunded >= 100, 'successing': announceService.ann.pctFunded >= 50 && announceService.ann.pctFunded < 100, 'starting': announceService.ann.pctFunded >= 10 && announceService.ann.pctFunded < 50 }">
+          <h4 class="financed">Financé à {{ announceService.ann.pctFunded }} %</h4>
+          <ion-range [(ngModel)]="announceService.ann.pctFunded" disabled>
+          </ion-range>
+        </ion-col>
+        <ul>
+          <li *ngFor="let p of announceService.ann.montants">
+            Paiement de {{ (p.amount / 100).toFixed(2) }} Ğ1 par {{ p.issuer }}
+          </li>
+        </ul>
+      </ng-container>
       <h3>Paiement à</h3>
       <input class="pubkey" type="text" disabled value="{{ announceService.ann.pub }}">
       <h3>Stock</h3>
-      <p>
+      <p *ngIf="announceService.ann.stock == 1">
+        1 unité disponible.
+      </p>
+      <p *ngIf="announceService.ann.stock > 1">
         {{ announceService.ann.stock }} unités disponibles.
       </p>
 

src/pages/announce/announce.scss

@@ -8,4 +8,22 @@ announce {
     font-size: 25px;
     color: coral;
   }
+
+  .financed {
+    margin: 0;
+  }
+
+  ion-range {
+    padding: 0 !important;
+  }
+
+  ul {
+    margin-top: 0;
+    padding-top: 0;
+    padding-left: 30px;
+  }
+
+  li {
+    padding: 5px;
+  }
 }

src/pages/announce/announce.ts

@@ -3,6 +3,7 @@ import {AccountService} from "../../services/account-service";
 import {LoginService} from "../../services/login-service";
 import {ActivatedRoute} from "@angular/router";
 import {AnnounceService} from "../../services/announce-service";
+import {CrowdfundingService} from "../../services/crowdfunding-service";
 
 @Component({
   selector: 'announce',
@@ -14,6 +15,7 @@ export class AnnouncePage implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
+    private crowdfundingService: CrowdfundingService,
     public loginService:LoginService,
     public accountService:AccountService,
     public announceService:AnnounceService) {
@@ -29,6 +31,10 @@ export class AnnouncePage implements OnInit {
     this.route.params.subscribe(params => {
       if (params['uuid']) {
         return this.announceService.getAnnounce(params['uuid'])
+          .then(() => {
+            this.announceService.ann.pctFunded = this.crowdfundingService.getFundingAmount(this.announceService.ann)
+            this.announceService.ann.montants = this.crowdfundingService.getAmountsPaid(this.announceService.ann)
+          })
       }
     });
   }

src/pages/announce_new/announce_new.html

@@ -41,9 +41,9 @@
               </ion-item>
 
               <ion-item>
-                <ion-label>Crowdfunding (fonctionnalité à venir)</ion-label>
+                <ion-label>Crowdfunding</ion-label>
                 <ion-radio
-                  value="Crowdfunding" disabled></ion-radio>
+                  value="Crowdfunding"></ion-radio>
               </ion-item>
             </ion-list>
 

src/pages/home/home.html

@@ -9,15 +9,22 @@
     Dernières annonces
   </ion-list-header>
   <ion-list id="home-list" *ngIf="announces.length > 0">
-    <button ion-item *ngFor="let a of announces" routerLink="/announce/{{ a.uuid }}">
+    <button ion-item class="ligne" *ngFor="let a of announces" routerLink="/announce/{{ a.uuid }}">
       <ion-avatar item-left>
         <img *ngIf="a.thumbnail" src="{{ a.thumbnail }}">
         <div class="nophoto" *ngIf="!a.thumbnail">
           <ion-icon name="photos"></ion-icon>
         </div>
       </ion-avatar>
-      <h2>{{ a.title }} • <span class="author">{{ a.account.title }}</span></h2>
-      <p>{{ a.descLigne }}</p>
+      <ion-col item-right>
+        <h2>{{ a.title }} • <span class="author">{{ a.account.title }}</span></h2>
+        <p>{{ a.descLigne }}</p>
+      </ion-col>
+      <ion-col item-right class="range-col" *ngIf="a.type == 'Crowdfunding'" text-center [ngClass]="{ 'nothing': !a.pctFunded, 'success': a.pctFunded >= 100, 'successing': a.pctFunded >= 50 && a.pctFunded < 100, 'starting': a.pctFunded >= 10 && a.pctFunded < 50 }">
+        <span>Financé à {{ a.pctFunded }} %</span>
+        <ion-range [(ngModel)]="a.pctFunded" disabled>
+        </ion-range>
+      </ion-col>
       <h3 clear item-right>{{ a.price }} Ğ1</h3>
     </button>
   </ion-list>

src/pages/home/home.scss

@@ -13,4 +13,36 @@ home {
     font-size: 13px;
     color: #588fee;
   }
+
+  .ligne > .item-inner > .input-wrapper {
+    flex: 0;
+  }
+
+  .col {
+    height: 50px;
+    text-overflow: ellipsis;
+
+    p {
+      height: 16px;
+      overflow: hidden;
+    }
+  }
+
+  ion-range {
+    width: 90px !important;
+  }
+
+  ion-range.range-md {
+    padding: 0;
+    height: 24px;
+  }
+
+  .range-col {
+    width: 300px;
+    flex: 0;
+  }
+
+  .range-col > span {
+    font-size: 12px;
+  }
 }

src/pages/home/home.ts

 import { Component } from '@angular/core';
 import {AnnounceService} from "../../services/announce-service";
+import {CrowdfundingService} from "../../services/crowdfunding-service";
 
 @Component({
   selector: 'home',
@@ -10,11 +11,12 @@ export class HomePage {
   titre:string = "Toutes les annonces"
   announces:Array<any>
 
-  constructor(private announceService:AnnounceService) {
+  constructor(private announceService:AnnounceService, private crowdfundingService:CrowdfundingService) {
     this.announces = []
     this.announceService.listAllAnnounces().then(announces => this.announces = announces.map(a => {
       a.thumbnail = a.images[0]
       a.descLigne = a.desc.replace(/\\n/g, ' ')
+      a.pctFunded = this.crowdfundingService.getFundingAmount(a)
       return a
     }))
   }

src/services/crowdfunding-service.ts

+import {Injectable} from "@angular/core";
+
+@Injectable()
+export class CrowdfundingService {
+
+  constructor() {
+  }
+
+  getFundingAmount(a) {
+    // Calcul du montant financé
+    const montants = this.getAmountsPaid(a)
+    let montant = 0
+    for (const mt of montants) {
+      montant += mt.amount
+    }
+    const prixSansVirgule = parseFloat(a.price) * 100
+    const pctFunded = (montant / prixSansVirgule) * 100
+    return parseInt(String(pctFunded))
+  }
+
+  getAmountsPaid(a) {
+    const montants = []
+    for (const tx of (a.payments || [])) {
+      for(const output of tx.outputs) {
+        if (output.match(new RegExp(":SIG\\(" + a.pub + "\\)"))) {
+          const sp = output.split(':')
+          const amount = parseInt(sp[0])
+          const base = parseInt(sp[1])
+          montants.push({
+            amount: amount * Math.pow(10, base),
+            issuer: tx.issuers[0]
+          })
+        }
+      }
+    }
+    return montants
+  }
+}