Creating new zone

src/powerdns-manager/src/app/features/dashboard/layout/layout.component.html

@@ -8,13 +8,20 @@
     <div class="drawer-container">
       <button mat-raised-button type="button" aria-label="Go to dashboard" routerLink="/" ><mat-icon>dashboard</mat-icon>Dashboard</button>
       <mat-divider></mat-divider>
-      <button mat-raised-button type="button" aria-label="Go to dns zones" routerLink="zones"><mat-icon>share</mat-icon>Zones</button>      
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-icon>share</mat-icon>
+          <span>Zones</span>
+        </mat-expansion-panel-header>
+        <button mat-raised-button type="button" aria-label="Go to dns zones" routerLink="zones/new"><mat-icon>share</mat-icon>New zone</button>
+        <button mat-raised-button type="button" aria-label="Go to dns zones" routerLink="zones"><mat-icon>share</mat-icon>Zones</button>
+      </mat-expansion-panel>
       <button mat-raised-button type="button" aria-label="Go to server statistics" routerLink="state"><mat-icon>visibility</mat-icon>State</button>
       <button mat-raised-button type="button" aria-label="Go to servers" routerLink="servers"><mat-icon>computer</mat-icon>Servers</button>
       <button mat-raised-button type="button" aria-label="Go to data centers" routerLink="datacenters"><mat-icon>map</mat-icon>Data centers</button>
       <mat-divider></mat-divider>      
       <button mat-raised-button type="button" aria-label="Go to user manager" routerLink="/"><mat-icon>people</mat-icon>Users</button>
-    </div>    
+    </div>
     <div class="author">
       2024 - Adam Debowski
     </div>

src/powerdns-manager/src/app/features/dashboard/layout/layout.component.scss

@@ -94,4 +94,16 @@
     .mat-drawer-container {
         background-color: $color-gray-light;
     }
+
+    .sidenav-container {
+        // height: 100vh;
+      }
+
+      mat-sidenav {
+        width: 250px;
+      }
+
+      mat-sidenav-content {
+        padding: 16px;
+      }    
 }

