From 3680432bdfe49fc2416e50b3e91a740bbe66cfa8 Mon Sep 17 00:00:00 2001
From: Pitu <heyitspitu@gmail.com>
Date: Tue, 1 Oct 2019 14:20:37 -0300
Subject: chore: prepare for filepond

---
 src/site/components/uploader/Filepond.vue | 97 +++++++++++++++++++++++++++++++
 src/site/layouts/default.vue              | 13 ++++-
 src/site/pages/index.vue                  |  7 ++-
 src/site/plugins/vuebar.js                |  4 ++
 4 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 src/site/components/uploader/Filepond.vue
 create mode 100644 src/site/plugins/vuebar.js

(limited to 'src/site')

diff --git a/src/site/components/uploader/Filepond.vue b/src/site/components/uploader/Filepond.vue
new file mode 100644
index 0000000..1ee5288
--- /dev/null
+++ b/src/site/components/uploader/Filepond.vue
@@ -0,0 +1,97 @@
+<template>
+	<file-pond
+		ref="pond"
+		name="test"
+		class="pond"
+		class-name="my-pond"
+		label-idle="Drop files here or click to browse"
+		:allow-multiple="true"
+		:files="myFiles"
+		:max-files="1000"
+		:chunk-uploads="true"
+		:chunk-size:="50 * 1000000"
+		:server="server"
+		@init="handleFilePondInit"
+		@error="handleFilePondError"
+		@addfile="handleFilePondAddFile" />
+</template>
+
+<script>
+// Import Vue FilePond
+import vueFilePond from 'vue-filepond';
+
+// Import FilePond styles
+import 'filepond/dist/filepond.min.css';
+
+// Import FilePond plugins
+// Please note that you need to install these plugins separately
+
+// Import image preview plugin styles
+// import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
+
+// Import image preview and file type validation plugins
+// import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
+// import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
+
+// Create component
+const FilePond = vueFilePond(); // FilePondPluginFileValidateType, FilePondPluginImagePreview);
+
+export default {
+	components: {
+		FilePond
+	},
+	data() {
+		return {
+			myFiles: [],
+			server: {
+				url: 'http://localhost:5000',
+				process: {
+					url: '/api/upload',
+					method: 'POST',
+					headers: {
+						'Accept': 'application/vnd.lolisafe.json'
+					},
+					timeout: 300000, // 5 minutes
+					onload: response => console.log(response)
+				}
+			}
+		};
+	},
+	methods: {
+		handleFilePondInit() {
+			console.log('FilePond has initialized');
+			console.log(this.$refs.pond);
+			// FilePond instance methods are available on `this.$refs.pond`
+		},
+		handleFilePondError(error) {
+			console.log(error);
+		},
+		handleFilePondAddFile(error, file) {
+			console.log(error, file);
+		}
+	}
+};
+</script>
+<style lang="scss">
+.pond {
+	width: 400px;
+	margin: 0 auto;
+
+	.filepond--browser.filepond--browser {
+		height: 100%;
+		padding-top: 1.75rem;
+		top: 0;
+		left: 0;
+		width: 100%;
+		cursor: pointer;
+	}
+}
+
+.pond.mini {
+	position: absolute;
+	width: 300px;
+	height: auto;
+	top: calc(50% - 40px);
+	left: calc(50% - 150px);
+}
+</style>
diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index c0b2407..bd6f134 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -1,8 +1,17 @@
 <template>
-	<nuxt />
+	<div v-bar>
+		<div>
+			<div class="layout">
+				<!--<Uploader />-->
+				<nuxt-child id="app" />
+			</div>
+		</div>
+	</div>
 </template>
 <script>
+import Uploader from '~/components/uploader/Filepond.vue';
 export default {
+	components: { Uploader },
 	computed: {
 		config() {
 			return this.$store.state.config;
@@ -33,6 +42,8 @@ export default {
 };
 </script>
 <style lang="scss">
+	html { overflow: hidden !important; }
+	.layout { height: 100vh; }
 	@import "~/assets/styles/style.scss";
 	@import "~/assets/styles/icons.min.css";
 </style>
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index 8c33cde..0fcb4de 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -64,7 +64,8 @@
 						</div>
 					</div>
 					<div class="spacer mt7" />
-					<Uploader v-if="(config.publicMode) || (!config.publicMode && loggedIn)" />
+					<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
+					<!--<Filepond v-if="config.publicMode || (!config.publicMode && loggedIn)" />-->
 					<div v-else>
 						This site has disabled public uploads. You need an account.
 					</div>
@@ -84,6 +85,7 @@ import Navbar from '~/components/navbar/Navbar.vue';
 import Logo from '~/components/logo/Logo.vue';
 import Uploader from '~/components/uploader/Uploader.vue';
 import Links from '~/components/home/links/Links.vue';
+import Filepond from '~/components/uploader/Filepond.vue';
 
 export default {
 	name: 'Home',
@@ -91,7 +93,8 @@ export default {
 		Navbar,
 		Logo,
 		Uploader,
-		Links
+		Links,
+		Filepond
 	},
 	data() {
 		return { albums: [] };
diff --git a/src/site/plugins/vuebar.js b/src/site/plugins/vuebar.js
new file mode 100644
index 0000000..18dd4e5
--- /dev/null
+++ b/src/site/plugins/vuebar.js
@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import Vuebar from 'vuebar';
+
+Vue.use(Vuebar);
-- 
cgit v1.2.3