From 939ccd8a0e40c565d7e6a7245ece95d405a210d8 Mon Sep 17 00:00:00 2001
From: pgrondek <pgrondek@gmail.com>
Date: Sat, 2 May 2020 12:01:01 +0200
Subject: [PATCH] Add date to clock module

---
 angular.json                              |  3 +--
 src/app/app.component.css                 | 10 ++++++++++
 src/app/app.module.ts                     | 12 ++++++------
 src/app/clock/clock.component.css         | 16 +++++-----------
 src/app/clock/clock.component.html        |  5 ++++-
 src/app/clock/clock.component.ts          |  9 +++++----
 src/app/dashboard/card.css                | 11 +++++++++++
 src/app/dashboard/dashboard.component.css | 18 ------------------
 8 files changed, 42 insertions(+), 42 deletions(-)
 create mode 100644 src/app/dashboard/card.css

diff --git a/angular.json b/angular.json
index 2f0b127..c7aabe5 100644
--- a/angular.json
+++ b/angular.json
@@ -24,7 +24,6 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -124,4 +123,4 @@
     }
   },
   "defaultProject": "angular-dashboard"
-}
\ No newline at end of file
+}
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 9167004..c64ade8 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,3 +1,13 @@
+@import "~@angular/material/prebuilt-themes/purple-green.css";
+
 mat-sidenav-container {
   height: 100%;
 }
+
+mat-card-content {
+  text-align: center;
+}
+
+.mat-card {
+  background-color: pink;
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 27cd002..85d96d8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import {LOCALE_ID, NgModule} from '@angular/core';
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ClockComponent} from './clock/clock.component';
@@ -7,11 +7,11 @@ import {LayoutModule} from '@angular/cdk/layout';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatCardModule} from '@angular/material/card';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
+import {DashboardComponent} from './dashboard/dashboard.component';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
 
 @NgModule({
   declarations: [
diff --git a/src/app/clock/clock.component.css b/src/app/clock/clock.component.css
index dec8d49..37d7d4a 100644
--- a/src/app/clock/clock.component.css
+++ b/src/app/clock/clock.component.css
@@ -1,15 +1,9 @@
-.dashboard-card {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-}
-
-.dashboard-card-content {
-  text-align: center;
-}
+@import "../dashboard/card.css";
 
 .clock {
   font-size: 10rem;
 }
+
+.date {
+  font-size: 3rem;
+}
diff --git a/src/app/clock/clock.component.html b/src/app/clock/clock.component.html
index fce7186..29048db 100644
--- a/src/app/clock/clock.component.html
+++ b/src/app/clock/clock.component.html
@@ -1,7 +1,10 @@
 <mat-card class="dashboard-card">
   <mat-card-content class="dashboard-card-content">
     <div class="clock">
-      {{hour}}:{{minute | number: '2.0-0'}}
+      {{time}}
+    </div>
+    <div class="date">
+      {{date}}
     </div>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/clock/clock.component.ts b/src/app/clock/clock.component.ts
index 9a5331c..e4224f2 100644
--- a/src/app/clock/clock.component.ts
+++ b/src/app/clock/clock.component.ts
@@ -1,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import {formatDate} from '@angular/common';
 
 @Component({
   selector: 'app-clock',
@@ -6,8 +7,8 @@ import {Component, OnInit} from '@angular/core';
   styleUrls: ['./clock.component.css']
 })
 export class ClockComponent implements OnInit {
-  hour: number;
-  minute: number;
+  date: string;
+  time: string;
 
   constructor() {
   }
@@ -19,8 +20,8 @@ export class ClockComponent implements OnInit {
 
   private updateTime() {
     const date = new Date(Date.now());
-    this.hour = date.getHours();
-    this.minute = date.getMinutes();
+    this.date = formatDate(date, 'EEEE, d LLLL yyyy', 'en');
+    this.time = formatDate(date, 'H:mm', 'en');
   }
 
   private interval() {
diff --git a/src/app/dashboard/card.css b/src/app/dashboard/card.css
new file mode 100644
index 0000000..ccde841
--- /dev/null
+++ b/src/app/dashboard/card.css
@@ -0,0 +1,11 @@
+.dashboard-card {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+}
+
+.dashboard-card-content {
+  text-align: center;
+}
diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css
index 49a8146..a474e41 100644
--- a/src/app/dashboard/dashboard.component.css
+++ b/src/app/dashboard/dashboard.component.css
@@ -1,21 +1,3 @@
 .grid-container {
   margin: 20px;
 }
-
-.dashboard-card {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-}
-
-.more-button {
-  position: absolute;
-  top: 5px;
-  right: 10px;
-}
-
-.dashboard-card-content {
-  text-align: center;
-}