diff --git a/ui/src/App.vue b/ui/src/App.vue index 9d1b187..b6bc201 100644 --- a/ui/src/App.vue +++ b/ui/src/App.vue @@ -40,16 +40,13 @@ export default class extends Vue { }; public mounted() { - this.$advent22.api_get_string("days/date", (date: string) => { - this.date = date; - }); + this.$advent22 + .api_get_string("days/date") + .then((date: string) => (this.date = date)); - this.$advent22.api_get_number( - "days/visible_days", - (visible_days: number) => { - this.visible_days = visible_days; - }, - ); + this.$advent22 + .api_get_number("days/visible_days") + .then((visible_days: number) => (this.visible_days = visible_days)); } } diff --git a/ui/src/components/calendar/CalendarDoor.vue b/ui/src/components/calendar/CalendarDoor.vue index e0937e1..3d50184 100644 --- a/ui/src/components/calendar/CalendarDoor.vue +++ b/ui/src/components/calendar/CalendarDoor.vue @@ -24,10 +24,10 @@ export default class extends Vue { public on_click() { this.$emit("doorClick"); - this.$advent22.api_get_blob( - `days/image/${this.door.day}`, - (data) => this.$emit("doorSuccess", data), - (_, reason) => { + this.$advent22 + .api_get_blob(`days/image/${this.door.day}`) + .then((data) => this.$emit("doorSuccess", data)) + .catch(([reason]) => { let msg = "Unbekannter Fehler, bitte wiederholen!"; if ( @@ -39,8 +39,7 @@ export default class extends Vue { } this.$emit("doorFailure", msg); - }, - ); + }); } } diff --git a/ui/src/plugins/advent22.ts b/ui/src/plugins/advent22.ts index 30845e1..9ba96d0 100644 --- a/ui/src/plugins/advent22.ts +++ b/ui/src/plugins/advent22.ts @@ -38,76 +38,52 @@ export class Advent22 { this.api_auth = { username: username, password: password }; } - private fail(name: string, reason: unknown): void { - console.warn("Failed to query", name, "-", reason); - } - + private api_get(endpoint: string): Promise; + private api_get(endpoint: string, responseType: ResponseType): Promise; private api_get( endpoint: string, - on_success: (data: T) => void, - on_failure: (name: string, reason: unknown) => void, responseType: ResponseType = "json", - ) { + ): Promise { const req_data = { auth: this.api_auth, responseType: responseType, }; - this.axios - .get(this.api_url(endpoint), req_data) - .then((response) => on_success(response.data)) - .catch((reason) => on_failure(endpoint, reason)); + return new Promise((resolve, reject) => { + this.axios + .get(this.api_url(endpoint), req_data) + .then((response) => resolve(response.data)) + .catch((reason) => { + console.error(`Failed to query ${endpoint}: ${reason}`); + reject([reason, endpoint]); + }); + }); } - public api_get_blob( - endpoint: string, - on_success: (data: string) => void, - on_failure: (name: string, reason: unknown) => void = this.fail, - ) { - this.api_get( - endpoint, - (data: Blob) => { - const reader = new FileReader(); - reader.readAsDataURL(data); - reader.onloadend = () => { - if (typeof reader.result === "string") { - on_success(reader.result); - } else { - on_failure(endpoint, "failed data url"); - } - }; - }, - on_failure, - "blob", - ); + public api_get_blob(endpoint: string): Promise { + return new Promise((resolve, reject) => { + this.api_get(endpoint, "blob") + .then((data: Blob) => { + const reader = new FileReader(); + reader.readAsDataURL(data); + reader.onloadend = () => { + if (typeof reader.result === "string") { + resolve(reader.result); + } else { + reject([endpoint, "failed data url"]); + } + }; + }) + .catch(reject); + }); } - public api_get_string( - endpoint: string, - on_success: (data: string) => void, - on_failure: (name: string, reason: unknown) => void = this.fail, - ) { - this.api_get( - endpoint, - (data: string) => { - on_success(data); - }, - on_failure, - ); + public api_get_string(endpoint: string): Promise { + return this.api_get(endpoint); } - public api_get_number( - endpoint: string, - on_success: (data: number) => void, - on_failure: (name: string, reason: unknown) => void = this.fail, - ) { - this.api_get( - endpoint, - (data: number) => { - on_success(data); - }, - on_failure, - ); + public api_get_number(endpoint: string): Promise { + return this.api_get(endpoint); } }