149 lines
3.9 KiB
Vue
149 lines
3.9 KiB
Vue
<template>
|
|
<BulmaDrawer header="Türchen bearbeiten" :ready="is_loaded" @open="on_open">
|
|
<div class="is-flex is-align-items-center is-justify-content-space-between">
|
|
<BulmaButton
|
|
:disabled="current_step === 0"
|
|
class="is-link"
|
|
@click="current_step--"
|
|
icon="fa-solid fa-backward"
|
|
/>
|
|
<BulmaBreadcrumbs :steps="steps" v-model="current_step" class="mb-0" />
|
|
<BulmaButton
|
|
:disabled="current_step === 2"
|
|
class="is-link"
|
|
@click="current_step++"
|
|
icon="fa-solid fa-forward"
|
|
/>
|
|
</div>
|
|
|
|
<DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
|
|
<DoorChooser v-if="current_step === 1" v-model:doors="doors" />
|
|
<div v-if="current_step === 2" class="card-content">
|
|
<Calendar :doors="doors" />
|
|
</div>
|
|
|
|
<footer class="card-footer is-flex is-justify-content-space-around">
|
|
<BulmaButton
|
|
class="card-footer-item is-danger"
|
|
@click="on_download"
|
|
icon="fa-solid fa-cloud-arrow-down"
|
|
:busy="loading_doors"
|
|
text="Laden"
|
|
/>
|
|
<BulmaButton
|
|
class="card-footer-item is-warning"
|
|
@click="on_discard"
|
|
icon="fa-solid fa-trash"
|
|
text="Löschen"
|
|
/>
|
|
<BulmaButton
|
|
class="card-footer-item is-success"
|
|
@click="on_upload"
|
|
icon="fa-solid fa-cloud-arrow-up"
|
|
:busy="saving_doors"
|
|
text="Speichern"
|
|
/>
|
|
</footer>
|
|
</BulmaDrawer>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { DoorsSaved } from "@/lib/api";
|
|
import { Door } from "@/lib/door";
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
import Calendar from "./Calendar.vue";
|
|
import BulmaBreadcrumbs, { Step } from "./bulma/Breadcrumbs.vue";
|
|
import BulmaButton from "./bulma/Button.vue";
|
|
import BulmaDrawer from "./bulma/Drawer.vue";
|
|
import DoorChooser from "./editor/DoorChooser.vue";
|
|
import DoorPlacer from "./editor/DoorPlacer.vue";
|
|
|
|
@Options({
|
|
components: {
|
|
BulmaBreadcrumbs,
|
|
BulmaButton,
|
|
BulmaDrawer,
|
|
DoorPlacer,
|
|
DoorChooser,
|
|
Calendar,
|
|
},
|
|
})
|
|
export default class extends Vue {
|
|
public is_loaded = false;
|
|
|
|
public readonly steps: Step[] = [
|
|
{ label: "Platzieren", icon: "fa-solid fa-crosshairs" },
|
|
{ label: "Ordnen", icon: "fa-solid fa-list-ol" },
|
|
{ label: "Vorschau", icon: "fa-solid fa-magnifying-glass" },
|
|
];
|
|
public current_step = 0;
|
|
public doors: Door[] = [];
|
|
|
|
public loading_doors = false;
|
|
public saving_doors = false;
|
|
|
|
private load_doors(): Promise<void | DoorsSaved> {
|
|
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> {
|
|
const data: DoorsSaved = [];
|
|
|
|
for (const door of this.doors) {
|
|
data.push(door.save());
|
|
}
|
|
|
|
return this.$advent22
|
|
.api_put("admin/doors", data)
|
|
.catch((reason) => alert(`Fehler: ${reason} in admin/doors`));
|
|
}
|
|
|
|
public on_open(): void {
|
|
this.is_loaded = false;
|
|
this.load_doors();
|
|
}
|
|
|
|
public on_download() {
|
|
if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
|
|
this.loading_doors = true;
|
|
|
|
this.load_doors().then(() => {
|
|
alert("Erfolgeich!");
|
|
this.loading_doors = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
public on_discard() {
|
|
if (confirm("Alle Türchen löschen? (nur lokal)")) {
|
|
// empty `doors` array
|
|
this.doors.length = 0;
|
|
}
|
|
}
|
|
|
|
public on_upload() {
|
|
if (confirm("Aktuelle Änderungen an den Server schicken?")) {
|
|
this.saving_doors = true;
|
|
|
|
this.save_doors().then(() => {
|
|
this.load_doors().then(() => {
|
|
alert("Erfolgeich!");
|
|
this.saving_doors = false;
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|