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

User bearbeiten fix

Browse Source
This commit is contained in:
Georg Reisinger 2019-03-24 16:26:02 +01:00
parent 187f81842e
commit d06c57701b
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,12 +25,15 @@ var vue = new Vue({
dataPic: '', dataPic: '',
image: '', image: '',
idToken: '', idToken: '',
mid: '' mid: '',
showUploadButtons: ''
}, },
methods: { methods: {
fertig(){ fertig(){
this.dbUserUpdate(this.idToken, name, this.dataPic, this.mid); this.dbUserUpdate(this.idToken, name, this.image, this.mid);
this.image = '';
this.startGetUser();
}, },
updateUser(){ updateUser(){
console.log("updateuser") console.log("updateuser")
@ -47,20 +50,18 @@ var vue = new Vue({
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;
vm.image = '';
}) })
.catch(err => { .catch(err => {
console.error("Msg Error: ", err); console.error("Msg Error: ", err);
vm.idToken = idToken; vm.idToken = idToken;
vm.mid = ""; vm.mid = "";
vm.image = '';
}) })
}).catch(function (error) { }).catch(function (error) {
console.error("Get id token client error: ", error) console.error("Get id token client error: ", error)
}); });
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)
@ -119,6 +120,7 @@ var vue = new Vue({
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;
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) {
@ -143,7 +145,6 @@ var vue = new Vue({
} }
console.log("download Url", downloadURL) console.log("download Url", downloadURL)
vm.image = downloadURL; vm.image = downloadURL;
vm.dataPic = downloadURL;
vm.updateUser(); vm.updateUser();
}); });
}, },
@ -171,6 +172,7 @@ var vue = new Vue({
reader.onload = (e) => { reader.onload = (e) => {
vm.dataPic = e.target.result; vm.dataPic = e.target.result;
vm.image = e.target.result; vm.image = e.target.result;
this.showUploadButtons = 'true';
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}, },

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

@ -18,6 +18,7 @@
<body> <body>
<div id="vue-app"> <div id="vue-app">
<!-- Square card --> <!-- Square card -->
<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>
@ -25,8 +26,7 @@
<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="!image"> <div v-if="!showUploadButtons">
<h2>Select an image</h2>
<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
@ -44,7 +44,7 @@
Image: {{this.image}}<br> DataPic Image: {{this.image}}<br> DataPic
{{this.dataPic}} {{this.dataPic}}
</center>
</div> </div>
<style lang="scss"> <style lang="scss">
.demo-card-square.mdl-card { .demo-card-square.mdl-card {