diff --git a/src/client/ClientView.js b/src/client/ClientView.js index cdee999..d0f55c2 100644 --- a/src/client/ClientView.js +++ b/src/client/ClientView.js @@ -16,13 +16,23 @@ limitations under the License. import {TemplateView} from "../utils/TemplateView.js"; +function formatPlatforms(platforms) { + return platforms.reduce((str, p, i) => { + const first = i === 0; + const last = i === platforms.length - 1; + return str + (first ? "" : last ? " & " : ", ") + p; + }, ""); +} + export class ClientView extends TemplateView { + render(t, vm) { return t.div({className: "ClientView"}, [ t.div({className: "header"}, [ t.div({className: "description"}, [ t.h3(vm.name), t.p(vm.description), + t.p(formatPlatforms(vm.platforms)), ]), t.div({className: `icon ${vm.clientId}`}) ]), diff --git a/src/client/ClientViewModel.js b/src/client/ClientViewModel.js index 5ee587d..1e8a17a 100644 --- a/src/client/ClientViewModel.js +++ b/src/client/ClientViewModel.js @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import {isWebPlatform, Platform} from "./Platform.js"; +import {isWebPlatform, isDesktopPlatform, Platform} from "./Platform.js"; import {ViewModel} from "../utils/ViewModel.js"; export class ClientViewModel extends ViewModel { @@ -84,6 +84,28 @@ export class ClientViewModel extends ViewModel { get textInstructions() { return this._client.getLinkInstructions(this._proposedPlatform, this._link); } + + get platforms() { + const platforms = this._client.platforms; + const textPlatforms = []; + const hasWebPlatform = platforms.some(p => isWebPlatform(p)); + if (hasWebPlatform) { + textPlatforms.push("Web"); + } + const desktopPlatforms = platforms.filter(p => isDesktopPlatform(p)); + if (desktopPlatforms.length === 1) { + textPlatforms.push(desktopPlatforms[0]); + } else { + textPlatforms.push("Desktop"); + } + if (platforms.includes(Platform.Android)) { + textPlatforms.push("Android"); + } + if (platforms.includes(Platform.iOS)) { + textPlatforms.push("iOS"); + } + return textPlatforms; + } deepLinkActivated() { this._pickClient(this._client); diff --git a/src/client/Platform.js b/src/client/Platform.js index 19899a1..2b826ef 100644 --- a/src/client/Platform.js +++ b/src/client/Platform.js @@ -34,4 +34,9 @@ export function guessApplicablePlatforms(userAgent) { export function isWebPlatform(p) { return p === Platform.DesktopWeb || p === Platform.MobileWeb; +} + + +export function isDesktopPlatform(p) { + return p === Platform.Linux || p === Platform.Windows || p === Platform.macOS; } \ No newline at end of file