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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 = '';

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

@@ -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>