AUS-4239 Quick Launch Apps

ui/src/app/layout/providerselection/providerselection.component.html

@@ -18,7 +18,9 @@ <h3>{{slider.label}}</h3>
     <div class="container-fluid">
       <div *ngIf="sources" class="row">
           <div *ngFor="let source of sources" class="col-xl-3 col-lg-6 card-border">
-              <app-provider-card [pInfoMessage]="source.infoMessage" [infoLink]="source.infoUrl" [bgClass]="source.colourClass" [icon]="source.icon" [count]="source.numberModels" [label]="source.name" [providerPath]="source.providerPath"></app-provider-card>
+              <app-provider-card [pInfoMessage]="source.infoMessage" [infoLink]="source.infoUrl" [bgClass]="source.colourClass" [icon]="source.icon" [count]="source.numberModels" [label]="source.name" [providerPath]="source.providerPath"
+              [srcUrl]="source.models?.length === 1 ? source.models[0].srcUrl : ''">
+            </app-provider-card>
           </div>
       </div>
     </div>

ui/src/app/shared/modules/model-card/modelcard.component.html

@@ -20,7 +20,7 @@
     </div>
 
     <div class="row">
-        <button type="button" class="btn btn-light bg-{{bgClass}}" (click)='navigateToModel()'>
+        <button type="button" class="btn btn-avre btn-model-light bg-{{bgClass}}" (click)='navigateToModel()'>
             Launch
         </button>
     </div>

ui/src/app/shared/modules/model-card/modelcard.component.scss

@@ -6,19 +6,12 @@
     font-size: 20px;
 }
 
