Skip to content

Commit a9ccf27

Browse files
rdeiserrdeiser
committed
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:
1 parent c175d2a commit a9ccf27

5 files changed

Lines changed: 204 additions & 0 deletions

File tree

‎src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {TranslateModule} from "@ngx-translate/core";
88
import { CommonModule } from '@angular/common';
99
import { AutoAssetSrcDirective } from './services/auto-asset-src.directive';
1010
import {SHELL_ROUTER} from "./injection-tokens";
11+
import {HttpClientModule} from '@angular/common/http'
1112

1213

1314

@@ -21,6 +22,7 @@ export const AppModule = ({providers, shellRouter}: {providers:any, shellRouter:
2122
imports: [
2223
BrowserModule,
2324
CommonModule,
25+
HttpClientModule,
2426
TranslateModule.forRoot({})
2527
],
2628
providers: [...providers, {provide: SHELL_ROUTER, useValue: shellRouter}],

‎src/app/custom1-module/customComponentMappings.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { LibraryAlertsPannelComponent } from '../library-alerts-pannel/library-alerts-pannel.component';
12
import { Libraryh3lpComponent } from '../libraryh3lp/libraryh3lp.component';
23
import { NdeProblemReportCustom } from '../nde-problem-report-custom/nde-problem-report-custom.component';
34
import { PayFinesComponent } from '../pay-fines/pay-fines.component';
@@ -7,4 +8,5 @@ export const selectorComponentMap = new Map<string, any>([
78
['nde-footer-after', Libraryh3lpComponent],
89
['nde-account-section-results-before', PayFinesComponent],
910
['nde-full-display-service-container-after', NdeProblemReportCustom],
11+
['nde-top-bar-after', LibraryAlertsPannelComponent],
1012
]);

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<div
2+
id="alert-box-info"
3+
class="alert-box alert-box__normal"
4+
*ngIf="showAlertInfo"
5+
>
6+
<div class="alert-icon">
7+
<img
8+
src="https://lib.k-state.edu/images/svg/bellicon-01.svg"
9+
alt=""
10+
/>
11+
</div>
12+
13+
<div class="alert-box-text">
14+
<span style="font-weight: bold;">Information: </span>
15+
<div [innerHTML]="infoMessage"></div>
16+
</div>
17+
18+
<div
19+
class="alert-icon alert-icon__close"
20+
(click)="closeAlert('info')"
21+
>
22+
<img
23+
src="https://lib.k-state.edu/images/svg/xpurple-01.svg"
24+
alt="Close Alert Button"
25+
/>
26+
</div>
27+
</div>
28+
29+
<div
30+
id="alert-box-emergency"
31+
class="alert-box alert-box__normal"
32+
*ngIf="showAlertEmergency"
33+
>
34+
<div class="alert-icon">
35+
<img
36+
src="https://lib.k-state.edu/images/svg/bellicon-01.svg"
37+
alt=""
38+
/>
39+
</div>
40+
41+
<div class="alert-box-text">
42+
<span style="font-weight: bold;">ALERT: </span>
43+
<div [innerHTML]="emergencyMessage"></div>
44+
</div>
45+
46+
<div
47+
class="alert-icon alert-icon__close"
48+
(click)="closeAlert('emergency')"
49+
>
50+
<img
51+
src="https://lib.k-state.edu/images/svg/xpurple-01.svg"
52+
alt="Close Alert Button"
53+
/>
54+
</div>
55+
</div>

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.alerts {
2+
padding-bottom: 0;
3+
max-width: 1260px;
4+
margin: 0 auto;
5+
}
6+
7+
.alert-box {
8+
font-size: 1.25rem;
9+
padding: 20px 30px;
10+
text-align: left;
11+
display: flex;
12+
align-items: flex-start;
13+
gap: 16px;
14+
}
15+
16+
.alert-box:first-child {
17+
margin-top: 40px;
18+
}
19+
20+
.alert-box:not(:last-child) {
21+
margin-bottom: 20px;
22+
}
23+
24+
.alert-box__red {
25+
color: #ffffff;
26+
background: #ba1623;
27+
}
28+
29+
.alert-box__normal {
30+
color: #512888;
31+
background: #e6e6e6;
32+
border: 1px solid #512888;
33+
}
34+
35+
.alert-icon {
36+
flex: 0 0 35px;
37+
width: 35px;
38+
height: 35px;
39+
}
40+
41+
.alert-icon img {
42+
display: block;
43+
width: 100%;
44+
height: auto;
45+
}
46+
47+
.alert-box-text {
48+
flex: 1 1 auto;
49+
min-width: 0;
50+
}
51+
52+
.alert-box-text div {
53+
word-break: break-word;
54+
overflow-wrap: break-word;
55+
}
56+
57+
.alert-icon__close {
58+
flex: 0 0 35px;
59+
cursor: pointer;
60+
}
61+
62+
.alert-icon__close img {
63+
width: 100%;
64+
height: auto;
65+
}
66+
67+
.alert-icon__close:hover {
68+
opacity: 0.8;
69+
}

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { HttpClient } from '@angular/common/http';
4+
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
5+
6+
@Component({
7+
selector: 'library-alerts-pannel',
8+
standalone: true,
9+
imports: [CommonModule],
10+
templateUrl: './library-alerts-pannel.component.html',
11+
styleUrls: ['./library-alerts-pannel.component.scss'],
12+
})
13+
export class LibraryAlertsPannelComponent implements OnInit {
14+
showAlertInfo = false;
15+
showAlertEmergency = false;
16+
17+
infoMessage: SafeHtml = '';
18+
emergencyMessage: SafeHtml = '';
19+
20+
constructor(
21+
private http: HttpClient,
22+
private sanitizer: DomSanitizer
23+
) {}
24+
25+
ngOnInit(): void {
26+
this.getAlerts();
27+
}
28+
29+
private getAlerts(): void {
30+
this.http
31+
.get<any>('http://127.0.0.1:5000/data/website_alerts/')
32+
.subscribe({
33+
next: (data) => {
34+
this.showAlertInfo = data?.informational?.active === true;
35+
this.showAlertEmergency = data?.emergency?.active === true;
36+
37+
this.infoMessage = this.sanitizer.bypassSecurityTrustHtml(
38+
this.decodeHtmlEntitiesDeep(data?.informational?.message)
39+
);
40+
41+
this.emergencyMessage = this.sanitizer.bypassSecurityTrustHtml(
42+
this.decodeHtmlEntitiesDeep(data?.emergency?.message)
43+
);
44+
},
45+
error: (err) => {
46+
console.error('Error fetching alerts:', err);
47+
},
48+
});
49+
}
50+
51+
closeAlert(type: 'info' | 'emergency'): void {
52+
if (type === 'info') {
53+
this.showAlertInfo = false;
54+
}
55+
56+
if (type === 'emergency') {
57+
this.showAlertEmergency = false;
58+
}
59+
}
60+
61+
private decodeHtmlEntitiesDeep(str?: string): string {
62+
if (!str) return '';
63+
64+
let previous: string;
65+
let current = str;
66+
67+
do {
68+
previous = current;
69+
const textarea = document.createElement('textarea');
70+
textarea.innerHTML = current;
71+
current = textarea.value;
72+
} while (current !== previous);
73+
74+
return current;
75+
}
76+
}

0 commit comments

Comments
 (0)