tabs

frontend/src/components/Gallery.vue

@@ -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

@@ -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

@@ -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

@@ -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>