src/powerdns-manager/src/app/features/dashboard/layout/layout.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
 
 @Component({
   selector: 'app-layout',
@@ -8,6 +9,8 @@ import { Component } from '@angular/core';
 export class LayoutComponent {
   isOpen = true;
 
+  @ViewChild(MatSidenav) sidenav!: MatSidenav;
+
   openClose(): void {
     this.isOpen = !this.isOpen;
   }

src/powerdns-manager/src/app/features/dashboard/zones/create-zone/new-zone/new-zone.component.html

@@ -0,0 +1,27 @@
+<mat-card>
+    <mat-card-header>
+        Create a new zone
+    </mat-card-header>
+    <mat-card-content>
+        <div>
+            <div></div>
+            <div></div>
+        </div>
+    </mat-card-content>
+    <mat-card-actions align="end">
+        <button mat-raised-button
+                type="button"
+                aria-label="Back to list button"
+                routerLink="/dashboard/zones"><mat-icon>chevron_left</mat-icon>Back</button>
+                <button mat-raised-button
+                color="secondary"
+                type="button"
+                aria-label="Reset form"
+                (click)="form.reset()"><mat-icon>delete_forever</mat-icon>Clear form</button>                
+                <button mat-raised-button
+                color="primary"
+                type="button"
+                aria-label="Create new data center"
+                (click)="onSubmit()"><mat-icon>save</mat-icon>Create</button>                
+    </mat-card-actions>
+</mat-card>

src/powerdns-manager/src/app/features/dashboard/zones/create-zone/new-zone/new-zone.component.scss

@@ -0,0 +1,20 @@
+@import '/src/styles/utils/variables';
+
+:host {
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    mat-card {
+        width: inherit;
+
+        mat-card-header {
+            font-size: 1rem;
+            color: $color-white;
+        }
+
+        mat-card-content {
+            height: calc(100% - 100px);
+        }
+    }
+}

src/powerdns-manager/src/app/features/dashboard/zones/create-zone/new-zone/new-zone.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewZoneComponent } from './new-zone.component';
+
+describe('NewZoneComponent', () => {
+  let component: NewZoneComponent;
+  let fixture: ComponentFixture<NewZoneComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NewZoneComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NewZoneComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/powerdns-manager/src/app/features/dashboard/zones/create-zone/new-zone/new-zone.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'app-new-zone',
+  templateUrl: './new-zone.component.html',
+  styleUrl: './new-zone.component.scss'
+})
+export class NewZoneComponent {
+
+  form = this.fb.group({
+    serviceId: [''],
+    zone: [''],
+  });
+
+  constructor(private fb: FormBuilder){}
+
+  onSubmit(): void {
+
+  }
+}

src/powerdns-manager/src/app/features/dashboard/zones/create-zone/new-zoneexit/new-zoneexit.component.html

@@ -0,0 +1 @@
+<p>new-zoneexit works!</p>

src/powerdns-manager/src/app/features/dashboard/zones/create-zone/new-zoneexit/new-zoneexit.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewZoneexitComponent } from './new-zoneexit.component';
+
+describe('NewZoneexitComponent', () => {
+  let component: NewZoneexitComponent;
+  let fixture: ComponentFixture<NewZoneexitComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NewZoneexitComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NewZoneexitComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/powerdns-manager/src/app/features/dashboard/zones/create-zone/new-zoneexit/new-zoneexit.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-new-zoneexit',
+  standalone: true,
+  imports: [],
+  templateUrl: './new-zoneexit.component.html',
+  styleUrl: './new-zoneexit.component.scss'
+})
+export class NewZoneexitComponent {
+
+}

src/powerdns-manager/src/app/features/dashboard/zones/home/home.component.html

@@ -2,59 +2,84 @@
 <ng-container>
     <div class="listContainer">
         <div>
-            <mat-list>
-                <div mat-subheader class="header">Data centers</div>
-                @for(dataCenter of dataCenters$ | async; track dataCenter.id) {
-                    <mat-list-item>
-                        <mat-icon matListItemIcon>folder</mat-icon>
-                        <div matListItemTitle
-                             class="listItem">
-                            <a (click)="onDataCenterClick(dataCenter.id!)">
-                                {{ dataCenter.name }}
-                            </a>
-                        </div>
-                        <div matListItemLine
-                             class="description">
-                            {{ dataCenter.city }} (Country: {{ dataCenter.country }})
-                        </div>
-                    </mat-list-item>
-                }
-            </mat-list>            
+            <mat-card>
+                <mat-card-header>
+                    Data centers
+                </mat-card-header>
+                <mat-card-content>
+                    <mat-list>
+                        @for(dataCenter of dataCenters$ | async; track dataCenter.id) {
+                            <mat-list-item>
+                                <mat-icon matListItemIcon>folder</mat-icon>
+                                <div matListItemTitle
+                                     class="listItem">
+                                    <a (click)="onDataCenterClick(dataCenter.id!)">
+                                        {{ dataCenter.name }}
+                                    </a>
+                                </div>
+                                <div matListItemLine
+                                    class="description">
+                                    {{ dataCenter.city }} (Country: {{ dataCenter.country }})
+                                </div>
+                            </mat-list-item>
+                        }
+                        @empty {
+                            <p>No data</p>
+                        }
+                    </mat-list> 
+                </mat-card-content>
+            </mat-card>
         </div>
         <div>
-            <mat-list>
-                <div mat-subheader class="header">Services</div>
-                @for(service of services$ | async; track service.id) {
-                    <mat-list-item>
-                        <mat-icon matListItemIcon>folder</mat-icon>
-                        <div matListItemTitle
-                             class="listItem">
-                            <a (click)="onServiceClick(service.id)">
-                                {{ service.name }}
-                            </a>
-                        </div>
-                        <div matListItemLine>
-                            {{ service.proto}}://{{ service.hostAddress }}:{{ service.port}}
-                        </div>
-                    </mat-list-item>
-                }
-            </mat-list>
+            <mat-card>
+                <mat-card-header>Services</mat-card-header>
+                <mat-card-content>
+                    <mat-list>
+                        @for(service of services$ | async; track service.id) {
+                            <mat-list-item>
+                                <mat-icon matListItemIcon>folder</mat-icon>
+                                <div matListItemTitle
+                                     class="listItem">
+                                    <a (click)="onServiceClick(service.id)">
+                                        {{ service.name }}
+                                    </a>
+                                </div>
+                                <div matListItemLine>
+                                    mode: {{ service.serviceMode }}, [{{ service.proto}}://{{ service.hostAddress }}:{{ service.port}}]
+                                </div>
+                            </mat-list-item>
+                        }
+                        @empty {
+                            <p>No data</p>
+                        }
+                    </mat-list>
+                </mat-card-content>
+            </mat-card>
         </div>
         <div>
-            <mat-list>
-                <div mat-subheader class="header">Zones</div>
-                @for(zoneItem of zones$ | async; track zoneItem.id) {
-                    <mat-list-item>
-                        <mat-icon matListItemIcon>map</mat-icon>
-                        <div matListItemTitle
-                             class="listItem">
-                            <a (click)="onZoneDetailsClick(zoneItem.id)">
-                                {{ zoneItem.name }}
-                            </a>
-                        </div>
-                    </mat-list-item>
-                }
-            </mat-list>
+            <mat-card>
+                <mat-card-header>Zones</mat-card-header>
+                <mat-card-content>
+                    <div>
+                        <mat-list>
+                            @for(zoneItem of zones$ | async; track zoneItem.id) {
+                                <mat-list-item>
+                                    <mat-icon matListItemIcon>map</mat-icon>
+                                    <div matListItemTitle
+                                        class="listItem">
+                                        <a (click)="onZoneDetailsClick(zoneItem.id)">
+                                            {{ zoneItem.name }}
+                                        </a>
+                                    </div>
+                                </mat-list-item>
+                            }
+                            @empty {
+                                <p>No data</p>
+                            }
+                        </mat-list>
+                    </div>
+                </mat-card-content>
+            </mat-card>
         </div>
     </div>
 </ng-container>
@@ -64,7 +89,7 @@
         <ul>
             <li><span>Name</span>{{ zone.name }}</li>
             <li><span>Serial</span>{{ zone.serial }}</li>
-            <li><span>Last check</span>{{ zone.last_check }}</li>
+            <li><span>Last check</span>{{ zone.last_check | date:'yyyy-MM-dd HH:mm:ss' }}</li>
             <li><span>Kind</span>{{ zone.kind }}</li>
             <li><span>DNS SEC</span>{{ zone.dnssec}}</li>
             <li><span>Records no</span>{{ zone.rrsets.length }}</li>

src/powerdns-manager/src/app/features/dashboard/zones/home/home.component.scss

@@ -1,6 +1,34 @@
 @import '/src/styles/utils/variables';
 
 :host {
+    color: $color-white;
+
+    mat-card {
+        height: 300px;
+    }
+
+    mat-card-header {
+        font-size: 1rem;
+    }
+
+    mat-card-content {
+        p {
+            font-size: 1rem;
+            color: $color-white;
+        }
+         > div {
+            height: 220px;
+            overflow: hidden;
+            overflow-y: auto;
+         }
+
+         mat-list-item {
+            a {
+                color: $color-white !important;
+            }
+         }
+    }
+
     ul {
         font-size: 1rem;
         list-style-type: '» ';
@@ -36,14 +64,6 @@
             text-decoration: underline;
         }
 
-        > div {
-            background-color: $color-white;
-            height: 280px;
-            overflow: hidden;
-            overflow-y: auto;            
-        }
-
-
         .listItem {
             a {
                 color: $color-blue-navy;
@@ -62,10 +82,10 @@
     }
 
     .resultContainer {
-        height: 500px !important;
+        color: $color-black;
+        height: 480px !important;
         width: 1550px;
         overflow: hidden;
-        background-color: $color-white;
 
         .details {
             border-top: solid 1px $color-blue-navy;