User bearbeiten crop
This commit is contained in:
Georg Reisinger
@@ -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 = '';
|
||||
|
||||
Reference in New Issue
Block a user