From a9ccf27ca868bfec38be832a0d344931dfa64128 Mon Sep 17 00:00:00 2001 From: rdeiser Date: Thu, 26 Mar 2026 14:10:22 -0500 Subject: [PATCH 1/2] 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: --- src/app/app.module.ts | 2 + .../custom1-module/customComponentMappings.ts | 2 + .../library-alerts-pannel.component.html | 55 ++++++++++++++ .../library-alerts-pannel.component.scss | 69 +++++++++++++++++ .../library-alerts-pannel.component.ts | 76 +++++++++++++++++++ 5 files changed, 204 insertions(+) create mode 100644 src/app/library-alerts-pannel/library-alerts-pannel.component.html create mode 100644 src/app/library-alerts-pannel/library-alerts-pannel.component.scss create mode 100644 src/app/library-alerts-pannel/library-alerts-pannel.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 54de64d4..f718a21c 100644 --- a/src/app/app.module.ts +++ b/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}], diff --git a/src/app/custom1-module/customComponentMappings.ts b/src/app/custom1-module/customComponentMappings.ts index e2bfe3c1..e7d88d3f 100644 --- a/src/app/custom1-module/customComponentMappings.ts +++ b/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([ ['nde-footer-after', Libraryh3lpComponent], ['nde-account-section-results-before', PayFinesComponent], ['nde-full-display-service-container-after', NdeProblemReportCustom], + ['nde-top-bar-after', LibraryAlertsPannelComponent], ]); diff --git a/src/app/library-alerts-pannel/library-alerts-pannel.component.html b/src/app/library-alerts-pannel/library-alerts-pannel.component.html new file mode 100644 index 00000000..deda2b15 --- /dev/null +++ b/src/app/library-alerts-pannel/library-alerts-pannel.component.html @@ -0,0 +1,55 @@ +
+
+ +
+ +
+ Information: +
+
+ +
+ Close Alert Button +
+
+ +
+
+ +
+ +
+ ALERT: +
+
+ +
+ Close Alert Button +
+
\ No newline at end of file diff --git a/src/app/library-alerts-pannel/library-alerts-pannel.component.scss b/src/app/library-alerts-pannel/library-alerts-pannel.component.scss new file mode 100644 index 00000000..2e4f8eb2 --- /dev/null +++ b/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; +} diff --git a/src/app/library-alerts-pannel/library-alerts-pannel.component.ts b/src/app/library-alerts-pannel/library-alerts-pannel.component.ts new file mode 100644 index 00000000..0a292262 --- /dev/null +++ b/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('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; + } +} \ No newline at end of file From cc76aa47fc9da0ac368ef2ee9931ff4035ff15ca Mon Sep 17 00:00:00 2001 From: rdeiser Date: Thu, 26 Mar 2026 14:15:36 -0500 Subject: [PATCH 2/2] fix(library-alerts-pannel-component): update alerts url to live site --- .../library-alerts-pannel/library-alerts-pannel.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/library-alerts-pannel/library-alerts-pannel.component.ts b/src/app/library-alerts-pannel/library-alerts-pannel.component.ts index 0a292262..47350b3f 100644 --- a/src/app/library-alerts-pannel/library-alerts-pannel.component.ts +++ b/src/app/library-alerts-pannel/library-alerts-pannel.component.ts @@ -28,7 +28,7 @@ export class LibraryAlertsPannelComponent implements OnInit { private getAlerts(): void { this.http - .get('http://127.0.0.1:5000/data/website_alerts/') + .get('https://tools.lib.k-state.edu/data/website_alerts/') .subscribe({ next: (data) => { this.showAlertInfo = data?.informational?.active === true;