Merge branch 'dev' into main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "0.0.0",
+  "version": "1.01a",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/app.component.html

@@ -2,11 +2,20 @@
 <p-confirmDialog></p-confirmDialog>
 <div class="app-container">
   <jm-header></jm-header>
-  <div class="page-contents">
+  <div *ngIf="!mnts.activeMaintenanceEvent" class="page-contents">
     <router-outlet *ngIf="!loading; else appLoading"></router-outlet>
     <ng-template #appLoading>
-      <jm-loading-spinner [showMessage]="false" [useDots]="false"></jm-loading-spinner>
+      <jm-loading-spinner
+        [showMessage]="false"
+        [useDots]="false"
+      ></jm-loading-spinner>
     </ng-template>
   </div>
+
+  <jm-maintenance-message
+    *ngIf="mnts.activeMaintenanceEvent"
+    [event]="mnts.activeMaintenanceEvent"
+  ></jm-maintenance-message>
+
   <jm-footer></jm-footer>
 </div>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { InitializerService } from './services/initializer.service';
 import { ToastService } from './services/toast.service';
+import { MaintenanceService } from './services/maintenance.service';
 
 @Component({
   selector: 'jm-root',
@@ -31,5 +32,6 @@ export class AppComponent implements OnInit {
   constructor(
     private _init: InitializerService,
     private _tsts: ToastService,
-  ) { }
+    public mnts: MaintenanceService
+  ) {}
 }

src/app/classes/MaintenanceEvent.ts

@@ -0,0 +1,20 @@
+export interface IMaintenanceEventOpts {
+  id: number;
+  started_at: Date;
+  ended_at: Date;
+  message?: string;
+}
+
+export class MaintenanceEvent implements IMaintenanceEventOpts {
+  public id!: number;
+
+  public started_at!: Date;
+
+  public ended_at!: Date;
+
+  public message?: string;
+
+  constructor(opts: IMaintenanceEventOpts) {
+    Object.assign(this, opts);
+  }
+}

src/app/modules/staging/staging.component.html → src/app/modules/shared/components/maintenance-message/maintenance-message.component.html

@@ -1,6 +1,12 @@
-<div class="coming-soon-container">
-  <span class="coming-soon-message">Portfolio site <a href="https://github.com/jmuzina/portfolio">under
-      construction!</a></span>
+<div class="under-maintenance-container">
+  <div class="maintenance-text-wrapper">
+    <span class="maintenance-header">Under Maintenance. Be back soon!</span>
+    <span
+      *ngIf="event.message && event.message.length"
+      class="maintenance-message"
+      >{{ event.message }}</span
+    >
+  </div>
   <div class="spinner">
     <div class="loadingio-spinner-gear-83xsmw1onxc">
       <div class="ldio-22g73ngrsc9">
@@ -15,5 +21,4 @@
       </div>
     </div>
   </div>
-
 </div>

src/app/modules/staging/staging.component.scss → src/app/modules/shared/components/maintenance-message/maintenance-message.component.scss

@@ -1,16 +1,24 @@
-.coming-soon-container {
+.under-maintenance-container {
   display: flex;
   height: 100%;
   width: 100%;
   flex-flow: column nowrap;
   justify-content: center;
 }
 
-.coming-soon-message {
-  color: var(--primary-text);
-  text-align: center;
-  align-self: center;
-  font-size: 2.4em;
+.maintenance-text-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+
+  .maintenance-header {
+    font-size: 2.4em;
+  }
+  .maintenance-message {
+    font-size: 1.8em;
+    color: var(--text-color-secondary);
+  }
 }
 
 .spinner {
@@ -20,24 +28,24 @@
 
 @keyframes ldio-22g73ngrsc9 {
   0% {
-    transform: rotate(0deg)
+    transform: rotate(0deg);
   }
 
   50% {
-    transform: rotate(22.5deg)
+    transform: rotate(22.5deg);
   }
 
   100% {
-    transform: rotate(45deg)
+    transform: rotate(45deg);
   }
 }
 
-.ldio-22g73ngrsc9>div {
+.ldio-22g73ngrsc9 > div {
   transform-origin: 100px 100px;
   animation: ldio-22g73ngrsc9 0.2s infinite linear;
 }
 
-.ldio-22g73ngrsc9>div div {
+.ldio-22g73ngrsc9 > div div {
   position: absolute;
   width: 22px;
   height: 152px;
@@ -47,29 +55,29 @@
   transform: translate(-50%, -50%);
 }
 
-.ldio-22g73ngrsc9>div div:nth-child(1) {
+.ldio-22g73ngrsc9 > div div:nth-child(1) {
   width: 120px;
   height: 120px;
   border-radius: 50%;
 }
 
-.ldio-22g73ngrsc9>div div:nth-child(6) {
+.ldio-22g73ngrsc9 > div div:nth-child(6) {
   width: 80px;
   height: 80px;
   background: var(--surface-ground);
   border-radius: 50%;
 }
 
-.ldio-22g73ngrsc9>div div:nth-child(3) {
-  transform: translate(-50%, -50%) rotate(45deg)
+.ldio-22g73ngrsc9 > div div:nth-child(3) {
+  transform: translate(-50%, -50%) rotate(45deg);
 }
 
-.ldio-22g73ngrsc9>div div:nth-child(4) {
-  transform: translate(-50%, -50%) rotate(90deg)
+.ldio-22g73ngrsc9 > div div:nth-child(4) {
+  transform: translate(-50%, -50%) rotate(90deg);
 }
 
-.ldio-22g73ngrsc9>div div:nth-child(5) {
-  transform: translate(-50%, -50%) rotate(135deg)
+.ldio-22g73ngrsc9 > div div:nth-child(5) {
+  transform: translate(-50%, -50%) rotate(135deg);
 }
 
 .loadingio-spinner-gear-83xsmw1onxc {

src/app/modules/shared/components/maintenance-message/maintenance-message.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MaintenanceMessageComponent } from './maintenance-message.component';
+
+describe('MaintenanceMessageComponent', () => {
+  let component: MaintenanceMessageComponent;
+  let fixture: ComponentFixture<MaintenanceMessageComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MaintenanceMessageComponent]
+    });
+    fixture = TestBed.createComponent(MaintenanceMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/shared/components/maintenance-message/maintenance-message.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { MaintenanceEvent } from 'src/app/classes/MaintenanceEvent';
+
+@Component({
+  selector: 'jm-maintenance-message',
+  templateUrl: './maintenance-message.component.html',
+  styleUrls: ['./maintenance-message.component.scss'],
+})
+export class MaintenanceMessageComponent {
+  @Input({ required: true }) event!: MaintenanceEvent;
+}

src/app/modules/shared/shared.module.ts

@@ -19,6 +19,7 @@ import { MatomoOptOutComponent } from './components/matomo-opt-out/matomo-opt-ou
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { AttributionComponent } from './components/attribution/attribution.component';
 import { TableModule } from 'primeng/table';
+import { MaintenanceMessageComponent } from './components/maintenance-message/maintenance-message.component';
 @NgModule({
   declarations: [
     LoadingSpinnerComponent,
@@ -30,6 +31,7 @@ import { TableModule } from 'primeng/table';
     PageNotFoundComponent,
     MatomoOptOutComponent,
     AttributionComponent,
+    MaintenanceMessageComponent,
   ],
   imports: [
     CommonModule,
@@ -56,7 +58,8 @@ import { TableModule } from 'primeng/table';
     ColorThemeTogglerComponent,
     AttributionComponent,
     HeaderComponent,
+    MaintenanceMessageComponent,
     FooterComponent,
   ],
 })
-export class SharedModule { }
+export class SharedModule {}

src/app/modules/splash/skills/skill-classification/skill-classification.component.spec.ts

@@ -8,7 +8,7 @@ describe('SkillClassificationComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SkillClassificationComponent]
+      declarations: [SkillClassificationComponent],
     });
     fixture = TestBed.createComponent(SkillClassificationComponent);
     component = fixture.componentInstance;

src/app/modules/splash/skills/skill-classification/skill-item/skill-item.component.spec.ts

@@ -8,7 +8,7 @@ describe('SkillItemComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SkillItemComponent]
+      declarations: [SkillItemComponent],
     });
     fixture = TestBed.createComponent(SkillItemComponent);
     component = fixture.componentInstance;

src/app/services/initializer.service.ts

@@ -2,14 +2,17 @@ import { Injectable } from '@angular/core';
 import { GenericService } from './generic.service';
 import { SkillsService } from './skills.service';
 import { ToastService } from './toast.service';
+import { MaintenanceService } from './maintenance.service';
 
 @Injectable({ providedIn: 'root' })
 export class InitializerService extends GenericService {
   public override async initialize(): Promise<void> {
     return new Promise<void>(async (resolve, reject) => {
       try {
         await Promise.all(
-          [this._sks].map((service: GenericService) => service.initialize())
+          [this._sks, this._mnts].map((service: GenericService) =>
+            service.initialize(),
+          ),
         );
         resolve();
       } catch (err) {
@@ -26,7 +29,11 @@ export class InitializerService extends GenericService {
     return super.initialize();
   }
 
-  constructor(private _tsts: ToastService, private _sks: SkillsService) {
+  constructor(
+    private _tsts: ToastService,
+    private _sks: SkillsService,
+    private _mnts: MaintenanceService,
+  ) {
     super();
   }
 }