Profil Edit-Funktion

public/routes/profil.js

@@ -11,5 +11,20 @@ const ProfilRouter = {
         return { profilcard: _profilcard };
     },
     methods: {
+
     },
 };
+
+
+/*
+$('#myModal').on('show.bs.modal', function (event) {
+  console.log("Modal Opened")
+  var button = $(event.relatedTarget) // Button that triggered the modal
+  var recipient = button.data('whatever') // Extract info from data-* attributes
+  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+  var modal = $(this)
+  modal.find('.modal-title').text('New message to ' + recipient)
+  modal.find('.modal-body input').val(recipient)
+})
+*/

public/routes/profilCard.js

@@ -2,7 +2,7 @@ Vue.component('ProfilCard', {
     template: `<div>
                 <img class="profil-img rounded-circle" src="img/profil_icon.png" width=120px height=120px>
                 <div class="profil-card card">
-                    <div class="edit-item"><i class="material-icons">edit</i></div>
+                    <div class="edit-item"><i class="material-icons"  data-toggle="modal" data-target="#myModal">edit</i></div>
                     <div class="profil-text">
                         <h5><b>{{ profil.user }}</b></h5><br>
                         <h6>{{ profil.major }}<br><br>
@@ -14,6 +14,37 @@ Vue.component('ProfilCard', {
                         <button class="tablinks om-tablinks"><b>Gespeichert<br>{{ profil.saved }}</b></button>
                     </div>
                 </div>
+
+                <div class="modal fade" id="myModal" role="dialog">
+                    <div class="modal-dialog modal-dialog-centered">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title">Profil Bearbeiten</h5>
+                                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                            </div>
+                            <div class="modal-body">
+                                <form class="new-msg-form">
+                                    <div class="form-group">
+                                        <label class="bmd-label-floating">Benutzername*</label>
+                                        <input type="text" class="form-control" id="user">
+                                    </div>
+                                    <div class="form-group">
+                                        <label class="bmd-label-floating">Studiengang*</label>
+                                        <input type="text" class="form-control" id="major">
+                                    </div>
+                                    <div class="form-group">
+                                        <label class="bmd-label-floating">Semester*</label>
+                                        <input type="text" class="form-control" id="semester">
+                                    </div>
+                                </form>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class ="btn btn-default" data-dismiss="modal" id="close">Close</button>
+                                <button type="submit" class="btn btn-raised om-btn" data-dismiss="modal" id="save">Save</button>
+                            </div>
+                        </div>
+                </div>
+                </div>
                 </div>`,
     props: ['profil']
 });

public/style/style.css

@@ -24,7 +24,7 @@
 }
 .om-content {
   margin: 10px;
-  margin-top: 40px;
+  margin-top: 80px;
   margin-bottom: 80px;
 }
 .om-content a {