User bearbeiten crop
This commit is contained in:
Georg Reisinger
parent
d06c57701b
commit
8d8560660a
@ -22,61 +22,62 @@ var vue = new Vue({
|
|||||||
getpic: ''
|
getpic: ''
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
dataPic: '',
|
dataPic: '',
|
||||||
image: '',
|
image: '',
|
||||||
idToken: '',
|
idToken: '',
|
||||||
mid: '',
|
mid: '',
|
||||||
showUploadButtons: ''
|
showUploadButtons: ''
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fertig(){
|
fertig() {
|
||||||
|
console.log("IMAGE befor dbuserupdate: ", this.image)
|
||||||
this.dbUserUpdate(this.idToken, name, this.image, this.mid);
|
this.dbUserUpdate(this.idToken, name, this.image, this.mid);
|
||||||
this.image = '';
|
this.image = '';
|
||||||
this.startGetUser();
|
this.startGetUser();
|
||||||
},
|
},
|
||||||
updateUser(){
|
updateUser() {
|
||||||
console.log("updateuser")
|
console.log("updateuser")
|
||||||
var currentUser = firebase.auth().currentUser;
|
var currentUser = firebase.auth().currentUser;
|
||||||
var vm = this;
|
var vm = this;
|
||||||
currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) {
|
currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) {
|
||||||
console.log("Vor Replace");
|
console.log("Vor Replace");
|
||||||
msg.requestPermission()
|
msg.requestPermission()
|
||||||
.then(function () {
|
.then(function () {
|
||||||
|
|
||||||
return msg.getToken();
|
return msg.getToken();
|
||||||
})
|
})
|
||||||
.then(token => {
|
.then(token => {
|
||||||
console.log("Zugriff auf msg", token, this.name, vm.dataPic);
|
console.log("Zugriff auf msg", token, this.name, vm.dataPic);
|
||||||
vm.idToken = idToken;
|
vm.idToken = idToken;
|
||||||
vm.mid = token;
|
vm.mid = token;
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
console.error("Msg Error: ", err);
|
console.error("Msg Error: ", err);
|
||||||
vm.idToken = idToken;
|
vm.idToken = idToken;
|
||||||
vm.mid = "";
|
vm.mid = "";
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
}).catch(function (error) {
|
}).catch(function (error) {
|
||||||
console.error("Get id token client error: ", error)
|
console.error("Get id token client error: ", error)
|
||||||
});
|
});
|
||||||
this.showUploadButtons = '';
|
this.showUploadButtons = '';
|
||||||
},
|
},
|
||||||
dbUserUpdate(token, name, pic, mid){
|
dbUserUpdate(token, name, pic, mid) {
|
||||||
console.log("dbuserupdate: ", token, "\nname", name,"\npic: ", pic, "\nMId: ", mid)
|
console.log("dbuserupdate: ", token, "\nname", name, "\npic: ", pic, "\nMId: ", mid)
|
||||||
var vm = this;
|
var vm = this;
|
||||||
var user = firebase.auth().currentUser;
|
var user = firebase.auth().currentUser;
|
||||||
user.updateProfile({
|
user.updateProfile({
|
||||||
displayName: name,
|
displayName: name,
|
||||||
photoURL: "https://example.com/jane-q-user/profile.jpg"
|
photoURL: "https://example.com/jane-q-user/profile.jpg"
|
||||||
}).then(async function() {
|
}).then(async function () {
|
||||||
|
|
||||||
}).catch(function(error) {
|
}).catch(function (error) {
|
||||||
console.error(error)
|
console.error(error)
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log('Pic for upload: ', vm.dataPic)
|
console.log('Pic for upload: ', vm.image)
|
||||||
|
|
||||||
// let req = {
|
// let req = {
|
||||||
// url: '/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid,
|
// url: '/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid,
|
||||||
@ -91,67 +92,71 @@ var vue = new Vue({
|
|||||||
// })
|
// })
|
||||||
|
|
||||||
|
|
||||||
// axios.post('/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid).then(result => {
|
// axios.post('/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid).then(result => {
|
||||||
// console.log("POST result: ", result.data)
|
// console.log("POST result: ", result.data)
|
||||||
// vm.startGetUser();
|
// vm.startGetUser();
|
||||||
// }).catch(err => console.error("Axios error: ", err));
|
// }).catch(err => console.error("Axios error: ", err));
|
||||||
|
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "POST",
|
type: "POST",
|
||||||
url: '/userbearbeiten',
|
url: '/userbearbeiten',
|
||||||
data: {
|
data: {
|
||||||
token: vm.idToken,
|
token: vm.idToken,
|
||||||
mid: vm.mid,
|
mid: vm.mid,
|
||||||
pic: vm.dataPic,
|
pic: vm.image,
|
||||||
name: name
|
name: name
|
||||||
},
|
},
|
||||||
success(result) {
|
success(result) {
|
||||||
console.log("POST result: ", result)
|
console.log("POST result: ", result)
|
||||||
vm.startGetUser();
|
vm.startGetUser();
|
||||||
},
|
},
|
||||||
error(err) {
|
error(err) {
|
||||||
console.error("Error: " + err);
|
console.error("Error: " + err);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
fotoChoose(){
|
fotoChoose() {
|
||||||
console.log("fotochoose")
|
console.log("fotochoose")
|
||||||
var vm = this;
|
var vm = this;
|
||||||
var currentUser = firebase.auth().currentUser;
|
var currentUser = firebase.auth().currentUser;
|
||||||
var uid = currentUser.uid;
|
var uid = currentUser.uid;
|
||||||
this.dataPic = this.image;
|
this.dataPic = this.image;
|
||||||
var uploadTask = storage.ref('/').child(uid).putString(this.image, 'data_url', {contentType:'image/jpeg'});
|
var uploadTask = storage.ref('/').child(uid).putString(this.image, 'data_url', {
|
||||||
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
|
contentType: 'image/jpeg'
|
||||||
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();
|
|
||||||
});
|
});
|
||||||
|
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;
|
return this.picUrl;
|
||||||
},
|
},
|
||||||
getUser(uid){
|
getUser(uid) {
|
||||||
axios.get('/getUser/' + uid).then(result => {
|
axios.get('/getUser/' + uid).then(result => {
|
||||||
name = result.data[0].name;
|
name = result.data[0].name;
|
||||||
this.dataPic = result.data[0].picture + "";
|
this.dataPic = result.data[0].picture + "";
|
||||||
@ -170,21 +175,50 @@ var vue = new Vue({
|
|||||||
var vm = this;
|
var vm = this;
|
||||||
|
|
||||||
reader.onload = (e) => {
|
reader.onload = (e) => {
|
||||||
vm.dataPic = e.target.result;
|
|
||||||
vm.image = e.target.result;
|
var tempImg = new Image();
|
||||||
this.showUploadButtons = 'true';
|
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);
|
reader.readAsDataURL(file);
|
||||||
},
|
},
|
||||||
startGetUser(){
|
startGetUser() {
|
||||||
firebase.auth().onAuthStateChanged(user => {
|
firebase.auth().onAuthStateChanged(user => {
|
||||||
if (user) {
|
if (user) {
|
||||||
//GetUser
|
//GetUser
|
||||||
this.getUser(user.uid);
|
this.getUser(user.uid);
|
||||||
} else {
|
} else {
|
||||||
window.location("/");
|
window.location("/");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
removeImage: function (e) {
|
removeImage: function (e) {
|
||||||
this.image = '';
|
this.image = '';
|
||||||
|
|||||||
@ -1,67 +1,69 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="de">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
|
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
|
||||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
|
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-auth.js"></script>
|
||||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-storage.js"></script>
|
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-storage.js"></script>
|
||||||
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-messaging.js"></script>
|
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-messaging.js"></script>
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
|
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
|
||||||
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||||
<title>Document</title>
|
<title>User bearbeiten</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="vue-app">
|
<div id="vue-app">
|
||||||
<!-- Square card -->
|
<!-- Square card -->
|
||||||
<center>
|
<center>
|
||||||
<div class="demo-card-image mdl-card mdl-shadow--2dp">
|
<div class="demo-card-image mdl-card mdl-shadow--2dp">
|
||||||
<img v-bind:src="this.dataPic" width="100%"/>
|
<img v-bind:src="this.dataPic" width="100%" />
|
||||||
<div class="mdl-card__title mdl-card--expand"></div>
|
<div class="mdl-card__title mdl-card--expand"></div>
|
||||||
<div class="mdl-card__actions">
|
<div class="mdl-card__actions">
|
||||||
<label for="nameinput">Name: </label><input type="text" id="nameinput" v-model="name">
|
<label for="nameinput">Name: </label><input type="text" id="nameinput" v-model="name">
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-card__actions mdl-card--border">
|
<div class="mdl-card__actions mdl-card--border">
|
||||||
<div v-if="!showUploadButtons">
|
<div v-if="!showUploadButtons">
|
||||||
<input type="file" @change="onFileChange">
|
<input type="file" @change="onFileChange">
|
||||||
<button @click="fertig" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
<button @click="fertig" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||||
Fertig
|
Fertig
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<button @click="removeImage" class="mdl-button mdl-button--raised mdl-button--accent">Remove image</button>
|
<button @click="removeImage" class="mdl-button mdl-button--raised mdl-button--accent">Remove image</button>
|
||||||
<button @click="fotoChoose" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
<button @click="fotoChoose" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||||
Foto setzten
|
Foto setzten
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
Image: {{this.image}}<br> DataPic
|
|
||||||
{{this.dataPic}}
|
|
||||||
</center>
|
</center>
|
||||||
</div>
|
</div>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.demo-card-square.mdl-card {
|
.demo-card-square.mdl-card {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
height: 320px;
|
height: 320px;
|
||||||
}
|
}
|
||||||
.demo-card-square > .mdl-card__title {
|
|
||||||
color: #fff;
|
.demo-card-square>.mdl-card__title {
|
||||||
}
|
color: #fff;
|
||||||
.fotochooserimg {
|
}
|
||||||
width: 30%;
|
|
||||||
margin: auto;
|
.fotochooserimg {
|
||||||
display: block;
|
width: 30%;
|
||||||
margin-bottom: 10px;
|
margin: auto;
|
||||||
}
|
display: block;
|
||||||
</style>
|
margin-bottom: 10px;
|
||||||
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
|
}
|
||||||
<script src="javascripts/user.js"></script>
|
</style>
|
||||||
|
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
|
||||||
|
<script src="javascripts/user.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user