nessar/SnapEdit
Archived
1
0 Fork 0
Code Issues 1 Packages Projects Releases Wiki Activity

tabs

Browse Source
This commit is contained in:
Theophyl Hoguet committed 2023-03-03 22:18:39 +01:00
1 parent 2db6811b55
commit 17399d7c7a
14 files changed
+240 -226
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/index.html
+14 -11
View File
@@ -1,13 +1,16 @@
<!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>
<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/pom.xml
+19 -18
View File
@@ -1,23 +1,24 @@
<?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>
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>
<parent>
<groupId>pdl</groupId>
<artifactId>client-serveur</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<build>
<plugins>
<plugin>
<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
<!-- Required: The following will ensure `npm install` is called
before anything else during the 'Default Lifecycle' -->
<execution>
<id>npm install (initialize)</id>
@@ -47,7 +48,7 @@
</arguments>
</configuration>
</execution>
<!-- Required: This following calls `npm run build` where 'build' is
<!-- 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>
@@ -64,7 +65,7 @@
</arguments>
</configuration>
</execution>
<!-- <execution>
<!-- <execution>
<id>npm run clean (clean)</id>
<goals>
<goal>exec</goal>
@@ -78,8 +79,8 @@
</arguments>
</configuration>
</execution> -->
</executions>
</plugin>
</plugins>
</build>
</executions>
</plugin>
</plugins>
</build>
</project>
frontend/src/App.vue
+41 -37
View File
@@ -2,55 +2,59 @@
</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 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>
<div>
<h1>PDL - L3</h1>
<router-view />
</div>
</div>
</template>
<style>
#app {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #2c3e50;
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;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
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;
color: red;
font-weight: bold;
list-style-type: none;
margin-top: 1em;
}
</style>
frontend/src/components/Gallery.vue
+11 -12
View File
@@ -7,20 +7,19 @@ import Image from './Image.vue';
const imageList = ref<ImageType[]>([]);
api.getImageList()
.then((data) => {
imageList.value = data;
})
.catch(e => {
console.log(e.message);
});
.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>
<div>
<h3>Gallery</h3>
<Image v-for="image in imageList" :id="image.id" />
</div>
</template>
<style scoped>
</style>
<style scoped></style>
frontend/src/components/Home.vue
+15 -16
View File
@@ -9,28 +9,27 @@ const imageList = ref<ImageType[]>([]);
getImageList();
function getImageList() {
api.getImageList().then((data) => {
imageList.value = data;
}).catch(e => {
console.log(e.message);
});
api.getImageList().then((data) => {
imageList.value = data;
}).catch(e => {
console.log(e.message);
});
}
function showImage() {
router.push({ name: 'image', params: { id: selectedId.value } })
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>
<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>
<style scoped></style>
frontend/src/components/Image.vue
+18 -18
View File
@@ -5,27 +5,27 @@ 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);
});
.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>
<figure :id="'gallery-' + id"></figure>
</template>
<style></style>
frontend/src/components/Upload.vue
+24 -25
View File
@@ -5,37 +5,36 @@ 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);
});
}
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);
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>
<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>
<style scoped></style>
frontend/src/env.d.ts
Vendored
+4 -4
View File
@@ -1,8 +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
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
+10 -10
View File
@@ -2,22 +2,22 @@ import axios, { AxiosResponse, AxiosError } from 'axios';
import { ImageType } from '@/image';
const instance = axios.create({
baseURL: "/",
timeout: 15000,
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)
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}`),
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
+2 -2
View File
@@ -1,4 +1,4 @@
export interface ImageType {
id: number;
name: string;
id: number;
name: string;
}
frontend/src/router.ts
+26 -26
View File
@@ -2,35 +2,35 @@ 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
}
{
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,
history: createWebHistory(),
routes,
});
export default router;
frontend/tsconfig.json
+27 -19
View File
@@ -1,20 +1,28 @@
{
"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"],
}
"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
+17 -17
View File
@@ -4,21 +4,21 @@ 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'
}
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'
}
})
pom.xml
+12 -11
View File
@@ -1,15 +1,16 @@
<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>pdl</groupId>
<artifactId>client-serveur</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>pom</packaging>
<groupId>pdl</groupId>
<artifactId>client-serveur</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>pom</packaging>
<modules>
<module>frontend</module>
<module>backend</module>
</modules>
<modules>
<module>frontend</module>
<module>backend</module>
</modules>
</project>