alerts-ui: Add a message with the summary of the fixed price alert to…

… create
AlexITC · Jan 15, 2018 · 1d1dce4 · 1d1dce4
1 parent 2f881c4
commit 1d1dce4
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/alerts-ui/src/app/app.component.ts b/alerts-ui/src/app/app.component.ts
@@ -43,6 +43,8 @@ export class AppComponent {
       'message.resolveCaptcha': 'Resolve the reCAPTCHA',
       'message.alertCreated': 'Your alert was created',
       'message.confirmDeleteAlert': 'The alert is going to be deleted, continue?',
+      'message.yourAboveFixedPriceAlert': 'You will be notified when {{currency}} is above {{price}} {{market}} on {{exchange}}',
+      'message.yourBelowFixedPriceAlert': 'You will be notified when {{currency}} is below {{price}} {{market}} on {{exchange}}',
       // field names
       'field.email': 'Email',
       'field.password': 'Password',

diff --git a/alerts-ui/src/app/new-fixed-price-alert/new-fixed-price-alert.component.html b/alerts-ui/src/app/new-fixed-price-alert/new-fixed-price-alert.component.html
@@ -42,9 +42,10 @@
     <label for="currency" class="col-xs-3 col-sm-3 col-md-2 col-lg-2 control-label">{{ 'field.currency' | translate }}</label>
     <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
       <select formControlName="currency"
+              [(ngModel)]="selectedCurrency"
               id="currency"
               class="form-control">
-        <option *ngFor="let currency of availableCurrencies | async" [value]="currency.id">{{currency.currency}}</option>
+        <option *ngFor="let currency of availableCurrencies | async" [ngValue]="currency">{{currency.currency}}</option>
       </select>
     </div>
 
@@ -92,6 +93,13 @@
     </div>
   </div>
 
+  <div *ngIf="displayMessage()" class="col-sm-offset-1">
+    <h4>
+      <div [translate]="messageKey()" [translateParams]="messageParams()"></div>
+    </h4>
+    <hr />
+  </div>
+
   <div class="text-left col-sm-offset-2">
     <a routerLink="/fixed-price-alerts" class="btn btn-danger">{{'action.cancel' | translate}}</a>
     <input type="submit" [disabled]="!form.valid" value="{{ 'action.createAlert' | translate }}" class="btn btn-primary">

diff --git a/alerts-ui/src/app/new-fixed-price-alert/new-fixed-price-alert.component.ts b/alerts-ui/src/app/new-fixed-price-alert/new-fixed-price-alert.component.ts
@@ -20,6 +20,9 @@ export class NewFixedPriceAlertComponent implements OnInit {
 
   form: FormGroup;
 
+  // TODO: find a way to not require this field
+  selectedCurrency: ExchangeCurrency;
+
   // TODO: load them from the server?
   availableExchanges = ['BITSO', 'BITTREX'];
   availableMarkets: Observable<string[]>;
@@ -44,7 +47,7 @@ export class NewFixedPriceAlertComponent implements OnInit {
     const priceValidators = [Validators.min(0.00000001), Validators.max(99999999)];
 
     this.form = this.formBuilder.group({
-      exchange: ['', Validators.required],
+      exchange: [null, Validators.required],
       market: [null, Validators.required],
       currency: [null, Validators.required],
       condition: [null, Validators.required],
@@ -122,7 +125,7 @@ export class NewFixedPriceAlertComponent implements OnInit {
 
   onSubmit() {
     this.fixedPriceAlertsService.create(
-        this.form.get('currency').value,
+        this.selectedCurrency.id,
         this.form.get('price').value,
         this.form.get('condition').value === 'above',
         this.form.get('basePrice').value)
@@ -138,4 +141,31 @@ export class NewFixedPriceAlertComponent implements OnInit {
 
     this.navigatorService.fixedPriceAlerts();
   }
+
+  /* Help block with the summary of the alert */
+  displayMessage(): boolean {
+    return this.form.get('condition').value != null &&
+      this.form.get('exchange').value != null &&
+      this.form.get('market').value != null &&
+      this.selectedCurrency != null;
+  }
+
+  messageKey() {
+    if (this.form.get('condition').value === 'above') {
+      return 'message.yourAboveFixedPriceAlert';
+    } else {
+      return 'message.yourBelowFixedPriceAlert';
+    }
+  }
+
+  messageParams() {
+    const params = {
+      exchange: this.form.get('exchange').value,
+      market: this.form.get('market').value,
+      currency: this.selectedCurrency.currency,
+      price: this.form.get('price').value
+    };
+
+    return params;
+  }
 }