Merge branch 'main' into add-weather

FamousWolf · Mar 22, 2024 · 287f6b2 · 287f6b2
2 parents 0b073c8 + 9f1c18d
commit 287f6b2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -17,16 +17,8 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit
   - [Manual](#manual)
 - [Configuration](#configuration)
   - [Main options](#main-options)
-  - [Scores](#scores)
-  - [Entities](#entities)
-  - [Entity states](#entity-states)
-  - [Date format](#date-format)
-  - [Actions](#actions)
-- [Examples](#examples)
-  - [Battery charge](#battery-charge)
-  - [Air quality](#air-quality)
-  - [Washing machine and dryer status](#washing-machine-and-dryer-status)
-  - [Garbage pickup dates](#garbage-pickup-dates)
+  - [Calendars](#calendars)
+  - [Texts](#texts)
 
 ## Installation
 

diff --git a/src/card.js b/src/card.js
@@ -71,7 +71,9 @@ export class WeekPlannerCard extends LitElement {
     static get properties() {
         return {
             _days: { type: Array },
-            _config: { type: Object }
+            _config: { type: Object },
+            _isLoading: { type: Boolean },
+            _error: { type: String }
         }
     }
 
@@ -126,9 +128,17 @@ export class WeekPlannerCard extends LitElement {
         return html`
             <ha-card class="${this._noCardBackground ? 'nobackground' : ''}" style="--event-background-color: ${this._eventBackground}">
                 <div class="card-content">
+                    ${this._error ?
+                        html`<ha-alert alert-type="error">${this._error}</ha-alert>` :
+                        ''
+                    }
                     <div class="container">
                         ${this._renderDays()}
                     </div>
+                    ${this._isLoading ?
+                        html`<div class="loader"></div>` :
+                        ''
+                    }
                 </div>
             </ha-card>
         `;
@@ -267,6 +277,8 @@ export class WeekPlannerCard extends LitElement {
         }
 
         this._loading++;
+        this._isLoading = true;
+        this._error = '';
         this._events = {};
 
         let startDate = moment().startOf('day');
@@ -291,13 +303,20 @@ export class WeekPlannerCard extends LitElement {
                 });
 
                 this._loading--;
+            }).catch(error => {
+                this._error = 'Error while fetching calendar: ' + error.error;
+                this._loading = 0;
+                throw new Error(this._error);
             });
         });
 
         let checkLoading = window.setInterval(() => {
             if (this._loading === 0) {
                 clearInterval(checkLoading);
-                this._updateCard();
+                if (!this._error) {
+                    this._updateCard();
+                }
+                this._isLoading = false;
 
                 window.setTimeout(() => {
                     this._updateEvents();

diff --git a/src/card.styles.js b/src/card.styles.js
@@ -91,6 +91,33 @@ export default css`
         margin: 0 0 3px 0;
     }
 
+    .loader {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        width: 40px;
+        height: 40px;
+    }
+    .loader:after {
+        content: " ";
+        display: block;
+        width: 24px;
+        height: 24px;
+        margin: 4px;
+        border-radius: 50%;
+        border: 3px solid var(--primary-text-color);
+        border-color: var(--primary-text-color) transparent var(--primary-text-color) transparent;
+        animation: loader 1.2s linear infinite;
+    }
+    @keyframes loader {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    
     @container weekplanner (width <= 1280px) {
         div.container div.day {
             width: calc(100% / 5 - 15px);