mirror of
https://code.lenaisten.de/Lenaisten/advent22.git
synced 2024-11-23 00:03:07 +00:00
CalendarAssistant day_parts
This commit is contained in:
parent
d1e2648f5f
commit
629c6d8f9d
1 changed files with 36 additions and 19 deletions
|
@ -1,37 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<MultiModal ref="multi_modal" />
|
<MultiModal ref="multi_modal" />
|
||||||
|
|
||||||
<BulmaDrawer header="Kalender-Assistent">
|
<BulmaDrawer
|
||||||
|
header="Kalender-Assistent"
|
||||||
|
:ready="is_loaded"
|
||||||
|
@open="on_open"
|
||||||
|
refreshable
|
||||||
|
>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h4>Alle Türchen</h4>
|
<h4>Alle Türchen</h4>
|
||||||
<div class="tags are-medium">
|
<div class="tags are-medium">
|
||||||
<span
|
<BulmaButton
|
||||||
v-for="index in 24"
|
v-for="(day_part, index) in day_parts"
|
||||||
:key="index"
|
:key="`btn-${index}`"
|
||||||
class="tag button is-primary"
|
class="tag button is-primary"
|
||||||
@click.left="door_click(index - 1)"
|
icon="fa-solid fa-door-open"
|
||||||
>
|
:text="`${day_part.day}`"
|
||||||
<span class="icon">
|
@click.left="door_click(day_part.day)"
|
||||||
<font-awesome-icon icon="fa-solid fa-door-open" />
|
/>
|
||||||
</span>
|
|
||||||
<span>{{ index }}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4>Buchstaben-Zuordnung</h4>
|
<h4>Buchstaben-Zuordnung</h4>
|
||||||
<div class="tags are-medium">
|
<div class="tags are-medium">
|
||||||
<span class="tag is-info">1: A</span>
|
<span
|
||||||
<span class="tag is-info">2: G</span>
|
v-for="(day_part, index) in day_parts"
|
||||||
<span class="tag is-info">3: F</span>
|
:key="`part-${index}`"
|
||||||
<span class="tag is-info">4: C</span>
|
class="tag is-info"
|
||||||
<span class="tag is-info">5: I</span>
|
>
|
||||||
<span class="tag is-info">6: N</span>
|
{{ day_part.day }}: {{ day_part.part.split("").join(", ") }}
|
||||||
<span class="tag is-info">7: B</span>
|
</span>
|
||||||
<span class="tag is-info">…</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4>Bilder-Zuordnung</h4>
|
<h4>Bilder-Zuordnung</h4>
|
||||||
|
<!-- TODO -->
|
||||||
<div class="tags are-medium">
|
<div class="tags are-medium">
|
||||||
<span class="tag is-primary">1: images_auto/1.jpg</span>
|
<span class="tag is-primary">1: images_auto/1.jpg</span>
|
||||||
<span class="tag is-primary">2: images_manual/1.jpg</span>
|
<span class="tag is-primary">2: images_manual/1.jpg</span>
|
||||||
|
@ -48,6 +50,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { DayPartModel } from "@/lib/api";
|
||||||
import { Options, Vue } from "vue-class-component";
|
import { Options, Vue } from "vue-class-component";
|
||||||
|
|
||||||
import BulmaButton from "./bulma/Button.vue";
|
import BulmaButton from "./bulma/Button.vue";
|
||||||
|
@ -62,10 +65,24 @@ import MultiModal from "./calendar/MultiModal.vue";
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
|
public is_loaded = true;
|
||||||
|
public day_parts: DayPartModel[] = [];
|
||||||
|
|
||||||
declare $refs: {
|
declare $refs: {
|
||||||
multi_modal: MultiModal;
|
multi_modal: MultiModal;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
public on_open(): void {
|
||||||
|
this.is_loaded = false;
|
||||||
|
|
||||||
|
Promise.all([this.$advent22.api_get<DayPartModel[]>("admin/day_parts")])
|
||||||
|
.then(([day_parts]) => {
|
||||||
|
this.day_parts = day_parts;
|
||||||
|
this.is_loaded = true;
|
||||||
|
})
|
||||||
|
.catch(console.log);
|
||||||
|
}
|
||||||
|
|
||||||
public door_click(day: number) {
|
public door_click(day: number) {
|
||||||
this.$refs.multi_modal.show_progress();
|
this.$refs.multi_modal.show_progress();
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue