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

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

Browse Source
master
Sipachev Igor 3 years ago
parent f2fcce4646
commit 5672773345
3 changed files with 119 additions and 38 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 22
      popup/src/components/mocks/script.ts
  2. 68
      popup/src/components/mocks/style.scss
  3. 67
      popup/src/components/mocks/template.html

22
popup/src/components/mocks/script.ts
Unescape 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
Unescape 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
Unescape 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>

Write Preview
Loading…
Cancel
Save