Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 00:03:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

CalendarAssistant component

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-10 21:08:42 +00:00
parent 451fd6bb88
commit 6e97420f1b
2 changed files with 81 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/src/App.vue
View file

@ -9,6 +9,7 @@
<div class="section">
<ConfigView />
<CalendarAssistant />
<DoorMapEditor />
<AdminButton />
</div>
@ -19,12 +20,14 @@
import { Options, Vue } from "vue-class-component";
import AdminButton from "./components/AdminButton.vue";
import CalendarAssistant from "./components/CalendarAssistant.vue";
import ConfigView from "./components/ConfigView.vue";
import DoorMapEditor from "./components/DoorMapEditor.vue";
@Options({
components: {
ConfigView,
CalendarAssistant,
DoorMapEditor,
AdminButton,
},

78
ui/src/components/CalendarAssistant.vue Normal file
View file

@ -0,0 +1,78 @@
<template>
<MultiModal ref="multi_modal" />
<BulmaDrawer header="Kalender-Assistent">
<div class="card-content">
<div class="content">
<h4>Alle Türchen</h4>
<div class="tags are-medium">
<span
v-for="index in 24"
:key="index"
class="tag button is-primary"
@click.left="door_click(index - 1)"
>
<span class="icon">
<font-awesome-icon icon="fa-solid fa-door-open" />
</span>
<span>{{ index }}</span>
</span>
</div>
<h4>Lösungsbuchstaben</h4>
<div class="tags are-medium">
<span class="tag is-info">1: A</span>
<span class="tag is-info">2: G</span>
<span class="tag is-info">3: F</span>
<span class="tag is-info">4: C</span>
<span class="tag is-info">5: I</span>
<span class="tag is-info">6: N</span>
<span class="tag is-info">7: B</span>
<span class="tag is-info">…</span>
</div>
<h4>Bilderzuordnung</h4>
<div class="tags are-medium">
<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">3: images_auto/penelope.png</span>
<span class="tag is-primary">4: images_auto/hand.png</span>
<span class="tag is-primary">5: images_auto/hand.jpg</span>
<span class="tag is-primary">6: images_auto/Zaphod.jpg</span>
<span class="tag is-primary">7: images_auto/Zaphod.jpg</span>
<span class="tag is-primary">…</span>
</div>
</div>
</div>
</BulmaDrawer>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import BulmaButton from "./bulma/Button.vue";
import BulmaDrawer from "./bulma/Drawer.vue";
import MultiModal from "./calendar/MultiModal.vue";
@Options({
components: {
BulmaButton,
BulmaDrawer,
MultiModal,
},
})
export default class extends Vue {
declare $refs: {
multi_modal: MultiModal;
};
public door_click(day: number) {
this.$refs.multi_modal.show_progress();
this.$advent22
.api_get_blob(`days/image/${day}`)
.then((data) => this.$refs.multi_modal.show_image(data))
.catch(() => this.$refs.multi_modal.set_active(false));
}
}
</script>