User bearbeiten fertig
This commit is contained in:
Georg Reisinger
parent
524bf627e8
commit
187f81842e
@ -13,12 +13,26 @@ const stringSimilarity = require('string-similarity');
|
||||
async function updateUser(uid, mid, name, picture, email) {
|
||||
try {
|
||||
await nonQuery('INSERT INTO "User" (username, name, picture, email, message_id) VALUES ($1, $2, $3, $4, $5);', [uid, name, picture, email, mid]);
|
||||
|
||||
return 'done'
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return error
|
||||
}
|
||||
}
|
||||
|
||||
async function realUpdateUser(uid, mid, name, picture, email){
|
||||
console.log("DBCONNECT UPDATE PIC: ", picture)
|
||||
try {
|
||||
await nonQuery('Update "User" set message_id = $1, name = $2, picture = $3, email = $4 WHERE username = $5', [mid, name, picture, email, uid]);
|
||||
return 'done'
|
||||
} catch (error){
|
||||
console.error(error);
|
||||
return error
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function getmessageids(sl_id) {
|
||||
try {
|
||||
let members = await query('SELECT row_to_json("User") AS obj FROM "Shoppinglist_member" JOIN "User" USING (username) WHERE sl_id = $1;', [sl_id]);
|
||||
@ -619,5 +633,6 @@ module.exports = {
|
||||
searchUsers,
|
||||
removeMember,
|
||||
moveDoneItemMan,
|
||||
getUser
|
||||
getUser,
|
||||
realUpdateUser
|
||||
}
|
||||
@ -9,6 +9,12 @@ var config = {
|
||||
};
|
||||
firebase.initializeApp(config);
|
||||
|
||||
var storage = firebase.storage();
|
||||
|
||||
var msg = firebase.messaging();
|
||||
// import postgres from "./../db-connect/db-connect";
|
||||
|
||||
|
||||
var vue = new Vue({
|
||||
el: '#vue-app',
|
||||
prop: {
|
||||
@ -16,14 +22,130 @@ var vue = new Vue({
|
||||
getpic: ''
|
||||
},
|
||||
data: {
|
||||
dataPic: ''
|
||||
dataPic: '',
|
||||
image: '',
|
||||
idToken: '',
|
||||
mid: ''
|
||||
|
||||
},
|
||||
methods: {
|
||||
fertig(){
|
||||
this.dbUserUpdate(this.idToken, name, this.dataPic, this.mid);
|
||||
},
|
||||
updateUser(){
|
||||
console.log("updateuser")
|
||||
var currentUser = firebase.auth().currentUser;
|
||||
var vm = this;
|
||||
currentUser.getIdToken( /* forceRefresh */ true).then(function (idToken) {
|
||||
console.log("Vor Replace");
|
||||
msg.requestPermission()
|
||||
.then(function () {
|
||||
|
||||
return msg.getToken();
|
||||
})
|
||||
.then(token => {
|
||||
console.log("Zugriff auf msg", token, this.name, vm.dataPic);
|
||||
vm.idToken = idToken;
|
||||
vm.mid = token;
|
||||
vm.image = '';
|
||||
})
|
||||
.catch(err => {
|
||||
console.error("Msg Error: ", err);
|
||||
vm.idToken = idToken;
|
||||
vm.mid = "";
|
||||
vm.image = '';
|
||||
})
|
||||
|
||||
|
||||
}).catch(function (error) {
|
||||
console.error("Get id token client error: ", error)
|
||||
});
|
||||
|
||||
},
|
||||
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)
|
||||
});
|
||||
|
||||
console.log('Pic for upload: ', vm.dataPic)
|
||||
|
||||
// let req = {
|
||||
// url: '/userbearbeiten/'+vm.idToken+'/'+name+'/'+vm.dataPic+'/'+vm.mid,
|
||||
// method: 'POST',
|
||||
// }
|
||||
// axios(req).then(response => {
|
||||
// resolve(response.data.content)
|
||||
// console.log("POST result: ", response)
|
||||
// vm.startGetUser();
|
||||
// }, response => {
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
},
|
||||
fotoChoose(){
|
||||
|
||||
console.log("fotochoose")
|
||||
var vm = this;
|
||||
var currentUser = firebase.auth().currentUser;
|
||||
var uid = currentUser.uid;
|
||||
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.dataPic = downloadURL;
|
||||
vm.updateUser();
|
||||
});
|
||||
},
|
||||
getPicUrl(){
|
||||
return this.picUrl;
|
||||
@ -34,17 +156,40 @@ var vue = new Vue({
|
||||
this.dataPic = result.data[0].picture + "";
|
||||
console.log("Created: ", this.dataPic, name)
|
||||
}).catch(err => console.error(err));
|
||||
},
|
||||
onFileChange(e) {
|
||||
var files = e.target.files || e.dataTransfer.files;
|
||||
if (!files.length)
|
||||
return;
|
||||
this.createImage(files[0]);
|
||||
},
|
||||
createImage(file) {
|
||||
var image = new Image();
|
||||
var reader = new FileReader();
|
||||
var vm = this;
|
||||
|
||||
reader.onload = (e) => {
|
||||
vm.dataPic = e.target.result;
|
||||
vm.image = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
startGetUser(){
|
||||
firebase.auth().onAuthStateChanged(user => {
|
||||
if (user) {
|
||||
//GetUser
|
||||
this.getUser(user.uid);
|
||||
} else {
|
||||
window.location("/");
|
||||
}
|
||||
});
|
||||
},
|
||||
removeImage: function (e) {
|
||||
this.image = '';
|
||||
this.startGetUser();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
firebase.auth().onAuthStateChanged(user => {
|
||||
if (user) {
|
||||
//GetUser
|
||||
this.getUser(user.uid);
|
||||
} else {
|
||||
window.location("/");
|
||||
}
|
||||
});
|
||||
|
||||
this.startGetUser();
|
||||
}
|
||||
});
|
||||
@ -19,6 +19,27 @@ var firebaseAdmin = admin.initializeApp({
|
||||
res.status(200).render('user');
|
||||
});
|
||||
|
||||
router.post('/userbearbeiten', function(req, res, next){
|
||||
var mid = req.body.mid;
|
||||
var token = req.body.token;
|
||||
var name = req.body.name;
|
||||
var pic = req.body.pic;
|
||||
var vm = this;
|
||||
firebaseAdmin.auth().verifyIdToken(token)
|
||||
.then(async function (decodedToken) {
|
||||
console.log("UID: ", decodedToken.uid);
|
||||
console.log("Name: ", name, ' \nPic: ', pic, ' \nToken: ', token, ' \nMID: ' , mid, "\nDecoded token: ", decodedToken.uid, decodedToken.email);
|
||||
try {
|
||||
|
||||
res.status(200).send(await postgres.realUpdateUser(decodedToken.uid, mid, name, pic, decodedToken.email));
|
||||
} catch (err) {
|
||||
res.status(400).send(await err);
|
||||
}
|
||||
}).catch(async function (error) {
|
||||
console.error(await error);
|
||||
});
|
||||
|
||||
});
|
||||
router.get('/getuser/:uid', async function(req, res){
|
||||
try {
|
||||
var sender = await postgres.getUser(req.params.uid);
|
||||
|
||||
@ -4,21 +4,20 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<!-- production version, optimized for size and speed -->
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></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-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-messaging.js"></script>
|
||||
<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">
|
||||
<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>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vue-app">
|
||||
<!-- Square card -->
|
||||
|
||||
<div class="demo-card-image mdl-card mdl-shadow--2dp">
|
||||
<img v-bind:src="this.dataPic" width="100%"/>
|
||||
<div class="mdl-card__title mdl-card--expand"></div>
|
||||
@ -26,15 +25,26 @@
|
||||
<label for="nameinput">Name: </label><input type="text" id="nameinput" v-model="name">
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<button @click="fotoChoose" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Foto setzten
|
||||
</button>
|
||||
<button @click="updateUser" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Fertig
|
||||
</button>
|
||||
<div v-if="!image">
|
||||
<h2>Select an image</h2>
|
||||
<input type="file" @change="onFileChange">
|
||||
<button @click="fertig" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
|
||||
Fertig
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<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">
|
||||
Foto setzten
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Image: {{this.image}}<br> DataPic
|
||||
{{this.dataPic}}
|
||||
|
||||
</div>
|
||||
<style lang="scss">
|
||||
.demo-card-square.mdl-card {
|
||||
@ -44,35 +54,14 @@
|
||||
.demo-card-square > .mdl-card__title {
|
||||
color: #fff;
|
||||
}
|
||||
.dropbox {
|
||||
outline: 2px dashed grey; /* the dash box */
|
||||
outline-offset: -10px;
|
||||
background: lightcyan;
|
||||
color: dimgray;
|
||||
padding: 10px 10px;
|
||||
min-height: 200px; /* minimum height */
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-file {
|
||||
opacity: 0; /* invisible but it's there! */
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropbox:hover {
|
||||
background: lightblue; /* when mouse over to the drop zone, change color */
|
||||
}
|
||||
|
||||
.dropbox p {
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
padding: 50px 0;
|
||||
}
|
||||
.fotochooserimg {
|
||||
width: 30%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
|
||||
<script src="javascripts/user.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user