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 @@
-
- Find Out More
+
+ Find Out More
+
+
+ Launch
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;
+}