From e13a710fa665f6d6ffa611da59bab26411cfd56f Mon Sep 17 00:00:00 2001 From: Gunnar Johansson Date: Sun, 9 Aug 2026 16:18:41 +0000 Subject: [PATCH] DrawComponent added --- frontend/angular.json | 5 +- frontend/public/favicon.ico | Bin 9662 -> 7406 bytes frontend/src/app/app.component.html | 2 +- frontend/src/app/app.component.ts | 12 +--- frontend/src/app/app.routes.ts | 9 ++- frontend/src/app/draw/draw.component.css | 0 frontend/src/app/draw/draw.component.html | 23 +++++++ frontend/src/app/draw/draw.component.ts | 80 ++++++++++++++++++++++ frontend/src/index.html | 4 +- 9 files changed, 120 insertions(+), 15 deletions(-) create mode 100644 frontend/src/app/draw/draw.component.css create mode 100644 frontend/src/app/draw/draw.component.html create mode 100644 frontend/src/app/draw/draw.component.ts diff --git a/frontend/angular.json b/frontend/angular.json index feea49f..03dff4c 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -96,7 +96,10 @@ "ssl": true, "sslCert": ".certs/cert.pem", "sslKey": ".certs/key.pem", - "proxyConfig": "proxy.conf.json" + "proxyConfig": "proxy.conf.json", + "prebundle": { + "exclude": ["@postnord/web-components/loader"] + } }, "configurations": { "production": { diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico index b9174db36e194e822cfdfe7455d60ff6a654a724..d5420d0a37474d326e0705909ad8acde68910308 100644 GIT binary patch literal 7406 zcmeHLSxl5y6#m$MP#89WVVhAvHb)U$7zPzrq}7hKi)*cE+Qz17+J`26YnwjUeM!?T zZPQj;m&RJRYB#OBwQ8bqV_yV8&|#GU2AHAe+&haHs8}Cp$(&^Vd(S!FJ@?-856t-v z-~lgWWPnBmTZ4dU0JK`Wt^gHe3l5h0Iv-$tB#=TFT7tFo;dMg%ouY1ABCikmfiP`NJ$eYRehF1}4`+R@u(B77Mx zZ}7ymlg|?N3_2Q)p}lTDVGXF*lZEn~>1Zna2xZ$7Xss2E7vDkgmN4{~YYBUtum@1R ze-Xvsi?*umsM?oH>!zUN#z|U}h>G2lP`JSxjh8=w&1ykUX9I4WdliM>`k}l13aJ_^N~gK_yAz|vYm*k{mO{5i$?5al~kDb8yY z#~)2aAEU3&23v0jdM!=p>8L~fU(ccL#8c?Fegf487URlq^HKHl4765kM)@ust@(u3 z^r7+6dnnx&hwEowM$x7~bT*zP+)To4K}+e^dwIMWI*qh5uXA7OqS(CzUN9KOXmL_pPjKNT%-0|Y`@2-DJ;pXMP~@fvwP%ym#M_H zjmD`D3HvIcrtv&edZzco+tD-xC$VGbc;kfZyTcnF7!rPEmd|K;s+hkp6lbRcjqP1!pnoGVAoRqm}@s>~&eHS43Xzh_zPA=M9 z@}=OO)*dr))<)DGS?%PU%r)DpcM6W#RQwsrb|e#b)CjI=y6^^Z$jCwYX3ZZ<&|dp1 zs()WdF?OMHZ#GO9-h{Qgjd-OZcxPABdE%xk$o>|^QWGByA-jj*n~j&=6HAHr&H4yN#=YS$2t7$Wbw`#%wG^H011QmRq=V4LWnT~`wQY}r#a*wJFs7gBL7_S zrwf0OPM0-JsaAzEEDDF#pH`D1-Drm@9W_zly28EkOgpB0vZT9gNYq54ER8NqT)1)J#)XM4^uI7BCML$jg)WUj9)i3? z1jM(-_=*XNJfu%bOAA$?r7f-Pw4L_z+)F!j(xwTLR)}}V=}hjO3*Witcg{UckfZ|o zsi=_XbEni)CP^idB$boVkaU5Jjq_{o>@D?EU$Y#-#2yF+1OtKr!GK^uFd!HZ3S8_1}iNBAA=Dz}#HQ&D6LV`r5*!@%^E?0G3DP2u^-M*lR@CXU2@J4aSCb zq@QB4*yB(wVWi^_6xoI36>@!r@xcb-NrEn6dh#>f7v^88<%sQUdzeZ8R1fFK(tZ%5 z&riVi^eD_N+Y|cdVq&OY%l%}&8XMLVb1UY2WY4LVO~XRwGU$&69Pm4yAR7FIxDrGx z>L<1gnC!hmdN)#B3Sg)$f_vx|WcPQ3T;C8Fe~ICTyLrrv^=sf7xDKDS1-_AHcuZ9^ zw}-DwkKqDimO+1#qqKWG29NPB45W|cJo7PmMMD#?v>)KSv3M{Bla~^nhPAVj`<74r zaYaTv7D>wBcQ!Wu{v2n+Z|_p)Sgb7V`?Kgjl0W@%1zt-%?5|E??A=)eCqAn>*@NHS z0VA=$SoMe8eK0kZLU)hq51H-Ram2zN)rYWGNBO*i^mnRbi)sJ;j&91&;@Mh4xjNjs z3z5L6sx{&t!Ejp{k3(`$N#Wl_IUaKNCZ{mVfByJkTCH7`oMl#PoFC3p9SW&>fUkgA$(&@hkd!oX+@t|Gs{bnpoJ&^O~Jasrj3bn(-EJzUKL!lYWHP z{|Zh2!1h}SO{QsyMFVt(U8dYvN%g;2Q~w!1k$|1n#5L;}J7aIp17$!4srTnE$5_mO;Xe!2wqK0Ak}`mR!+ag0BQTs@Gd z2QV}GnCFD1uUJU0kZmpb!F#mCo%L;OpG}RMxUqhLjcLwL{(V8aPG3{Vdm>X~3B_nt zZkW&JN7`Jnzno8>@;7Vd^ZUiS8jjLpCiX|{k6=JBAQ%t~2nGZLf`R{yfzb diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index f32dbe2..293a5e1 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -4,6 +4,6 @@
-

Copyright © {{ currentYear }}

+

Copyright © {{ currentYear }}

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index bfbccb8..034ec14 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,21 +1,13 @@ -import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from '@angular/core'; +import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { ConfettiService } from './confetti/confetti.service'; @Component({ selector: 'app-root', imports: [RouterOutlet], - schemas: [CUSTOM_ELEMENTS_SCHEMA], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class App { - private readonly confettiService = inject(ConfettiService); - - protected readonly title = signal('PostNordLotteriet'); + // protected readonly title = 'PostNordLotteriet'; protected readonly currentYear = new Date().getFullYear(); - - protected celebrate(): void { - this.confettiService.celebrate(); - } } diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index dc39edb..79984cd 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -1,3 +1,10 @@ import { Routes } from '@angular/router'; -export const routes: Routes = []; +import { DrawComponent } from './draw/draw.component'; + +export const routes: Routes = [ + { + path: '', + component: DrawComponent + } +]; diff --git a/frontend/src/app/draw/draw.component.css b/frontend/src/app/draw/draw.component.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/draw/draw.component.html b/frontend/src/app/draw/draw.component.html new file mode 100644 index 0000000..2bba3e0 --- /dev/null +++ b/frontend/src/app/draw/draw.component.html @@ -0,0 +1,23 @@ +
+
+

Sveriges största lotteri

+

Kanske är det du som får post idag

+
+ + Kolla + + @if (result(); as result) { +
+ + +
+ } +
diff --git a/frontend/src/app/draw/draw.component.ts b/frontend/src/app/draw/draw.component.ts new file mode 100644 index 0000000..36f6867 --- /dev/null +++ b/frontend/src/app/draw/draw.component.ts @@ -0,0 +1,80 @@ +import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from '@angular/core'; +import { HttpErrorResponse } from '@angular/common/http'; +import { dematerialize, finalize, forkJoin, map, materialize, take, timer } from 'rxjs'; + +import { ConfettiService } from '../confetti/confetti.service'; +import { ShipmentService } from '../shipment/shipment.service'; + +type DrawResult = + | { appearance: 'success'; message: string } + | { appearance: 'warning'; message: string } + | { appearance: 'error'; message: string }; + +@Component({ + selector: 'app-draw', + imports: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + templateUrl: './draw.component.html', + styleUrl: './draw.component.css' +}) +export class DrawComponent { + private readonly confettiService = inject(ConfettiService); + private readonly shipmentService = inject(ShipmentService); + + private readonly minimumLoadingTimeMs = 2000; + + protected readonly loading = signal(false); + protected readonly result = signal(null); + + protected check(): void { + if (this.loading()) { + return; + } + + this.loading.set(true); + this.result.set(null); + + forkJoin([this.shipmentService.trackAndTrace().pipe(materialize(), take(1)), timer(this.minimumLoadingTimeMs)]) + .pipe( + map(([notification]) => notification), + dematerialize(), + finalize(() => this.loading.set(false)) + ) + .subscribe({ + next: (response) => { + this.result.set({ + appearance: 'success', + message: response.message + }); + + this.confettiService.celebrate(); + }, + error: (error: HttpErrorResponse) => { + this.handleError(error); + } + }); + } + + protected dismissResult(): void { + this.result.set(null); + } + + private handleError(error: HttpErrorResponse): void { + switch (error.status) { + case 400: + case 429: + case 503: + this.result.set({ + appearance: 'warning', + message: error.error?.message ?? 'Försöket kunde inte genomföras.' + }); + break; + + default: + this.result.set({ + appearance: 'error', + message: 'Något gick fel. Försök igen senare.' + }); + } + } +} diff --git a/frontend/src/index.html b/frontend/src/index.html index 1632905..0d3e1ec 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -1,5 +1,5 @@ - + PostNordLotteriet @@ -7,7 +7,7 @@ - +