From 5672773345871278328b462979fde622bc905fc2 Mon Sep 17 00:00:00 2001 From: Sipachev Igor Date: Fri, 1 Apr 2022 14:01:09 +0700 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=BB=D0=BE=D0=B0=D0=B4=D0=B5=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- popup/src/components/mocks/script.ts | 22 +++++++- popup/src/components/mocks/style.scss | 68 ++++++++++++++++++++++++ popup/src/components/mocks/template.html | 67 +++++++++++------------ 3 files changed, 119 insertions(+), 38 deletions(-) diff --git a/popup/src/components/mocks/script.ts b/popup/src/components/mocks/script.ts index 0925af4..de4c76c 100644 --- a/popup/src/components/mocks/script.ts +++ b/popup/src/components/mocks/script.ts @@ -19,6 +19,7 @@ export default class Mocks extends Vue { @Prop() mode!: Mode + showLoader = false registers = new Registers() register2Id: Record = {} @@ -32,7 +33,11 @@ export default class Mocks extends Vue { } refreshMocks () { - this.mode === Mode.UPDATE && httpClient.mockConfigurations({ personalCode: this.personalCode }) + if (this.mode !== Mode.UPDATE) { + return + } + this.showLoader = true + httpClient.mockConfigurations({ personalCode: this.personalCode }) .then((data: any) => { const existServiceKeys = [] for (const mockConfiguration of data.data) { @@ -52,6 +57,9 @@ export default class Mocks extends Vue { delete this.register2Id[serviceCode] } }) + .then(() => { + this.showLoader = false + }) } async onServiceChanged (serviceKey: string) { @@ -66,6 +74,7 @@ export default class Mocks extends Vue { return } + this.showLoader = true httpClient.changeMockValueConfiguration({ id: this.register2Id[serviceKey], // eslint-disable-next-line @typescript-eslint/ban-ts-ignore @@ -76,6 +85,9 @@ export default class Mocks extends Vue { console.log('updateMock') console.log(data) }) + .then(() => { + this.showLoader = false + }) } saveMocks () { @@ -93,11 +105,15 @@ export default class Mocks extends Vue { mockConfiguration.active = 'true' mockConfigurations.push(mockConfiguration) } + this.showLoader = true httpClient.addMockConfigurations({ items: mockConfigurations }) .then((data: any) => { console.log('saveMocks') console.log(data) }) + .then(() => { + this.showLoader = false + }) } saveMock (personalCode: string, serviceCode: string, value: number): Promise { @@ -108,10 +124,14 @@ export default class Mocks extends Vue { mockConfiguration.value = value mockConfiguration.active = 'true' mockConfigurations.push(mockConfiguration) + this.showLoader = true return httpClient.addMockConfigurations({ items: mockConfigurations }) .then((data: any) => { console.log('saveMocks') console.log(data) }) + .then(() => { + this.showLoader = false + }) } } diff --git a/popup/src/components/mocks/style.scss b/popup/src/components/mocks/style.scss index e8608be..34e3a81 100644 --- a/popup/src/components/mocks/style.scss +++ b/popup/src/components/mocks/style.scss @@ -1,3 +1,71 @@ .option-select { width: 350px; } + +.lds-grid { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-grid div { + position: absolute; + width: 16px; + height: 16px; + border-radius: 50%; + background: #298df8; + animation: lds-grid 1.2s linear infinite; +} +.lds-grid div:nth-child(1) { + top: 8px; + left: 8px; + animation-delay: 0s; +} +.lds-grid div:nth-child(2) { + top: 8px; + left: 32px; + animation-delay: -0.4s; +} +.lds-grid div:nth-child(3) { + top: 8px; + left: 56px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(4) { + top: 32px; + left: 8px; + animation-delay: -0.4s; +} +.lds-grid div:nth-child(5) { + top: 32px; + left: 32px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(6) { + top: 32px; + left: 56px; + animation-delay: -1.2s; +} +.lds-grid div:nth-child(7) { + top: 56px; + left: 8px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(8) { + top: 56px; + left: 32px; + animation-delay: -1.2s; +} +.lds-grid div:nth-child(9) { + top: 56px; + left: 56px; + animation-delay: -1.6s; +} +@keyframes lds-grid { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} diff --git a/popup/src/components/mocks/template.html b/popup/src/components/mocks/template.html index c32a28b..917c43e 100644 --- a/popup/src/components/mocks/template.html +++ b/popup/src/components/mocks/template.html @@ -1,44 +1,37 @@
-
-
XTEE MTA
+
+
- +
XTEE MTA
+
+ +
-
-
-
XTEE RIA
- +
XTEE RIA
+
+ +
+
+
- - - - - - - - - - -

-