From 243b8a2ba446b09ba55868c46532dfbb93720607 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= Date: Mon, 20 Jan 2020 14:58:55 +0100 Subject: [PATCH] Ajout de loading sur le chargement de l'application + lors du chargement des composants --- Front/skydivelogs-app/angular.json | 8 +-- Front/skydivelogs-app/src/app/app.module.ts | 6 +- .../list-of-aircrafts.component.html | 14 ++-- .../list-of-aircrafts.component.ts | 10 +-- .../list-of-dzs/list-of-dzs.component.html | 14 ++-- .../app/list-of-dzs/list-of-dzs.component.ts | 10 +-- .../list-of-gears.component.html | 13 ++-- .../list-of-gears/list-of-gears.component.ts | 8 ++- .../list-of-jump-types.component.html | 13 ++-- .../list-of-jump-types.component.ts | 10 +-- .../list-of-jumps.component.html | 7 +- .../list-of-jumps/list-of-jumps.component.ts | 10 +-- .../src/{ => assets/css}/custom-theme.scss | 0 .../src/assets/css/styles-app-loading.scss | 62 ++++++++++++++++++ .../src/{ => assets/css}/styles.css | 0 Front/skydivelogs-app/src/assets/img/logo.png | Bin 0 -> 4958 bytes Front/skydivelogs-app/src/index.html | 12 +++- 17 files changed, 147 insertions(+), 50 deletions(-) rename Front/skydivelogs-app/src/{ => assets/css}/custom-theme.scss (100%) create mode 100644 Front/skydivelogs-app/src/assets/css/styles-app-loading.scss rename Front/skydivelogs-app/src/{ => assets/css}/styles.css (100%) create mode 100644 Front/skydivelogs-app/src/assets/img/logo.png diff --git a/Front/skydivelogs-app/angular.json b/Front/skydivelogs-app/angular.json index 99a77cc..d9a16a5 100644 --- a/Front/skydivelogs-app/angular.json +++ b/Front/skydivelogs-app/angular.json @@ -20,10 +20,10 @@ "src/assets", "src/favicon.ico" ], - "styles": [{ - "input": "src/custom-theme.scss" - }, - "src/styles.css" + "styles": [ + "src/assets/css/styles-app-loading.scss", + "src/assets/css/custom-theme.scss", + "src/assets/css/styles.css" ], "scripts": [] }, diff --git a/Front/skydivelogs-app/src/app/app.module.ts b/Front/skydivelogs-app/src/app/app.module.ts index 690d3cc..370e34f 100644 --- a/Front/skydivelogs-app/src/app/app.module.ts +++ b/Front/skydivelogs-app/src/app/app.module.ts @@ -37,7 +37,8 @@ import { MatInputModule, MatButtonModule, MatIconModule, - MatAutocompleteModule + MatAutocompleteModule, + MatProgressSpinnerModule } from '@angular/material'; import { RequestCache } from '../services/request-cache.service'; @@ -90,7 +91,8 @@ const appRoutes: Routes = [ MatInputModule, MatButtonModule, MatIconModule, - MatAutocompleteModule + MatAutocompleteModule, + MatProgressSpinnerModule ], exports: [HttpClientModule], providers: [ diff --git a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html index f6606d5..05b6ad9 100644 --- a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html +++ b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html @@ -1,7 +1,7 @@ - - -
+ + + @@ -16,6 +16,10 @@
ID
+ +
- -Waiting... + + + + diff --git a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts index 2e8be47..0fb90ec 100644 --- a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts @@ -30,10 +30,12 @@ export class ListOfAircraftsComponent implements OnInit { private getListOfAircrafts() { this.serviceApi.getListOfAircrafts().subscribe(data => { - data.sort((a, b) => (b.name < a.name) ? 1 : -1); - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; + setTimeout(() => { + data.sort((a, b) => (b.name < a.name) ? 1 : -1); + this.dataSourceTable = new MatTableDataSource(data); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 2000); }); } diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html index 1fe59f6..0afee37 100644 --- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html +++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html @@ -1,7 +1,7 @@ - - -
+ + + @@ -52,7 +52,11 @@ +
+
- -Waiting... + + + + diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts index c91b03b..28e4c39 100644 --- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts @@ -41,10 +41,12 @@ export class ListOfDzsComponent implements OnInit { private getListOfDropZones() { this.serviceApiGet.getListOfDropZones().subscribe(data => { - data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0)); - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; + setTimeout(() => { + data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0)); + this.dataSourceTable = new MatTableDataSource(data); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 2000); }); } diff --git a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html index fefc0ca..2dc1599 100644 --- a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html +++ b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html @@ -1,7 +1,7 @@ - - -
+ + + @@ -41,6 +41,9 @@
ID
+
- -Waiting... + + + + diff --git a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts index 6f59655..14ab889 100644 --- a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts @@ -44,9 +44,11 @@ export class ListOfGearsComponent implements OnInit { getListOfGears() { this.serviceApi.getListOfGears().subscribe(data => { - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; + setTimeout(() => { + this.dataSourceTable = new MatTableDataSource(data); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 2000); }); } diff --git a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html index ebd72b2..122b8f8 100644 --- a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html +++ b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html @@ -1,7 +1,7 @@ - - -
+ + + @@ -16,6 +16,9 @@
ID
+
- -Waiting... + + + + diff --git a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts index 353875d..fa4bd0f 100644 --- a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts @@ -30,10 +30,12 @@ export class ListOfJumpTypesComponent implements OnInit { getListOfJumpTypes() { this.serviceApi.getListOfJumpTypes().subscribe(data => { - data.sort((a, b) => (b.name < a.name) ? 1 : -1); - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; + setTimeout(() => { + data.sort((a, b) => (b.name < a.name) ? 1 : -1); + this.dataSourceTable = new MatTableDataSource(data); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 2000); }); } diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html index f8ae51a..13395eb 100644 --- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html +++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html @@ -30,6 +30,9 @@ + - -Waiting... + + + + diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts index f2cb56a..fb3898e 100644 --- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts @@ -39,10 +39,12 @@ export class ListOfJumpsComponent implements OnInit { getListOfJumps() { this.listOfJumps = this.serviceApi.getListOfJumps(); this.listOfJumps.subscribe(data => { - data.sort((a, b) => b.jumpDate.getTime() - a.jumpDate.getTime()); - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; + setTimeout(() => { + data.sort((a, b) => b.jumpDate.getTime() - a.jumpDate.getTime()); + this.dataSourceTable = new MatTableDataSource(data); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 2000); }); } } diff --git a/Front/skydivelogs-app/src/custom-theme.scss b/Front/skydivelogs-app/src/assets/css/custom-theme.scss similarity index 100% rename from Front/skydivelogs-app/src/custom-theme.scss rename to Front/skydivelogs-app/src/assets/css/custom-theme.scss diff --git a/Front/skydivelogs-app/src/assets/css/styles-app-loading.scss b/Front/skydivelogs-app/src/assets/css/styles-app-loading.scss new file mode 100644 index 0000000..132a053 --- /dev/null +++ b/Front/skydivelogs-app/src/assets/css/styles-app-loading.scss @@ -0,0 +1,62 @@ +.app-loading { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; +} + +.app-loading { + .logo { + width: 100px; + height: 100px; + + // this way asset gets processed by webpack + background: url(assets/img/logo.png) center center no-repeat; + } +} + +.app-loading .spinner { + height: 200px; + width: 200px; + animation: rotate 2s linear infinite; + transform-origin: center center; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.app-loading .spinner .path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite; + stroke-linecap: round; + stroke: #ddd; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} diff --git a/Front/skydivelogs-app/src/styles.css b/Front/skydivelogs-app/src/assets/css/styles.css similarity index 100% rename from Front/skydivelogs-app/src/styles.css rename to Front/skydivelogs-app/src/assets/css/styles.css diff --git a/Front/skydivelogs-app/src/assets/img/logo.png b/Front/skydivelogs-app/src/assets/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..d8849d4a82f2419c04eb287bba10100429b8b196 GIT binary patch literal 4958 zcmV-k6QS&hP)?>;sqKNG=K_< z8cF;-@c2wr1QlImmBRy&pn@P?AP6jZkFAEHx2n6kyLzT)=>ERv;9* zm7?U%6$Uv9Kz;<-39=pJQ;>R)*Fc^E zxff&#$VDJSLE3^ul;CQ-h7PUG0|`-*mj=8tkRc#ffjmga{Q+cunq)V~`+0eJkAqBx zpHBv9mPPiHMt;~R9^qAxxB7mNk3@+Aa+-)6;sx+N0ht5xJJK5Y#eSZ=^$`%2l894p zGvamZ*gh7CL{5Z1-HC6SM`Wb~??aFoAj3e^blJ}>p2*Gc1{x)*OXbzxy?ewoO*
GfcG`XL-5^GJ9IcYF57;x@I-DF1&L7-b)$SDk?0zUglB+Z zH|qv=Ll#YxkMX|5XHF&)J>1$)CLbagRTFp>t36S-MF$V?Jq4ak>+*PvwDlY9oVu!f%-QeQIhEH}o|kH#>#I()S1C zdxEz)l}e73Kz@Yj08~&RMmd1U03#0aKtNX7@NoSj=^|*P@*E&SB1yUfh)gYTb*wHR zEA4o=vf0@|&`6^kAkVmvpi&MH6CnRIvV8Z|@;lcozrf-6XK0^?=}o~Ee_ zYHMqXC84zy`+6O1uNy^><2s zN?*nejGNVX>p_Z~IKaJuadQT5fnD-X3XGd`c&FQG`ZpOfTLR-|J>Dk5t>ra|mD3g& zHz)A^YDIoA*}z~RKO7i0H}G%+Y;!XQxRI60eCVcuadQCgHeLj{9ApQ*i9t_c)-zfI zE?fh(E$STbBBCv$r<$xR??Bb zy)r6k1Z4RQ@6g6nMsbSqVXFA*g7@x(kzw)S?z3-Bh-vi&0hQ-ri#wJf~$?b}s?exo?g^a)9(eU1FQJAE&YWpNASUU?;rqIU*K|UJI?!ELBxs z0*7A*&$~}vOJZ4!;thq~!|y>R$|BOdVvWCUib?qsmT|!WW^#-%-e=_F^(T(4Zn1+` zR8)u?ZI1yt6XZHf^9K2twF}FN4}r=i*mWxZlR*Af@Ze|R|0lxVPXH;AVO)a8(&1*G zk>6w?jgr4e(hs}5Z$a=rP-8 z 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 SkydivelogsApp - - @@ -14,7 +12,15 @@ - + + +
+ + +
+