ajout correction tp1-2

frontend/src/components/Gallery.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { api } from '@/http-api';
+import { ImageType } from '@/image'
+import Image from './Image.vue';
+
+const imageList = ref<ImageType[]>([]);
+
+api.getImageList()
+  .then((data) => {
+    imageList.value = data;
+  })
+  .catch(e => {
+    console.log(e.message);
+  });
+</script>
+
+<template>
+  <div>
+    <h3>Gallery</h3>
+    <Image v-for="image in imageList" :id="image.id" />
+  </div>
+</template>
+
+<style scoped>
+</style>

frontend/src/components/Home.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import router from "@/router";
+import { api } from '@/http-api';
+import { ImageType } from '@/image'
+
+const selectedId = ref(-1);
+const imageList = ref<ImageType[]>([]);
+getImageList();
+
+function getImageList() {
+  api.getImageList().then((data) => {
+    imageList.value = data;
+  }).catch(e => {
+    console.log(e.message);
+  });
+}
+
+function showImage() {
+  router.push({ name: 'image', params: { id: selectedId.value } })
+}
+</script>
+
+<template>
+  <div>
+    <h3>Choose an image</h3>
+    <div>
+      <select v-model="selectedId" @change="showImage">
+        <option v-for="image in imageList" :value="image.id" :key="image.id">{{ image.name }}</option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

frontend/src/components/Image.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import { api } from '@/http-api';
+
+const props = defineProps<{ id: number }>()
+
+api.getImage(props.id)
+  .then((data: Blob) => {
+    const reader = new window.FileReader();
+    reader.readAsDataURL(data);
+    reader.onload = () => {
+      const galleryElt = document.getElementById("gallery-"+props.id);
+      if (galleryElt !== null) {
+        const imgElt = document.createElement("img");
+        galleryElt.appendChild(imgElt);
+        if (imgElt !== null && reader.result as string) {
+          imgElt.setAttribute("src", (reader.result as string));
+        }
+      }
+    };
+  })
+  .catch(e => {
+    console.log(e.message);
+  });
+</script>
+
+<template>
+  <figure :id="'gallery-'+id"></figure>  
+</template>
+
+<style></style>

frontend/src/components/Upload.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { api } from '@/http-api';
+
+const target = ref<HTMLInputElement>();
+
+function submitFile() {
+  if (target.value !== null && target.value !== undefined && target.value.files !== null) {
+    const file = target.value.files[0];
+    if (file === undefined)
+      return;
+    let formData = new FormData();
+    formData.append("file", file);
+    api.createImage(formData).then(() => {
+      if (target.value !== undefined)
+        target.value.value = '';
+    }).catch(e => {
+      console.log(e.message);
+    });
+  }
+}
+
+function handleFileUpload(event: Event) {
+  target.value = (event.target as HTMLInputElement);
+}
+</script>
+
+<template>
+  <div>
+    <h3>Upload an image</h3>
+    <div>
+      <input type="file" id="file" ref="file" @change="handleFileUpload" />
+    </div>
+    <div>
+      <button @click="submitFile">Submit</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>