dergeorg/SmartShopper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

User bearbeiten crop

Browse Source
This commit is contained in:
Georg Reisinger 2019-03-24 16:53:09 +01:00
parent d06c57701b
commit 8d8560660a
2 changed files with 184 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
express-server/public/javascripts/user.js
View File

@ -30,12 +30,13 @@ var vue = new Vue({
}, },
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;
@ -63,20 +64,20 @@ var vue = new Vue({
}); });
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,
@ -103,7 +104,7 @@ var vue = new Vue({
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) {
@ -115,15 +116,17 @@ var vue = new Vue({
} }
}); });
}, },
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', {
contentType: 'image/jpeg'
});
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed' uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
function(snapshot) { function (snapshot) {
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded // 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; var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done'); console.log('Upload is ' + progress + '% done');
@ -135,23 +138,25 @@ var vue = new Vue({
console.log('Upload is running'); console.log('Upload is running');
break; break;
} }
}, function(error) { },
function (error) {
console.log(error); console.log(error);
}, function() { },
function () {
// Upload completed successfully, now we can get the download URL // Upload completed successfully, now we can get the download URL
var downloadURL = uploadTask.snapshot.downloadURL; var downloadURL = uploadTask.snapshot.downloadURL;
if(!downloadURL){ if (!downloadURL) {
downloadURL = 'https://firebasestorage.googleapis.com/v0/b/test-667ca.appspot.com/o/'+uid+'?alt=media&token=7e5f49c8-0e1f-4073-be30-5feaa691a770'; 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) console.log("download Url", downloadURL)
vm.image = downloadURL; vm.image = downloadURL;
vm.updateUser(); 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,13 +175,42 @@ 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

38
express-server/views/user.ejs
View File

@ -1,26 +1,28 @@
<!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">
@ -41,9 +43,6 @@
</div> </div>
</div> </div>
Image: {{this.image}}<br> DataPic
{{this.dataPic}}
</center> </center>
</div> </div>
<style lang="scss"> <style lang="scss">
@ -51,9 +50,11 @@
width: 320px; width: 320px;
height: 320px; height: 320px;
} }
.demo-card-square > .mdl-card__title {
.demo-card-square>.mdl-card__title {
color: #fff; color: #fff;
} }
.fotochooserimg { .fotochooserimg {
width: 30%; width: 30%;
margin: auto; margin: auto;
@ -64,4 +65,5 @@
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script> <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="javascripts/user.js"></script> <script src="javascripts/user.js"></script>
</body> </body>
</html> </html>