added night time theme

rahulgawale · rahulgawale · commit 7ed87f88e85d · 2021-03-08T23:30:46.000+05:30
diff --git a/.prettierrc b/.prettierrc
@@ -1,6 +1,6 @@
 {
     "trailingComma": "none",
-    "singleQuote": true,
+    "singleQuote": false,
     "tabWidth": 4,
     "overrides": [
         {
diff --git a/docs/app-e84733b83675f92bac6c.js b/docs/app-e84733b83675f92bac6c.js
diff --git a/docs/index.html b/docs/index.html
@@ -1,3 +1,3 @@
 <!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Multiple Timezones Clock</title><style>body {
                 font-family: Arial, Helvetica, sans-serif;
-            }</style><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/><link rel="shortcut icon" href="./resources/favicon.ico"/><script defer="defer" src="./app-de4e187b7364886c19cc.js"></script></head><body><div id="main"></div></body></html>
+            }</style><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/><link rel="shortcut icon" href="./resources/favicon.ico"/><script defer="defer" src="./app-e84733b83675f92bac6c.js"></script></head><body><div id="main"></div></body></html>
diff --git a/src/modules/my/app/app.html b/src/modules/my/app/app.html
@@ -8,7 +8,7 @@ <h1 class="slds-text-heading_large slds-p-around_x-small">{title}</h1>
                 <div key={clock.timeZone}
                     class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-medium-size_3-of-12 slds-large-size_3-of-12">
                     <my-child time-zone={clock.timeZone} city={clock.city} time={time}
-                        refresh-interval={refreshInterval} is12-hours={clock.is12Hours}>
+                        refresh-interval={refreshInterval} footer-note={clock.footerNote} is12-hours={clock.is12Hours}>
                     </my-child>
                 </div>
             </template>
diff --git a/src/modules/my/app/app.js b/src/modules/my/app/app.js
@@ -1,63 +1,95 @@
 //import { LightningElement } from 'lwc';
-import SLDSLightningElement from 'my/sldsLightningElement';
+import SLDSLightningElement from "my/sldsLightningElement";
 export default class App extends SLDSLightningElement {
     time = new Date();
 
-    title = 'Multiple Timezones Clock';
-    refreshInterval = 'minute';
+    title = "Multiple Timezones Clock";
+    refreshInterval = "minute";
 
     /**
      * Getter for the features property
      */
     get clocks() {
         return [
             {
-                timeZone: 'America/New_York',
-                city: 'New York',
-                is12Hours: false
+                timeZone: "America/New_York",
+                city: "New York",
+                is12Hours: false,
+                footerNote: "America/New York"
             },
             {
-                timeZone: 'Etc/GMT',
-                city: 'London/GMT',
-                is12Hours: false
+                timeZone: "US/Central",
+                city: "Chicago",
+                is12Hours: false,
+                footerNote: "America/Chicago"
             },
             {
-                timeZone: 'US/Central',
-                city: 'Chicago',
-                is12Hours: false
+                timeZone: "America/Hermosillo",
+                city: "Denver",
+                is12Hours: false,
+                footerNote: "America/Denver"
             },
             {
-                timeZone: 'HST',
-                city: 'Hawaii',
-                is12Hours: false
+                timeZone: "America/Los_Angeles",
+                city: "San Francisco",
+                is12Hours: false,
+                footerNote: "America/San Francisco"
             },
             {
-                timeZone: 'Asia/Chongqing',
-                city: 'Philippines',
-                is12Hours: false
+                timeZone: "HST",
+                city: "Honolulu",
+                is12Hours: false,
+                footerNote: "Hawaii/Honolulu"
             },
             {
-                timeZone: 'Asia/Kolkata',
-                city: 'Pune',
-                is12Hours: false
+                timeZone: "Asia/Tokyo",
+                city: "Tokyo",
+                is12Hours: false,
+                footerNote: "Japan/Tokyo"
             },
             {
-                timeZone: 'Etc/GMT+2',
-                city: 'South Africa/Johannesburg',
-                is12Hours: false
+                timeZone: "Asia/Hong_Kong",
+                city: "Hong Kong",
+                is12Hours: false,
+                footerNote: "Honk Kong"
             },
             {
-                timeZone: 'Etc/GMT+1',
-                city: 'Frankfurt',
-                is12Hours: false
+                timeZone: "Africa/Maputo",
+                city: "Manila",
+                is12Hours: false,
+                footerNote: "Philippines/Manila"
+            },
+            {
+                timeZone: "Asia/Kolkata",
+                city: "Pune",
+                is12Hours: false,
+                footerNote: "India/Pune"
+            },
+            {
+                timeZone: "Etc/GMT+2",
+                city: "Johannesburg",
+                is12Hours: false,
+                footerNote: "South Africa/Johannesburg"
+            },
+            {
+                timeZone: "Etc/GMT+1",
+                city: "Frankfurt",
+                is12Hours: false,
+                footerNote: "Germany/Frankfurt"
+            },
+            {
+                timeZone: "GMT",
+                city: "London",
+                is12Hours: false,
+                footerNote: "UK/London"
             }
         ];
     }
 
     intervalId;
 
     get interval() {
-        return this.refreshInterval === 'minute' ? 60000 : 1000;
+        return this.refreshInterval === "minute" ? 60000 : 1000;
     }
 
     connectedCallback() {
diff --git a/src/modules/my/child/child.css b/src/modules/my/child/child.css
@@ -1,16 +1,21 @@
 .clock {
     font-size: 3rem;
     text-align: center;
-    color: grey;
 }
 
 .date {
     text-align: center;
-    color: grey;
     font-size: 1rem;
 }
 
 .footer {
-    color: grey;
     font-size: 1rem;
 }
+
+.dayTime {
+    color: grey;
+}
+.nightTime {
+    background: gray;
+    color: white;
+}
diff --git a/src/modules/my/child/child.html b/src/modules/my/child/child.html
@@ -1,10 +1,12 @@
 <template>
     <my-card title={city}>
-        <div class="clock">{time}</div>
-        <div class="date slds-m-around_xxx-small">{weekday}</div>
-        <div class="date slds-m-around_xxx-small">{date}</div>
+        <div class={themeClass}>
+            <div class="clock">{time}</div>
+            <div class="date slds-m-around_xxx-small">{weekday}</div>
+            <div class="date slds-m-around_xxx-small">{date}</div>
+        </div>
         <div slot="footer" class="footer">
-            {timeZone}
+            {footerNote}
         </div>
     </my-card>
 </template>
diff --git a/src/modules/my/child/child.js b/src/modules/my/child/child.js
@@ -1,24 +1,28 @@
-import { /* LightningElement, */ api } from 'lwc';
-import SLDSLightningElement from 'my/sldsLightningElement';
+import { /* LightningElement, */ api } from "lwc";
+import SLDSLightningElement from "my/sldsLightningElement";
 /**
  * Show an item
  */
 export default class Child extends SLDSLightningElement {
     @api
-    timeZone = '';
+    timeZone = "";
 
     @api
-    city = '';
+    city = "";
 
     @api
     is12Hours = false;
 
     @api
     refreshInterval;
 
+    @api
+    footerNote;
+
     _time;
     date;
     weekday;
+    themeClass;
 
     @api
     get time() {
@@ -27,42 +31,51 @@ export default class Child extends SLDSLightningElement {
     set time(value) {
         let optionsMilitary = {
             hour12: this.is12Hours,
-            hour: 'numeric',
-            minute: '2-digit'
+            hour: "numeric",
+            minute: "2-digit"
         };
 
-        if (this.refreshInterval === 'second') {
-            optionsMilitary.second = '2-digit';
+        if (this.refreshInterval === "second") {
+            optionsMilitary.second = "2-digit";
         }
 
         let [hh, mm] = value
-            .toLocaleString('en-US', {
+            .toLocaleString("en-US", {
                 ...optionsMilitary,
                 timeZone: this.timeZone
             })
-            .split(':');
+            .split(":");
 
         if (parseInt(hh, 10) === 24) {
-            hh = '00';
+            hh = "00";
+        }
+
+        let hoursNow = parseInt(hh, 10);
+        if (hoursNow >= 20 || hoursNow <= 8) {
+            this.themeClass = "slds-p-around_xx-small nightTime";
+        } else {
+            this.themeClass = "slds-p-around_xx-small dayTime";
         }
 
         this._time =
-            hh === '00' && mm === '00' ? '24:00' : (hh +":"+ mm).replace(/^24/, '00');
+            hh === "00" && mm === "00"
+                ? "24:00"
+                : (hh + ":" + mm).replace(/^24/, "00");
 
         let dateOptions = {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit'
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit"
         };
-        this.date = value.toLocaleString('en-US', {
+        this.date = value.toLocaleString("en-US", {
             ...dateOptions,
             timeZone: this.timeZone
         });
 
         let weekdayOptions = {
-            weekday: 'long'
+            weekday: "long"
         };
-        this.weekday = value.toLocaleString('en-US', {
+        this.weekday = value.toLocaleString("en-US", {
             ...weekdayOptions,
             timeZone: this.timeZone
         });

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"trailingComma": "none",`
`3`		`- "singleQuote": true,`
	`3`	`+ "singleQuote": false,`
`4`	`4`	`"tabWidth": 4,`
`5`	`5`	`"overrides": [`
`6`	`6`	`{`