rinsvent/sveak-chrome-extension
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Добавил лоадер

Browse Source
This commit is contained in:
Sipachev Igor 2022-04-01 14:01:09 +07:00
parent f2fcce4646
commit 5672773345
3 changed files with 119 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
popup/src/components/mocks/script.ts
View File

@ -19,6 +19,7 @@ export default class Mocks extends Vue {
@Prop() @Prop()
mode!: Mode mode!: Mode
showLoader = false
registers = new Registers() registers = new Registers()
register2Id: Record<string, string> = {} register2Id: Record<string, string> = {}
@ -32,7 +33,11 @@ export default class Mocks extends Vue {
} }
refreshMocks () { 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) => { .then((data: any) => {
const existServiceKeys = [] const existServiceKeys = []
for (const mockConfiguration of data.data) { for (const mockConfiguration of data.data) {
@ -52,6 +57,9 @@ export default class Mocks extends Vue {
delete this.register2Id[serviceCode] delete this.register2Id[serviceCode]
} }
}) })
.then(() => {
this.showLoader = false
})
} }
async onServiceChanged (serviceKey: string) { async onServiceChanged (serviceKey: string) {
@ -66,6 +74,7 @@ export default class Mocks extends Vue {
return return
} }
this.showLoader = true
httpClient.changeMockValueConfiguration({ httpClient.changeMockValueConfiguration({
id: this.register2Id[serviceKey], id: this.register2Id[serviceKey],
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@ -76,6 +85,9 @@ export default class Mocks extends Vue {
console.log('updateMock') console.log('updateMock')
console.log(data) console.log(data)
}) })
.then(() => {
this.showLoader = false
})
} }
saveMocks () { saveMocks () {
@ -93,11 +105,15 @@ export default class Mocks extends Vue {
mockConfiguration.active = 'true' mockConfiguration.active = 'true'
mockConfigurations.push(mockConfiguration) mockConfigurations.push(mockConfiguration)
} }
this.showLoader = true
httpClient.addMockConfigurations({ items: mockConfigurations }) httpClient.addMockConfigurations({ items: mockConfigurations })
.then((data: any) => { .then((data: any) => {
console.log('saveMocks') console.log('saveMocks')
console.log(data) console.log(data)
}) })
.then(() => {
this.showLoader = false
})
} }
saveMock (personalCode: string, serviceCode: string, value: number): Promise<any> { saveMock (personalCode: string, serviceCode: string, value: number): Promise<any> {
@ -108,10 +124,14 @@ export default class Mocks extends Vue {
mockConfiguration.value = value mockConfiguration.value = value
mockConfiguration.active = 'true' mockConfiguration.active = 'true'
mockConfigurations.push(mockConfiguration) mockConfigurations.push(mockConfiguration)
this.showLoader = true
return httpClient.addMockConfigurations({ items: mockConfigurations }) return httpClient.addMockConfigurations({ items: mockConfigurations })
.then((data: any) => { .then((data: any) => {
console.log('saveMocks') console.log('saveMocks')
console.log(data) console.log(data)
}) })
.then(() => {
this.showLoader = false
})
} }
} }

68
popup/src/components/mocks/style.scss
View File

@ -1,3 +1,71 @@
.option-select { .option-select {
width: 350px; 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;
}
}

67
popup/src/components/mocks/template.html
View File

@ -1,44 +1,37 @@
<div> <div>
<div> <div v-if="showLoader" class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div>XTEE MTA</div> <div v-if="!showLoader">
<div> <div>
<select class="option-select" v-model="registers.xtee_mta" @change="onServiceChanged('xtee_mta')"> <div>XTEE MTA</div>
<option value="-1">-</option> <div>
<option value="0">Не замокано (делать запрос)</option> <select class="option-select" v-model="registers.xtee_mta" @change="onServiceChanged('xtee_mta')">
<option value="1">Выписка на хороший доход</option> <option value="-1">-</option>
<option value="2">Выписка на маленький доход</option> <option value="0">Не замокано (делать запрос)</option>
<option value="3">Ошибка загрузки выписки (перезапрос)</option> <option value="1">Выписка на хороший доход</option>
<option value="4">Ошибка загрузки выписки (нет данных)</option> <option value="2">Выписка на маленький доход</option>
<option value="5">По персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)</option> <option value="3">Ошибка загрузки выписки (перезапрос)</option>
<option value="6">Выписка на хороший доход, последние два месяца доход 0</option> <option value="4">Ошибка загрузки выписки (нет данных)</option>
<option value="7">Выписка на хороший доход, последний месяц доход 0</option> <option value="5">По персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)</option>
<option value="8">Выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать</option> <option value="6">Выписка на хороший доход, последние два месяца доход 0</option>
<option value="9">Выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода</option> <option value="7">Выписка на хороший доход, последний месяц доход 0</option>
</select> <option value="8">Выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать</option>
<option value="9">Выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода</option>
</select>
</div>
</div> </div>
</div>
<div>
<div>XTEE RIA</div>
<div> <div>
<select class="option-select" v-model="registers.ria" @change="onServiceChanged('ria')"> <div>XTEE RIA</div>
<option value="-1">-</option> <div>
<option value="0">Не замокано (делать запрос)</option> <select class="option-select" v-model="registers.ria" @change="onServiceChanged('ria')">
<option value="1">Успешный запрос</option> <option value="-1">-</option>
<option value="2">Все запросы отклонены</option> <option value="0">Не замокано (делать запрос)</option>
<option value="3">По персональному коду (3 - успешно, остальные - ошибка)</option> <option value="1">Успешный запрос</option>
</select> <option value="2">Все запросы отклонены</option>
<option value="3">По персональному коду (3 - успешно, остальные - ошибка)</option>
</select>
</div>
</div> </div>
<br />
<button v-if="'add' === mode" @click="saveMocks">Сохранить моки</button>
</div> </div>
<!-- <br /><br />-->
<!-- <label>-->
<!-- XTEE Pension-->
<!-- <select class="option-select" v-model="registers.xtee_pension">-->
<!-- <option value="">-</option>-->
<!-- <option value="0">Не замокано (делать запрос)</option>-->
<!-- <option value="2">Ошибка сервиса. (перезапросы)</option>-->
<!-- </select>-->
<!-- </label>-->
<br /><br />
<button v-if="'add' === mode" @click="saveMocks">Сохранить моки</button>
</div> </div>