From 4436a1e51903ba4318968529417a5f903305e5cc Mon Sep 17 00:00:00 2001 From: gma Date: Mon, 28 Mar 2022 08:55:37 -0400 Subject: [PATCH] Update browser: update discord link --- browser/src/assets/css/main.css | 5 +- browser/src/components/Home.vue | 118 ++++++++++++++++++++----- browser/src/components/shareDialog.vue | 19 ++-- browser/src/views/minio/index.vue | 13 ++- 4 files changed, 128 insertions(+), 27 deletions(-) diff --git a/browser/src/assets/css/main.css b/browser/src/assets/css/main.css index d5a3eb0640af0..9f446f064df62 100644 --- a/browser/src/assets/css/main.css +++ b/browser/src/assets/css/main.css @@ -92,7 +92,7 @@ a { } .wrapper{ - width: 16rem; + width: 16.6rem; max-width: 100%; margin: auto; overflow: hidden; @@ -105,6 +105,9 @@ body, .wrapper { font-size: 110px; } +.wrapper{ + width: 16.4rem; +} } @media screen and (max-width:1600px){ diff --git a/browser/src/components/Home.vue b/browser/src/components/Home.vue index bf2b479dac346..916959ab1857e 100644 --- a/browser/src/components/Home.vue +++ b/browser/src/components/Home.vue @@ -30,13 +30,13 @@
© 2022 FilSwan Canada @@ -71,12 +71,7 @@
-
- -
- -
-
+
@@ -148,13 +143,15 @@ export default { writable: true }, fileList: [], + fileListIndexNow: 0, actionUrl: '', prefixData: '', homeClick: false, addArr: [], progressArr: { ot: 0, - oloaded: 0 + oloaded: 0, + percentage_new: 0, }, percentage_new: 0, drawer: false, @@ -429,8 +426,15 @@ export default { // console.log('httpRequest', file); }, onChange(file, fileList) { - let _this = this - // console.log('onChange', file, fileList); + let _this = this + // console.log('onChange', file, fileList, fileList.indexOf(fileList.filter(d=>d.name == file.name)[0])); + _this.fileListIndexNow += 1 + let indexNow = _this.fileListIndexNow + let progressArr = { + ot: 0, + oloaded: 0, + percentage_new: 0 + } let regexp = /[#\\?]/ if(regexp.test(file.name)){ _this.$message.error('The filename cannot contain any of the following characters # ? \\'); @@ -460,7 +464,35 @@ export default { let postUrl = _this.data_api + '/minio/upload/' + _this.currentBucket + '/' + prefix + file.name let formData = new FormData(); //Create Empty - document.getElementById("progressBar01").value = 0 + var evs = {}; + evs.indexNow = document.createElement('div'); + var div1 = document.createElement('div'); + var progress = document.createElement('progress'); + var span = document.createElement('span'); + var span1 = document.createElement('span1'); + evs.indexNow.id= "div" + indexNow + evs.indexNow.className= "div" + evs.indexNow.style.width = '100%' + evs.indexNow.style.margin = '0.1rem 0.2rem' + + div1.id = 'speed' + indexNow + div1.className = 'speed' + + progress.id = 'progressBar0' + indexNow + progress.value = 0 + progress.max = 100 + progress.style.width = '100%' + + span.id= "time" + indexNow + span1.id= "percentage" + indexNow + + document.getElementById('progressStyle').appendChild(evs.indexNow); + document.getElementById('div' + indexNow).appendChild(progress); + document.getElementById('div' + indexNow).appendChild(div1); + document.getElementById('speed' + indexNow).appendChild(span); + document.getElementById('speed' + indexNow).appendChild(span1); + + // document.getElementById("progressBar01").value = 0 let xhr xhr = new XMLHttpRequest() xhr.open("PUT", postUrl, true) @@ -522,11 +554,53 @@ export default { //xhr.send(file.raw) } - xhr.upload.onprogress = _this.progressFunction;//Implementation of upload progress call method + // xhr.upload.onprogress = _this.progressFunction;//Implementation of upload progress call method + xhr.upload.onprogress = function(evt){ + let progressBar = document.getElementById("progressBar0"+indexNow); + let percentageDiv = document.getElementById("percentage"+indexNow); + if (evt.lengthComputable) {// + progressBar.max = evt.total; + progressBar.value = evt.loaded; + progressArr.percentage_new = Math.round(evt.loaded / evt.total * 100); + percentageDiv.innerHTML = "(" + Math.round(evt.loaded / evt.total * 100) + "%)"; + } + + let time = document.getElementById("time"+indexNow); + let nt = new Date().getTime();//Get current time + var pertime = (nt - progressArr.ot)/1000; //Calculate the time difference from the last time this method was called to the present, unit: s + progressArr.ot = new Date().getTime(); //Reassign time for next calculation + + var perload = evt.loaded - progressArr.oloaded; //Calculate the file size uploaded by this segment, unit B + progressArr.oloaded = evt.loaded;//Reassign the uploaded file size, calculated with the following times + + //Upload speed calculation + var speed = perload/pertime;//unit b/s + var bspeed = speed; + var units = 'b/s'; //unit + if(speed/1024>1){ + speed = speed/1024; + units = 'k/s'; + } + if(speed/1024>1){ + speed = speed/1024; + units = 'M/s'; + } + speed = speed.toFixed(1); + //Remaining time + var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1); + time.innerHTML = speed+units; + if(bspeed==0) + time.innerHTML = 'Upload cancelled'; + if(!resttime || resttime <= 0){ + //Notification.closeAll() + document.getElementById('progressStyle').removeChild(evs.indexNow) + return true + } + };//Implementation of upload progress call method xhr.upload.onloadstart = function(){//Upload start execution method - _this.progressArr.ot = new Date().getTime(); //Set upload start time - _this.progressArr.oloaded = 0;//Set the file size to 0 when uploading starts - _this.percentage_new = 0 + progressArr.ot = new Date().getTime(); //Set upload start time + progressArr.oloaded = 0;//Set the file size to 0 when uploading starts + progressArr.percentage_new = 0 _this.drawer = true }; xhr.send(file.raw) @@ -582,6 +656,7 @@ export default { let _this = this _this.getData() localStorage.removeItem('addrWeb') + console.log('update time: 2022-03-25') }, }; @@ -773,10 +848,13 @@ export default { background: #00b7ff none repeat scroll 0% 0%; font-size: 14px; color: #fff; - padding: 0.2rem 0.4rem; + // padding: 0.2rem 0.4rem; width: 360px; display: flex; flex-wrap: wrap; + div{ + margin: 0.1rem 0.2rem; + } .el-progress /deep/{ width: 100%; .el-progress-bar{ @@ -795,7 +873,7 @@ export default { justify-content: center; align-items: center; width: 100%; - margin: 0.2rem 0 0; + margin: 0; } } } diff --git a/browser/src/components/shareDialog.vue b/browser/src/components/shareDialog.vue index 3bc43cfdf2a29..2a7b68832bb9d 100644 --- a/browser/src/components/shareDialog.vue +++ b/browser/src/components/shareDialog.vue @@ -44,7 +44,8 @@ Send + :disabled="ruleForm.duration_tip || ruleForm.request_status" + :style="{'opacity':ruleForm.duration_tip || ruleForm.request_status?'0.3':'1'}">Send

Backup to Filecoin

@@ -235,7 +236,8 @@ export default { dealCID: '', loadSign: true, page: 0, - total: 1 + total: 1, + request_status: false }, rules: { minerId: [ @@ -362,9 +364,13 @@ export default { if(val.indexOf('.') > -1){ let array = val.split('.') array[0] = array[0]>0 ? array[0].replace(/\b(0+)/gi,"") : '0' + if(!array[1]) { + this.ruleForm.price = array[0] + return false + } this.ruleForm.price = array[0] + '.' + array[1] }else{ - this.ruleForm.price = val.replace(/\b(0+)/gi,"") + this.ruleForm.price = val > 0 ? val.replace(/\b(0+)/gi,"") : '0' } this.ruleForm.price_tip = false }else if(type == 2){ @@ -503,9 +509,10 @@ export default { "Price": _this.ruleForm.price, "Duration": String(_this.ruleForm.duration.replace(/[^\d.]/g,'')*24*60*2) //（The number of days entered by the user on the UI needs to be converted into epoch to the backend. For example, 10 days is 10*24*60*2） } + _this.ruleForm.request_status = true axios.post(postUrl, minioDeal, {headers: { 'Authorization':"Bearer "+ _this.$store.getters.accessToken - }}).then((response) => { + }}).then(async (response) => { let json = response.data if (json.status == 'success') { _this.ruleForm.dealCID = json.data.dealCid @@ -515,12 +522,14 @@ export default { }); }else{ _this.$message.error(json.message); - return false } _this.loadShare = false + await _this.timeout(5000) + _this.ruleForm.request_status = false }).catch(function (error) { console.log(error); _this.loadShare = false + _this.ruleForm.request_status = false }); } else { diff --git a/browser/src/views/minio/index.vue b/browser/src/views/minio/index.vue index 8c434b362c39f..3b7f133746aad 100644 --- a/browser/src/views/minio/index.vue +++ b/browser/src/views/minio/index.vue @@ -134,7 +134,13 @@ - + + + @@ -478,6 +484,11 @@ export default { if(item.data){ item.data.visible = false item.data.visibleDataCid = false + item.data.duration_time = + item.data.duration? + Moment(new Date(((parseInt(item.data.duration)*30 * 1000 + (item.data.timeStamp/1000))))).format("YYYY-MM-DD HH:mm:ss") + : + '-' item.data.timeStamp = Moment(new Date(item.data.timeStamp/1000)).format('YYYY-MM-DD HH:mm:ss') } })