fehler beoben

2019-03-24 20:01:29 +01:00 · 2019-03-24 20:01:29 +01:00 · 5fc5551488
commit 5fc5551488
parent ad1e6f6d08 3ab823a025
5 changed files with 362 additions and 91 deletions
--- a/express-server/db-connect/db-connect.js
+++ b/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]);
@ -643,6 +657,10 @@ module.exports = {
    removeMember,
    moveDoneItemMan,
    getUser,
+<<<<<<< HEAD
    getUserDB,
    deleteDonePurchase
+=======
+    realUpdateUser
+>>>>>>> 3ab823a0258758dd48a687eaafed77ee36832b61
 }
--- a/express-server/public/javascripts/user.js
+++ b/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,35 +22,249 @@ var vue = new Vue({
        getpic: ''
    },
    data: {
-            dataPic: ''
+        dataPic: '',
+        image: '',
+        idToken: '',
+        mid: '',
+        showUploadButtons: ''
+
    },
    methods: {
-        updateUser(){
-
+        backToDash(){
+            window.location.href = "/";
        },
-        fotoChoose(){
+        fertig() {
+            if(!this.image){
+                this.image = this.dataPic
+                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;
+                            console.log("IMAGE befor dbuserupdate: ", vm.image)
+                            vm.dbUserUpdate(vm.idToken, name, vm.image, vm.mid);
+                            vm.image = '';
+                            vm.startGetUser();
+                        })
+                        .catch(err => {
+                            console.error("Msg Error: ", err);
+                            vm.idToken = idToken;
+                            vm.mid = "";
+                            console.log("IMAGE befor dbuserupdate: ", vm.image)
+                            vm.dbUserUpdate(vm.idToken, name, vm.image, vm.mid);
+                            vm.image = '';
+                            vm.startGetUser();
+                        })
+                    
+                }).catch(function (error) {
+                    console.error("Get id token client error: ", error)
+                });
+            }else{
+                console.log("IMAGE befor dbuserupdate: ", this.image)
+                this.dbUserUpdate(this.idToken, name, this.image, this.mid);
+                this.image = '';
+                this.startGetUser();
+            }
+            
        },
-        getPicUrl(){
+        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;
+                    })
+                    .catch(err => {
+                        console.error("Msg Error: ", err);
+                        vm.idToken = idToken;
+                        vm.mid = "";
+                    })
+
+
+            }).catch(function (error) {
+                console.error("Get id token client error: ", error)
+            });
+            this.showUploadButtons = '';
+        },
+        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.image)
+
+            //   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.image,
+                    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;
+            this.dataPic = this.image;
+            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.updateUser();
+                });
+        },
+        getPicUrl() {
            return this.picUrl;
        },
-        getUser(uid){
+        getUser(uid) {
            axios.get('/getUser/' + uid).then(result => {
                name = result.data[0].name;
                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) => {
+
+                var tempImg = new Image();
+                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);
+        },
+        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();
    }
 });
--- a/express-server/routes/index.js
+++ b/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);
--- a/express-server/views/dash.ejs
+++ b/express-server/views/dash.ejs
@ -6,8 +6,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel='stylesheet' href='/stylesheets/style.css'>
    <link rel='stylesheet' href='/stylesheets/colorpicker-style.css'>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
-        crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
+        integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.min.css'>
    <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>

@ -28,9 +28,21 @@
                <button class="btn btn-outline-light border-secondary sl_add" style="color: black">Shoppingliste
                    Hinzufügen</button>
            </li>
+
+        </ul>
+        <ul class="nav justify-content-end liste">
+            <li class="nav-item">
+                <a class="btn btn-outline-light border-secondary userbearbeiten" href="/user" style="color: black">User
+                    bearbeiten</a>
+            </li>
+            &nbsp;
+            <li class="nav-item">
+                <button class="btn btn-outline-danger logout" style="color: red">Logout</button>
+            </li>
        </ul>
        <!-- <a href="/logout"> -->
-        <button class="btn btn-outline-light border-secondary logout" style="color: black">Logout</button>
+
+
        <!-- </a> -->
    </nav>
    <br>
@ -60,8 +72,8 @@


    <!-- Modal Group Hinzufügen -->
-    <div class="modal fade bd-example-modal-sm ListenDetailAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
-        aria-hidden="true">
+    <div class="modal fade bd-example-modal-sm ListenDetailAdd" tabindex="-1" role="dialog"
+        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div>
@ -129,8 +141,8 @@


    <!-- Modal Item Hinzufügen -->
-    <div class="modal fade bd-example-modal-sm GroupItemAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
-        aria-hidden="true">
+    <div class="modal fade bd-example-modal-sm GroupItemAdd" tabindex="-1" role="dialog"
+        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="inhalt">
@ -145,7 +157,8 @@

                    <div class="form-group layout">
                        <label for="Anzahl-example">Anzahl</label>
-                        <input type="number" class="form-control" id="inputGroupSelect01" placeholder="zB: 2" maxlength="3">
+                        <input type="number" class="form-control" id="inputGroupSelect01" placeholder="zB: 2"
+                            maxlength="3">
                    </div>

                </div>
@ -170,7 +183,8 @@

                    <div class="form-group layout">
                        <label for="exampleInputPassword1">Beschreibung</label>
-                        <input type="text" class="form-control" id="einkaufslistenbeschreibung" placeholder="zB: Großeinkauf bei Billa">
+                        <input type="text" class="form-control" id="einkaufslistenbeschreibung"
+                            placeholder="zB: Großeinkauf bei Billa">
                    </div>

                    <div class="form-group layout">
--- a/express-server/views/user.ejs
+++ b/express-server/views/user.ejs
@ -1,78 +1,76 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <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>
-<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>
+<html lang="de">

-    <title>Document</title>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <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>User bearbeiten</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>
+  <div id="vue-app">
+    <!-- Square card -->
+    <center>
+      <div class="demo-card-image mdl-card mdl-shadow--2dp">
+          <button @click="backToDash" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> Zurück
+              zu SmartShopper</button>
+        <img v-bind:src="this.dataPic" width="100%" />
+        <div class="mdl-card__title mdl-card--expand">
+            
+        </div>
        <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 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>
+          <div v-if="!showUploadButtons">
+              <Label class="input-custom-file mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
+                  Foto ändern
+                  <input type="file" @change="onFileChange">
+                </label>
+            <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-js-button mdl-button--raised mdl-button--coloredmdl-js-ripple-effect mdl-button--accent">Remove image</button>
+            <button @click="fotoChoose" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
+              Foto setzten
+            </button>
+          </div>
+          
+        </div>
      </div>
+    </center>
+  </div>
+  <style lang="scss">
+    .demo-card-square.mdl-card {
+      width: 320px;
+      height: 320px;
+    }

-    </div>
-    <style lang="scss">
-        .demo-card-square.mdl-card {
-          width: 320px;
-          height: 320px;
-        }
-        .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;
-  }
+    .demo-card-square>.mdl-card__title {
+      color: #fff;
+    }

-  .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="javascripts/user.js"></script>
+    .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>