User bearbeiten fertig

express-server/db-connect/db-connect.js

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

express-server/public/javascripts/user.js

@@ -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)
+              });
             
         },
-        fotoChoose(){
+        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,9 +156,25 @@ var vue = new Vue({
                 this.dataPic = result.data[0].picture + "";
                 console.log("Created: ", this.dataPic, name)
             }).catch(err => console.error(err));
-        }
         },
-    created() {
+        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
@@ -45,6 +183,13 @@ var vue = new Vue({
                     window.location("/");
                 }
                 });
-          
+        },
+        removeImage: function (e) {
+            this.image = '';
+            this.startGetUser();
+        }
+    },
+    created() {
+        this.startGetUser();
     }
 });

express-server/routes/index.js

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

express-server/views/user.ejs

@@ -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">
+            <div v-if="!image">
-                  Foto setzten
+                <h2>Select an image</h2>
-                </button>
+                <input type="file" @change="onFileChange">
-                <button @click="updateUser" 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
                  </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 {
+        .fotochooserimg {
-    outline: 2px dashed grey; /* the dash box */
+          width: 30%;
-    outline-offset: -10px;
+          margin: auto;
-    background: lightcyan;
+          display: block;
-    color: dimgray;
+          margin-bottom: 10px;
-    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;
         }
         </style>
+        <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
     <script src="javascripts/user.js"></script>
 </body>
 </html>