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

CalendarAssistant day_parts

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-12 16:39:52 +00:00
parent d1e2648f5f
commit 629c6d8f9d
1 changed files with 36 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
ui/src/components/CalendarAssistant.vue
View file

@ -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();