Release Candidate v0.14.0 (#89)

- Add Team and Event URL links to card - Add ability to customize URL links in card configuration
vasqued2 · Jul 1, 2024 · e5bc7b1 · e5bc7b1
1 parent 0864704
commit e5bc7b1
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -76,7 +76,9 @@ Add a Manual card to the dashboard and enter the YAML to configure it as desired
 | `show_timeouts` | Specifies if timeout indicators should be shown. | `true` | No |  `true` `false`  |
 | `show_rank` | Specifies if team rank should be shown. | `true` | No |  `true` `false`  |
 | `show_league` | Specifies if league should be shown at the top of the card. | `false` | No |  `true` `false`  |
-
+| `team_url` | Provides an override url when the Home logo is tapped. | No override | No |  Any valid URL (i.e. "https://www.espn.com")  |
+| `opponent_url` | Provides an override url when the Oppenent logo is tapped. | No override | No |  Any valid URL (i.e. "https://www.espn.com")  |
+| `bottom_url` | Provides an override url when the bottom of the card is tapped. | No override | No |  Any valid URL (i.e. "https://www.espn.com")  |
 
 ### Examples
 #### Example 1

diff --git a/dist/const.js b/dist/const.js
@@ -1,4 +1,4 @@
-export let VERSION = "v0.13.1";
+export let VERSION = "v0.14.0";
 
 export let GOLF_HEADSHOT_URL = "https://a.espncdn.com/i/headshots/golf/players/full/";
 export let MMA_HEADSHOT_URL = "https://a.espncdn.com/i/headshots/mma/players/full/";

diff --git a/dist/render_in.js b/dist/render_in.js
@@ -52,6 +52,9 @@ export function renderIn(c) {
         .bar { display: ${c.barWrapDisplay}; align-items: center; }
         .bar1-label { flex: 0 0 10px; padding: 0 10px 0 0; margin-top: 4px; }
         .bar2-label { flex: 0 0 10px; padding: 0 0 0 10px; text-align: right; margin-top: 4px; }
+        .left-clickable { text-decoration: none; color: inherit; }
+        .right-clickable { text-decoration: none; color: inherit; }
+        .bottom-clickable { text-decoration: none; color: inherit; }
     </style>
     <ha-card>
         <div class="card">
@@ -60,6 +63,7 @@ export function renderIn(c) {
             <img class="opponent-bg" src="${c.logoBG[2]}" />
             <div class="card-content">
                 <div class="team">
+                    <a class="left-clickable" href="${c.url[1]}" target="_blank"; >
                     <img class="logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
                     <div class="circle">${c.initials[1]}</div>
                     <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
@@ -69,13 +73,15 @@ export function renderIn(c) {
                         <div class="timeouts1"></div>
                         <div class="timeouts1"></div>
                     </div>
+                    </a>
                 </div>
                 <div class="possession1">&bull;</div>
                 <div class="score">${c.score[1]}</div>
                 <div class="divider">&nbsp&nbsp&nbsp</div>
                 <div class="score">${c.score[2]}</div>
                 <div class="possession2">&bull;</div>
                 <div class="team">
+                    <a class="right-clickable" href="${c.url[2]}" target="_blank"; >
                     <img class="logo" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
                     <div class="circle">${c.initials[2]}</div>
                     <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
@@ -85,6 +91,7 @@ export function renderIn(c) {
                         <div class="timeouts2"></div>
                         <div class="timeouts2"></div>
                     </div>
+                    </a>
                 </div>
             </div>
             <div class="play-clock">${c.playClock}</div>
@@ -99,29 +106,31 @@ export function renderIn(c) {
             <div class="outs">${c.in0}</div>
             <div class="in-series-info">${c.seriesSummary}</div>
             <div class="line1"></div>
-            <div class="in-row1">
-                <div class="venue">${c.venue}</div>
-                <div class="down-distance">${c.in1}</div>
-            </div>
-            <div class="in-row2">
-                <div class="location">${c.location}</div>
-                <div class="network">${c.in2}</div>
-            </div>
-            <div class="line2"></div>
-            <div class="last-play">
-                <p>${c.lastPlay}</p>
-            </div>
-            <div class="bar-wrapper">
-                <div class="bar-text">${c.gameBar}</div>
-                <div class="bar">
-                    <div class="bar1-label">${c.barLabel[1]}</div>
-                    <div class="bar-flex">
-                        <div class="bar1-length"></div>
-                        <div class="bar2-length"></div>
+            <a class="bottom-clickable" href="${c.bottomURL}" target="_blank";>
+                <div class="in-row1">
+                    <div class="venue">${c.venue}</div>
+                    <div class="down-distance">${c.in1}</div>
+                </div>
+                <div class="in-row2">
+                    <div class="location">${c.location}</div>
+                    <div class="network">${c.in2}</div>
+                </div>
+                <div class="line2"></div>
+                <div class="last-play">
+                    <p>${c.lastPlay}</p>
+                </div>
+                <div class="bar-wrapper">
+                    <div class="bar-text">${c.gameBar}</div>
+                    <div class="bar">
+                        <div class="bar1-label">${c.barLabel[1]}</div>
+                        <div class="bar-flex">
+                            <div class="bar1-length"></div>
+                            <div class="bar2-length"></div>
+                        </div>
+                        <div class="bar2-label">${c.barLabel[2]}</div>
                     </div>
-                    <div class="bar2-label">${c.barLabel[2]}</div>
                 </div>
-            </div>
+            </a>
         </div>
     </ha-card>
     `;    // Return the HTML template

diff --git a/dist/render_post.js b/dist/render_post.js
@@ -23,6 +23,9 @@ export function renderPost(c) {
         .rank { font-size:0.8em; display: ${c.rankDisplay}; }
         .post-series-info { display:${c.seriesSummaryDisplay}; font-size: 1.2em; text-align: center; margin: 4px; }
         .post-row1 { font-size: 1.2em; text-align: center; }
+        .left-clickable { text-decoration: none; color: inherit; }
+        .right-clickable { text-decoration: none; color: inherit; }
+        .bottom-clickable { text-decoration: none; color: inherit; }
     </style>
     <ha-card>
         <div class="card">
@@ -31,23 +34,29 @@ export function renderPost(c) {
             <img class="opponent-bg" src="${c.logoBG[2]}" />
             <div class="card-content">
                 <div class="team">
-                    <img class="logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
-                    <div class="circle">${c.initials[1]}</div>
-                    <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
-                    <div class="record">${c.record[1]}</div>
+                    <a class="left-clickable" href="${c.url[1]}" target="_blank"; >
+                        <img class="logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
+                        <div class="circle">${c.initials[1]}</div>
+                        <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
+                        <div class="record">${c.record[1]}</div>
+                    </a>
                 </div>
                 <div class="score score1op">${c.score[1]}</div>
                 <div class="divider">&nbsp&nbsp&nbsp</div>
                 <div class="score score2op">${c.score[2]}</div>
                 <div class="team">
-                    <img class="logo" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
-                    <div class="circle">${c.initials[2]}</div>
-                    <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
-                    <div class="record">${c.record[2]}</div>
+                    <a class="right-clickable" href="${c.url[2]}" target="_blank"; >
+                        <img class="logo" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
+                        <div class="circle">${c.initials[2]}</div>
+                        <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
+                        <div class="record">${c.record[2]}</div>
+                    </a>
                 </div>
             </div>
-            <div class="post-row1">${c.finalTerm}</div>
-            <div class="post-series-info">${c.seriesSummary}</div>
+            <a class="bottom-clickable" href="${c.bottomURL}" target="_blank";>
+                <div class="post-row1">${c.finalTerm}</div>
+                <div class="post-series-info">${c.seriesSummary}</div>
+            </a>
         </div>
     </ha-card>
     `;    // Return the HTML template

diff --git a/dist/render_pre.js b/dist/render_pre.js
@@ -24,6 +24,9 @@ export function renderPre(c) {
         .pre-series-info { display:${c.seriesSummaryDisplay}; font-size: 1.2em; text-align: center; margin: 4px; }
         .pre-row1 { font-weight: 500; font-size: 1.2em; height: 1.2em; margin: 6px 0 2px; }
         .pre-row1, .pre-row2, .pre-row3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0; }
+        .left-clickable { text-decoration: none; color: inherit; }
+        .right-clickable { text-decoration: none; color: inherit; }
+        .bottom-clickable { text-decoration: none; color: inherit; }
     </style>
     <ha-card>
         <div class="card">
@@ -32,37 +35,43 @@ export function renderPre(c) {
             <img class="opponent-bg" src="${c.logoBG[2]}" />
             <div class="card-content">
                 <div class="team">
-                    <img class="logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
-                    <div class="circle">${c.initials[1]}</div>
-                    <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
-                    <div class="record">${c.record[1]}</div>
+                    <a class="left-clickable" href="${c.url[1]}" target="_blank"; >
+                        <img class="logo" src="${c.logo[1]}" onerror="this.onerror=null; this.src='${c.logoError[1]}';" />
+                        <div class="circle">${c.initials[1]}</div>
+                        <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
+                        <div class="record">${c.record[1]}</div>
+                    </a>
                 </div>
                 <div class="gamewrapper">
                     <div class="gameday">${c.gameWeekday}</div>
                     <div class="gamedate">${c.gameDatePRE}</div>
                     <div class="gametime">${c.gameTime}</div>
                 </div>
                 <div class="team">
-                    <img class="logo" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
-                    <div class="circle">${c.initials[2]}</div>
-                    <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
-                    <div class="record">${c.record[2]}</div>
+                    <a class="right-clickable" href="${c.url[2]}" target="_blank"; >
+                        <img class="logo" src="${c.logo[2]}" onerror="this.onerror=null; this.src='${c.logoError[2]}';" />
+                        <div class="circle">${c.initials[2]}</div>
+                        <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
+                        <div class="record">${c.record[2]}</div>
+                    </a>
                 </div>
             </div>
             <div class="pre-series-info">${c.seriesSummary}</div>
             <div class="line"></div>
-            <div class="pre-row1">
-                <div class="date">${c.startTerm} ${c.startTime}</div>
-                <div class="odds">${c.pre1}</div>
-            </div>
-            <div class="pre-row2">
-                <div class="venue">${c.venue}</div>
-                <div class="overunder"> ${c.pre2}</div>
-            </div>
-            <div class="pre-row3">
-                <div class="location">${c.location}</div>
-                <div class="network">${c.pre3}</div>
-            </div>
+            <a class="bottom-clickable" href="${c.bottomURL}" target="_blank";>
+                <div class="pre-row1">
+                    <div class="date">${c.startTerm} ${c.startTime}</div>
+                    <div class="odds">${c.pre1}</div>
+                </div>
+                <div class="pre-row2">
+                    <div class="venue">${c.venue}</div>
+                    <div class="overunder"> ${c.pre2}</div>
+                </div>
+                <div class="pre-row3">
+                    <div class="location">${c.location}</div>
+                    <div class="network">${c.pre3}</div>
+                </div>
+            </a>
         </div>
     </ha-card>
     `;    // Return the HTML template

diff --git a/dist/set_defaults.js b/dist/set_defaults.js
@@ -8,6 +8,7 @@ export function initCardData(c) {
     c.logo = [];
     c.logoError = [];
     c.name = [];
+    c.url = [];
     c.initials = [];
     c.rank = [];
     c.record = [];
@@ -37,6 +38,8 @@ export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {
     c.timeoutsDisplay = 'inline';
     c.rankDisplay = 'inline';
     c.seriesSummaryDisplay = 'none';
+    c.bottomURL = o.bottomURL;
+    c.bottomURL = o.bottomURL || stateObj.attributes.event_url;
 
     if (o.show_timeouts == false) {
         c.timeoutsDisplay = 'none';
@@ -70,13 +73,15 @@ export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {
     c.logoError[team] = ERROR_HEADSHOT_URL;
     c.logoBG[team] = stateObj.attributes.team_logo;
     c.name[team] = stateObj.attributes.team_name;
+    c.url[team] = o.teamURL || stateObj.attributes.team_url ;
     c.rank[team] = stateObj.attributes.team_rank;
     c.record[team] = stateObj.attributes.team_record;
     c.winner[team] = stateObj.attributes.team_winner || false;
     c.logo[oppo] = stateObj.attributes.opponent_logo;
     c.logoError[oppo] = ERROR_HEADSHOT_URL;
     c.logoBG[oppo] = stateObj.attributes.opponent_logo;
     c.name[oppo] = stateObj.attributes.opponent_name;
+    c.url[oppo] = o.opponentURL || stateObj.attributes.opponent_url ;
     c.rank[oppo] = stateObj.attributes.opponent_rank;
     c.record[oppo] = stateObj.attributes.opponent_record;
     c.winner[oppo] = stateObj.attributes.opponent_winner || false;

diff --git a/dist/teamtracker_card.js b/dist/teamtracker_card.js
@@ -69,6 +69,9 @@ export class TeamTrackerCard extends LitElement {
         o.outlineColor = this._config.outline_color || '#ffffff';
         o.showLeague = this._config.show_league;
         o.homeSide = String(this._config.home_side).toUpperCase();
+        o.teamURL = this._config.team_url;
+        o.opponentURL = this._config.opponent_url;
+        o.bottomURL = this._config.bottom_url;
         o.show_timeouts = true;
         if (this._config.show_timeouts == false) {
             o.show_timeouts = false;