SmartShopper/express-server/public/javascripts/user.js

// Initialize Firebase
var config = {
    apiKey: "AIzaSyCuvwf78cmSDoZ2yS4XxHZhnjUn7yIHYfw",
    authDomain: "test-667ca.firebaseapp.com",
    databaseURL: "https://test-667ca.firebaseio.com",
    projectId: "test-667ca",
    storageBucket: "test-667ca.appspot.com",
    messagingSenderId: "221332577314"
};
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: {
        name: '',
        getpic: ''
    },
    data: {
            dataPic: '',
            image: '',
            idToken: '',
            mid: '',
            showUploadButtons: ''
            
    },
    methods: {
        fertig(){
            this.dbUserUpdate(this.idToken, name, this.image, this.mid);
            this.image = '';
            this.startGetUser();
        },
        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.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;
            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){
            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) => {
                vm.dataPic = e.target.result;
                vm.image = e.target.result;
                this.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() {
        this.startGetUser();
    }
});