Skip to content

Commit

Permalink
Update plugin-card.component.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@bwp91
bwp91 committed Nov 18, 2023
1 parent 5e98cd1 commit c485b4d
Showing 1 changed file with 55 additions and 62 deletions.
117 changes: 55 additions & 62 deletions ui/src/app/modules/plugins/plugin-card/plugin-card.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,54 @@
<!--Panel-->
<div class="card card-body mb-3">
<div class="d-flex flex-row justify-content-between">
<div class="">
<p class="mb-0 info-text"
*ngIf="plugin.installedVersion && !plugin.updateAvailable && !plugin.betaUpdateAvailable && !plugin.disabled">
<i class="far fa-fw fa-circle-check"></i> {{ 'plugins.status_installed' | translate }}
</p>
<p class="mb-0 grey-text" *ngIf="!plugin.installedVersion">
<i class="far fa-fw fa-circle-down"></i> {{ 'plugins.status_not_installed' | translate }}
</p>
<p class="mb-0 primary-text" *ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable && !plugin.disabled">
<i class="far fa-fw fa-arrow-alt-circle-up"></i> {{ 'plugins.status_update_available' | translate }}
</p>
<p class="mb-0 red-text" *ngIf="plugin.installedVersion && plugin.disabled">
<i class="far fa-fw fa-circle-pause"></i> {{ 'plugins.status_disabled' | translate }}
</p>
<div class="row m-0 align-items-center">
<div class="col-1 pl-0 text-center">
<i class="far fa-2x fa-fw fa-circle-check info-text" *ngIf="plugin.installedVersion && !plugin.updateAvailable && !plugin.betaUpdateAvailable && !plugin.disabled"></i>
<i class="far fa-2x fa-fw fa-circle grey-text" *ngIf="!plugin.installedVersion"></i>
<i class="far fa-2x fa-fw fa-arrow-alt-circle-up primary-text" *ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable && !plugin.disabled"></i>
<i class="far fa-2x fa-fw fa-circle-pause red-text" *ngIf="plugin.installedVersion && plugin.disabled"></i>
</div>
<div class="">
<p class="mb-0 grey-text text-right" *ngIf="plugin.author && !plugin.verifiedPlugin">
<a class="card-link grey-text" target="_blank" rel="noopener noreferrer"
[href]="'https://www.npmjs.com/~' + plugin.author">@{{ plugin.author }}</a>
<div class="col-11 pr-0">
<div class="d-flex flex-row justify-content-between">
<h4 class="card-title mb-0">
{{ plugin.displayName || ((plugin.name.charAt(0) === '@' ? plugin.name.split('/')[1] : plugin.name) |
replace:'-':' ' | titlecase) }}
</h4>
<div class="">
<p class="mb-0 grey-text text-right" *ngIf="plugin.author && !plugin.verifiedPlugin">
<a class="card-link grey-text" target="_blank" rel="noopener noreferrer"
[href]="'https://www.npmjs.com/~' + plugin.author">@{{ plugin.author }}</a>
</p>
<p class="mb-0 grey-text text-right" *ngIf="plugin.verifiedPlugin">
<a href="javascript:void(0)" class="card-link pink-text text-decoration-none ml-3" *ngIf="plugin.funding"
ngbTooltip="@{{ plugin.name === 'homebridge-config-ui-x' ? 'oznu' : plugin.author }}" (click)="openFundingModal(plugin)">
<i class="fas fa-fw fa-heart"></i>
</a>
<a href="javascript:void(0)" class="card-link text-decoration-none green-text ml-3" (click)="openVerifiedModal()">
<i class="fas fa-fw fa-shield-alt"></i>
</a>
</p>
</div>
</div>
<p class="card-text">{{ plugin.name }} v{{ plugin.installedVersion || plugin.latestVersion }}
<span *ngIf="plugin.lastUpdated">({{ plugin.lastUpdated | date:'yyyy-MM-dd' }})</span>
</p>
<p class="mb-0 grey-text text-right" *ngIf="plugin.verifiedPlugin">
<a href="javascript:void(0)" class="card-link pink-text text-decoration-none ml-3" *ngIf="plugin.funding"
ngbTooltip="@{{ plugin.name === 'homebridge-config-ui-x' ? 'oznu' : plugin.author }}" (click)="openFundingModal(plugin)">
<i class="fas fa-fw fa-heart"></i>
<span class="d-none d-md-inline"> {{ 'plugins.donate.button_donate' | translate }}</span>
<div class="d-flex">
<a href="javascript:void(0)" class="card-link" *ngIf="plugin.installedVersion" (click)="$plugin.settings(plugin)">
{{ 'plugins.button_settings' | translate | uppercase }}
</a>
<a href="javascript:void(0)" class="card-link text-decoration-none green-text ml-3" (click)="openVerifiedModal()">
<i class="fas fa-fw fa-shield-alt"></i>
<span class="d-none d-md-inline"> Verified</span>
<a href="javascript:void(0)" class="card-link" *ngIf="!plugin.installedVersion"
(click)="$plugin.installPlugin(plugin.name)">
{{ 'plugins.button_install' | translate | uppercase }}
</a>
</p>
</div>
</div>
<h4 class="card-title mb-0">
{{ plugin.displayName || ((plugin.name.charAt(0) === '@' ? plugin.name.split('/')[1] : plugin.name) |
replace:'-':' ' | titlecase) }}
</h4>
<p class="card-text">{{ plugin.name }} v{{ plugin.installedVersion || plugin.latestVersion }}
<span *ngIf="plugin.lastUpdated">({{ plugin.lastUpdated | date:'yyyy-MM-dd' }})</span>
</p>
<div class="d-flex">
<a href="javascript:void(0)" class="card-link" *ngIf="plugin.installedVersion" (click)="$plugin.settings(plugin)">
{{ 'plugins.button_settings' | translate | uppercase }}
</a>
<a href="javascript:void(0)" class="card-link" *ngIf="!plugin.installedVersion"
(click)="$plugin.installPlugin(plugin.name)">
{{ 'plugins.button_install' | translate | uppercase }}
</a>