-.btn-light {
-    margin: 5px;
-    width: 10rem;
-    min-height: 50px;
-    border-radius: 3px;
-    border-width: 2px;
-    border-style: solid;
-    background-color: transparent;
-    border-color: #ed5d4a;
-    color: #ed5d4a;
-    margin-top: 20px;
+.btn-model-light {
+    border-color:   #598f39;
+    color:   #598f39;
 }
-.btn-light:hover {
-    background-color: #ed5d4a;
+
+.btn-model-light:hover {
+    background-color:   #598f39;
     color: rgb(242, 242, 241);
-}
+}

ui/src/app/shared/modules/provider-card/providercard.component.html

@@ -9,7 +9,10 @@
     </div>
 </div>
 <div class="row provider-selection-row">
-    <button type="button" class="btn btn-light bg-{{bgClass}}" (click)="navigateToProvider(count)">
-            Find Out More
+    <button type="button" class="btn btn-avre btn-provider-light bg-{{bgClass}}" (click)="navigateToProvider(count)">
+        Find Out More
+    </button>
+    <button *ngIf="srcUrl !== ''" type="button" class="btn btn-avre btn-model-light bg-{{bgClass}}" (click)="navigateToModel()">
+        Launch
     </button>
 </div>

ui/src/app/shared/modules/provider-card/providercard.component.scss

@@ -1,20 +1,23 @@
-.btn-light {
-    margin: 5px;
-    width: 10rem;
-    min-height: 50px;
-    border-radius: 3px;
-    border-width: 2px;
-    border-style: solid;
-    background-color: transparent;
+.btn-provider-light {
     border-color: #ed5d4a;
     color: #ed5d4a;
-    margin-top: 20px;
 }
-.btn-light:hover {
+
+.btn-provider-light:hover {
     background-color: #ed5d4a;
     color: rgb(242, 242, 241);
 }
 
+.btn-model-light {
+    border-color:   #598f39;
+    color:   #598f39;
+}
+
+.btn-model-light:hover {
+    background-color:   #598f39;
+    color: rgb(242, 242, 241);
+}
+
 .icon-img {
     max-width: 60px; max-height: 60px;
 }

ui/src/app/shared/modules/provider-card/providercard.component.ts

@@ -20,6 +20,7 @@ export class ProviderCardComponent {
     @Input() prePath = '';
     @Input() infoLink = '';
     @Input() pInfoMessage: string;
+    @Input() srcUrl: string;
 
     constructor() {
         // If this website sits in a subdirectory of web server's 'document root' directory
@@ -39,6 +40,13 @@ export class ProviderCardComponent {
         }
     }
 
+    /**
+     * Navigates the browser to a new page to view the chosen model
+     */
+    public navigateToModel() {
+        window.open(this.srcUrl);
+    }
+
     /**
      * Open up a window to more information about the provider
      */

ui/src/app/shared/services/model-info.service.ts

@@ -6,7 +6,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Observable ,  Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 
 
 export interface ProviderInfo {
@@ -17,6 +17,7 @@ export interface ProviderInfo {
     providerPath: string;
     infoUrl: string;
     infoMessage: string;
+    models: any;
 }
 
 export const FIXED_HEIGHT = -1.0;
@@ -96,14 +97,16 @@ export class ModelInfoService {
                         local.providerInfoList = [];
                         for (const providerKey in local.providerModelInfo) {
                             if (local.providerModelInfo.hasOwnProperty(providerKey)) {
-                                const providerInfo: ProviderInfo = { name: local.providerModelInfo[providerKey].name,
-                                                                 numberModels: local.providerModelInfo[providerKey].models.length,
-                                                                 icon: local.providerModelInfo[providerKey].icon,
-                                                                 colourClass: local.providerModelInfo[providerKey].colourClass,
-                                                                 providerPath: providerKey,
-                                                                 infoUrl: local.providerModelInfo[providerKey].infoUrl,
-                                                                 infoMessage: local.providerModelInfo[providerKey].infoMessage
-                                                             };
+                                const providerInfo: ProviderInfo = {
+                                    name: local.providerModelInfo[providerKey].name,
+                                    numberModels: local.providerModelInfo[providerKey].models.length,
+                                    icon: local.providerModelInfo[providerKey].icon,
+                                    colourClass: local.providerModelInfo[providerKey].colourClass,
+                                    providerPath: providerKey,
+                                    infoUrl: local.providerModelInfo[providerKey].infoUrl,
+                                    infoMessage: local.providerModelInfo[providerKey].infoMessage,
+                                    models: local.providerModelInfo[providerKey].models
+                                };
                                 local.providerInfoList.push(providerInfo);
                             }
                         }
@@ -120,7 +123,6 @@ export class ModelInfoService {
         return this.initPromise;
     }
 
-
     /**
      * Builds an HTTP GET URL using parameters
      * @param params parameters Javascript object with key-val pairs
@@ -130,20 +132,17 @@ export class ModelInfoService {
         return Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&');
     }
 
-
-
-
     /**
      * Retrieves the provider model information from the model information
      * @return a promise of the provider model information in JSON format
      */
     public async getProviderModelInfo() {
         const local = this;
         if (this.initialised) {
-            return new Promise(resolve => resolve(local.providerModelInfo));
+            return Promise.resolve(local.providerModelInfo);
         }
         const result = await this.initialise();
-        return new Promise(resolve => resolve(result[0]));
+        return Promise.resolve(result[0]);
     }
 
     /**
@@ -153,10 +152,10 @@ export class ModelInfoService {
     public async getProviderInfo() {
         const local = this;
         if (this.initialised) {
-            return new Promise(resolve => resolve(local.providerInfoList));
+            return Promise.resolve(local.providerInfoList);
         }
         const result = await this.initialise();
-        return new Promise(resolve => resolve(result[1]));
+        return Promise.resolve(result[1]);
     }
 
 }

ui/src/styles/app.scss

@@ -60,3 +60,15 @@ app-provider-card {
    font-style: normal;
    font-weight: 400;
 }
+
+/* Main button class for provider/model cards, e.g. "Launch" and "Find Out More" */
+.btn-avre {
+   margin: 5px;
+   width: 10rem;
+   min-height: 50px;
+   border-radius: 3px;
+   border-width: 2px;
+   border-style: solid;
+   background-color: transparent;
+   margin-top: 20px;
+}