add upload page + new nav bar
This commit is contained in:
Theophyl Hoguet committed
1 parent
fd71c0b7d6
commit
4dd8d74cea
2 files changed
+192
-48
No files matched your search
+82
-48
@@ -2,6 +2,7 @@
|
||||
import Home from './components/Home.vue'
|
||||
import Gallery from './components/Gallery.vue';
|
||||
import NotFound from './components/NotFound.vue'
|
||||
import Upload from './components/Upload.vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { api } from '@/http-api'
|
||||
import { ImageType, ImageClass } from './image';
|
||||
@@ -9,16 +10,15 @@ import { ImageType, ImageClass } from './image';
|
||||
<script lang="ts">
|
||||
const routes: { [key: string]: string } = {
|
||||
'/': "Home",
|
||||
'Gallery': "Gallery"
|
||||
}
|
||||
interface InputFileEvent extends Event {
|
||||
target: HTMLInputElement;
|
||||
'Gallery': "Gallery",
|
||||
'Upload': "Upload"
|
||||
}
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Home,
|
||||
Gallery,
|
||||
NotFound
|
||||
NotFound,
|
||||
Upload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -34,28 +34,13 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submitImage() {
|
||||
if (this.sent == true || this.file == null)
|
||||
return;
|
||||
let formData = new FormData();
|
||||
formData.append('file', this.file[0]);
|
||||
await api.createImage(formData);
|
||||
this.sent = true;
|
||||
(document.getElementById('fileUpload') as HTMLInputElement).value = "";
|
||||
this.updateImageList(100);
|
||||
},
|
||||
handleFilesUpload(event: InputFileEvent) {
|
||||
this.file = event.target.files;
|
||||
this.sent = false;
|
||||
},
|
||||
async updateImageList(sleep: number) {
|
||||
setTimeout(() => {
|
||||
api.getImageList().then((newImages) => {
|
||||
const newImageList = new Map<number, ImageType>();
|
||||
for (const image of newImages.values()) {
|
||||
for (const image of newImages.values())
|
||||
newImageList.set(image.id, image);
|
||||
}
|
||||
this.images = newImageList; console.log(this.images);
|
||||
this.images = newImageList;
|
||||
})
|
||||
}, sleep);
|
||||
},
|
||||
@@ -63,6 +48,14 @@ export default defineComponent({
|
||||
api.deleteImage(id).then(() => {
|
||||
this.updateImageList(100);
|
||||
})
|
||||
},
|
||||
isActive(route: string) {
|
||||
if (route === undefined) {
|
||||
if (this.currentPath === "")
|
||||
return 'router active';
|
||||
route = "/";
|
||||
}
|
||||
return this.currentPath.endsWith(route) ? 'router active' : 'router';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -74,38 +67,79 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div v-for="route in routes" class="button">
|
||||
<a :href="'#' + (routes[route] || '/')"> {{ route }}</a>
|
||||
<header>
|
||||
<div class="navi">
|
||||
<nav>
|
||||
<ul>
|
||||
<li v-for="route in routes" :class="isActive(routes[route])">
|
||||
<a :href="'#' + (routes[route] || '/')"> <span>{{ route }}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div>
|
||||
<label>Files
|
||||
<input id="fileUpload" type="file" @change="handleFilesUpload($event as InputFileEvent)" />
|
||||
</label>
|
||||
<button :class="sent ? 'green' : 'normal'" @click="submitImage()">{{ sent ? 'Sent' : 'Submit' }}</button>
|
||||
</div>
|
||||
<component :is="currentView" :key="sent" :images="images" @delete="deleteFile" />
|
||||
</header>
|
||||
<component :is="currentView" :key="sent" :images="images" @delete="deleteFile"
|
||||
@updateImageList="updateImageList(100)" />
|
||||
</template>
|
||||
<style scoped>
|
||||
.button {
|
||||
display: inline-block;
|
||||
color: #444;
|
||||
border: 1px solid #CCC;
|
||||
background: #DDD;
|
||||
box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
max-width: 100px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
.navi {
|
||||
/* reduce size of children */
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
color: red;
|
||||
box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);
|
||||
header {
|
||||
display: block;
|
||||
position: fixed;
|
||||
padding-top: 30px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: content-box !important;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: green;
|
||||
ul>li+li {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
ul>li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 15px;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #12EACB;
|
||||
}
|
||||
|
||||
.active>a {
|
||||
color: rgb(205, 201, 194);
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(172, 165, 154);
|
||||
text-decoration-color: initial;
|
||||
font-family: "Aeonik", sans-serif;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 20px;
|
||||
height: 60px;
|
||||
padding-right: 20px;
|
||||
border-radius: 60px;
|
||||
background-color: rgb(24, 26, 27);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { defineComponent } from 'vue';
|
||||
import { api } from '@/http-api';
|
||||
import { ImageType, ImageClass } from '@/image';
|
||||
|
||||
</script>
|
||||
<script lang="ts">
|
||||
|
||||
interface InputFileEvent extends Event {
|
||||
target: HTMLInputElement;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['updateImageList', 'delete'],
|
||||
data() {
|
||||
return {
|
||||
sent: false,
|
||||
file: null as FileList | null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
images: {
|
||||
type: Map<number, ImageType>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submitImage() {
|
||||
if (this.sent === true || this.file === null)
|
||||
return;
|
||||
let formData = new FormData();
|
||||
formData.append('file', this.file[0]);
|
||||
await api.createImage(formData);
|
||||
this.sent = true;
|
||||
this.$emit('updateImageList');
|
||||
this.resetFile();
|
||||
},
|
||||
handleFilesUpload(event: InputFileEvent) {
|
||||
this.file = event.target.files;
|
||||
this.sent = false;
|
||||
},
|
||||
resetFile() {
|
||||
this.file = null;
|
||||
(document.getElementById('fileUpload') as HTMLInputElement).value = "";
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
file() {
|
||||
if (this.file === null)
|
||||
return;
|
||||
Array.from(this.file).forEach((file, id) => {
|
||||
const reader = new window.FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
const imgElt = document.getElementById("preview-" + id) as HTMLImageElement;
|
||||
if (imgElt !== null) {
|
||||
if (reader.result as string) {
|
||||
imgElt.setAttribute("src", (reader.result as string));
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<label>Files
|
||||
<input id="fileUpload" type="file" @change="handleFilesUpload($event as InputFileEvent)" accept="image/jpeg"
|
||||
multiple />
|
||||
</label>
|
||||
<button :class="sent ? 'green' : 'normal'" @click="submitImage()">{{ sent ? 'Sent' : 'Submit' }}</button>
|
||||
<button v-if="file !== null" @click="resetFile()">Reset</button>
|
||||
</div>
|
||||
<h2 v-if="file !== null">Preview :</h2>
|
||||
<div class="previewBox">
|
||||
<label v-for="(f, id) in (file as FileList)" :key="id" class="imageLabel">{{ (f as File).name }}:
|
||||
<img :id="'preview-' + id" />
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 90%;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.imageLabel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 33%;
|
||||
height: 33vh;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.previewBox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user