ajout correction tp1-2

frontend/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+target
+package-lock.json
+.classpath
+.settings/
+.vscode/

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PDL L3 - Galerie</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "frontend-ts",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@babel/core": "^7.20.12",
+    "@popperjs/core": "^2.11.6",
+    "axios": "^1.3.3",
+    "path": "^0.12.7",
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@types/node": "^18.14.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.3",
+    "vue-tsc": "^1.1.4"
+  }
+}

frontend/pom.xml

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+  <modelVersion>4.0.0</modelVersion>
+  <artifactId>frontend</artifactId>
+
+  <parent>
+    <groupId>pdl</groupId>
+    <artifactId>client-serveur</artifactId>
+    <version>0.0.1-SNAPSHOT</version>
+  </parent>
+
+  <build>
+    <plugins>
+      <plugin>
+				<groupId>org.codehaus.mojo</groupId>
+				<artifactId>exec-maven-plugin</artifactId>
+				<version>1.3.2</version>
+				<executions>
+          <!-- Required: The following will ensure `npm install` is called
+					     before anything else during the 'Default Lifecycle' -->
+					<execution>
+						<id>npm install (initialize)</id>
+						<goals>
+							<goal>exec</goal>
+						</goals>
+						<phase>initialize</phase>
+						<configuration>
+							<executable>npm</executable>
+							<arguments>
+								<argument>install</argument>
+							</arguments>
+						</configuration>
+					</execution>
+					<!-- Required: The following will ensure `npm install` is called
+					     before anything else during the 'Clean Lifecycle' -->
+					<execution>
+						<id>npm install (clean)</id>
+						<goals>
+							<goal>exec</goal>
+						</goals>
+						<phase>pre-clean</phase>
+						<configuration>
+							<executable>npm</executable>
+							<arguments>
+								<argument>install</argument>
+							</arguments>
+						</configuration>
+					</execution>
+          <!-- Required: This following calls `npm run build` where 'build' is
+					     the script name I used in my project, change this if yours is
+							 different -->
+					<execution>
+						<id>npm run build (compile)</id>
+						<goals>
+							<goal>exec</goal>
+						</goals>
+						<phase>compile</phase>
+						<configuration>
+							<executable>npm</executable>
+							<arguments>
+								<argument>run</argument>
+								<argument>build</argument>
+							</arguments>
+						</configuration>
+					</execution>
+          <!-- <execution>
+						<id>npm run clean (clean)</id>
+						<goals>
+							<goal>exec</goal>
+						</goals>
+						<phase>clean</phase>
+						<configuration>
+							<executable>npm</executable>
+							<arguments>
+								<argument>run</argument>
+								<argument>clean</argument>
+							</arguments>
+						</configuration>
+					</execution> -->
+        </executions>
+      </plugin>
+    </plugins>
+  </build>
+</project>

frontend/src/App.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div id="app">
+    <nav>
+      <ul>
+        <li>
+          <router-link to="/">Home</router-link>
+        </li>
+        <li>
+          <router-link to="/gallery">Gallery</router-link>
+        </li>
+        <li>
+          <router-link to="/upload">Upload</router-link>
+        </li>
+      </ul>
+    </nav>
+
+    <div>
+      <h1>PDL - L3</h1>
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<style>
+#app {
+  text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #2c3e50;
+}
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+}
+li {
+  float: left;
+}
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+.error {
+  color: red;
+  font-weight: bold;
+  list-style-type: none;
+  margin-top: 1em;
+}
+</style>

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>

frontend/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

frontend/src/http-api.ts

@@ -0,0 +1,23 @@
+import axios, { AxiosResponse, AxiosError } from 'axios';
+import { ImageType } from '@/image';
+
+const instance = axios.create({
+  baseURL: "/",
+  timeout: 15000,
+});
+
+const responseBody = (response: AxiosResponse) => response.data;
+
+const requests = {
+  get: (url: string, param: {}) => instance.get(url, param).then(responseBody),
+  post: (url: string, body: {}) => instance.post(url, body, { headers: { "Content-Type": "multipart/form-data" }, }).then(responseBody),
+  put: (url: string, body: {}) => instance.put(url, body).then(responseBody),
+  delete: (url: string) => instance.delete(url).then(responseBody)
+};
+
+export const api = {
+  getImageList: (): Promise<ImageType[]> => requests.get('images', {}),
+  getImage: (id: number): Promise<Blob> => requests.get(`images/${id}`, { responseType: "blob" }),
+  createImage: (form: FormData): Promise<ImageType> => requests.post('images', form),
+  deleteImage: (id: number): Promise<void> => requests.delete(`images/${id}`),
+};

frontend/src/image.ts

@@ -0,0 +1,4 @@
+export interface ImageType {
+  id: number;
+  name: string;
+}

frontend/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router';
+
+createApp(App).use(router).mount('#app')

frontend/src/router.ts

@@ -0,0 +1,36 @@
+import { createWebHistory, createRouter } from "vue-router";
+import { RouteRecordRaw } from "vue-router";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    name: "home",
+    component: () => import("./components/Home.vue"),
+    props: true
+  },
+  {
+    path: "/gallery",
+    name: "gallery",
+    component: () => import("./components/Gallery.vue"),
+    props: true
+  },
+  {
+    path: "/image/:id",
+    name: "image",
+    component: () => import("./components/Image.vue"),
+    props: ({ params }) => ({ id: Number(params.id) || 0 })
+  },
+  {
+    path: "/upload",
+    name: "upload",
+    component: () => import("./components/Upload.vue"),
+    props: true
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "paths": {
+      "@/*": [
+          "./src/*"
+      ]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+}

frontend/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    proxy: {
+      '^/images': {
+        target: 'http://localhost:8080' // Spring boot backend address
+      }
+    }
+  },
+  build: {
+    outDir: 'target/dist',
+    assetsDir: 'static'
+  }
+})