<div class="ml-auto">
<i *ngIf="!hasChildBridges && plugin.installedVersion" class="fas fa-fw fa-circle ml-3 green-text"></i>
<i *ngIf="hasChildBridges" class="fas fa-fw fa-circle ml-3" [ngClass]="{
<div class="ml-auto">
<i *ngIf="!hasChildBridges && plugin.installedVersion" class="fas fa-fw fa-circle ml-3 green-text"></i>
<i *ngIf="hasChildBridges" class="fas fa-fw fa-circle ml-3" [ngClass]="{
'green-text': childBridgeStatus === 'ok',
'text-warning': childBridgeStatus === 'pending',
'red-text': childBridgeStatus === 'down'
}"></i>
<span ngbDropdown placement="bottom-right top-right" class="d-inline-block ml-3">
<span ngbDropdown placement="bottom-right top-right" class="d-inline-block ml-3">
<a class="card-link" href="javascript:void(0)" aria-label="Plugin actions drop down menu" ngbDropdownToggle>
<i class="fas fa-fw fa-ellipsis-v"></i>
<span *ngIf="
Expand All @@ -68,22 +59,22 @@ <h4 class="card-title mb-0">
</a>
<div ngbDropdownMenu aria-labelledby="Plugin actions drop down menu">
<button ngbDropdownItem (click)="$plugin.updatePlugin(plugin, plugin.betaUpdateAvailable ? 'beta' : 'latest')"
*ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable">
*ngIf="plugin.updateAvailable || plugin.betaUpdateAvailable">
<i class="fas fa-fw fa-arrow-alt-circle-up primary-text"></i>
{{ 'plugins.button_update' | translate }} (v{{ plugin.latestVersion }})
</button>
<button ngbDropdownItem *ngIf="!hasChildBridges && !plugin.disabled && recommendChildBridge"
(click)="$plugin.bridgeSettings(plugin)">
(click)="$plugin.bridgeSettings(plugin)">
<i class="fa-fw icon-button fas fa-fw fa-circle-exclamation primary-text"></i>
{{ 'child_bridge.label_bridge_setup_child_bridges' | translate }}
</button>
<button *ngIf="hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled"
(click)="$plugin.bridgeSettings(plugin)">
<button ngbDropdownItem *ngIf="hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled"
(click)="$plugin.bridgeSettings(plugin)">
<i class="fa-fw icon-button fas fa-fw fa-circle-exclamation primary-text"></i>
{{ 'child_bridge.label_bridge_connect_to_homekit' | translate }}
</button>
<div class="dropdown-divider"
*ngIf="
*ngIf="
(plugin.updateAvailable || plugin.betaUpdateAvailable)
|| (!hasChildBridges && !plugin.disabled && recommendChildBridge)
|| (hasChildBridges && !childBridgeRestartInProgress && hasUnpairedChildBridges && childBridgeStatus === 'ok' && !plugin.disabled)
Expand All @@ -96,19 +87,19 @@ <h4 class="card-title mb-0">
<i class="fas fa-fw fa-fw fa-wave-square"></i> {{ 'plugins.manage.plugin_logs' | translate }}
</button>
<button ngbDropdownItem (click)="$plugin.jsonEditor(plugin)"
*ngIf="!isMobile && plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'">
*ngIf="!isMobile && plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'">
<i class="fas fa-fw fa-fw fa-code"></i> {{ 'plugins.manage.json_config' | translate }}
</button>
<button ngbDropdownItem (click)="disablePlugin(plugin)"
*ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x' && !plugin.disabled">
*ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x' && !plugin.disabled">
<i class="far fa-fw fa-circle-pause"></i> {{ 'plugins.manage.disable' | translate }}
</button>
<button ngbDropdownItem (click)="enablePlugin(plugin)"
*ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x' && plugin.disabled">
*ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x' && plugin.disabled">
<i class="far fa-fw fa-circle-play"></i> {{ 'plugins.manage.enable' | translate }}
</button>
<button ngbDropdownItem *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'"
(click)="$plugin.uninstallPlugin(plugin)">
(click)="$plugin.uninstallPlugin(plugin)">
<i class="fas fa-fw fa-fw fa-trash"></i> {{ 'plugins.button_uninstall' | translate }}
</button>
<div class="dropdown-divider" *ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'"></div>
Expand All @@ -124,23 +115,25 @@ <h4 class="card-title mb-0">
</button>
</ng-container>
<button ngbDropdownItem (click)="$plugin.bridgeSettings(plugin)"
*ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'">
*ngIf="plugin.installedVersion && plugin.name !== 'homebridge-config-ui-x'">
<i class="fas fa-fw fa-fw fa-project-diagram"></i> {{ 'child_bridge.label_bridge_settings' | translate }}
</button>
<div class="dropdown-divider" *ngIf="plugin.links.homepage || plugin.links.npm"></div>
<a ngbDropdownItem target="_blank" rel="noopener noreferrer" class="text-decoration-none"
*ngIf="plugin.name === 'homebridge-config-ui-x'" href="/swagger">
*ngIf="plugin.name === 'homebridge-config-ui-x'" href="/swagger">
<i class="fas fa-fw fa-passport"></i> {{ 'plugins.button_api_documentation' | translate }}
</a>
<a ngbDropdownItem target="_blank" rel="noopener noreferrer" class="text-decoration-none"
*ngIf="plugin.links.homepage || plugin.links.npm" [href]="plugin.links.homepage || plugin.links.npm">
*ngIf="plugin.links.homepage || plugin.links.npm" [href]="plugin.links.homepage || plugin.links.npm">
<i *ngIf="plugin.links.homepage"
class="{{ plugin.links.homepage.startsWith('https://github.com/') ? 'fab fa-fw fa-github' : 'fas fa-external-link-alt' }}"></i>
class="{{ plugin.links.homepage.startsWith('https://github.com/') ? 'fab fa-fw fa-github' : 'fas fa-external-link-alt' }}"></i>
<i *ngIf="!plugin.links.homepage && plugin.links.npm" class="fab fa-fw fa-npm"></i>
{{ 'plugins.button_homepage' | translate }}
</a>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit c485b4d

Please sign in to comment.