Skip to content

Commit 7a506ef

Browse files
actionanandactionanand
authored
Merge pull request #2 from actionanand/2-features
partially completed
2 parents d128d89 + b8b52fb commit 7a506ef

32 files changed

+513
-313
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,3 +224,5 @@ To configure the pre-commit hook, simply add a `precommit` npm script. We want t
224224
225225
- [GitHub Actions for Angular](https://github.com/rodrigokamada/angular-github-actions)
226226
- [Angular 16 - milestone release](https://github.com/actionanand/ng16-signal-milestone-release)
227+
- [Types of selectors](https://angular.dev/guide/components/selectors)
228+
- [Interfaces vs Types in TypeScript - stack overflow](https://stackoverflow.com/questions/37233735/interfaces-vs-types-in-typescript/52682220#52682220)

‎src/app/app.component.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
main {
2+
width: 80%;
3+
margin: 3rem 10%;
4+
}
5+
6+
#dashboard {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: flex-start;
10+
justify-content: space-between;
11+
gap: 1.5rem;
12+
max-width: 85rem;
13+
}
14+
15+
@media (min-width: 768px) {
16+
#dashboard {
17+
flex-direction: row;
18+
}
19+
}

‎src/app/app.component.html

Lines changed: 10 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,17 @@
1-
<header>
2-
<div id="logo">
3-
<img src="logo.png" alt="Website logo, a server" />
4-
</div>
5-
6-
<nav>
7-
<ul>
8-
<li>
9-
<a href="/">Home</a>
10-
</li>
11-
<li>
12-
<a href="/">Management</a>
13-
</li>
14-
<li>
15-
<button>
16-
<span> Logout </span>
17-
<span class="icon"> → </span>
18-
</button>
19-
</li>
20-
</ul>
21-
</nav>
22-
</header>
1+
<app-header />
232

243
<main>
254
<div id="dashboard">
26-
<div class="dashboard-item">
27-
<article>
28-
<header>
29-
<img src="status.png" alt="A signal symbol" />
30-
<h2>Server Status</h2>
31-
</header>
32-
<div>
33-
@if (currentStatus === 'online') {
34-
<p>Servers are online</p>
35-
<p>All systems are operational.</p>
36-
} @else if (currentStatus === 'offline') {
37-
<p>Servers are offline</p>
38-
<p>Functionality should be restored soon.</p>
39-
} @else {
40-
<p>Server status is unknown</p>
41-
<p>Fetching server status failed.</p>
42-
}
43-
</div>
44-
</article>
45-
</div>
46-
47-
<div class="dashboard-item">
48-
<article>
49-
<header>
50-
<img src="globe.png" alt="A globe" />
51-
<h2>Traffic</h2>
52-
</header>
53-
<div id="traffic">
54-
<p>Last 7 days</p>
5+
<app-dashboard-item [image]="{ src: 'status.png', alt: 'A signal symbol' }" title="Server Status">
6+
<app-server-status />
7+
</app-dashboard-item>
558

56-
<div id="chart">
57-
@for (dataPoint of dummyTrafficData; track dataPoint.id) {
58-
<div [style.height]="(dataPoint.value / maxTraffic) * 100 + '%'"></div>
59-
}
60-
</div>
61-
</div>
62-
</article>
63-
</div>
9+
<app-dashboard-item [image]="{ src: 'globe.png', alt: 'A globe' }" title="Traffic">
10+
<app-traffic />
11+
</app-dashboard-item>
6412

65-
<div class="dashboard-item">
66-
<article>
67-
<header>
68-
<img src="list.png" alt="A list of items" />
69-
<h2>Support Tickets</h2>
70-
</header>
71-
<div id="status">
72-
<p>Todo...</p>
73-
</div>
74-
</article>
75-
</div>
13+
<app-dashboard-item [image]="{ src: 'list.png', alt: 'A list of items' }" title="Support Tickets">
14+
<app-tickets />
15+
</app-dashboard-item>
7616
</div>
7717
</main>

‎src/app/app.component.ts

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,16 @@
11
import { Component } from '@angular/core';
22

3+
import { HeaderComponent } from './components/header/header.component';
4+
import { ServerStatusComponent } from './components/dashboard/server-status/server-status.component';
5+
import { TrafficComponent } from './components/dashboard/traffic/traffic.component';
6+
import { TicketsComponent } from './components/dashboard/tickets/tickets.component';
7+
import { DashboardItemComponent } from './components/dashboard/dashboard-item/dashboard-item.component';
8+
39
@Component({
410
selector: 'app-root',
511
standalone: true,
12+
imports: [HeaderComponent, ServerStatusComponent, TrafficComponent, TicketsComponent, DashboardItemComponent],
613
templateUrl: './app.component.html',
14+
styleUrl: './app.component.css',
715
})
8-
export class AppComponent {
9-
dummyTrafficData = [
10-
{
11-
id: 'd1',
12-
value: 433,
13-
},
14-
{
15-
id: 'd2',
16-
value: 260,
17-
},
18-
{
19-
id: 'd3',
20-
value: 290,
21-
},
22-
{
23-
id: 'd4',
24-
value: 410,
25-
},
26-
{
27-
id: 'd5',
28-
value: 397,
29-
},
30-
{
31-
id: 'd6',
32-
value: 488,
33-
},
34-
{
35-
id: 'd47',
36-
value: 589,
37-
},
38-
];
39-
maxTraffic = Math.max(...this.dummyTrafficData.map(data => data.value));
40-
currentStatus = 'online';
41-
}
16+
export class AppComponent {}

‎src/app/components/dashboard/dashboard-item/dashboard-item.component.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<article>
2+
<header>
3+
<img [src]="image.src" [alt]="image.alt" />
4+
<h2>{{ title() }}</h2>
5+
</header>
6+
<ng-content></ng-content>
7+
</article>

‎src/app/components/dashboard/dashboard-item/dashboard-item.component.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
:host {
2+
display: block;
3+
padding: 1rem;
4+
border: 1px solid #ccc;
5+
border-radius: 6px;
6+
background-color: #f8f8f8;
7+
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
8+
}
9+
10+
:host header {
11+
display: flex;
12+
padding: 0;
13+
gap: 0.75rem;
14+
align-items: center;
15+
margin-bottom: 1rem;
16+
}
17+
18+
:host header img {
19+
width: 1.5rem;
20+
height: 1.5rem;
21+
object-fit: contain;
22+
}
23+
24+
h2 {
25+
margin: 0;
26+
font-size: 0.9rem;
27+
text-transform: uppercase;
28+
color: #504e50;
29+
}
30+
31+
@media (min-width: 768px) {
32+
:host {
33+
padding: 2rem;
34+
}
35+
}

‎src/app/components/dashboard/dashboard-item/dashboard-item.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, input, Input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-dashboard-item',
5+
standalone: true,
6+
imports: [],
7+
templateUrl: './dashboard-item.component.html',
8+
styleUrl: './dashboard-item.component.scss',
9+
})
10+
export class DashboardItemComponent {
11+
@Input({ required: true })
12+
image!: { src: string; alt: string };
13+
14+
title = input.required<string>();
15+
}

