Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

DoorMapEditor "busy" state + error handling

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-13 14:07:09 +00:00
parent 47375105ac
commit 9ebf50218c
1 changed files with 35 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
ui/src/components/DoorMapEditor.vue
View file

@ -27,6 +27,7 @@
class="card-footer-item is-danger" class="card-footer-item is-danger"
@click="on_download" @click="on_download"
icon="fa-solid fa-cloud-arrow-down" icon="fa-solid fa-cloud-arrow-down"
:busy="loading_doors"
text="Laden" text="Laden"
/> />
<BulmaButton <BulmaButton
@ -39,6 +40,7 @@
class="card-footer-item is-success" class="card-footer-item is-success"
@click="on_upload" @click="on_upload"
icon="fa-solid fa-cloud-arrow-up" icon="fa-solid fa-cloud-arrow-up"
:busy="saving_doors"
text="Speichern" text="Speichern"
/> />
</footer> </footer>
@ -78,14 +80,22 @@ export default class extends Vue {
public current_step = 0; public current_step = 0;
public doors: Door[] = []; public doors: Door[] = [];
private load_doors(): Promise<void | DoorsSaved> { public loading_doors = false;
return this.$advent22.api_get<DoorsSaved>("admin/doors").then((data) => { public saving_doors = false;
this.doors.length = 0;
for (const value of data) { private load_doors(): Promise<void | DoorsSaved> {
this.doors.push(Door.load(value)); return this.$advent22
} .api_get<DoorsSaved>("admin/doors")
}); .then((data) => {
this.doors.length = 0;
for (const value of data) {
this.doors.push(Door.load(value));
}
this.is_loaded = true;
})
.catch(([reason, endpoint]) => alert(`Fehler: ${reason} in ${endpoint}`));
} }
private save_doors(): Promise<void> { private save_doors(): Promise<void> {
@ -95,32 +105,24 @@ export default class extends Vue {
data.push(door.save()); data.push(door.save());
} }
return this.$advent22.api_put("admin/doors", data); return this.$advent22
.api_put("admin/doors", data)
.catch((reason) => alert(`Fehler: ${reason} in admin/doors`));
} }
public on_open(): void { public on_open(): void {
this.is_loaded = false; this.is_loaded = false;
this.load_doors();
this.load_doors()
.then(() => (this.is_loaded = true))
.catch(([reason, endpoint]) => {
alert(`Fehler: ${reason} in ${endpoint}`);
});
}
public mounted(): void {
this.load_doors().catch(([reason, endpoint]) => {
alert(`Fehler: ${reason} in ${endpoint}`);
});
} }
public on_download() { public on_download() {
if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) { if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
this.load_doors() this.loading_doors = true;
.then(() => alert("Erfolgeich!"))
.catch(([reason, endpoint]) => { this.load_doors().then(() => {
alert(`Fehler: ${reason} in ${endpoint}`); alert("Erfolgeich!");
}); this.loading_doors = false;
});
} }
} }
@ -133,15 +135,14 @@ export default class extends Vue {
public on_upload() { public on_upload() {
if (confirm("Aktuelle Änderungen an den Server schicken?")) { if (confirm("Aktuelle Änderungen an den Server schicken?")) {
this.save_doors() this.saving_doors = true;
.then(() => {
this.load_doors() this.save_doors().then(() => {
.then(() => alert("Erfolgeich!")) this.load_doors().then(() => {
.catch(([reason, endpoint]) => alert("Erfolgeich!");
alert(`Fehler: ${reason} in ${endpoint}`), this.saving_doors = false;
); });
}) });
.catch((reason) => alert(`Fehler: ${reason}`));
} }
} }
} }