Add Close species list button

plantnet · Nov 2, 2022 · 06d79d5 · 06d79d5
1 parent 64f5a18
commit 06d79d5
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/components/AIFooter.ts b/src/components/AIFooter.ts
@@ -25,8 +25,8 @@ export class AIFooter extends LitElement {
 
     @property({ type: Boolean }) displaySpecies: boolean = false
 
-    __displaySpeciesList() {
-        this.displaySpecies = true
+    __toggleSpeciesList() {
+        this.displaySpecies = !this.displaySpecies
     }
 
     render() {
@@ -35,10 +35,13 @@ export class AIFooter extends LitElement {
         }
 
         if (this.displaySpecies) {
-            return html`<species-list .apiUrl="${this.apiUrl}"></species-list>`
+            return html`
+                <a href="#" title="Close species list" @click="${this.__toggleSpeciesList}">Close species list</a>
+                <species-list .apiUrl="${this.apiUrl}"></species-list>
+            `
         }
 
-        return html`<a href="#" title="Open species list" @click="${this.__displaySpeciesList}">Species list</a
+        return html`<a href="#" title="Open species list" @click="${this.__toggleSpeciesList}">Species list</a
             ><a href="${this.doiUrl}" target="_blank" title="Open GBIF DOI"
                 >This identification engine has been trained on the GBIF Occurrence Download: ${this.doiUrl}</a
             >`