From b74db670a887f94b4d3d5759127755279bd966be Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Sun, 21 Jun 2020 17:45:01 +0100
Subject: [PATCH] copyclipboard
doesn't always work / should have made branch but
---
app/src/components/IpfsInfo.vue | 6 +-
app/src/components/UploadLayer.vue | 146 +++++++++++++++++++++++++++
app/src/experimental/ModeToolbar.vue | 1 +
app/src/router/index.js | 12 +--
app/src/views/Home.vue | 14 +++
5 files changed, 170 insertions(+), 9 deletions(-)
create mode 100644 app/src/components/UploadLayer.vue
diff --git a/app/src/components/IpfsInfo.vue b/app/src/components/IpfsInfo.vue
index 88b1de9..38ce1c3 100644
--- a/app/src/components/IpfsInfo.vue
+++ b/app/src/components/IpfsInfo.vue
@@ -3,7 +3,7 @@
<h1>IPFS View</h1>
<h3>Testing Only</h3>
<h1>{{ status }}</h1>
- <h2>ID: {{ id }}</h2>
+ <!-- <h2>ID: {{ id }}</h2> -->
<!-- <h2>Agent version: {{ agentVersion }}</h2> -->
<!-- <h3>Files : {{ fileContents }}</h3> -->
<!-- <h3>Path: {{ path }}</h3> -->
@@ -47,7 +47,7 @@ export default {
data: function () {
return {
status: 'Connecting to IPFS...',
- id: '',
+ // id: '',
// agentVersion: '',
selectedFile: null,
fileContents: this.fileContents,
@@ -104,7 +104,7 @@ export default {
copyClipBoard(e) {
this.copytext = 'https://ipfs.io/ipfs/' + e
- // copyText.select()
+ // copyText.select()
// document.execCommand('copy')
console.log(copytext)
},
diff --git a/app/src/components/UploadLayer.vue b/app/src/components/UploadLayer.vue
new file mode 100644
index 0000000..7b905c5
--- /dev/null
+++ b/app/src/components/UploadLayer.vue
@@ -0,0 +1,146 @@
+<template>
+ <div class="ipfsupload">
+ <form>
+ <input
+ id="file"
+ class="fileInput"
+ type="file"
+ name="fileInput"
+ ref="fileInput"
+ @change="onFileSelected"
+ />
+ <!--
+ <button type="button" @click="saveIPFS">Upload</button>
+ <button type="button" @click="getIPFS">Get IPFS</button> -->
+ <!-- {{ uploadready }} -->
+ <textarea id="ipfshash" v-model="copytext"></textarea>
+ <div class="btn-row">
+ <button v-on:click.prevent="copyDone()" id="copyme" hidden>
+ Copy
+ </button>
+ </div>
+ </form>
+ </div>
+</template>
+
+<script>
+import VueIpfs from 'ipfs'
+const ipfs = VueIpfs.create()
+var node
+var output
+var path = 'ready'
+var copytext = ''
+
+//const fileContents = []
+
+// The below code should create an IPFS node to add files to
+export default {
+ name: 'IpfsInfo',
+
+ props: {
+ uploadready: Boolean,
+ // copyready: Boolean,
+ },
+ data: function () {
+ return {
+ status: 'Connecting to IPFS...',
+ // id: '',
+ // agentVersion: '',
+ selectedFile: null,
+ fileContents: this.fileContents,
+ output: output,
+ path: path,
+ copytext: copytext,
+ }
+ },
+ mounted: function () {
+ // console.log(VueIpfs)
+ this.getIpfsNodeInfo()
+ },
+
+ watch: {
+ uploadready: function (newVal) {
+ // watch it
+ console.log(newVal)
+ if (newVal == true) {
+ document.getElementById('file').click()
+ }
+ },
+ },
+ methods: {
+ async getIpfsNodeInfo() {
+ try {
+ // Await for ipfs node instance.
+ node = await ipfs
+ //console.log(ipfs)
+ // Call ipfs `id` method.
+ // Returns the identity of the Peer.
+ const { agentVersion, id } = await node.id()
+ this.agentVersion = agentVersion
+ this.id = id
+ // Set successful status text.
+ this.status = 'Connected to IPFS 😊'
+ } catch (err) {
+ // Set error status text.
+ this.status = `Error: ${err}`
+ }
+ },
+
+ onFileSelected(event) {
+ this.selectedFile = event.target.files[0]
+ this.saveIPFS()
+ },
+
+ async saveIPFS() {
+ for await (const result of node.add(this.selectedFile)) {
+ //console.log(result.cid.string)
+ this.fileContents = result
+ // console.log(this.fileContents.path)
+ // node.swarm.peers().then((a) => console.log(a))
+ this.getIPFS()
+ }
+ },
+
+ async getIPFS() {
+ for await (const newfile of node.get(this.fileContents.path)) {
+ // console.log(newfile.path)
+ this.path = newfile.path
+ this.copyClipBoard(this.path)
+ }
+ },
+
+ copyClipBoard(e) {
+ this.copytext = 'https://ipfs.io/ipfs/' + e
+ this.copyready = true
+ setTimeout(this.copyClick, 5000)
+ },
+
+ copyClick() {
+ document.getElementById('copyme').click()
+ },
+
+ copyDone() {
+ var copyHash = document.getElementById('ipfshash')
+ copyHash.select()
+
+ copyHash.setSelectionRange(0, 99999) /*For mobile devices*/
+ document.execCommand('copy')
+ this.$emit('uploadAdded')
+ },
+ },
+}
+</script>
+
+<style lang="css" scoped>
+.fileInput {
+ display: none;
+}
+
+textarea {
+ position: absolute;
+ top: 0px;
+ height: 0px;
+ width: 0px;
+ padding: 0px;
+}
+</style>
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index d204657..44c0c2b 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -43,6 +43,7 @@ export default {
this.$store.dispatch('addNode')
}
if (mode == 'upload') {
+ this.$emit('uploadAdded')
// onFileSelected(event) {
// this.selectedFile = event.target.files[0]
// }
diff --git a/app/src/router/index.js b/app/src/router/index.js
index f33b39c..7e5919b 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import List from '../views/List.vue'
// import Oldhome from '../views/Oldhome'
-import Test from '../views/Test'
+//import Test from '../views/Test'
Vue.use(VueRouter)
@@ -28,11 +28,11 @@ export const routes = [
component: List,
},
- {
- path: '/test',
- name: 'IPFS Test',
- component: Test,
- },
+ // {
+ // path: '/test',
+ // name: 'IPFS Test',
+ // component: Test,
+ // },
// {
// path: '/oldhome',
// name: 'Old Home',
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 0968be4..36c9bda 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -78,8 +78,13 @@
<ModeToolbar
@offlineTriggered="offlineTriggered()"
@onlineTriggered="onlineTriggered()"
+ @uploadAdded="uploadAdded()"
/>
<ViewToolbar />
+ <UploadLayer
+ v-bind:uploadready="uploadready"
+ @uploadAdded="uploadAdded()"
+ />
</div>
</div>
</div>
@@ -90,6 +95,7 @@ import PanZoomContainer from '@/experimental/PanZoomContainer'
import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
import NodesLayer from '@/components/NodesLayer'
import OffLine from '@/components/OffLine'
+import UploadLayer from '@/components/UploadLayer'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
import OnBoard from '@/components/OnBoard.vue'
import ModeToolbar from '@/experimental/ModeToolbar'
@@ -110,6 +116,7 @@ export default {
clientset: false,
listview: false,
offline: false,
+ uploadready: false,
}
},
computed: {
@@ -157,6 +164,12 @@ export default {
this.elementHeight = offsetHeight
},
+ uploadAdded() {
+ //
+ console.log('step one')
+ this.uploadready = !this.uploadready
+ },
+
clientAdded() {
this.clientset = !this.clientset
},
@@ -187,6 +200,7 @@ export default {
ConnectionsLayer,
OnBoard,
OffLine,
+ UploadLayer,
},
}
</script>
--
GitLab