Skip to content

Cleanup and new repository management for add-on store #5750

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 19 commits into from
May 7, 2020
Merged

Cleanup and new repository management for add-on store #5750

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
11652e8
it's a start
ludeeus May 4, 2020
847c460
progress
ludeeus May 4, 2020
3187f00
fix reload issues
ludeeus May 4, 2020
92aa2da
fix error
ludeeus May 4, 2020
6772cf9
Move
ludeeus May 4, 2020
30e3755
Remove unused imports
ludeeus May 4, 2020
93ed242
Remove unused import
ludeeus May 4, 2020
b0198b3
Merge branch 'dev' of https://github.com/home-assistant/frontend into…
ludeeus May 6, 2020
43cb554
Fix merge issues
ludeeus May 6, 2020
c5a8948
style changes
ludeeus May 6, 2020
beebd8e
More style fixes
ludeeus May 6, 2020
758dcd5
Change to ha-icon
ludeeus May 6, 2020
c776bdf
Update hassio/src/dialogs/repositories/show-dialog-repositories.ts
ludeeus May 6, 2020
62b4a76
Merge branch 'dev' of https://github.com/home-assistant/frontend into…
ludeeus May 6, 2020
3832ea6
No need for hassio prefix
ludeeus May 6, 2020
082b883
remove hassio
ludeeus May 6, 2020
695fb11
Use a tag
ludeeus May 7, 2020
663ed61
Use paper-card-background-color for dialog
ludeeus May 7, 2020
6ca9520
Remove var
ludeeus May 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 54 additions & 59 deletions hassio/src/addon-store/hassio-addon-repository.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,19 @@ class HassioAddonRepositoryEl extends LitElement {

protected render(): TemplateResult {
const repo = this.repo;
const addons = this._getAddons(this.addons, this.filter);
let _addons = this.addons;
if (!this.hass.userData?.showAdvanced) {
_addons = _addons.filter((addon) => {
return !addon.advanced;
});
}
const addons = this._getAddons(_addons, this.filter);

if (this.filter && addons.length < 1) {
return html`
<div class="content">
<p class="description">
No results found in "${repo.name}"
No results found in "${repo.name}."
</p>
</div>
`;
Expand All @@ -57,66 +63,55 @@ class HassioAddonRepositoryEl extends LitElement {
<h1>
${repo.name}
</h1>
<p class="description">
Maintained by ${repo.maintainer}<br />
<a class="repo" href=${repo.url} target="_blank" rel="noreferrer">
${repo.url}
</a>
</p>
<div class="card-group">
${addons.map(
(addon) => html`
${addon.advanced && !this.hass.userData?.showAdvanced
? ""
: html`
<paper-card
.addon=${addon}
class=${addon.available ? "" : "not_available"}
@click=${this._addonTapped}
>
<div class="card-content">
<hassio-card-content
.hass=${this.hass}
.title=${addon.name}
.description=${addon.description}
.available=${addon.available}
.icon=${addon.installed &&
addon.installed !== addon.version
? "hassio:arrow-up-bold-circle"
: "hassio:puzzle"}
.iconTitle=${addon.installed
? addon.installed !== addon.version
? "New version available"
: "Add-on is installed"
: addon.available
? "Add-on is not installed"
: "Add-on is not available on your system"}
.iconClass=${addon.installed
? addon.installed !== addon.version
? "update"
: "installed"
: !addon.available
? "not_available"
: ""}
.iconImage=${atLeastVersion(
this.hass.config.version,
0,
105
) && addon.icon
? `/api/hassio/addons/${addon.slug}/icon`
: undefined}
.showTopbar=${addon.installed || !addon.available}
.topbarClass=${addon.installed
? addon.installed !== addon.version
? "update"
: "installed"
: !addon.available
? "unavailable"
: ""}
></hassio-card-content>
</div>
</paper-card>
`}
<paper-card
.addon=${addon}
class=${addon.available ? "" : "not_available"}
@click=${this._addonTapped}
>
<div class="card-content">
<hassio-card-content
.hass=${this.hass}
.title=${addon.name}
.description=${addon.description}
.available=${addon.available}
.icon=${addon.installed && addon.installed !== addon.version
? "hassio:arrow-up-bold-circle"
: "hassio:puzzle"}
.iconTitle=${addon.installed
? addon.installed !== addon.version
? "New version available"
: "Add-on is installed"
: addon.available
? "Add-on is not installed"
: "Add-on is not available on your system"}
.iconClass=${addon.installed
? addon.installed !== addon.version
? "update"
: "installed"
: !addon.available
? "not_available"
: ""}
.iconImage=${atLeastVersion(
this.hass.config.version,
0,
105
) && addon.icon
? `/api/hassio/addons/${addon.slug}/icon`
: undefined}
.showTopbar=${addon.installed || !addon.available}
.topbarClass=${addon.installed
? addon.installed !== addon.version
? "update"
: "installed"
: !addon.available
? "unavailable"
: ""}
></hassio-card-content>
</div>
</paper-card>
`
)}
</div>
Expand Down
96 changes: 78 additions & 18 deletions hassio/src/addon-store/hassio-addon-store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,18 @@ import {
HassioAddonRepository,
reloadHassioAddons,
} from "../../../src/data/hassio/addon";
import "../../../src/components/ha-icon";
import "../../../src/layouts/loading-screen";
import "../../../src/layouts/hass-tabs-subpage";
import { navigate } from "../../../src/common/navigate";
import { HomeAssistant, Route } from "../../../src/types";
import "../components/hassio-search-input";
import "../../../src/common/search/search-input";

@bramkragten bramkragten May 6, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

import "./hassio-addon-repository";
import "./hassio-repositories-editor";

import { supervisorTabs } from "../hassio-panel";

import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";

const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
if (a.slug === "local") {
return -1;
Expand Down Expand Up @@ -76,7 +79,7 @@ class HassioAddonStore extends LitElement {
.hass=${this.hass}
.repo=${repo}
.addons=${addons}
.filter=${this._filter}
.filter=${this._filter!}
></hassio-addon-repository>
`);
}
Expand All @@ -92,28 +95,53 @@ class HassioAddonStore extends LitElement {
.tabs=${supervisorTabs}
>
<span slot="header">Add-on store</span>
<ha-icon-button
icon="hassio:reload"
<paper-menu-button
close-on-activate
no-animations
horizontal-align="right"
horizontal-offset="-5"
slot="toolbar-icon"
aria-label="Reload add-ons"
@click=${this.refreshData}
></ha-icon-button>

>
<ha-icon
icon="hassio:dots-vertical"
slot="dropdown-trigger"
alt="menu"
></ha-icon>
<paper-listbox slot="dropdown-content" role="listbox">
<paper-item @tap=${this._manageRepositories}>
Repositories
</paper-item>
<paper-item @tap=${this.refreshData}>
Reload
</paper-item>
</paper-listbox>
</paper-menu-button>
${repos.length === 0
? html`<loading-screen></loading-screen>`
: html`
<hassio-repositories-editor
.hass=${this.hass}
.repos=${this._repos!}
></hassio-repositories-editor>

<hassio-search-input
.filter=${this._filter}
@value-changed=${this._filterChanged}
></hassio-search-input>
<div class="search">
<search-input
hassio
no-label-float
no-underline
.filter=${this._filter}
@value-changed=${this._filterChanged}
></search-input>
</div>

${repos}
`}
${!this.hass.userData?.showAdvanced
? html`
<div class="advanced">
Missing add-ons? Enable advanced mode on
<div class="advanced-link" @click=${this._openProfile}>
Comment thread
ludeeus marked this conversation as resolved.
Outdated
your profile page
</div>
.
</div>
`
: ""}
</hass-tabs-subpage>
`;
}
Expand All @@ -130,6 +158,13 @@ class HassioAddonStore extends LitElement {
}
}

private async _manageRepositories() {
showRepositoriesDialog(this, {
repos: this._repos!,
loadData: () => this._loadData(),
});
}

private async _loadData() {
try {
const addonsInfo = await fetchHassioAddonsInfo(this.hass);
Expand All @@ -145,11 +180,36 @@ class HassioAddonStore extends LitElement {
this._filter = e.detail.value;
}

private _openProfile(): void {
navigate(this, "/profile");
}

static get styles(): CSSResult {
return css`
hassio-addon-repository {
margin-top: 24px;
}
.search {
padding: 0 16px;
background: var(--sidebar-background-color);
border-bottom: 1px solid var(--divider-color);
}
.search search-input {
position: relative;
top: 2px;
}
.advanced {
padding: 12px;
display: flex;
flex-wrap: wrap;
color: var(--primary-text-color);
}
.advanced-link {
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;
margin-left: 0.5em;
}
`;
}
}
Expand Down
Loading