Fix Safari-only bug with clipped display of tinted signal level meter.

Author: kshetline

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "license": "MIT",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "scripts": {
@@ -28,7 +28,7 @@
   "devDependencies": {
     "@types/copyfiles": "^2.1.1",
     "@types/follow-redirects": "^1.8.0",
-    "@types/jasmine": "^3.5.8",
+    "@types/jasmine": "^3.5.9",
     "@types/jasminewd2": "^2.0.8",
     "@types/jquery": "^3.3.33",
     "@types/js-cookie": "^2.2.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-clock-server",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "license": "MIT",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "private": true,

server/package-lock.json

@@ -16,16 +16,14 @@ export interface CommonConditions {
   precipType?: string;
 }
 
-export const CurrentConditionsKeys = Array.from(CommonConditionsKeys);
-CurrentConditionsKeys.push('temperature', 'feelsLikeTemperature');
+export const CurrentConditionsKeys = [...CommonConditionsKeys, 'temperature', 'feelsLikeTemperature'];
 
 export interface CurrentConditions extends CommonConditions {
   temperature: number;
   feelsLikeTemperature: number;
 }
 
-export const DailyConditionsKeys = Array.from(CommonConditionsKeys);
-DailyConditionsKeys.push('temperatureHigh', 'temperatureLow', 'precipAccumulation');
+export const DailyConditionsKeys = [...CommonConditionsKeys, 'temperatureHigh', 'temperatureLow', 'precipAccumulation'];
 
 export interface DailyConditions extends CommonConditions {
   temperatureHigh: number;

server/package.json

@@ -58,7 +58,7 @@ export class CurrentTempManager {
     }
   }
 
-  // Null values erase old values, undefined values preserver old values, defined values replace old values
+  // Null values erase old values, undefined values preserve old values, defined values replace old values
   updateCurrentTempAndHumidity(cthUpdate: CurrentTemperatureHumidity, celsius: boolean): void {
     Object.keys(cthUpdate ?? {}).forEach(key => {
       if (cthUpdate[key] !== undefined)

server/src/forecast-types.ts

@@ -12,10 +12,6 @@
     <div id="clock-container">
       <svg id="clock" viewBox="0 0 172 108">
         <!-- <rect x="0" y="0" width="172" height="108" stroke-width="1" stroke="black" fill="none"></rect> -->
-        <filter id="meter-tint">
-          <feColorMatrix type="matrix" values="1 0 0 0 0 0 0.5 0 0 0 0 1 1 0 0 0 0 0 1 0"></feColorMatrix>
-        </filter>
-
         <text id="timezone" x="50" y="2.5" text-anchor="middle"></text>
         <text id="day-of-week" x="1" y="9">---</text>
         <text id="month" x="1" y="99">--</text>
@@ -264,7 +260,7 @@
           </div>
         </div>
         <div class="dialog-buttons">
-          <span class="version-number">2.1.1</span>
+          <span class="version-number">2.1.2</span>
           <button id="settings-reload">Reload</button>
           <span>&bull;</span>
           <button id="settings-cancel">Cancel</button>

src/current-temp-manager.ts

@@ -554,7 +554,11 @@ input, button, select, textarea, optgroup, option { // Ignored by macOS Chrome f
 }
 
 .signal-meter {
-  fill: rgba(63, 255, 63, 0.30)
+  fill: rgba(63, 255, 63, 0.25)
+}
+
+.meter-tint .signal-meter {
+  fill: rgba(63, 63, 255, 0.40)
 }
 
 .signal-level-1 {
@@ -563,30 +567,60 @@ input, button, select, textarea, optgroup, option { // Ignored by macOS Chrome f
   }
 }
 
+.signal-level-1.meter-tint {
+  .signal-bar-1 {
+    fill: #5BF;
+  }
+}
+
 .signal-level-2 {
   .signal-bar-1, .signal-bar-2 {
     fill: #0F0;
   }
 }
 
+.signal-level-2.meter-tint {
+  .signal-bar-1, .signal-bar-2 {
+    fill: #5BF;
+  }
+}
+
 .signal-level-3 {
   .signal-bar-1, .signal-bar-2, .signal-bar-3 {
     fill: #0F0;
   }
 }
 
+.signal-level-3.meter-tint {
+  .signal-bar-1, .signal-bar-2, .signal-bar-3 {
+    fill: #5BF;
+  }
+}
+
 .signal-level-4 {
   .signal-bar-1, .signal-bar-2, .signal-bar-3, .signal-bar-4 {
     fill: #0F0;
   }
 }
 
+.signal-level-4.meter-tint {
+  .signal-bar-1, .signal-bar-2, .signal-bar-3, .signal-bar-4 {
+    fill: #5BF;
+  }
+}
+
 .signal-level-5 {
   .signal-bar-1, .signal-bar-2, .signal-bar-3, .signal-bar-4, .signal-bar-5 {
     fill: #0F0;
   }
 }
 
+.signal-level-5.meter-tint {
+  .signal-bar-1, .signal-bar-2, .signal-bar-3, .signal-bar-4, .signal-bar-5 {
+    fill: #5BF;
+  }
+}
+
 .signal-lost .no-signal {
   display: block !important;
 }
@@ -609,10 +643,6 @@ input, button, select, textarea, optgroup, option { // Ignored by macOS Chrome f
   fill: #AAA;
 }
 
-.meter-tint {
-  filter: url(#meter-tint);
-}
-
 .equisolstice {
   fill: #FA0;
 }