<template> <div id="BackedupFiles"> <!-- breadcrumb --> <nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb"> <ol class="list-none p-0 inline-flex"> <li class="flex items-center text-blue-500"> <a href="#" class="text-gray-700">Files</a> <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg> </li> <li class="flex items-center"> <a href="#" class="text-gray-600">Backup</a> </li> </ol> </nav> <!-- breadcrumb end --> <div class="flex flex-wrap -mx-3"> <div class="w-full xl:w-1/2 px-3"> <p class="text-xl font-semibold mb-4">Already Backed Up Files</p> <div class="px-10"> <ul> <li v-for="filesBackedUp in filesBackedUp" :key="filesBackedUp"> <div class="did text-lg">{{ filesBackedUp }} </div> <hr> </li> </ul> </div> </div> <div class="w-full xl:w-1/2 px-3"> <p class="text-xl font-semibold mb-4">Pending Files For Back Up</p> <p class="text-sm mb-4">Maximum allowed file size is 1 MB</p> <div class="w-full xl:w-1/2 px-3"> <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/> <span class="p-40" v-if="showUpdating"> <Progress strokeColor="#516091" value="87"> <template v-slot:footer> <b>Backing up Selected File, Please wait..</b> </template> </Progress> </span> <p class="text-gray-700 font-semibold text-xl center">{{updateResponse}}</p> <div v-if="!showUpdating" class="w-full xl:w-1/2 px-3 py-10"> <button v-on:click="launchFileContract(), fetchingStats = true" class="center bg-green-500 hover:bg-green-600 focus:outline-none rounded-lg px-6 py-2 text-white font-semibold shadow">Backup File</button> </div> </div> </div> </div> </div> </template> <script> import axios from 'axios' import Progress from 'easy-circular-progress' export default { name: 'BackedupFiles', data() { return { showUpdating: false, updateResponse: '', filesBackedUp: [], newFile: {}, } }, components: { Progress }, methods:{ handleFileUpload(){ this.newFile = this.$refs.file.files[0]; }, launchFileContract: function () { this.showUpdating = true this.updateResponse = '' const formData = new FormData() formData.append('file', this.newFile) console.log("loading add backup") axios.post('http://localhost:1898/addBackup', formData,{ headers: { 'Content-Type': 'multipart/form-data' } }) .then((response) => { console.log("completed add backup") this.showUpdating = false this.updateResponse = response.data.data this.newFile = {} this.backedUp() }) .catch(function (error) { console.log(error); }); }, backedUp: function () { console.log("loading getDashboardData") axios.get('http://localhost:1898/getBackupFiles') .then((response) => { console.log("GETTING BACKED UP FILES") this.filesBackedUp = response.data.data console.log(this.filesBackedUp) }) .catch(function (error) { console.log(error); }); }, checkStatus: function () { console.log("loading DID exists") axios.get('http://localhost:1898/checkDidExists') .then((response) => { console.log(response); if(response.data.data.payload == 'Failure'){ console.log("moving to create DID") this.$router.push({path: '/create-new-DID'}) return; } else { console.log("loading DID verified") axios.get('http://localhost:1898/checkDidVerified') .then((response) => { this.isVerified = response.data.data.payload console.log(response); if(response.data.data.payload == 'Failure'){ console.log("moving to create DID [check]") this.$router.push({path: '/verification'}) return; } }) .catch(function (error) { console.log(error); this.$router.push({path: '/verification'}) return; }); } }) .catch(function (error) { console.log(error); this.$router.push({path: '/create-new-DID'}) return; }); axios.get('http://localhost:1898/checkRole') .then((response) => { console.log(response); // this.myRole = response.data.data.payload }) .catch(function (error) { console.log(error); // this.$router.push({path: '/create-new-DID'}) }); }, }, beforeMount() { this.backedUp() this.checkStatus() } } </script>