‎src/app/components/dashboard/server-status/server-status.component.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@if (currentStatus === 'online') {
2+
<p>Servers are online</p>
3+
<p>All systems are operational.</p>
4+
} @else if (currentStatus === 'offline') {
5+
<p>Servers are offline</p>
6+
<p>Functionality should be restored soon.</p>
7+
} @else {
8+
<p>Server status is unknown</p>
9+
<p>Fetching server status failed.</p>
10+
}

‎src/app/components/dashboard/server-status/server-status.component.scss

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
:host {
2+
display: block;
3+
width: 15rem;
4+
}
5+
6+
.status p:first-of-type {
7+
font-weight: bold;
8+
animation: pulse 2s infinite;
9+
margin: 0 0 0.5rem 0;
10+
font-size: 1.15rem;
11+
}
12+
13+
.status-online p:first-of-type {
14+
color: #6a3cb0;
15+
}
16+
17+
.status-offline p:first-of-type {
18+
color: #b22084;
19+
}
20+
21+
.status-unknown p:first-of-type {
22+
color: grey;
23+
}
24+
25+
p:last-of-type {
26+
margin: 0;
27+
color: #625e67;
28+
}
29+
30+
@keyframes pulse {
31+
0% {
32+
opacity: 1;
33+
}
34+
50% {
35+
opacity: 0.5;
36+
}
37+
100% {
38+
opacity: 1;
39+
}
40+
}

