added support for progress bar

README.md

@@ -4,15 +4,6 @@
   <img src='https://i.imgur.com/86RGw5W.png' />
 </p>
 
-
-<h2>Upgrading from version 1.x.x to 2.x.x</h2>
-
-Version 2.x.x introduced the following breaking changes:
-* eventColor is no longer supported
-* progressBar is no longer supported
-* explicit adding moment.js to YAML config is no longer needed
-* Card was convertered from a module to js (see new YAML example below)
-
 <h2>Features</h2>
 
 * Show the next 5 events on your Google Calendar (default set by home assistant)
@@ -22,6 +13,7 @@ Version 2.x.x introduced the following breaking changes:
 * Update notifications via custom_updater
 * Click on event location to open maps app
 * Language support
+* Progress bar for ongoing events
 
 <h2>Track Updates</h2>
 
@@ -48,6 +40,7 @@ You should have setup Google calendar integration or Caldav integration in HomeA
 | numberOfDays | number | **Optional** | `7` Number of days to display from calendars
 | entities | object | **Required** | List of calendars to display
 | timeFormat | string | **Optional** | `HH:mm` Format to show event time (see [here](https://momentjs.com/docs/#/displaying/format/) for options)
+| progressBar | boolean | **Optional** | `false` Adds progress bar to ongoing events
 
 <h2>Configuration</h2>
 Go to your config directory and create a www folder. Inside the www run
@@ -60,7 +53,7 @@ In your ui-lovelace.yaml
 
 ```yaml
 resources:
-  - url: /local/calendar-card/calendar-card.js?v=2.0.1
+  - url: /local/calendar-card/calendar-card.js?v=2.1.0
     type: js
 ```
 
@@ -71,6 +64,7 @@ views:
   - type: custom:calendar-card
     title: "My Calendar"
     numberOfDays: 14
+    progressBar: true
     entities:
       - calendar.ljmerzagmailcom
 ```

app.js

@@ -39,6 +39,7 @@ class CalendarCard extends LitElement {
       title: 'Calendar',
       numberOfDays: 7,
       timeFormat: 'HH:mm',
+      progressBar: false,
       ...config
     };
   }
@@ -104,6 +105,22 @@ class CalendarCard extends LitElement {
           color: var(--primary-color);
         }
 
+        .day-wrapper hr.progress-bar {
+          border-style: solid;
+          border-color: var(--secondary-color);
+          border-width: 1px 0 0 0;
+          margin-top: -7px;
+          margin-left: 0px;
+          color: var(--primary-color);
+          width: 100%;
+        }
+
+        .day-wrapper ha-icon.progress-bar {
+          height: 12px;
+          width: 12px;
+          color: var(--primary-color);
+        }
+
         .day-wrapper .location a {
           text-decoration: none;
         }
@@ -210,9 +227,10 @@ class CalendarCard extends LitElement {
               <div>${index === 0 ? momentDay.format('DD') : ''}</div>
               <div>${index === 0 ? momentDay.format('ddd') : ''}</div>
             </td>
-            <td class="overview">
-              <div class="title" @click=${e=> this.getLinkHtml(event)}>${event.title}</div>
+            <td class="overview" @click=${e => this.getLinkHtml(event)}>
+              <div class="title">${event.title}</div>
               <div class="time">${this.getTimeHtml(event)}</div>
+              ${this.config.progressBar ? this.buildProgressBar(event) : ''}
             </td>
             <td class="location">
               ${this.getLocationHtml(event)}
@@ -246,15 +264,38 @@ class CalendarCard extends LitElement {
     `;
   }
 
+  /**
+   * if event is going on now then build progress bar for event
+   * @param {CalendarEvent} event
+   * @return {TemplateResult}
+   */
+  buildProgressBar(event){
+    if (!event.startDateTime || !event.endDateTime || event.isFullDayEvent) return html``;
+
+    const now = moment(new Date());
+    const start = moment(event.startDateTime);
+    const end = moment(event.endDateTime);
+    if (now.isBefore(start) || now.isSameOrAfter(end) || !start.isValid() || !end.isValid()) return html``;
+
+    const nowSeconds = now.unix();
+    const startSeconds = start.unix();
+    const endSeconds = end.unix();
+    const secondsPercent = (nowSeconds - startSeconds) / (endSeconds - startSeconds) * 100;
+
+    return html`
+      <ha-icon icon="mdi:circle" class="progress-bar" style='margin-left:${secondsPercent}%;'></ha-icon>
+      <hr class="progress-bar" />
+    `;
+  }
+
   /**
    * group events by the day it's on
    * @param  {Array<CalendarEvent>} events
    * @return {Array<Object>}          
    */
   groupEventsByDay(events) {
-    const groupedEvents = [];
+    return events.reduce((groupedEvents, event) => {
 
-    events.forEach(event => {
       const day = moment(event.startDateTime).format('YYYY-MM-DD');
       const matchingDateIndex = groupedEvents.findIndex(events => events.day === day)
 
@@ -263,9 +304,9 @@ class CalendarCard extends LitElement {
       } else {
         groupedEvents.push({ day, events: [event] });
       }
-    });
 
-    return groupedEvents;
+      return groupedEvents;
+    },[]);
   }
 
   /**

custom_updater.json

@@ -1,7 +1,7 @@
 {
   "calendar-card": {
-    "updated_at": "2019-02-07",
-    "version": "2.0.1",
+    "updated_at": "2019-02-14",
+    "version": "2.1.0",
     "remote_location": "https://raw.githubusercontent.com/ljmerza/calendar-card/master/calendar-card.js",
     "visit_repo": "https://github.com/ljmerza/calendar-card",
     "changelog": "https://github.com/ljmerza/calendar-card/releases/latest"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "static-html-webpack-boilerplate",
-  "version": "1.1.0",
+  "version": "2.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -9,10 +9,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/erickzhao/static-html-webpack-boilerplate.git"
+    "url": "git+https://github.com/ljmerza/calendar-card.git"
   },
-  "author": "erick zhao",
-  "license": "ISC",
+  "author": "leonardo merza",
+  "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "babel-cli": "^6.26.0",