feat(library-alerts-pannel-component): adding the libraries alert pannel to search it dynamically

the app module changes allows http request to be sent out by the application

BREAKING CHANGE:

Author: rdeiser

src/app/app.module.ts

@@ -8,6 +8,7 @@ import {TranslateModule} from "@ngx-translate/core";
 import { CommonModule } from '@angular/common';
 import { AutoAssetSrcDirective } from './services/auto-asset-src.directive';
 import {SHELL_ROUTER} from "./injection-tokens";
+import {HttpClientModule} from '@angular/common/http'
 
 
 
@@ -21,6 +22,7 @@ export const AppModule = ({providers, shellRouter}: {providers:any, shellRouter:
     imports: [
       BrowserModule,
       CommonModule,
+      HttpClientModule,
       TranslateModule.forRoot({})
     ],
     providers: [...providers, {provide: SHELL_ROUTER, useValue: shellRouter}],

src/app/custom1-module/customComponentMappings.ts

@@ -1,3 +1,4 @@
+import { LibraryAlertsPannelComponent } from '../library-alerts-pannel/library-alerts-pannel.component';
 import { Libraryh3lpComponent } from '../libraryh3lp/libraryh3lp.component';
 import { NdeProblemReportCustom } from '../nde-problem-report-custom/nde-problem-report-custom.component';
 import { PayFinesComponent } from '../pay-fines/pay-fines.component';
@@ -7,4 +8,5 @@ export const selectorComponentMap = new Map<string, any>([
   ['nde-footer-after', Libraryh3lpComponent],
   ['nde-account-section-results-before', PayFinesComponent],
   ['nde-full-display-service-container-after', NdeProblemReportCustom],
+  ['nde-top-bar-after', LibraryAlertsPannelComponent],
 ]);

src/app/library-alerts-pannel/library-alerts-pannel.component.html

@@ -0,0 +1,55 @@
+<div
+  id="alert-box-info"
+  class="alert-box alert-box__normal"
+  *ngIf="showAlertInfo"
+>
+  <div class="alert-icon">
+    <img
+      src="https://lib.k-state.edu/images/svg/bellicon-01.svg"
+      alt=""
+    />
+  </div>
+
+  <div class="alert-box-text">
+    <span style="font-weight: bold;">Information: </span>
+    <div [innerHTML]="infoMessage"></div>
+  </div>
+
+  <div
+    class="alert-icon alert-icon__close"
+    (click)="closeAlert('info')"
+  >
+    <img
+      src="https://lib.k-state.edu/images/svg/xpurple-01.svg"
+      alt="Close Alert Button"
+    />
+  </div>
+</div>
+
+<div
+  id="alert-box-emergency"
+  class="alert-box alert-box__normal"
+  *ngIf="showAlertEmergency"
+>
+  <div class="alert-icon">
+    <img
+      src="https://lib.k-state.edu/images/svg/bellicon-01.svg"
+      alt=""
+    />
+  </div>
+
+  <div class="alert-box-text">
+    <span style="font-weight: bold;">ALERT: </span>
+    <div [innerHTML]="emergencyMessage"></div>
+  </div>
+
+  <div
+    class="alert-icon alert-icon__close"
+    (click)="closeAlert('emergency')"
+  >
+    <img
+      src="https://lib.k-state.edu/images/svg/xpurple-01.svg"
+      alt="Close Alert Button"
+    />
+  </div>
+</div>

src/app/library-alerts-pannel/library-alerts-pannel.component.scss

@@ -0,0 +1,69 @@
+.alerts {
+  padding-bottom: 0;
+  max-width: 1260px;
+  margin: 0 auto;
+}
+
+.alert-box {
+  font-size: 1.25rem;
+  padding: 20px 30px;
+  text-align: left;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.alert-box:first-child {
+  margin-top: 40px;
+}
+
+.alert-box:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.alert-box__red {
+  color: #ffffff;
+  background: #ba1623;
+}
+
+.alert-box__normal {
+  color: #512888;
+  background: #e6e6e6;
+  border: 1px solid #512888;
+}
+
+.alert-icon {
+  flex: 0 0 35px;
+  width: 35px;
+  height: 35px;
+}
+
+.alert-icon img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.alert-box-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.alert-box-text div {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.alert-icon__close {
+  flex: 0 0 35px;
+  cursor: pointer;
+}
+
+.alert-icon__close img {
+  width: 100%;
+  height: auto;
+}
+
+.alert-icon__close:hover {
+  opacity: 0.8;
+}

src/app/library-alerts-pannel/library-alerts-pannel.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'library-alerts-pannel',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './library-alerts-pannel.component.html',
+  styleUrls: ['./library-alerts-pannel.component.scss'],
+})
+export class LibraryAlertsPannelComponent implements OnInit {
+  showAlertInfo = false;
+  showAlertEmergency = false;
+
+  infoMessage: SafeHtml = '';
+  emergencyMessage: SafeHtml = '';
+
+  constructor(
+    private http: HttpClient,
+    private sanitizer: DomSanitizer
+  ) {}
+
+  ngOnInit(): void {
+    this.getAlerts();
+  }
+
+  private getAlerts(): void {
+    this.http
+      .get<any>('http://127.0.0.1:5000/data/website_alerts/')
+      .subscribe({
+        next: (data) => {
+          this.showAlertInfo = data?.informational?.active === true;
+          this.showAlertEmergency = data?.emergency?.active === true;
+
+          this.infoMessage = this.sanitizer.bypassSecurityTrustHtml(
+            this.decodeHtmlEntitiesDeep(data?.informational?.message)
+          );
+
+          this.emergencyMessage = this.sanitizer.bypassSecurityTrustHtml(
+            this.decodeHtmlEntitiesDeep(data?.emergency?.message)
+          );
+        },
+        error: (err) => {
+          console.error('Error fetching alerts:', err);
+        },
+      });
+  }
+
+  closeAlert(type: 'info' | 'emergency'): void {
+    if (type === 'info') {
+      this.showAlertInfo = false;
+    }
+
+    if (type === 'emergency') {
+      this.showAlertEmergency = false;
+    }
+  }
+
+  private decodeHtmlEntitiesDeep(str?: string): string {
+    if (!str) return '';
+
+    let previous: string;
+    let current = str;
+
+    do {
+      previous = current;
+      const textarea = document.createElement('textarea');
+      textarea.innerHTML = current;
+      current = textarea.value;
+    } while (current !== previous);
+
+    return current;
+  }
+}