diff --git a/express-server/public/javascripts/user.js b/express-server/public/javascripts/user.js index acc20fff..adf34b29 100644 --- a/express-server/public/javascripts/user.js +++ b/express-server/public/javascripts/user.js @@ -22,61 +22,62 @@ var vue = new Vue({ getpic: '' }, data: { - dataPic: '', - image: '', - idToken: '', - mid: '', - showUploadButtons: '' - + dataPic: '', + image: '', + idToken: '', + mid: '', + showUploadButtons: '' + }, methods: { - fertig(){ + fertig() { + console.log("IMAGE befor dbuserupdate: ", this.image) this.dbUserUpdate(this.idToken, name, this.image, this.mid); this.image = ''; this.startGetUser(); }, - updateUser(){ + updateUser() { console.log("updateuser") var currentUser = firebase.auth().currentUser; var vm = this; - currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) { + currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) { console.log("Vor Replace"); msg.requestPermission() - .then(function () { + .then(function () { - return msg.getToken(); - }) - .then(token => { - console.log("Zugriff auf msg", token, this.name, vm.dataPic); - vm.idToken = idToken; - vm.mid = token; - }) - .catch(err => { - console.error("Msg Error: ", err); - vm.idToken = idToken; - vm.mid = ""; - }) - - - }).catch(function (error) { + return msg.getToken(); + }) + .then(token => { + console.log("Zugriff auf msg", token, this.name, vm.dataPic); + vm.idToken = idToken; + vm.mid = token; + }) + .catch(err => { + console.error("Msg Error: ", err); + vm.idToken = idToken; + vm.mid = ""; + }) + + + }).catch(function (error) { console.error("Get id token client error: ", error) - }); - this.showUploadButtons = ''; + }); + this.showUploadButtons = ''; }, - dbUserUpdate(token, name, pic, mid){ - console.log("dbuserupdate: ", token, "\nname", name,"\npic: ", pic, "\nMId: ", mid) + dbUserUpdate(token, name, pic, mid) { + console.log("dbuserupdate: ", token, "\nname", name, "\npic: ", pic, "\nMId: ", mid) var vm = this; var user = firebase.auth().currentUser; user.updateProfile({ displayName: name, photoURL: "https://example.com/jane-q-user/profile.jpg" - }).then(async function() { - - }).catch(function(error) { - console.error(error) - }); + }).then(async function () { - console.log('Pic for upload: ', vm.dataPic) + }).catch(function (error) { + console.error(error) + }); + + console.log('Pic for upload: ', vm.image) // let req = { // url: '/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid, @@ -90,68 +91,72 @@ var vue = new Vue({ // this.handleEditError(response) // }) - - // axios.post('/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid).then(result => { - // console.log("POST result: ", result.data) - // vm.startGetUser(); - // }).catch(err => console.error("Axios error: ", err)); - - $.ajax({ - type: "POST", - url: '/userbearbeiten', - data: { - token: vm.idToken, - mid: vm.mid, - pic: vm.dataPic, - name: name - }, - success(result) { - console.log("POST result: ", result) - vm.startGetUser(); - }, - error(err) { - console.error("Error: " + err); - } - }); + // axios.post('/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid).then(result => { + // console.log("POST result: ", result.data) + // vm.startGetUser(); + // }).catch(err => console.error("Axios error: ", err)); + + + $.ajax({ + type: "POST", + url: '/userbearbeiten', + data: { + token: vm.idToken, + mid: vm.mid, + pic: vm.image, + name: name + }, + success(result) { + console.log("POST result: ", result) + vm.startGetUser(); + }, + error(err) { + console.error("Error: " + err); + } + }); }, - fotoChoose(){ + fotoChoose() { console.log("fotochoose") var vm = this; var currentUser = firebase.auth().currentUser; var uid = currentUser.uid; this.dataPic = this.image; - var uploadTask = storage.ref('/').child(uid).putString(this.image, 'data_url', {contentType:'image/jpeg'}); - uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed' - function(snapshot) { - // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded - var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; - console.log('Upload is ' + progress + '% done'); - switch (snapshot.state) { - case firebase.storage.TaskState.PAUSED: // or 'paused' - console.log('Upload is paused'); - break; - case firebase.storage.TaskState.RUNNING: // or 'running' - console.log('Upload is running'); - break; - } - }, function(error) { - console.log(error); - }, function() { - // Upload completed successfully, now we can get the download URL - var downloadURL = uploadTask.snapshot.downloadURL; - if(!downloadURL){ - downloadURL = 'https://firebasestorage.googleapis.com/v0/b/test-667ca.appspot.com/o/'+uid+'?alt=media&token=7e5f49c8-0e1f-4073-be30-5feaa691a770'; - } - console.log("download Url", downloadURL) - vm.image = downloadURL; - vm.updateUser(); + var uploadTask = storage.ref('/').child(uid).putString(this.image, 'data_url', { + contentType: 'image/jpeg' }); + uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed' + function (snapshot) { + // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded + var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; + console.log('Upload is ' + progress + '% done'); + switch (snapshot.state) { + case firebase.storage.TaskState.PAUSED: // or 'paused' + console.log('Upload is paused'); + break; + case firebase.storage.TaskState.RUNNING: // or 'running' + console.log('Upload is running'); + break; + } + }, + function (error) { + console.log(error); + }, + function () { + // Upload completed successfully, now we can get the download URL + var downloadURL = uploadTask.snapshot.downloadURL; + if (!downloadURL) { + downloadURL = 'https://firebasestorage.googleapis.com/v0/b/test-667ca.appspot.com/o/' + uid + '?alt=media&token=7e5f49c8-0e1f-4073-be30-5feaa691a770'; + } + console.log("download Url", downloadURL) + vm.image = downloadURL; + vm.updateUser(); + }); }, - getPicUrl(){ + getPicUrl() { return this.picUrl; }, - getUser(uid){ + getUser(uid) { axios.get('/getUser/' + uid).then(result => { name = result.data[0].name; this.dataPic = result.data[0].picture + ""; @@ -168,23 +173,52 @@ var vue = new Vue({ var image = new Image(); var reader = new FileReader(); var vm = this; - + reader.onload = (e) => { - vm.dataPic = e.target.result; - vm.image = e.target.result; - this.showUploadButtons = 'true'; + + var tempImg = new Image(); + tempImg.src = reader.result; + tempImg.onload = function () { + + var MAX_WIDTH = 350; + var MAX_HEIGHT = 350; + var tempW = tempImg.width; + var tempH = tempImg.height; + if (tempW > tempH) { + if (tempW > MAX_WIDTH) { + tempH *= MAX_WIDTH / tempW; + tempW = MAX_WIDTH; + } + } else { + if (tempH > MAX_HEIGHT) { + tempW *= MAX_HEIGHT / tempH; + tempH = MAX_HEIGHT; + } + } + + var canvas = document.createElement('canvas'); + canvas.width = tempW; + canvas.height = tempH; + var ctx = canvas.getContext("2d"); + ctx.drawImage(this, 0, 0, tempW, tempH); + var dataURL = canvas.toDataURL("image/jpeg"); + + vm.dataPic = dataURL; + vm.image = dataURL; + vm.showUploadButtons = 'true'; + } }; reader.readAsDataURL(file); }, - startGetUser(){ - firebase.auth().onAuthStateChanged(user => { + startGetUser() { + firebase.auth().onAuthStateChanged(user => { if (user) { //GetUser this.getUser(user.uid); } else { window.location("/"); } - }); + }); }, removeImage: function (e) { this.image = ''; diff --git a/express-server/views/user.ejs b/express-server/views/user.ejs index eff887bd..729e20f0 100644 --- a/express-server/views/user.ejs +++ b/express-server/views/user.ejs @@ -1,67 +1,69 @@ - + + - - - - - - - - - - - - - Document + + + + + + + + + + + + + User bearbeiten + -
- -
-
- +
+ +
+
+
- +
-
- - -
-
- - -
- -
-
+
+ + +
+
+ + +
- Image: {{this.image}}
DataPic - {{this.dataPic}} +
+
-
- - - + + + + + \ No newline at end of file