diff --git a/ui/src/app/layout/providerselection/providerselection.component.html b/ui/src/app/layout/providerselection/providerselection.component.html index 81d2905..97852c2 100644 --- a/ui/src/app/layout/providerselection/providerselection.component.html +++ b/ui/src/app/layout/providerselection/providerselection.component.html @@ -18,7 +18,9 @@

{{slider.label}}

- + +
diff --git a/ui/src/app/shared/modules/model-card/modelcard.component.html b/ui/src/app/shared/modules/model-card/modelcard.component.html index 7f80db8..d59766e 100644 --- a/ui/src/app/shared/modules/model-card/modelcard.component.html +++ b/ui/src/app/shared/modules/model-card/modelcard.component.html @@ -20,7 +20,7 @@
-
diff --git a/ui/src/app/shared/modules/model-card/modelcard.component.scss b/ui/src/app/shared/modules/model-card/modelcard.component.scss index fdf5859..fb923bd 100644 --- a/ui/src/app/shared/modules/model-card/modelcard.component.scss +++ b/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); -} \ No newline at end of file +} diff --git a/ui/src/app/shared/modules/provider-card/providercard.component.html b/ui/src/app/shared/modules/provider-card/providercard.component.html index fd9efa2..1570a9c 100644 --- a/ui/src/app/shared/modules/provider-card/providercard.component.html +++ b/ui/src/app/shared/modules/provider-card/providercard.component.html @@ -9,7 +9,10 @@
- +
diff --git a/ui/src/app/shared/modules/provider-card/providercard.component.scss b/ui/src/app/shared/modules/provider-card/providercard.component.scss index 946a76a..198e7f2 100644 --- a/ui/src/app/shared/modules/provider-card/providercard.component.scss +++ b/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; } diff --git a/ui/src/app/shared/modules/provider-card/providercard.component.ts b/ui/src/app/shared/modules/provider-card/providercard.component.ts index 0dad12e..7754d18 100644 --- a/ui/src/app/shared/modules/provider-card/providercard.component.ts +++ b/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 */ diff --git a/ui/src/app/shared/services/model-info.service.ts b/ui/src/app/shared/services/model-info.service.ts index dd10750..9eada01 100644 --- a/ui/src/app/shared/services/model-info.service.ts +++ b/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,9 +132,6 @@ 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 @@ -140,10 +139,10 @@ export class ModelInfoService { 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]); } } diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss index d3423a2..caaa3b0 100644 --- a/ui/src/styles/app.scss +++ b/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; +}