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;
-}