‎src/app/components/dashboard/server-status/server-status.component.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-server-status',
5+
standalone: true,
6+
imports: [],
7+
templateUrl: './server-status.component.html',
8+
styleUrl: './server-status.component.scss',
9+
})
10+
export class ServerStatusComponent {
11+
currentStatus = 'online';
12+
}

‎src/app/components/dashboard/tickets/new-ticket/new-ticket.component.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<form>
2+
<app-control title="Title">
3+
<input name="title" id="title" />
4+
</app-control>
5+
<app-control title="Request">
6+
<textarea name="request" id="request" rows="3"></textarea>
7+
</app-control>
8+
<p>
9+
<button appButton>
10+
<span class="btn-txt"> Submit </span>
11+
⌲
12+
</button>
13+
</p>
14+
</form>

‎src/app/components/dashboard/tickets/new-ticket/new-ticket.component.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#new-ticket {
2+
width: 15rem;
3+
}

‎src/app/components/dashboard/tickets/new-ticket/new-ticket.component.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component } from '@angular/core';
2+
3+
import { ButtonComponent } from '../../../../shared/ui/button/button.component';
4+
import { ControlComponent } from '../../../../shared/ui/control/control.component';
5+
6+
@Component({
7+
selector: 'app-new-ticket',
8+
standalone: true,
9+
imports: [ButtonComponent, ControlComponent],
10+
templateUrl: './new-ticket.component.html',
11+
styleUrl: './new-ticket.component.scss',
12+
})
13+
export class NewTicketComponent {}

‎src/app/components/dashboard/tickets/ticket/ticket.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>ticket works!</p>

‎src/app/components/dashboard/tickets/ticket/ticket.component.scss

Whitespace-only changes.

‎src/app/components/dashboard/tickets/ticket/ticket.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-ticket',
5+
standalone: true,
6+
imports: [],
7+
templateUrl: './ticket.component.html',
8+
styleUrl: './ticket.component.scss',
9+
})
10+
export class TicketComponent {}

‎src/app/components/dashboard/tickets/tickets.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div id="new-ticket">
2+
<app-new-ticket />
3+
</div>

‎src/app/components/dashboard/tickets/tickets.component.scss

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
:host {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 1.5rem;
5+
}
6+
7+
:host ul {
8+
list-style: none;
9+
margin: 0;
10+
padding: 0;
11+
width: 15rem;
12+
}
13+
14+
:host li {
15+
margin: 0.5rem 0;
16+
}
17+
18+
:host p {
19+
margin: 0;
20+
color: #4f4b53;
21+
}
22+
23+
:host h2 {
24+
margin: 0;
25+
font-size: 1.1rem;
26+
color: #38343c;
27+
}
28+
29+
@media (min-width: 768px) {
30+
:host {
31+
flex-direction: row;
32+
}
33+
}

‎src/app/components/dashboard/tickets/tickets.component.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from '@angular/core';
2+
3+
import { NewTicketComponent } from './new-ticket/new-ticket.component';
4+
5+
@Component({
6+
selector: 'app-tickets',
7+
standalone: true,
8+
imports: [NewTicketComponent],
9+
templateUrl: './tickets.component.html',
10+
styleUrl: './tickets.component.scss',
11+
})
12+
export class TicketsComponent {}

‎src/app/components/dashboard/traffic/traffic.component.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<p>Last 7 days</p>
2+
3+
<div id="chart">
4+
@for (dataPoint of dummyTrafficData; track dataPoint.id) {
5+
<div [style.height]="(dataPoint.value / maxTraffic) * 100 + '%'"></div>
6+
}
7+
</div>

0 commit comments

Comments
 (0)