diff options
| -rw-r--r-- | client/src/components/Header.vue | 17 | ||||
| -rw-r--r-- | client/src/main.js | 4 | ||||
| -rw-r--r-- | client/src/router/index.js | 16 | ||||
| -rw-r--r-- | client/src/views/CreateSmiles.vue | 141 | ||||
| -rw-r--r-- | client/src/views/Home.vue | 4 | ||||
| -rw-r--r-- | client/src/views/ManageSmiles.vue | 96 | ||||
| -rw-r--r-- | client/src/views/NewSmile.vue | 81 | ||||
| -rw-r--r-- | client/src/views/UploadSmile.vue | 7 |
8 files changed, 262 insertions, 104 deletions
diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue index 8ab29b2..2eedc83 100644 --- a/client/src/components/Header.vue +++ b/client/src/components/Header.vue @@ -14,15 +14,20 @@ export default { return { items: [ { - label:'Home', - icon:'pi pi-fw pi-home', - to:'/' + label: 'Home', + icon: 'pi pi-fw pi-home', + to: '/' }, { - label:'New Smile', - icon:'pi pi-fw pi-user-plus', - to:'/new' + label: 'Create Smiles', + icon: 'pi pi-fw pi-user-plus', + to: '/create' }, + { + label: 'huh', + icon: 'pi pi-fw pi-user-plus', + to: '/5a1PNZAMafXGGEFU17xcRX3bx6wyebeK/lNtEBCOd5yLlXT5enRQoh4ai4q3vcg7F' + } ] } } diff --git a/client/src/main.js b/client/src/main.js index 76a71b3..03f0e65 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -11,6 +11,8 @@ import Button from 'primevue/button'; import Card from 'primevue/card'; import Toast from 'primevue/toast'; import ProgressBar from 'primevue/progressbar'; +import Message from 'primevue/message'; +import FileUpload from 'primevue/fileupload'; import 'primevue/resources/themes/lara-dark-blue/theme.css'; import 'primevue/resources/primevue.min.css'; @@ -28,6 +30,8 @@ app.component('InputText', InputText); app.component('Button', Button); app.component('Card', Card); app.component('Toast', Toast); +app.component('Message', Message); app.component('ProgressBar', ProgressBar); +app.component('FileUpload', FileUpload); app.mount('#app'); diff --git a/client/src/router/index.js b/client/src/router/index.js index 123941b..a2f52ac 100644 --- a/client/src/router/index.js +++ b/client/src/router/index.js @@ -1,9 +1,9 @@ import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; -import NewSmile from '../views/NewSmile.vue'; +import CreateSmiles from '../views/CreateSmiles.vue'; import GetSmile from '../views/GetSmile.vue'; -import UploadSmile from '../views/UploadSmile.vue'; +import ManageSmiles from '../views/ManageSmiles.vue'; const routes = [ { @@ -12,23 +12,23 @@ const routes = [ component: Home }, { - path: '/new', - name: 'New Smile', + path: '/create', + name: 'CreateSmiles', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. // component: () => import(/* webpackChunkName: "about" */ '../views/NewSmile.vue') - component: NewSmile + component: CreateSmiles }, { path: '/:id', - name: 'Get Smile', + name: 'GetSmile', component: GetSmile }, { path: '/:id/:auth', - name: 'Upload Smile', - component: UploadSmile + name: 'ManageSmiles', + component: ManageSmiles } ]; diff --git a/client/src/views/CreateSmiles.vue b/client/src/views/CreateSmiles.vue new file mode 100644 index 0000000..7c285f0 --- /dev/null +++ b/client/src/views/CreateSmiles.vue @@ -0,0 +1,141 @@ +<template> +<div class="new-smile"> + <p id="subtitle">Create Smiles :)</p> + + <div class="card"> + <Message v-if="smileCreated" severity="success">Smile Created.</Message> + <div class="grid"> + <div class="col-12 md:col-6"> + <div v-if="smileCreated"> + <ul> + <li>Click to copy the links.</li> + <li>Share the <strong>public</strong> link with your friends.</li> + <li>Keep the <strong>private</strong> link for yourself.</li> + </ul> + </div> + <div v-else> + <p> + Filling this form will create a new "Smile Collection" for + you, you can add your smiles to the collection using + the <strong>private</strong> and your friends can view them + using the <strong>public</strong> link. + </p> + </div> + </div> + <div class="col-12 md:col-6 flex align-items-center + justify-content-center"> + <div v-if="smileCreated" class="smile-links"> + <div class="grid"> + <div class="col-12 lg:col-6"> + <h5>Public</h5> + <span class="p-input-icon-left"> + <i class="pi pi-share-alt" /> + <InputText @click="copyPublic" v-model="id" + type="text" placeholder="ID" readonly /> + </span> + </div> + <div class="col-12 lg:col-6"> + <h5>Private</h5> + <span class="p-input-icon-left"> + <i class="pi pi-lock" /> + <InputText @click="copyPrivate" v-model="auth" + type="text" placeholder="Auth" readonly /> + </span> + </div> + </div> + </div> + <div v-else class="p-inputgroup"> + <InputText v-model="name" placeholder="Name" /> + <Button @click="createSmile" + icon="pi pi-user-plus" label="Create" + class="p-button-success" /> + </div> + </div> + </div> + <div v-if="smileCreated" style="text-align: center;"> + <router-link :to="{ name: `ManageSmiles`, params: { id: `${id}`, auth: `${auth}` } }"> + <Button label="Upload Smiles" icon="pi pi-upload" /> + </router-link> + </div> + <ProgressBar v-if="showProgress" mode="indeterminate" style="height: .4em;" /> + </div> + + <Toast /> +</div> +</template> + +<script> +export default { + data() { + return { + name: '', + showProgress: false, + id: '', + auth: '', + } + }, + methods: { + copyPublic() { + navigator.clipboard.writeText(this.publicLink()); + this.$toast.add({severity: 'success', icon: 'pi-user-plus', + summary: 'Copied Public link to clipboard', + life: 2000}); + }, + copyPrivate() { + navigator.clipboard.writeText(this.privateLink()); + this.$toast.add({severity: 'success', + summary: 'Copied Private link to clipboard', + life: 2000}); + }, + publicLink() { + return window.location.href.replace('/create', '') + '/' + this.id; + }, + privateLink() { + return window.location.href.replace('/create', '') + '/' + this.id + '/' + this.auth; + }, + createSmile() { + if (this.name === '') { + this.$toast.add({severity: 'warn', summary: 'Invalid Name', + detail: 'Empty', life: 2000}); + return; + } + + const data = { name: this.name }; + const toast = this.$toast; + + this.showProgress = true; + fetch('http://localhost:9090/create', { + method: 'POST', + cache: 'no-cache', + headers: { 'Content-Type': 'application/json' }, + referrerPolicy: 'no-referrer', + body: JSON.stringify(data) + }).then(response => { + if (!response.ok) + throw new Error('HTTP error, status = ' + response.status); + return response.json(); + }).then(res => { + this.id = res.id; + this.auth = res.auth; + }).catch(function(error) { + console.log(error) + toast.add({severity: 'error', summary: 'Service error', detail: error}); + }).finally(() => { + this.showProgress = false; + }); + // <<<< -- fat arrows mess with polymode formatting. + } + }, + computed: { + smileCreated() { + return this.id.length > 0 && this.auth.length > 0; + }, + } +} +</script> + +<style scoped> +.new-smile li { + line-height: 1.6; +} +</style> diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue index 880c380..50952b0 100644 --- a/client/src/views/Home.vue +++ b/client/src/views/Home.vue @@ -19,8 +19,8 @@ </div> <div class="col-12 md:col-4 lg:col-6 flex align-items-center justify-content-center"> - <router-link to="/new"> - <Button label="New Smile" icon="pi pi-user-plus" iconPos="left" /> + <router-link to="/create"> + <Button label="Create Smiles" icon="pi pi-user-plus" /> </router-link> </div> </div> diff --git a/client/src/views/ManageSmiles.vue b/client/src/views/ManageSmiles.vue new file mode 100644 index 0000000..9a535b7 --- /dev/null +++ b/client/src/views/ManageSmiles.vue @@ -0,0 +1,96 @@ +<template> +<div class="manage-smile"> + <p id="subtitle">Manage Smiles :)</p> + <ProgressBar v-if="showLoading" mode="indeterminate" style="height: .4em;" /> + + <div v-if="!verified && !showLoading" style="text-align: center;"> + <Button @click="verify" label="Try Again" + class="p-button-outlined p-button-info p-button-lg" icon="pi pi-refresh" /> + </div> + + <div v-if="verified" class="card"> + <div class="grid"> + <div class="col-12 md:col-6"> + <div class="col-12"> + <span class="p-input-icon-left"> + <i class="pi pi-user" /> + <InputText v-model="name" type="text" readonly /> + </span> + </div> + <div class="col-12"> + <span class="p-input-icon-left"> + <i class="pi pi-share-alt" /> + <InputText @click="copyPublic" v-model="id" type="text" readonly /> + </span> + </div> + </div> + <div class="col-12 md:col-6"> + <FileUpload name="demo[]" url="/upload" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000"> + <template #empty> + <p>Drag and drop files to here to upload.</p> + </template> + </FileUpload> + </div> + </div> + </div> + + <Toast /> +</div> +</template> + +<script> +export default { + data() { + return { + name: '', + verified: false, + showLoading: true, + id: this.$route.params.id, + auth: this.$route.params.auth, + } + }, + methods: { + copyPublic() { + navigator.clipboard.writeText(this.publicLink()); + this.$toast.add({severity: 'success', icon: 'pi-user-plus', + summary: 'Copied Public link to clipboard', + life: 2000}); + }, + publicLink() { + let link = window.location.href.split('/').slice(0, -2); + link.push(this.id); + return link.join('/'); + }, + verify() { + const data = { id: this.id, auth: this.auth }; + const toast = this.$toast; + + this.showLoading = true; + fetch('http://localhost:9090/verify', { + method: 'POST', + cache: 'no-cache', + headers: { 'Content-Type': 'application/json' }, + referrerPolicy: 'no-referrer', + body: JSON.stringify(data) + }).then(response => { + if (!response.ok) + throw new Error('HTTP error, status = ' + response.status); + return response.json(); + }).then(res => { + this.name = res.name; + console.log(res); + this.verified = true; + }).catch(error => { + console.log(error) + toast.add({severity: 'error', summary: 'Service error', detail: error}); + }).finally(() => { + this.showLoading = false; + // <<<< -- fat arrows mess with polymode formatting. + }); + }, + }, + beforeMount() { + this.verify(); + }, +} +</script> diff --git a/client/src/views/NewSmile.vue b/client/src/views/NewSmile.vue deleted file mode 100644 index f721d50..0000000 --- a/client/src/views/NewSmile.vue +++ /dev/null @@ -1,81 +0,0 @@ -<template> -<div class="new-smile"> - <p id="subtitle">Create a new Smile :)</p> - - <div class="card"> - <div class="grid"> - <div class="col-12 md:col-6"> - <p> - Filling this form will create a new "Smile Collection" for - you, you can add your smiles to the collection using - the <strong>private</strong> and your friends can view them - using the <strong>public</strong> link. - </p> - </div> - <div class="col-12 md:col-6 flex align-items-center justify-content-center"> - <div class="p-inputgroup"> - <InputText v-model="name" placeholder="Name" /> - <Button @click="createSmile" - icon="pi pi-user-plus" label="Create" class="p-button-success" /> - </div> - </div> - </div> - <ProgressBar v-if="showProgress" mode="indeterminate" style="height: .4em;" /> - </div> - - <Toast /> -</div> -</template> - -<script> -export default { - data() { - return { - name: '', - showProgress: false - } - }, - methods: { - createSmile() { - if (this.name === '') { - this.$toast.add({severity:'warn', summary: 'Invalid Name', - detail:'Empty', life: 2000}); - return; - } - this.showProgress = true; - console.log('Name', this.name); - - // const options = { - // method: 'POST', - // body: JSON.stringify( { - // param1: "d", - // param2: "d" - // } ) - // }; - - fetch('flowers.jpg') - .then(function(response) { - if (!response.ok) { - throw new Error('HTTP error, status = ' + response.status); - } - console.log(response); - return response.blob(); - - }) - .then(function(myBlob) { - console.log(myBlob) - }) - .catch(function(error) { - console.log(error) - }); - - // fetch( '/path/', options ) - // .then( response => response.json() ) - // .then( response => { - // console.log(response); - // // Do something with response. - // } ); - } - } - } -</script> diff --git a/client/src/views/UploadSmile.vue b/client/src/views/UploadSmile.vue deleted file mode 100644 index 67e1dd9..0000000 --- a/client/src/views/UploadSmile.vue +++ /dev/null @@ -1,7 +0,0 @@ -<template> -<div class="upload-smile"> - <p id="subtitle">Upload a Smile :)</p> - - <Toast /> -</div> -</template> |