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

ImageModal Bilder

Browse source
This commit is contained in:
Jörn-Michael Miehe 2022-10-30 03:10:07 +00:00
parent cf318212ba
commit f585b5f90c
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/src/components/CalendarDoor.vue
View file

@ -1,6 +1,5 @@
<template> <template>
<ImageModal v-model="modal_visible" /> <ImageModal v-model="modal_visible" :imageUrl="image_url" />
<button class="button" @click="modal_visible = true"> <button class="button" @click="modal_visible = true">
Türken {{ day + 1 }} Türken {{ day + 1 }}
</button> </button>
@ -21,6 +20,10 @@ import ImageModal from "./ImageModal.vue";
export default class CalendarDoor extends Vue { export default class CalendarDoor extends Vue {
day!: number; day!: number;
modal_visible = false; modal_visible = false;
private get image_url(): string {
return "http://localhost:8000/api/days/picture/" + this.day;
}
} }
</script> </script>

4
ui/src/components/ImageModal.vue
View file

@ -4,7 +4,7 @@
<div class="modal-content"> <div class="modal-content">
<!-- <p class="image is-4by3"> --> <!-- <p class="image is-4by3"> -->
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="" /> <img :src="imageUrl" alt="" />
<!-- </p> --> <!-- </p> -->
</div> </div>
</div> </div>
@ -16,10 +16,12 @@ import { Options, Vue } from "vue-class-component";
@Options({ @Options({
props: { props: {
modelValue: Boolean, modelValue: Boolean,
imageUrl: String,
}, },
}) })
export default class ImageModal extends Vue { export default class ImageModal extends Vue {
modelValue!: boolean; modelValue!: boolean;
imageUrl!: string;
public created(): void { public created(): void {
window.addEventListener("keydown", (e) => { window.addEventListener("keydown", (e) => {